@charset "UTF-8";
/* ----------------------------------------------------------------------------------------
Template: Turing - IT Solutions and Corporate Template
Version: 1.1.0
Author: tempload - support@tempload.com
 -----------------------------------------------------------------------------------------*/
/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. welcome
06. features
07. team
08. pricing
09. blog
10. footer
11. pages
12. faq
13. aside
14. contact
15. preloader

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&subset=latin-ext");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  color: #4A6178;
  font-family: "Nunito", sans-serif;
}

::selection {
  background: #0a1934;
  color: #fff;
}

::-moz-selection {
  background: #0a1934;
  color: #fff;
}

.section {
  padding-top: 100px;
  padding-bottom: 70px;
}
.section.colored {
  background: #F7FAFD;
}

.section + .section {
  padding-top: 0;
}

.heading-1 {
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
  line-height: 1.2;
}

.heading-2 {
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.75rem);
  line-height: 1.3;
}

.heading-3 {
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.3;
}

.left-heading.light .section-title {
  color: #ffffff;
}
.left-heading .section-title {
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.75rem);
  color: #0a1934;
  letter-spacing: 1.75px;
  line-height: 1.3;
  min-height: 45px;
  margin-bottom: 30px;
  position: relative;
}
.left-heading .section-title:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 19px;
  height: 2px;
  background: #0a1934;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.left-heading .section-title:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 20px;
  width: 9px;
  height: 2px;
  background: #0a1934;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.center-heading {
  text-align: center;
}
.center-heading .section-title {
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.75rem);
  color: #0a1934;
  letter-spacing: 1.75px;
  line-height: 1.3;
  margin-bottom: 20px;
}
.center-heading.colored .section-title {
  color: #ffffff;
}

.center-text {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: #4A6178;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 50px;
}
.center-text.colored {
  color: #FFF7F5;
}
.center-text p {
  margin-bottom: 30px;
}

.left-text {
  font-weight: 400;
  font-size: 16px;
  color: #4A6178;
  line-height: 28px;
  letter-spacing: 1px;
}
.left-text.light {
  color: #FFF7F5;
}
.left-text p {
  margin-bottom: 30px;
}
.left-text p.dark {
  color: #0a1934;
}

.padding-bottom-top-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.padding-bottom-80 {
  padding-bottom: 80px !important;
}

.border-bottom {
  border-bottom: 1px solid #F5F5F5 !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-bottom {
  -ms-flex-item-align: flex-end !important;
  align-self: flex-end !important;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 44px;
  padding: 10px 24px;
  margin: auto;
  text-align: center;
  box-shadow: 0 4px 5px 0 rgba(10, 25, 52, 0.24);
  border: none;
  border-radius: 100px 0px 100px 100px;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  margin-bottom: 40px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  outline: none;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:focus, .btn-primary:active:focus {
  box-shadow: none !important;
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(212, 179, 106, 0.55) !important;
}
.btn-primary:active {
  transform: scale(0.97);
  transition: transform 0.15s ease;
}

@media (hover: hover) {
  .btn-primary:hover {
    background-image: linear-gradient(-135deg, #050d1c 0%, #0a1934 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  }
}
.btn-primary.on-dark {
  background-image: none;
  background: #fff;
  color: #0a1934;
}
@media (hover: hover) {
  .btn-primary.on-dark:hover {
    background-image: none;
    background: #EDEDED;
    color: #0a1934;
  }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 44px;
  padding: 10px 24px;
  margin: auto;
  text-align: center;
  border: 1.5px solid #D4B36A;
  border-radius: 100px 0px 100px 100px;
  background: transparent;
  margin-bottom: 40px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: #D4B36A;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  outline: none;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary:focus, .btn-secondary:active:focus {
  box-shadow: none !important;
}
.btn-secondary:focus-visible {
  box-shadow: 0 0 0 3px rgba(212, 179, 106, 0.55) !important;
}
.btn-secondary:active {
  transform: scale(0.97);
  transition: transform 0.15s ease;
}

@media (hover: hover) {
  .btn-secondary:hover {
    background: #D4B36A;
    color: #0a1934;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  }
}
.btn-secondary.btn-sm {
  min-width: 0;
  min-height: 40px;
  padding: 0 22px;
  margin: 0 6px 10px;
  font-size: 12px;
}

@media (max-width: 991px) {
  .btn-secondary.btn-sm {
    min-height: 36px;
    padding: 0 16px;
    font-size: 11px;
  }
}
.btn-home {
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 0;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 100px 0px 100px 100px;
  background: #fff;
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.88px;
  outline: none !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-home:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(-135deg, #050d1c 0%, #0a1934 100%);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  opacity: 0;
}
.btn-home i {
  margin-left: 30px;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  color: #0a1934;
}
.btn-home span {
  flex: 1;
  padding-right: 20px;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  color: #0a1934;
}
.btn-home:hover, .btn-home.active {
  box-shadow: 0 4px 5px 0 rgba(10, 25, 52, 0.24);
}
.btn-home:hover i, .btn-home.active i {
  color: #fff;
  margin-left: 40px;
}
.btn-home:hover span, .btn-home.active span {
  color: #fff;
}
.btn-home:hover:before, .btn-home.active:before {
  opacity: 1;
}

.btn-home-toggle {
  border: none;
  background: #F7FAFD;
}
.btn-home-toggle i {
  -webkit-transition: all transform 0.3s ease 0s;
  -moz-transition: all transform 0.3s ease 0s;
  -o-transition: all transform 0.3s ease 0s;
  transition: all transform 0.3s ease 0s;
}
.btn-home-toggle:hover i {
  margin-left: 30px;
}

.padding-bottom-0 {
  padding-bottom: 0px;
}

.padding-top-80 {
  padding-top: 80px !important;
}

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-bottom-100 {
  margin-bottom: 100px !important;
}

blockquote {
  margin-bottom: 28px;
  padding: 30px;
  padding-top: 40px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #F4F8FB;
  overflow: hidden;
}
blockquote .text {
  position: relative;
  text-align: center;
}
blockquote .text p {
  position: relative;
  width: 100%;
  z-index: 2;
  margin-bottom: 10px !important;
}
blockquote .text:before {
  font-family: FontAwesome;
  content: "\f10d";
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  font-size: 40px;
  color: rgb(225.3, 236.1, 244.2);
}
blockquote .text:after {
  font-family: FontAwesome;
  content: "\f10e";
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  font-size: 40px;
  color: rgb(225.3, 236.1, 244.2);
}
blockquote .author {
  color: #0a1934;
  text-align: center;
}

.page-gallery {
  position: relative;
  height: 185px;
  display: block;
  overflow: hidden;
  border-radius: 20px 5px 20px 20px;
  margin-bottom: 30px;
}
.page-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.page-gallery:hover img {
  transform: scale(1.1);
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .page-gallery {
    height: 150px;
  }
  .btn-home {
    margin-bottom: 10px;
  }
  .section {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .left-heading .section-title {
    height: auto;
    padding-bottom: 14px;
  }
}
/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.header-area {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 112px;
  background-color: rgba(10, 25, 52, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.4s ease-in-out, border-bottom 0.4s ease-in-out, height 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.header-area .container-fluid {
  transition: max-width 0.4s ease-in-out, margin 0.4s ease-in-out;
}
.header-area .main-nav .nav-pill {
  display: contents;
}
.header-area .main-nav .logo {
  float: left;
  margin-top: 32px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.header-area .main-nav .logo img {
  display: block;
  height: 48px;
  width: auto;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.header-area .main-nav .nav {
  float: left;
  margin-top: 33px;
  margin-left: 80px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.header-area .main-nav .nav li {
  padding-left: 19px;
  padding-right: 19px;
}
.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}
.header-area .main-nav .nav li a {
  display: block;
  position: relative;
  font-weight: 700;
  font-size: 14px;
  color: #FFF7F5;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.95);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.15s ease;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}
.header-area .main-nav .nav li a:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  bottom: 2px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  -webkit-transition: all 0.25s ease 0s;
  -moz-transition: all 0.25s ease 0s;
  -o-transition: all 0.25s ease 0s;
  transition: all 0.25s ease 0s;
}
.header-area .main-nav .nav li a:hover {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 0 7px rgba(0, 0, 0, 0.75), 0 1px 2px rgb(0, 0, 0);
}
.header-area .main-nav .nav li a:hover:after {
  transform: translateX(-50%) scaleX(1);
}
.header-area .main-nav .nav li a.active:after {
  transform: translateX(-50%) scaleX(0.55);
  opacity: 0.6;
}
.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 35px;
}
.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 18px;
  top: 12px;
}
.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transform: translateY(-2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
.header-area .main-nav .nav li.submenu ul li a {
  display: block;
  background: #fff;
  color: #0a1934;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
  text-shadow: none;
}
.header-area .main-nav .nav li.submenu ul li a:after {
  content: none;
}
.header-area .main-nav .nav li.submenu ul li a:before {
  content: "";
  position: absolute;
  width: 0px;
  height: 40px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: #0a1934;
}
.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #f5f5f5;
  padding-left: 25px;
}
.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}
.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}
.header-area .main-nav .nav > li > a:active {
  transform: scale(0.95);
}
.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 29px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}
.header-area .main-nav .menu-trigger span {
  top: 16px;
}
.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}
.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}
.header-area .main-nav .menu-trigger.active span, .header-area .main-nav .menu-trigger.active span:before, .header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}
.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}
.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}
.header-area .main-nav .header-buttons {
  float: right;
}
.header-area .main-nav .header-buttons li {
  float: left;
}
.header-area .main-nav .header-buttons li .btn-nav-line {
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid #FFFFFF;
  border-radius: 100px 0px 100px 100px;
  display: inline-block;
  height: 30px;
  margin-top: 5px;
  line-height: 29px;
  letter-spacing: 0.5px;
  background: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  font-weight: 700;
  font-size: 12px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  min-width: 110px;
  text-align: center;
}
.header-area .main-nav .header-buttons li .btn-nav-line:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0.19;
}
.header-area .main-nav .header-buttons li .btn-nav-line span {
  position: relative;
  z-index: 2;
}
.header-area .main-nav .header-buttons li .btn-nav-line:hover {
  background: #fff;
  color: #0a1934;
}
.header-area .main-nav .header-buttons li .btn-nav-primary {
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid #FFFFFF;
  border-radius: 100px 0px 100px 100px;
  display: inline-block;
  height: 30px;
  margin-top: 5px;
  line-height: 29px;
  letter-spacing: 0.5px;
  background: #fff;
  color: #0a1934;
  position: relative;
  overflow: hidden;
  margin-left: 15px;
  margin-top: 32px;
  font-weight: 700;
  font-size: 12px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  min-width: 110px;
  text-align: center;
}
.header-area .main-nav .header-buttons li .btn-nav-primary:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0.19;
}
.header-area .main-nav .header-buttons li .btn-nav-primary span {
  position: relative;
  z-index: 2;
}
.header-area .main-nav .header-buttons li .btn-nav-primary:hover {
  border: 1px solid #0a1934;
  background: #0a1934;
  color: #fff;
}
.header-area.header-sticky, .header-area.header-white {
  background: #0a1934;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: none;
  height: 92px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.35);
}
.header-area.header-sticky .main-nav .nav-pill-left,
.header-area.header-sticky .main-nav .nav-pill-right, .header-area.header-white .main-nav .nav-pill-left,
.header-area.header-white .main-nav .nav-pill-right {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav .nav li.submenu {
    padding-right: 20px;
  }
  .header-area .main-nav .nav li.submenu:after {
    right: 5px;
  }
}
@media (max-width: 991px) {
  .header-area {
    height: 92px;
    background-color: #0a1934;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: space-between;
  }
  .header-area .container-fluid {
    padding: 0px;
  }
  .header-area .logo {
    margin-top: 0 !important;
    margin-left: 30px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: visible;
  }
  .header-area .logo img {
    height: 60px !important;
    width: auto !important;
    transform: none !important;
  }
  .header-area .light-logo {
    display: none !important;
  }
  .header-area .dark-logo {
    display: block !important;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    margin-top: 92px !important;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
    background: #0a1934;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.35);
  }
  .header-area .main-nav .nav.mobile-open {
    display: block;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    padding-left: 30px !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    text-shadow: none !important;
  }
  .header-area .main-nav .nav li a:after {
    display: none !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    padding-left: 50px !important;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: rgba(255, 255, 255, 0.6);
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .header-buttons {
    /* Keep the language switcher reachable on mobile; only the CTA
       buttons (Apps / Support) collapse into the off-canvas nav. */
    display: block;
    float: right;
    margin-right: 85px; /* clear the absolutely-positioned menu-trigger */
  }
  .header-area .main-nav .header-buttons li:not(.language-switcher) {
    display: none;
  }
  .header-area .main-nav .header-buttons .language-switcher {
    margin-top: 32px;
    margin-right: 0;
    /* The top bar is dark in every state here too — glass-navy
       on home, flat navy scrolled/internal — so the universal
       light-on-dark .lang-option styling below already
       applies — no override needed here. */
  }
  .header-area .main-nav .nav > .language-switcher {
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 16px 30px !important;
  }
  .header-area .main-nav.mobile-nav-open .header-buttons .language-switcher {
    display: none;
  }
}
/* Narrow phones: the fixed 48px-tall logo (the source PNG is ~4.5:1, so at
   48px tall it renders ~216px wide) and the TR/EN/RU language switcher can
   claim overlapping horizontal space on the shortest edge of the ≤991px tier.
   Even a 1px overlap between the two opposing floats pushes the later one
   (.header-buttons) below the logo's row entirely, where it re-emerges
   beneath the fixed-height header — verified at 320px with devtools before
   landing on 20px/10px below, which leaves a comfortable ~30px gap instead
   of the few px a straight aspect-ratio shrink left. Shrink the logo and
   tighten the switcher here only; the trigger's own clearance
   (`.header-buttons` margin-right, set above) is untouched. */
@media (max-width: 480px) {
  .header-area .logo {
    margin-left: 10px;
    max-width: 45%;
  }
  .header-area .logo img {
    height: auto !important;
    max-height: 30px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .header-area .header-buttons .language-switcher {
    gap: 2px;
  }
  .header-area .header-buttons .language-switcher .lang-option {
    padding: 6px 8px;
    font-size: 11px;
  }
}
/* Keyboard access: reveal nav submenus on focus, mirroring the :hover reveal so
   keyboard / screen-reader users can open the "Faaliyet Alanları" (and Discover
   / Pages) dropdowns without a mouse. */
@media (min-width: 992px) {
  .header-area .main-nav .nav li.submenu:focus-within > ul {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
  }
}
@media (min-width: 992px) {
  .header-area {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
  }
  .header-area .main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 112px;
  }
  .header-area .main-nav .nav {
    display: flex !important;
  }
  .header-area .main-nav .nav > .language-switcher {
    display: none;
  }
  .header-area .main-nav .logo,
  .header-area .main-nav .nav {
    margin-top: 0;
  }
  .header-area .main-nav .nav {
    margin-left: 0;
  }
  .header-area .main-nav .nav-pill {
    display: flex;
    align-items: center;
    transition: all 0.4s ease-in-out;
  }
  .header-area .main-nav .nav-pill-left {
    background: #0a1934;
    border-radius: 50px;
    padding: 10px 28px;
    gap: 70px;
    margin-left: -10px;
  }
  .header-area .main-nav .nav-pill-right {
    background: #0a1934;
    border-radius: 50px;
    padding: 10px 22px;
    justify-content: center;
  }
  .header-area .main-nav .header-buttons .language-switcher {
    margin-top: 0 !important;
    margin-right: 0 !important;
  }
  .header-area.header-sticky .main-nav, .header-area.header-white .main-nav {
    min-height: 92px;
  }
  .header-area.header-sticky .container-fluid, .header-area.header-white .container-fluid {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1200px) {
  .header-area.header-sticky .container-fluid, .header-area.header-white .container-fluid {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .header-area.header-sticky .container-fluid, .header-area.header-white .container-fluid {
    max-width: 1320px;
  }
}
/* ---------- Language switcher (TR / EN / RU) ---------- */
.header-area .language-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 38px;
  margin-right: 14px;
  list-style: none;
  transition: opacity 0.3s ease;
}
.header-area .language-switcher.is-pending {
  opacity: 0.6;
}
.header-area .language-switcher .lang-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  border: none;
  background: transparent;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.header-area .language-switcher .lang-option:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.header-area .language-switcher .lang-option:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  bottom: 2px;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  -webkit-transition: all 0.25s ease 0s;
  -moz-transition: all 0.25s ease 0s;
  -o-transition: all 0.25s ease 0s;
  transition: all 0.25s ease 0s;
}
.header-area .language-switcher .lang-option:hover {
  color: #fff;
}
.header-area .language-switcher .lang-option:hover:after {
  transform: translateX(-50%) scaleX(1);
}
.header-area .language-switcher .lang-option.active {
  color: #fff;
}
.header-area .language-switcher .lang-option.active:after {
  transform: translateX(-50%) scaleX(0.55);
  opacity: 0.6;
}
.header-area .language-switcher .lang-option:disabled {
  cursor: default;
}
.header-area .language-switcher .lang-spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  opacity: 0.7;
  animation: lang-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .header-area .language-switcher .lang-spinner {
    animation: none;
    opacity: 0.4;
  }
}
.header-area {
  /* The header is navy in every state now (semi-transparent on the home
     page, solid on internal pages / once scrolled), so the light-on-dark
     .lang-option styling above applies universally — no per-state
     override needed here anymore. */
}

@keyframes lang-spin {
  to {
    transform: rotate(360deg);
  }
}
/* 
---------------------------------------------
welcome
--------------------------------------------- 
*/
.welcome-area {
  overflow: hidden;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.welcome-area:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: none;
  z-index: 3;
}
.welcome-area .right-bg {
  float: right;
  width: 89%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.welcome-area .right-bg:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  opacity: 0.73;
}
.welcome-area .header-bg {
  position: absolute;
  top: 0px;
  min-height: 500px;
  z-index: 2;
}
.welcome-area .header-text {
  position: absolute;
  width: 100%;
  top: 23%;
  transform: perspective(1px) translateY(0%);
  z-index: 4;
}
.welcome-area .header-text h1 {
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
  color: #1E3056;
  line-height: 1.2;
  letter-spacing: 0.93px;
  margin-bottom: 30px;
}
.welcome-area .header-text h1 span {
  color: #0a1934;
}
.welcome-area .header-text p {
  font-weight: 400;
  font-size: 16px;
  color: #697BA2;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 40px;
  padding-bottom: 30px;
  position: relative;
}
.welcome-area .header-text p:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 19px;
  height: 2px;
  background: #0a1934;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.welcome-area .header-text p:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 20px;
  width: 9px;
  height: 2px;
  background: #0a1934;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.welcome-area .header-text .btn-primary {
  min-width: 170px;
  margin-bottom: 0px;
}
@media (min-width: 992px) {
  .welcome-area .header-text .col-lg-6 {
    max-width: 400px;
  }
}
.welcome-area {
  /* ---------- Hero slider (replaces the welcome video) ---------- */
}
.welcome-area .right-bg {
  /* 16:9 box so the hero height is driven by the container width, not the
     uploaded banner's own dimensions; object-fit:cover crops any banner
     (900x600, etc.) to fit — consistent height, no cross-fade jump.
     max-height caps it at the original template header's height (1440x858)
     so on wide monitors the hero doesn't grow tall enough to push the
     feature cards below it out of view — they overlap it like the template. */
  aspect-ratio: 16/9;
  max-height: 858px;
}
.welcome-area .right-bg .hero-slide {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  -webkit-transition: all 0.8s ease 0s;
  -moz-transition: all 0.8s ease 0s;
  -o-transition: all 0.8s ease 0s;
  transition: all 0.8s ease 0s;
}
.welcome-area .right-bg .hero-slide.is-active {
  opacity: 1;
}
.welcome-area {
  /* Fade the left-hand copy in as each slide becomes active (re-keyed in JS). */
}
.welcome-area .hero-text-inner {
  animation: heroFadeIn 0.8s ease both;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.welcome-area .hero-slider-controls {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 55.5%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.welcome-area .hero-slider-controls .hero-arrow {
  pointer-events: auto;
  position: absolute;
  top: 45%;
  transform: perspective(1px) translateY(-50%);
  width: 46px;
  height: 46px;
  line-height: 44px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  cursor: pointer;
  padding: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.welcome-area .hero-slider-controls .hero-arrow:hover {
  background: #fff;
  color: #0a1934;
}
.welcome-area .hero-slider-controls .hero-arrow.hero-arrow-prev {
  left: 6%;
}
.welcome-area .hero-slider-controls .hero-arrow.hero-arrow-next {
  right: 6%;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
/* Honour reduced-motion: no cross-fade, no copy animation (autoplay is also
   disabled in the component). */
@media (prefers-reduced-motion: reduce) {
  .welcome-area .right-bg .hero-slide {
    transition: none;
  }
  .welcome-area .hero-text-inner {
    animation: none;
  }
}
@media (max-width: 1200px) {
  .header-text {
    top: 60% !important;
    transform: perspective(1px) translateY(-60%) !important;
  }
}
@media (max-width: 1024px) {
  .header-text {
    top: 65% !important;
    transform: perspective(1px) translateY(-65%) !important;
  }
}
@media (max-width: 991px) {
  .welcome-area {
    margin-top: 92px;
    background: #fff;
  }
  .welcome-area .right-bg {
    width: 100%;
    /* Below ~360px wide, the 16:9 aspect ratio makes this box shorter
       (~180px) than the centered title + description + button it
       holds (~210px), pushing the text's top edge toward the fixed
       header. A floor keeps the box tall enough regardless of
       viewport width; @media(max-width:991px) already caps how far
       up the aspect-ratio box this reaches (768px+ is well above it
       already), so it only changes anything on phones. */
    min-height: 300px;
  }
  .welcome-area .right-bg:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, rgba(5, 13, 28, 0.55) 0%, rgba(10, 25, 52, 0.55) 100%);
  }
  .welcome-area .header-bg {
    display: none;
  }
  .welcome-area .header-text {
    top: 50% !important;
    transform: perspective(1px) translateY(-50%) !important;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .welcome-area .header-text h1 {
    margin-bottom: 16px !important;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  }
  .welcome-area .header-text h1 span {
    color: #fff;
  }
  .welcome-area .header-text p {
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }
  .welcome-area .header-text .btn-primary {
    margin: auto;
    border: 1px solid #fff;
    background: #fff;
    color: #0a1934;
    width: auto;
    min-width: 170px;
    height: auto;
    min-height: 48px;
    line-height: 48px;
    padding: 0 24px;
  }
  .welcome-area .header-text .btn-primary:hover {
    color: #0a1934;
  }
  .welcome-area .hero-slider-controls {
    /* The arrows are fully functional React buttons (see
       HeroSlider.tsx) — only the CSS hid them, leaving mobile
       autoplay-only with no way to go back or skip ahead. Re-shown
       here, smaller, and anchored to the bottom corners instead of
       vertically centered so they sit in the slack space below the
       centered text rather than behind/through it. */
    display: block;
    width: 100%;
    height: auto;
    top: auto;
    bottom: 10px;
  }
  .welcome-area .hero-slider-controls .hero-arrow {
    top: auto;
    bottom: 0;
    transform: none;
    /* 44px meets the common ~44px touch-target minimum; the
       surrounding slack (verified empirically at 320-414px,
       the narrowest realistic range) still clears the
       centered text and button above it. */
    width: 44px;
    height: 44px;
    line-height: 42px;
    font-size: 18px;
  }
  .welcome-area .hero-slider-controls .hero-arrow.hero-arrow-prev {
    left: 16px;
  }
  .welcome-area .hero-slider-controls .hero-arrow.hero-arrow-next {
    right: 16px;
  }
}
/* 
---------------------------------------------
features
--------------------------------------------- 
*/
.features-home {
  padding-top: 0px;
  margin-top: -100px;
}

.features-small-item {
  display: block;
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 40px 0 40px 40px;
  padding: 30px;
  text-align: center;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.features-small-item:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  opacity: 0;
}
.features-small-item.active, .features-small-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px 0 rgba(10, 25, 52, 0.14);
}
.features-small-item.active:before, .features-small-item:hover:before {
  opacity: 1;
}
.features-small-item.active .features-title, .features-small-item:hover .features-title {
  color: #ffffff;
}
.features-small-item.active p, .features-small-item:hover p {
  color: #FFF7F5;
}
.features-small-item.active .icon, .features-small-item:hover .icon {
  background: rgba(255, 255, 255, 0.15);
}
.features-small-item.active .icon i, .features-small-item:hover .icon i {
  color: #ffffff;
  transform: scale(1.08);
}
.features-small-item .icon {
  width: 67px;
  height: 67px;
  line-height: 70px;
  margin: auto;
  position: relative;
  margin-bottom: 20px;
  background: #EDEDED;
  border-radius: 22px 0 22px 22px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.features-small-item .icon i {
  font-size: 18px;
  color: #0a1934;
  display: inline-block;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.features-small-item .features-title {
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  color: #0a1934;
  letter-spacing: 0.7px;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.features-small-item p {
  font-weight: 400;
  font-size: 14px;
  color: #4A6178;
  letter-spacing: 0.88px;
  line-height: 26px;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-bottom: 20px;
}

/* Homepage feature cards: keep all four boxes the same size no matter what text
   the CMS/translations provide. The title and description are each clamped to a
   set number of lines AND reserve that height, so a short or a long (even a
   two-line title like RU "Аварийное восстановление") entry always occupies the
   same space — the four boxes stay identical and any overflow is cut with "…".
   Both the standard `line-clamp` and the `-webkit-` prefixed form are set —
   Safari/older Chromium only recognize the prefixed one, everything current
   reads the standard property. Description is 4 lines (was 3): CMS copy from
   the categories API routinely ran past 3 lines, so the clamp was landing on
   short filler words ("...ve") instead of a fuller thought. */
.features-home .features-small-item .features-title {
  line-height: 1.3;
  min-height: 52px; /* 2 lines at the H3 scale's 20px desktop max (20px * 1.3 * 2) */
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.features-home .features-small-item p {
  min-height: 104px; /* 4 lines × 26px line-height */
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Service detail teaser (e.g. "İklimlendirme ve VRF Sistemleri") comes from the
   services API and can run long. Clamped to three lines (was two — a two-line
   clamp was cutting most real descriptions off mid-clause) so the teaser reads
   as a fuller thought before the ellipsis. Both the standard `line-clamp` and
   the `-webkit-` prefixed form are set for the same reason as the feature
   cards above. */
#features .left-text p.clamp-2 {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Service sub-item link (e.g. "VRF ve Multi Split Klima Kurulumu") — a real
   navigation link to the service's detail page, not a toggle. Shares
   .btn-home's pill/shadow language so it doesn't look out of place next to
   it, but the arrow sits at the end (not a leading chevron) and nudges
   further right on hover, so it reads as "go to another page" rather than
   "click to expand this row". */
.service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: auto;
  min-height: 48px;
  padding: 9px 20px;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 100px 0px 100px 100px;
  background: #fff;
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.88px;
  color: #0a1934;
  outline: none !important;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.service-link span {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}
.service-link i {
  flex-shrink: 0;
  color: #0a1934;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

@media (hover: hover) {
  .service-link:hover {
    background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 30px 0 rgba(10, 25, 52, 0.12);
    transform: translateY(-3px);
  }
  .service-link:hover i {
    color: #fff;
    transform: translateX(5px);
  }
}
/* Homepage service block: a full-width header row so the title sits on the left
   and the "see all services" CTA aligns to the right, level with the title. */
.service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}
.service-head .left-heading .section-title {
  margin-bottom: 0;
}
.service-head .service-more {
  flex-shrink: 0;
}

/* Bento card: elevates a homepage block off its section background, using the
   same shadow/radius language as .features-small-item and .btn-home elsewhere
   on the site. Shared across sections (Services, Work Steps, ...) for a
   consistent "premium card" look — not service-specific despite living in
   this partial. */
.bento-card {
  background: #fff;
  border-radius: 40px 0 40px 40px;
  box-shadow: 0 20px 60px 0 rgba(10, 25, 52, 0.08);
  padding: 50px;
  -webkit-transition: all 0.35s ease 0s;
  -moz-transition: all 0.35s ease 0s;
  -o-transition: all 0.35s ease 0s;
  transition: all 0.35s ease 0s;
}
.bento-card:hover {
  box-shadow: 0 28px 70px 0 rgba(10, 25, 52, 0.14);
  transform: translateY(-6px);
}

/* Fixed aspect ratio + object-fit: cover so a service image uploaded from the
   admin panel at any resolution/orientation always fills the same box instead
   of pushing the card's height around. */
.service-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 24px 0 24px 24px;
}
.service-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1200px) {
  .features-home {
    padding-top: 0px;
    margin-top: -10px;
  }
}
@media (max-width: 768px) {
  .bento-card {
    padding: 30px 20px;
    border-radius: 24px 0 24px 24px;
  }
}
@media (max-width: 991px) {
  .features-home {
    padding-top: 44px;
    margin-top: 0px;
  }
}
/* Category marquee: shown instead of the static grid when there are more than
   four categories. The track holds the cards twice and slides left forever;
   translateX(-50%) lands exactly on the start of the second copy, so the loop is
   seamless. Each item is a fixed width with a right margin (not flex `gap`) so
   the -50% offset matches the copy width exactly. Pauses on hover/focus and
   falls back to a manual horizontal scroll when reduced motion is preferred. */
.features-marquee {
  overflow: hidden;
  padding: 15px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.features-marquee .features-marquee-track {
  display: flex;
  width: max-content;
  animation: featuresMarquee 45s linear infinite;
}
.features-marquee .features-marquee-item {
  flex: 0 0 300px;
  max-width: 300px;
  margin-right: 30px;
}
.features-marquee .features-marquee-item .features-small-item {
  margin-bottom: 0;
  height: 100%;
}
.features-marquee:hover .features-marquee-track, .features-marquee:focus-within .features-marquee-track {
  animation-play-state: paused;
}

@keyframes featuresMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Was a single 300px -> 260px step at 575px, leaving 576-767px (tablet
   portrait) with full 300px cards that felt oversized against the
   narrower viewport. An intermediate step matches the card width to the
   viewport more gradually. */
@media (max-width: 767px) {
  .features-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  }
  .features-marquee .features-marquee-item {
    flex-basis: 280px;
    max-width: 280px;
    margin-right: 24px;
  }
}
@media (max-width: 575px) {
  .features-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .features-marquee .features-marquee-item {
    flex-basis: 260px;
    max-width: 260px;
    margin-right: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .features-marquee {
    overflow-x: auto;
  }
  .features-marquee .features-marquee-track {
    animation: none;
  }
}
/* Touch/no-hover devices (phones, tablets): `overflow: hidden` on .features-marquee
   blocks native touch scrolling outright, so on a phone this row was previously
   just a frozen, cut-off card with no way to reach the rest — the auto-scroll
   animation is a mouse-era affordance (pause-on-hover) that doesn't exist on
   touch at all. Here the row becomes a real swipeable, snap-aligned carousel
   instead: animation off, native horizontal scroll on, one card snaps into
   place per swipe. The duplicate (aria-hidden) copies exist only to make the
   *animated* loop seamless — with the animation off they'd just be a second,
   redundant pass through the same cards after a real swipe, so they're hidden
   here. `padding-left` gives the first card room to sit inset from the edge
   instead of flush against it, matching the fade the mask-image already gives
   the trailing edge. */
@media (hover: none), (pointer: coarse) {
  .features-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .features-marquee .features-marquee-track {
    animation: none;
  }
  .features-marquee .features-marquee-item {
    scroll-snap-align: start;
  }
  .features-marquee .features-marquee-item[aria-hidden=true] {
    display: none;
  }
}
/* 
---------------------------------------------
parallax
--------------------------------------------- 
*/
.parallax {
  min-height: 215px;
  overflow: hidden;
  position: relative;
  padding-top: 60px;
  padding-bottom: 60px;
  background-image: url(/assets/images/photos/cta-bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.parallax:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  opacity: 0.88;
  background-image: linear-gradient(127deg, #050d1c 0%, #0a1934 91%);
  z-index: 2;
  top: -20%;
  left: -20%;
}
.parallax .parallax-content {
  position: relative;
  z-index: 3;
}
.parallax .parallax-content .info {
  text-align: center;
  font-weight: 400;
  font-size: 22px;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}
.parallax .parallax-content .info p {
  letter-spacing: 1px;
  margin-bottom: 40px;
}
.parallax .parallax-content .info p span {
  text-decoration: underline;
}
.parallax .parallax-content .info .btn-primary.on-dark {
  margin: auto;
}

.parallax-counter {
  min-height: 315px;
  overflow: hidden;
  position: relative;
  background-image: url(/assets/images/photos/counter-bg-optimized.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.parallax-counter:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  opacity: 0.78;
  background-image: linear-gradient(127deg, #050d1c 0%, #0a1934 91%);
  z-index: 2;
  top: -20%;
  left: -20%;
}
.parallax-counter .parallax-content {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  width: 100%;
}
.parallax-counter .parallax-content .count-item {
  height: 280px;
  position: relative;
  overflow: hidden;
}
.parallax-counter .parallax-content .count-item:hover .count-icon {
  margin-top: 45px;
}
.parallax-counter .parallax-content .count-item .count-icon {
  display: block;
  text-align: center;
  font-size: 26px;
  color: #D4B36A;
  opacity: 0.85;
  margin-top: 55px;
  margin-bottom: 12px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.parallax-counter .parallax-content .count-item strong {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 56px;
  letter-spacing: 1.72px;
  margin-bottom: 8px;
  color: #D4B36A;
  margin-top: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.parallax-counter .parallax-content .count-item span {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.86px;
}

@media (max-width: 991px) {
  .parallax {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: auto;
    background-attachment: scroll;
  }
  .parallax .parallax-content {
    position: relative !important;
    top: 0% !important;
    transform: perspective(1px) translateY(0%) !important;
  }
  .parallax-counter {
    padding-top: 60px;
    padding-bottom: 60px;
    background-attachment: scroll;
  }
  .parallax-counter .parallax-content {
    position: relative !important;
    top: 0% !important;
    transform: perspective(1px) translateY(0%) !important;
  }
  .parallax-counter .parallax-content .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-left: 0;
    margin-right: 0;
  }
  .parallax-counter .parallax-content .row > [class*=col-] {
    padding-left: 0;
    padding-right: 0;
    width: auto;
    max-width: 100%;
  }
  .parallax-counter .parallax-content .count-item {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .parallax-counter .parallax-content .count-item:hover .count-icon {
    margin-top: 0px;
  }
  .parallax-counter .parallax-content .count-item:before {
    display: none;
  }
  .parallax-counter .parallax-content .count-item:after {
    width: 40px;
    height: 1px;
  }
  .parallax-counter .parallax-content .count-item .count-icon {
    margin-top: 0px;
  }
}
/* The 991px-width rules above miss touch tablets in landscape (viewport
   >991px but still a touchscreen, where fixed-attachment backgrounds are
   just as jank-prone). `hover`/`pointer` target the input capability
   directly rather than guessing from viewport width, and only match
   devices with no real hover + a coarse (touch) pointer -- an actual
   desktop with a mouse, at any width, is untouched by this rule. */
@media (hover: none) and (pointer: coarse) {
  .parallax,
  .parallax-counter {
    background-attachment: scroll;
  }
}
/* 
---------------------------------------------
team
--------------------------------------------- 
*/
.team-item {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  margin-bottom: 30px;
  margin-top: 45px;
}
.team-item:hover .user-image {
  top: -55px;
}
.team-item .user-image {
  width: 96px;
  height: 96px;
  border: 6px solid #fff;
  overflow: hidden;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  border-top-right-radius: 10px;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  top: -45px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.team-item .team-content {
  text-align: center;
  overflow: hidden;
}
.team-item .team-content .team-info {
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  margin-top: 70px;
  margin-bottom: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.team-item .team-content .team-info .user-name {
  display: block;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.69px;
  margin-bottom: 3px;
}
.team-item .team-content .team-info span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #FFF7F5;
  letter-spacing: 0.6px;
}
.team-item .team-content .social {
  text-align: center;
  margin-bottom: 15px;
}
.team-item .team-content .social li {
  display: inline-block;
  margin-left: 7px;
  margin-right: 7px;
}
.team-item .team-content .social li a {
  color: #0a1934;
}
.team-item .team-content p {
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 25px;
  font-weight: 400;
  font-size: 14px;
  color: #4A6178;
  letter-spacing: 0.6px;
  line-height: 26px;
}

/* 
---------------------------------------------
pricing
--------------------------------------------- 
*/
.pricing-item {
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 30px;
}
.pricing-item.active .pricing-header {
  position: relative;
  overflow: hidden;
}
.pricing-item.active .pricing-header:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  right: 0px;
  margin: auto;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
}
.pricing-item.active .pricing-header .pricing-title {
  color: #fff;
}
.pricing-item.active .pricing-header .number {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13);
}
.pricing-item.active .pricing-header .number:before {
  border-bottom: 14px solid #fff;
}
.pricing-item.active .pricing-header .number:after {
  border-top: 14px solid #fff;
}
.pricing-item .pricing-header {
  border-bottom: 1px solid #EDEDED;
  text-align: center;
  height: 130px;
  display: block;
  position: relative;
}
.pricing-item .pricing-header .pricing-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  color: #0a1934;
  position: absolute;
  width: 100%;
  top: 46%;
  transform: perspective(1px) translateY(0%);
}
.pricing-item .pricing-body {
  margin-bottom: 40px;
}
.pricing-item .pricing-body .number {
  width: 42px;
  height: 42px;
  line-height: 42px;
  background: #EDEDED;
  position: relative;
  margin: auto;
  margin-top: -20px;
  text-align: center;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  border-top-right-radius: 0;
}
.pricing-item .pricing-body .number span {
  font-weight: 400;
  font-size: 16px;
  color: #0a1934;
  display: block;
}
.pricing-item .pricing-body .price-wrapper {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
}
.pricing-item .pricing-body .price-wrapper .currency {
  height: 47px;
  font-weight: 600;
  font-size: 20px;
  color: #0a1934;
  position: relative;
  top: -15px;
}
.pricing-item .pricing-body .price-wrapper .price {
  font-weight: 700;
  font-size: 34px;
  color: #0a1934;
  letter-spacing: 2.12px;
}
.pricing-item .pricing-body .price-wrapper .period {
  font-weight: 700;
  font-size: 14px;
  color: #0a1934;
  letter-spacing: 0.88px;
}
.pricing-item .pricing-body .list li {
  text-align: center;
  margin-bottom: 12px;
  font-weight: 400;
  font-size: 14px;
  color: #CCDCEA;
  letter-spacing: 0.88px;
}
.pricing-item .pricing-body .list li.active {
  color: #0a1934;
}
.pricing-item .pricing-footer {
  text-align: center;
}
.pricing-item .pricing-footer a {
  width: 160px;
  margin: auto;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  text-align: center;
  box-shadow: 0 4px 5px 0 rgba(10, 25, 52, 0.24);
  border-radius: 100px 0px 100px 100px;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  margin-bottom: 40px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  -webkit-transition: background 1s ease-out;
  -moz-transition: background 1s ease-out;
  -o-transition: background 1s ease-out;
  transition: background 1s ease-out;
  outline: none !important;
  cursor: pointer;
  position: relative;
}
.pricing-item .pricing-footer a:hover {
  background-image: linear-gradient(-135deg, #050d1c 0%, #0a1934 100%);
  color: #fff;
}

/* 
---------------------------------------------
blog
--------------------------------------------- 
*/
.blog-post-thumb {
  text-align: center;
  margin-bottom: 30px;
}
.blog-post-thumb.big .img {
  height: 400px;
}
.blog-post-thumb .img {
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 25px;
  position: relative;
  height: 200px;
}
.blog-post-thumb .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.blog-post-thumb .img .date {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 60px;
  background-image: linear-gradient(127deg, #050d1c 0%, #0a1934 91%);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
}
.blog-post-thumb .img .date strong {
  display: block;
  color: #fff;
  height: 20px;
  line-height: 20px;
}
.blog-post-thumb .img .date span {
  display: block;
  color: #fff;
  height: 20px;
  line-height: 20px;
}
.blog-post-thumb h3 {
  margin-bottom: 10px !important;
}
.blog-post-thumb h3 a {
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  color: #0a1934;
  letter-spacing: 1px;
  line-height: 1.3;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-post-thumb h3 a:hover {
  color: #0a1934;
}
.blog-post-thumb .post-meta {
  overflow: hidden;
}
.blog-post-thumb .post-meta li {
  float: left;
  margin-right: 30px;
  height: 30px;
  line-height: 30px;
  color: #0a1934;
  font-size: 14px;
}
.blog-post-thumb .post-meta li a {
  color: #0a1934;
}
.blog-post-thumb .post-meta li span {
  display: inline-block;
  margin-right: 5px;
}
.blog-post-thumb .text {
  font-weight: 400;
  font-size: 14px;
  color: #4A6178;
  letter-spacing: 0.88px;
  line-height: 26px;
  margin-bottom: 15px;
}
.blog-post-thumb .text.post-detail {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  text-align: left;
}
.blog-post-thumb .post-footer {
  overflow: hidden;
  border-bottom: 1px solid #ECF7FF;
  border-top: 1px solid #ECF7FF;
  padding-top: 10px;
  padding-bottom: 10px;
}
.blog-post-thumb .post-footer span {
  float: left;
  height: 30px;
  line-height: 30px;
  font-weight: 300;
  font-size: 14px;
  color: #4A6178;
  padding-left: 30px;
}
.blog-post-thumb .post-footer ul.share {
  float: right;
  padding-right: 30px;
}
.blog-post-thumb .post-footer ul.share li {
  float: left;
  margin-left: 15px;
}
.blog-post-thumb .post-footer ul.share li a {
  display: block;
  height: 30px;
  line-height: 30px;
  color: #0a1934;
}
.blog-post-thumb .btn-primary {
  margin: auto;
}

.blog-list .blog-post-thumb {
  margin-bottom: 60px;
  text-align: left;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-list .blog-post-thumb .img {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-top-left-radius: 5px !important;
  -webkit-border-top-right-radius: 5px !important;
  -moz-border-radius-topleft: 5px !important;
  -moz-border-radius-topright: 5px !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}
.blog-list .blog-post-thumb h3 {
  padding-left: 30px;
  padding-right: 30px;
}
.blog-list .blog-post-thumb .post-meta {
  padding-left: 30px;
  padding-right: 30px;
}
.blog-list .blog-post-thumb .text {
  padding-left: 30px;
  padding-right: 30px;
}
.blog-list .blog-post-thumb .btn-secondary {
  float: left;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 36px;
}

@media (hover: hover) {
  .blog-list .row .blog-post-thumb:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
  }
}
@media (hover: none) {
  .blog-list .row .blog-post-thumb:active {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
}
/* Homepage "Latest Blog Posts" teaser (#blog): keep every card identical no
   matter what the CMS sends. The cover is already a fixed 200px cover box
   (.img above + imgfix). Here the title and summary are clamped to a set number
   of lines AND reserve that height, so a short OR very long title/summary always
   occupies the same space — cards stay the same size and the buttons stay aligned. */
#blog .blog-post-thumb {
  background: #fff;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#blog .blog-post-thumb .img {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  margin-bottom: 0;
}
#blog .blog-post-thumb .blog-content {
  padding: 24px 28px 30px;
}
#blog .blog-post-thumb h3 {
  min-height: 52px; /* 2 lines × 26px line-height */
}
#blog .blog-post-thumb h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#blog .blog-post-thumb .text {
  min-height: 78px; /* 3 lines × 26px line-height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover: hover) {
  #blog .blog-post-thumb:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
  }
}
@media (hover: none) {
  #blog .blog-post-thumb:active {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
}
@media (max-width: 480px) {
  #blog .blog-post-thumb .blog-content {
    padding: 20px 20px 24px;
  }
}
.section-comments {
  margin-bottom: 60px;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 30px;
  padding-bottom: 0px;
}
.section-comments ul {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
.section-comments ul li {
  overflow: hidden;
}
.section-comments ul li .avatar {
  width: 70px;
  height: 70px;
  border-radius: 15px 3px 15px 15px;
  overflow: hidden;
  float: left;
  margin-right: 20px;
}
.section-comments ul li .comment-content {
  font-weight: 400;
  font-size: 14px;
  color: #4A6178;
  float: left;
  width: calc(100% - 90px);
  width: -webkit-calc(100% - 90px);
}
.section-comments ul li .comment-content .comment-by {
  margin-bottom: 10px;
  position: relative;
}
.section-comments ul li .comment-content .comment-by strong {
  display: block;
  color: #0a1934;
}
.section-comments ul li .comment-content .comment-by span {
  font-size: 12px;
}
.section-comments ul li .comment-content .comment-by .btn-reply {
  position: absolute;
  right: 0px;
  top: 15px;
  background: #F4F8FB;
  color: #4A6178;
  height: 25px;
  line-height: 25px;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.section-comments ul li .comment-content .comment-by .btn-reply i {
  font-size: 12px;
}
.section-comments ul li .comment-content .comment-by .btn-reply:hover {
  background: #0a1934;
  color: #fff;
}
.section-comments ul li ul {
  padding-left: 90px;
}

.post-comment {
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 30px;
  padding-bottom: 0px;
  margin-bottom: 30px;
}
.post-comment .comment-form .form-item {
  margin-bottom: 20px;
}
.post-comment .comment-form .form-item label {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 0px;
}
.post-comment .comment-form .form-item input, .post-comment .comment-form .form-item textarea {
  border: 1px solid #eee;
  width: 100%;
  height: 40px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.post-comment .comment-form .form-item input:focus, .post-comment .comment-form .form-item textarea:focus {
  border: 1px solid #0a1934;
}
.post-comment .comment-form .form-item textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.pagination {
  margin-bottom: 30px;
}
.pagination .page-item a {
  font-size: 14px;
  color: #0a1934;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.pagination .page-item a:hover {
  background: #F4F8FB;
}

@media (max-width: 991px) {
  .blog-post-thumb.big .img {
    height: 350px;
  }
}
@media (max-width: 767px) {
  .blog-post-thumb.big .img {
    /* The 350px (≤991px) tier carried unchanged all the way down
       to 421px, so a phone-width card kept a tablet-height crop —
       disproportionately tall for how narrow the card had become. */
    height: 280px;
  }
}
@media (max-width: 480px) {
  .blog-post-thumb {
    /* The non-"big" card (used by the homepage "Latest Posts" teaser)
       had no mobile override at all — a fixed 200px-tall crop on the
       narrowest phones reads as a very wide, very short strip. */
  }
  .blog-post-thumb .img {
    height: 160px;
  }
}
@media (max-width: 420px) {
  .blog-post-thumb.big .img {
    height: 200px;
  }
}
@media (max-width: 480px) {
  .section-comments {
    padding: 20px;
    padding-bottom: 0px;
  }
  .section-comments ul li {
    /* A fixed 70px avatar plus a 90px nested-reply indent left only
       ~150-170px for reply text on a 375px phone. Shrinking both,
       and un-pinning the absolutely-positioned reply button (which
       could otherwise overlap a long name in the narrower column),
       gives replies real room without touching the desktop layout. */
  }
  .section-comments ul li .avatar {
    width: 46px;
    height: 46px;
    margin-right: 12px;
  }
  .section-comments ul li .comment-content {
    width: calc(100% - 58px);
  }
  .section-comments ul li .comment-content .comment-by .btn-reply {
    position: static;
    display: inline-block;
    margin-top: 8px;
  }
  .section-comments ul li ul {
    padding-left: 30px;
  }
}
/*
---------------------------------------------
footer
---------------------------------------------
*/
footer {
  background: #0a1934;
  padding-top: 70px;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212, 179, 106, 0) 0%, #D4B36A 50%, rgba(212, 179, 106, 0) 100%);
}
footer img.logo {
  display: block;
  height: 58px;
  width: auto;
  margin-bottom: 30px;
}
footer .text {
  font-weight: 400;
  font-size: 14px;
  color: rgba(248, 249, 250, 0.75);
  line-height: 26px;
  letter-spacing: 0.88px;
}
footer h5 {
  font-weight: 600;
  font-size: 16px;
  color: #FFF7F5;
  letter-spacing: 0.69px;
  line-height: 30px;
  margin-bottom: 30px !important;
  position: relative;
  padding-bottom: 14px;
}
footer h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: #D4B36A;
}
footer .footer-nav li a {
  display: flex;
  align-items: flex-start;
}
footer .footer-nav li a:hover span {
  color: #E8CE9B;
}
footer .footer-nav li a:hover i {
  color: #E8CE9B;
}
footer .footer-nav li a i {
  line-height: 22px;
  margin-right: 12px;
  font-size: 14px;
  color: #D4B36A;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
footer .footer-nav li a span {
  line-height: 22px;
  font-weight: 400;
  font-size: 14px;
  color: #f8f9fa;
  opacity: 0.85;
  white-space: normal;
  word-break: break-word;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
footer .address p {
  display: block;
  overflow: hidden;
  font-weight: 400;
  font-size: 14px;
  color: rgba(248, 249, 250, 0.75);
  line-height: 26px;
  letter-spacing: 0.88px;
  margin-bottom: 5px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
footer .address p a {
  color: #D4B36A;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
footer .address p a:hover {
  color: #E8CE9B;
}
footer .address .social {
  overflow: hidden;
  margin-top: 5px;
}
footer .address .social li {
  float: left;
  margin-right: 10px;
}
footer .address .social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f8f9fa;
  opacity: 0.9;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
footer .address .social li a:hover {
  background: #D4B36A;
  border-color: #D4B36A;
  color: #0a1934;
  opacity: 1;
}
footer .copyright {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: 400;
  font-size: 14px;
  color: rgba(248, 249, 250, 0.6);
  letter-spacing: 0.88px;
}
footer .copyright a {
  color: #D4B36A;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
footer .copyright a:hover {
  color: #E8CE9B;
}

@media (max-width: 991px) {
  footer .text {
    margin-bottom: 30px;
  }
  footer h5 {
    margin-bottom: 15px;
  }
  footer .footer-nav {
    margin-bottom: 30px;
  }
  footer .footer-nav li a {
    padding: 10px 0;
  }
}
@media (max-width: 767px) {
  footer {
    padding-top: 40px;
  }
  footer .copyright {
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media (max-width: 575px) {
  footer .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* 
---------------------------------------------
pages
--------------------------------------------- 
*/
.page {
  background: #fff;
}
.page .cover {
  margin-top: 92px;
  min-height: 270px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.page .cover:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  right: -20%;
  bottom: -20%;
  background-image: linear-gradient(127deg, #050d1c 0%, #0a1934 91%);
  z-index: 2;
  opacity: 0.7;
}
.page .cover .page-top {
  position: absolute;
  width: 100%;
  bottom: 50px;
  z-index: 3;
}
.page .cover .page-top h1 {
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 1.4px;
  color: #fff;
  text-align: center;
}
.page .cover .page-top h1:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 19px;
  height: 2px;
  background: #fff;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}
.page .cover .page-top .breadcrumb {
  float: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: none;
  padding: 0px;
  margin-top: 8px;
  margin-bottom: 0px;
  display: block;
  text-align: center;
}
.page .cover .page-top .breadcrumb li {
  font-weight: 400;
  font-size: 14px;
  color: #FFF7F5;
  line-height: 30px;
  margin-left: 10px;
  display: inline-block;
}
.page .cover .page-top .breadcrumb li:after {
  font-family: FontAwesome;
  content: "\f105";
  margin-left: 10px;
  color: #FFF7F5;
}
.page .cover .page-top .breadcrumb li:first-child {
  margin-left: 0px;
}
.page .cover .page-top .breadcrumb li:last-child:after {
  content: "";
  margin-left: 0px;
}
.page .cover .page-top .breadcrumb li a {
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}
.page .page-bottom {
  padding-top: 100px;
  padding-bottom: 70px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.88px;
  line-height: 28px;
  color: #4A6178;
}
.page .page-bottom p {
  margin-bottom: 28px;
}
.page .page-bottom .about {
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: 100px;
}
.page .page-bottom .about.left .about-image {
  float: right;
}
.page .page-bottom .about.left .about-text {
  left: 0px;
}
.page .page-bottom .about .about-image {
  position: relative;
  width: 70%;
  float: left;
  height: 500px;
  border-radius: 40px 5px 40px 40px;
  overflow: hidden;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  z-index: 1;
}
.page .page-bottom .about .about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.page .page-bottom .about .about-image:hover img {
  transform: scale(1.1);
}
.page .page-bottom .about .about-image:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.3;
  background-image: linear-gradient(127deg, #050d1c 0%, #0a1934 91%);
}
.page .page-bottom .about .about-text {
  position: absolute;
  z-index: 2;
  width: 40%;
  float: right;
  right: 0px;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 40px 5px 40px 40px;
  padding: 30px;
  padding-bottom: 10px;
}
.page .page-bottom .about .about-text h2 {
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 1.75px;
  color: #0a1934;
  margin-bottom: 20px;
}
.page .page-bottom .about .about-text p {
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 20px;
}
.page .page-bottom .features-small-item p {
  margin-bottom: 0px !important;
}
.page .page-bottom .page-detail .about {
  margin-bottom: 30px !important;
}
.page .page-bottom .page-detail .about .about-image {
  border-radius: 30px 5px 30px 30px;
}
.page .page-bottom .page-detail .about .about-image:before {
  display: none;
}
.page .page-bottom .page-detail .about .about-text {
  border-radius: 30px 5px 30px 30px;
}

/* Desktop-only: with background-attachment: fixed + cover, the default
   center position shows too much empty sky at the top of the banner
   image. Shifting the Y anchor down brings the lower/center part of the
   image into view instead. Scoped to >=992px so mobile (which uses
   background-attachment: scroll below) is untouched. */
@media (min-width: 992px) {
  .page .cover {
    background-position: center 70%;
  }
}
@media (max-width: 991px) {
  .page .cover {
    margin-top: 92px;
    background-attachment: scroll;
  }
  .page .cover h1 {
    padding-bottom: 15px;
  }
  .page .cover .page-top {
    /* Was `position: absolute; bottom: 50px` (desktop rule, still
       in effect above this query). Pinning to the bottom of a
       fixed-min-height cover risks clipping under `.cover`'s
       overflow: hidden if a long translated title plus a wrapped
       breadcrumb needs more than the ~220px available above that
       anchor. In flow, `.cover`'s min-height still gives it the
       same 270px for short titles, but it can grow instead of
       clip for longer ones. */
    position: relative;
    bottom: auto;
    padding: 70px 0 30px;
    text-align: center;
  }
  .page .cover .page-top .breadcrumb {
    float: none;
    text-align: center;
    display: block;
  }
  .page .cover .page-top .breadcrumb li {
    display: inline;
  }
  .page .page-bottom .about {
    overflow: initial !important;
  }
  .page .page-bottom .about .about-image {
    width: 100% !important;
    height: 300px;
    margin-bottom: 30px;
  }
  .page .page-bottom .about .about-text {
    position: relative !important;
    width: 100% !important;
    top: 0% !important;
    transform: perspective(1px) translateY(0%) !important;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  }
}
/* 
---------------------------------------------
faq
--------------------------------------------- 
*/
.accordion {
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
}
.accordion .accordion-item {
  border: none;
  background: none;
  border-bottom: 1px solid #EDEDED;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(5, 13, 28, 0.05);
  transition: box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .accordion .accordion-item:hover {
    box-shadow: 0 6px 18px 0 rgba(5, 13, 28, 0.09);
  }
}
.accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: 0 12px 28px 0 rgba(5, 13, 28, 0.14);
  z-index: 1;
}
.accordion .accordion-item .accordion-header {
  padding: 0px;
  border: none;
  background: none;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.accordion .accordion-item .accordion-header:hover {
  background: #EDEDED;
  padding-left: 10px;
}
.accordion .accordion-item .accordion-header .accordion-button {
  width: 100%;
  text-align: left;
  padding: 0px;
  padding-left: 26px;
  padding-right: 30px;
  border-left: 4px solid transparent;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  color: #0a1934;
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: none !important;
}
.accordion .accordion-item .accordion-header .accordion-button .badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 14px;
  float: left;
  border-radius: 100px;
  border-top-right-radius: 0;
  text-align: center;
  background: #0a1934;
  color: #fff;
  font-size: 12px;
  margin-right: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.accordion .accordion-item .accordion-header .accordion-button::after {
  content: "";
  width: 8px;
  height: 8px;
  background-image: none !important;
  border-right: 2px solid #0a1934;
  border-bottom: 2px solid #0a1934;
  margin-right: 4px;
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background: #0a1934;
  color: #FFF7F5;
  border-left-color: #D4B36A;
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .badge {
  background: #D4B36A;
  color: #0a1934;
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  border-color: #D4B36A;
  transform: rotate(-135deg);
}
.accordion .accordion-item .accordion-collapse.show .accordion-body {
  opacity: 1;
}
.accordion .accordion-item .accordion-body {
  padding: 30px;
  padding-left: 35px;
  padding-bottom: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #4A6178;
  line-height: 28px;
  letter-spacing: 1px;
  border-top: 1px solid #F3F8FF;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.accordion .accordion-item .accordion-body p {
  margin-bottom: 14px;
}

@media (max-width: 991px) {
  .accordion {
    margin-bottom: 30px;
  }
  .accordion .accordion-item .accordion-header .accordion-button {
    line-height: 26px;
    margin-top: 10px;
  }
}
@media (max-width: 767px) {
  .accordion .accordion-item .accordion-header .accordion-button {
    padding-left: 18px;
    padding-right: 18px;
  }
  .accordion .accordion-item .accordion-header .accordion-button .badge {
    margin-right: 10px;
  }
  .accordion .accordion-item .accordion-body {
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* 
---------------------------------------------
aside
--------------------------------------------- 
*/
aside.default-aside {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
aside.default-aside .sidebar ul {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 30px;
}
aside.default-aside .sidebar ul li.active a {
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  color: #fff;
}
aside.default-aside .sidebar ul li.active a:after {
  color: #fff;
}
aside.default-aside .sidebar ul li.active a:hover {
  padding-left: 60px;
}
aside.default-aside .sidebar ul li:last-child a {
  border: none;
}
aside.default-aside .sidebar ul li a {
  display: block;
  border-bottom: 1px solid #ECF7FF;
  height: 59px;
  line-height: 59px;
  padding-left: 59px;
  position: relative;
  font-weight: 400;
  font-size: 14px;
  color: #0a1934;
  letter-spacing: 0.88px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
}
aside.default-aside .sidebar ul li a:hover {
  padding-left: 70px;
}
aside.default-aside .sidebar ul li a:after {
  font-family: FontAwesome;
  content: "\f105";
  position: absolute;
  left: 30px;
  color: #0a1934;
}
aside.default-aside .sidebar ul li a span {
  float: right;
  margin-right: 30px;
  display: inline-block;
  background: #0a1934;
  height: 20px;
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 10px;
  color: #fff;
  margin-top: 18px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}
aside.default-aside .sidebar .aside-title {
  font-weight: 600;
  font-size: 18px;
  color: #0a1934;
  letter-spacing: 0.69px;
  margin-bottom: 20px;
}
aside.default-aside .sidebar .sidebar-cta {
  padding: 40px 30px 35px;
  text-align: center;
  background: #0a1934;
  box-shadow: 0 16px 36px 0 rgba(5, 13, 28, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
aside.default-aside .sidebar .sidebar-cta::before {
  content: "\f059";
  font-family: FontAwesome;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 100px;
  background: #D4B36A;
  color: #0a1934;
  font-size: 22px;
}
aside.default-aside .sidebar .sidebar-cta h4 {
  font-weight: 400;
  font-size: 18px;
  color: #FFF7F5;
  letter-spacing: 0.69px;
  margin-bottom: 12px;
}
aside.default-aside .sidebar .sidebar-cta p {
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 24px;
  letter-spacing: 0.5px;
  margin-bottom: 22px;
}
aside.default-aside .sidebar .sidebar-cta .btn-primary {
  margin-bottom: 0;
}
aside.default-aside .sidebar .search-widget {
  display: block;
  margin-bottom: 30px;
  height: 50px;
  position: relative;
}
aside.default-aside .sidebar .search-widget input {
  border: 1px solid #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  outline: none;
  padding-left: 20px;
  padding-right: 50px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
}
aside.default-aside .sidebar .search-widget input:focus {
  border: 1px solid #0a1934;
  padding-left: 30px;
}
aside.default-aside .sidebar .search-widget button {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
  height: 30px;
  width: 30px;
  border: none;
  background-image: linear-gradient(127deg, #050d1c 0%, #0a1934 91%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  text-align: center;
  padding: 0px;
}
aside.default-aside .sidebar .search-widget button i {
  color: #fff;
}
aside.default-aside .sidebar .widget-tags {
  padding: 30px;
  padding-bottom: 20px;
  overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
}
aside.default-aside .sidebar .widget-tags a {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  background: #f5f5f5;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 400;
  font-size: 14px;
  color: #0a1934;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
aside.default-aside .sidebar .widget-tags a:hover {
  background: #0a1934;
  color: #fff;
}

@media (min-width: 992px) {
  aside.default-aside {
    height: 100%;
  }
  aside.default-aside .sidebar {
    height: 100%;
  }
  .sidebar-cta {
    position: sticky;
    top: 112px;
  }
}
@media (max-width: 991px) {
  .sidebar-cta {
    position: static;
    top: auto;
  }
}
/*
---------------------------------------------
contact
---------------------------------------------
*/
.contact-cards {
  position: relative;
  z-index: 4;
  margin-top: -90px;
  margin-bottom: 60px;
}
.contact-cards .contact-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 25px 3px 25px 25px;
  padding: 34px 26px 26px;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.contact-cards .contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px 0 rgba(0, 0, 0, 0.16);
}
.contact-cards .contact-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 18px;
}
.contact-cards .contact-card strong {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.65;
}
.contact-cards .contact-card > span {
  display: block;
  font-size: 17px;
  line-height: 26px;
}
.contact-cards .contact-card > span a {
  color: #fff;
}
.contact-cards .contact-card .hours {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 13px;
  opacity: 0.6;
  margin-top: 10px;
}
.contact-cards .contact-card .hours i {
  margin-right: 6px;
  font-size: 13px;
}
.contact-cards .contact-card .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0;
  margin-top: 18px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.contact-cards .contact-card .copy-btn i {
  margin-right: 6px;
  font-size: 13px;
}
.contact-cards .contact-card .copy-btn:hover {
  color: #fff;
}

.page-bottom.contact-split-wrap {
  padding-top: 0;
}

.contact-split .contact-map {
  height: 100%;
  min-height: 420px;
}
.contact-split .contact-map .map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
}
.contact-split .contact-map .map-wrapper .map-canvas {
  width: 100%;
  height: 100%;
}

.contact-bottom {
  background: rgba(10, 25, 52, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 40px 36px;
}
.contact-bottom .contact-text {
  font-weight: 400;
  font-size: 14px;
  color: #4A6178;
  letter-spacing: 0.6px;
  line-height: 26px;
}
.contact-bottom .contact-text p {
  margin-bottom: 28px;
}
.contact-bottom .contact-form input, .contact-bottom .contact-form textarea {
  border: 1px solid #eee;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}
.contact-bottom .contact-form input:focus, .contact-bottom .contact-form textarea:focus {
  border: 1px solid #0a1934;
  padding-left: 30px;
}
.contact-bottom .contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}
.contact-bottom .contact-form .btn-primary {
  margin-bottom: 0px !important;
  border: none;
  cursor: pointer;
}
.contact-bottom .contact-form .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.contact-bottom .contact-form .form-feedback {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 22px;
}
.contact-bottom .contact-form .form-feedback.is-error {
  color: #e5484d;
}
.contact-bottom .contact-form .form-feedback.is-success {
  color: #2e9e5b;
}

@media (max-width: 991px) {
  .contact-cards {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .contact-cards .col-lg-4 {
    margin-bottom: 20px;
  }
  .contact-split .contact-map {
    min-height: 300px;
    margin-bottom: 30px;
  }
  .contact-split .contact-map .map-wrapper {
    min-height: 300px;
  }
  .contact-bottom {
    margin-top: 10px;
    padding: 28px 22px;
  }
}
/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
#preloader {
  overflow: hidden;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
}
#preloader #loader {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}
#preloader #loader #box {
  width: 50px;
  height: 50px;
  background: #fff;
  animation: animate 0.5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}
#preloader #loader #shadow {
  width: 50px;
  height: 5px;
  background: #000;
  opacity: 0.1;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  animation: shadow 0.5s linear infinite;
}

@keyframes loader {
  0% {
    left: -100px;
  }
  100% {
    left: 110%;
  }
}
@keyframes animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@keyframes shadow {
  50% {
    transform: scale(1.2, 1);
  }
}
/*
---------------------------------------------
products & categories (services)
---------------------------------------------
*/
/* ---------- Product detail ---------- */
.product-detail {
  max-width: 1000px;
  margin: 0 auto;
}
.product-detail .product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 45px;
}
.product-detail .product-gallery .product-gallery-item {
  position: relative;
  aspect-ratio: 4/3;
}
.product-detail .product-gallery .product-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 20px 40px 0 rgba(10, 25, 52, 0.08);
}
.product-detail .product-head {
  text-align: center;
  margin-bottom: 35px;
}
.product-detail .product-head h2 {
  color: #0a1934;
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.75rem);
  line-height: 1.3;
  margin-bottom: 0px;
}
.product-detail .product-body p {
  color: #4A6178;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 20px;
}
.product-detail .product-content-block {
  margin-top: 45px;
}
.product-detail .product-content-block h3 {
  color: #0a1934;
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 20px;
}
.product-detail .product-content-block p {
  color: #4A6178;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 20px;
}
.product-detail .product-features-block {
  margin-top: 45px;
}
.product-detail .product-features-block h3 {
  color: #0a1934;
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 20px;
}
.product-detail .product-features-block .product-features-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: #4A6178;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
}
.product-detail .product-features-block .product-features-list li i {
  position: absolute;
  left: 0px;
  top: 6px;
  color: #0a1934;
  font-size: 15px;
}
.product-detail .product-tech {
  margin-top: 45px;
}
.product-detail .product-tech h3 {
  color: #0a1934;
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 20px;
}
.product-detail .product-tech table {
  width: 100%;
  border-collapse: collapse;
}
.product-detail .product-tech table th,
.product-detail .product-tech table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid #EDEDED;
  font-weight: 400;
  font-size: 15px;
}
.product-detail .product-tech table th {
  width: 38%;
  color: #0a1934;
  font-weight: 700;
}
.product-detail .product-tech table td {
  color: #4A6178;
}

/* ---------- Category → product grid ---------- */
.products-heading {
  color: #0a1934;
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 30px;
}

.products-empty {
  color: #4A6178;
  font-weight: 400;
  font-size: 16px;
}

.product-card {
  display: block;
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px 0 rgba(10, 25, 52, 0.06);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px 0 rgba(10, 25, 52, 0.12);
}
.product-card .product-card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.product-card h4 {
  color: #0a1934;
  font-weight: 700;
  font-size: 18px;
  padding: 20px 22px;
  margin: 0;
}

@media (max-width: 767px) {
  .product-detail .product-gallery {
    /* The auto-fit/minmax(280px,1fr) floor can exceed the usable
       width on the narrowest phones once container padding is
       subtracted, forcing overflow that the site-wide
       `overflow-x: hidden` band-aid then silently clips instead of
       reflowing. A single column has no floor to violate. */
    grid-template-columns: 1fr;
  }
  .product-detail .product-tech {
    /* Spec values are free-form CMS text (URLs, long unbroken
       strings) with no wrapping guarantee. Let ordinary values wrap
       first, and fall back to a scrollable table rather than an
       overflow that's invisible under the site-wide overflow-x:hidden. */
    overflow-x: auto;
  }
  .product-detail .product-tech table th, .product-detail .product-tech table td {
    word-break: break-word;
  }
}
/*
---------------------------------------------
home about (homepage "Hakkımızda" teaser)
---------------------------------------------
*/
.home-about .home-about-image {
  position: relative;
  z-index: 1;
}
.home-about .home-about-image img {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 40px 0px 40px 40px;
  box-shadow: 0 30px 60px 0 rgba(10, 25, 52, 0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.home-about .home-about-image {
  /* Floating "completed projects" stat — a real number shared with
     <CounterBar> further down the page (see mechanical/page.tsx), not an
     invented claim. Frosted-glass card overlapping the image corner. */
}
.home-about .home-about-image .home-about-badge {
  position: absolute;
  right: -20px;
  bottom: -20px;
  z-index: 3;
  min-width: 110px;
  max-width: 140px;
  padding: 16px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px 0px 20px 20px;
  box-shadow: 0 12px 30px 0 rgba(10, 25, 52, 0.18);
}
.home-about .home-about-image .home-about-badge strong {
  display: block;
  font-weight: 700;
  font-size: 28px;
  color: #0a1934;
  line-height: 1.1;
}
.home-about .home-about-image .home-about-badge span {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: #4A6178;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.home-about .home-about-image {
  /* Offset gradient block behind the image for depth. */
}
.home-about .home-about-image:before {
  content: "";
  position: absolute;
  left: -22px;
  bottom: -22px;
  width: 60%;
  height: 70%;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  border-radius: 40px 0px 40px 40px;
  opacity: 0.12;
  z-index: 1;
}
.home-about .home-about-image {
  /* Outlined ring accent, top-right. */
}
.home-about .home-about-image:after {
  content: "";
  position: absolute;
  right: -18px;
  top: -18px;
  width: 90px;
  height: 90px;
  border: 3px solid #0a1934;
  border-radius: 28px 0px 28px 28px;
  opacity: 0.18;
  z-index: 1;
}
.home-about .home-about-text h2 {
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.75rem);
  color: #0a1934;
  line-height: 1.3;
  letter-spacing: 0.5px;
  margin-bottom: 25px;
  padding-bottom: 18px;
  position: relative;
  /* Short accent bar under the heading — the section's distinct touch. */
}
.home-about .home-about-text h2:after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 50px;
  height: 3px;
  background: #0a1934;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.home-about .home-about-text p {
  font-weight: 400;
  font-size: 15px;
  color: #4A6178;
  line-height: 28px;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
}
.home-about .home-about-text p:last-child {
  margin-bottom: 0px;
}
.home-about .home-about-text .btn-primary {
  margin-top: 10px;
}

@media (hover: hover) {
  .home-about-image:hover img {
    transform: scale(1.03);
    box-shadow: 0 36px 70px 0 rgba(10, 25, 52, 0.25);
  }
}
@media (max-width: 991px) {
  .home-about {
    text-align: center;
  }
  .home-about .home-about-image {
    margin-bottom: 40px;
    /* Drop the decorative accents on small screens so nothing spills
       past the viewport edge, and center the image. */
  }
  .home-about .home-about-image:before, .home-about .home-about-image:after {
    display: none;
  }
  .home-about .home-about-image {
    /* The badge's desktop offset (-20px past the image edge) relies on
       the extra breathing room around a col-lg-6 image; on a full-width
       mobile column that same overhang can push past the viewport edge.
       Pull it back to sit just inside the image corner instead. */
  }
  .home-about .home-about-image .home-about-badge {
    right: 10px;
    bottom: 10px;
  }
  .home-about .home-about-text h2:after {
    left: 50%;
    transform: translateX(-50%);
  }
  .home-about .home-about-text p {
    text-align: left;
  }
}
/* Mobile polish pass (≤768px): breathing room, type scale, and a full-width
   CTA tap target. Kept separate from the 991px tier above, which handles the
   structural stuff (stacking, dropping the decorative shapes, alignment). */
@media (max-width: 768px) {
  .home-about .home-about-image {
    margin-bottom: 50px;
  }
  .home-about .home-about-text h2 {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .home-about .home-about-text p {
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
  }
  .home-about .home-about-text .btn-primary {
    display: flex;
    width: 100%;
    margin-top: 22px;
  }
}
/* Smallest phones: the badge's desktop proportions (110px min-width, 28px
   number) start to cover a noticeable chunk of a ~290px-wide image once the
   viewport itself is this narrow. Scale it down without touching the
   desktop/tablet version. */
@media (max-width: 480px) {
  .home-about .home-about-image .home-about-badge {
    min-width: 90px;
    max-width: 110px;
    padding: 10px 14px;
    border-radius: 16px 0px 16px 16px;
  }
  .home-about .home-about-image .home-about-badge strong {
    font-size: 20px;
  }
  .home-about .home-about-image .home-about-badge span {
    font-size: 9px;
  }
}
/* ---------------------------------------------
	Work steps — the "Design & Development" slot, now an accordion of
	work steps (titles from /api/worksteps). One panel open at a time; the
	single left image swaps to the clicked step's image. "current" (in
	WorkSteps.tsx) is the single source of truth for both which step is
	"active" (shown in the image) and which panel is "open" — they can never
	be out of sync, on load or after any click, which is what previously made
	step one look like a dead/fake toggle (active-but-collapsed).
--------------------------------------------- */
.work-steps .work-steps-image {
  position: relative;
  aspect-ratio: 46/26;
  border-radius: 40px 0px 40px 40px;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.work-steps .work-steps-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.work-steps .work-steps-image img.is-active {
  opacity: 1;
}
.work-steps .work-steps-accordion {
  margin-top: 10px;
}
.work-steps .work-step {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.work-steps .work-step:last-child .work-step-node::after {
  display: none;
}
.work-steps .work-step .work-step-header {
  border: none;
  text-align: left;
  font-family: inherit;
  margin-bottom: 12px;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
.work-steps .work-step .work-step-header:hover, .work-steps .work-step .work-step-header.active {
  background-image: linear-gradient(-135deg, #050d1c 0%, #0a1934 100%);
}
.work-steps .work-step.open .work-step-header {
  margin-bottom: 8px;
}
.work-steps .work-step-node {
  position: relative;
  flex-shrink: 0;
  padding-top: 2px;
}
.work-steps .work-step-node::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: #D4B36A;
  z-index: 1;
}
.work-steps .work-step-number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  color: #8593A8;
  background: #F1F4F8;
  border: 2px solid #E3E9F1;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.work-steps .work-step.active .work-step-number {
  border-color: transparent;
  color: #0a1934;
  background: #D4B36A;
  box-shadow: 0 4px 10px 0 rgba(212, 179, 106, 0.45);
}
.work-steps .work-step-body {
  flex: 1;
  min-width: 0;
}
.work-steps .work-step-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.work-steps .work-step-panel.open {
  grid-template-rows: 1fr;
}
.work-steps .work-step-panel-inner {
  overflow: hidden;
}
.work-steps .work-step-panel-content {
  padding: 0px 20px 16px 30px;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.work-steps .work-step-panel-content p {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: #4A6178;
  line-height: 24px;
  letter-spacing: 0.5px;
}
.work-steps .work-step-panel.open .work-step-panel-content {
  opacity: 1;
}

@media (max-width: 575px) {
  .work-steps .work-step-panel-content {
    padding: 0px 4px 16px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-steps .work-steps-image img {
    transition: none;
  }
  .work-steps .work-step-panel,
  .work-steps .work-step-panel-content {
    transition: none;
  }
}
/*
---------------------------------------------
privacy policy
---------------------------------------------
*/
.privacy-content {
  max-width: 900px;
  margin: 0 auto;
}
.privacy-content > p {
  color: #4A6178;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 20px;
  word-break: break-word;
}
.privacy-content .privacy-section {
  margin-top: 40px;
}
.privacy-content .privacy-section h2 {
  color: #0a1934;
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}
.privacy-content .privacy-section p {
  color: #4A6178;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 20px;
  word-break: break-word;
}

/*
---------------------------------------------
route loading (app/loading.tsx) + section skeletons
---------------------------------------------
*/
#route-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
}
#route-loading .route-loading-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #fff;
  animation: route-loading-spin 0.8s linear infinite;
}

@keyframes route-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
.section-skeleton {
  overflow: hidden;
}
.section-skeleton .skeleton-block {
  background: linear-gradient(90deg, #F4F8FB 25%, #EDEDED 37%, #F4F8FB 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.section-skeleton.hero {
  min-height: 700px;
  display: flex;
  align-items: center;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
}
.section-skeleton.hero .skeleton-block {
  background: rgba(255, 255, 255, 0.08);
  animation: skeleton-shimmer-dark 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes skeleton-shimmer-dark {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
/*
---------------------------------------------
back to top
---------------------------------------------
*/
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  color: #fff;
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  box-shadow: 0 4px 5px 0 rgba(10, 25, 52, 0.24);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.back-to-top svg {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.back-to-top:hover, .back-to-top:focus {
  background-image: linear-gradient(135deg, #0a1934 0%, #050d1c 100%);
  transform: translateY(0) scale(1.08);
}
.back-to-top:hover svg, .back-to-top:focus svg {
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid #EDEDED;
  outline-offset: 2px;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .back-to-top {
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
  }
  .back-to-top svg {
    width: 17px;
    height: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.01ms, visibility 0.01ms;
    transform: none;
  }
  .back-to-top:hover, .back-to-top:focus {
    transform: none;
  }
  .back-to-top svg {
    transition: none;
  }
}
/*
---------------------------------------------
custom scrollbar
---------------------------------------------
*/
@media (min-width: 768px) and (pointer: fine) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #0a1934 #F4F8FB;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #F4F8FB;
  }
  ::-webkit-scrollbar-thumb {
    background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
    border-radius: 10px;
    border: 2px solid #F4F8FB;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(135deg, #0a1934 0%, #050d1c 100%);
  }
}
/*
---------------------------------------------
not found (404)
---------------------------------------------
*/
@keyframes notFoundFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.not-found-page {
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg, rgba(10, 25, 52, 0.04) 0, rgba(10, 25, 52, 0.04) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(10, 25, 52, 0.04) 0, rgba(10, 25, 52, 0.04) 1px, transparent 1px, transparent 40px);
  min-height: calc(100vh - 92px);
  margin-top: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
.not-found-page .container {
  max-width: 600px;
}
.not-found-page h1 {
  font-weight: 700;
  font-size: 160px;
  line-height: 1;
  margin-bottom: 10px;
  background-image: linear-gradient(135deg, #050d1c 0%, #0a1934 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: notFoundFadeInUp 0.6s ease both;
}
.not-found-page .not-found-subtitle {
  font-weight: 400;
  font-size: 18px;
  color: #4A6178;
  margin-bottom: 35px;
  animation: notFoundFadeInUp 0.6s ease 0.1s both;
}
.not-found-page .not-found-btn-wrap {
  animation: notFoundFadeInUp 0.6s ease 0.2s both;
}
.not-found-page .btn-primary {
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 1s ease-out;
}
.not-found-page .btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 28px 0 rgba(10, 25, 52, 0.35);
}
.not-found-page .not-found-quick-links {
  margin-top: 35px;
  padding-top: 30px;
  border-top: 1px solid #EDEDED;
  animation: notFoundFadeInUp 0.6s ease 0.3s both;
}
.not-found-page .not-found-quick-links .not-found-quick-links-title {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: #4A6178;
  margin-bottom: 15px;
}
.not-found-page .not-found-contact {
  margin-top: 20px;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 14px;
  color: #4A6178;
  animation: notFoundFadeInUp 0.6s ease 0.4s both;
}
.not-found-page .not-found-contact a {
  color: #0a1934;
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
}
.not-found-page .not-found-contact a:hover {
  color: #0a1934;
}

@media (max-width: 991px) {
  .not-found-page h1 {
    font-size: 120px;
  }
}
@media (max-width: 767px) {
  .not-found-page {
    min-height: calc(100vh - 80px);
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .not-found-page h1 {
    font-size: 90px;
  }
  .not-found-page .not-found-subtitle {
    font-size: 16px;
    padding: 0 10px;
  }
  .not-found-page .not-found-quick-links {
    margin-top: 25px;
    padding-top: 20px;
  }
}
@media (max-width: 480px) {
  .not-found-page h1 {
    font-size: 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .not-found-page h1,
  .not-found-page .not-found-subtitle,
  .not-found-page .not-found-btn-wrap,
  .not-found-page .not-found-quick-links,
  .not-found-page .not-found-contact {
    animation: none;
  }
  .not-found-page .btn-primary {
    transition: box-shadow 0.3s ease, background 1s ease-out;
  }
  .not-found-page .btn-primary:hover {
    transform: none;
  }
}
/* ---------------------------------------------
gateway
--------------------------------------------- */
.gateway-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 20px 60px;
}
.gateway-hero .gateway-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 1;
}
.gateway-hero .gateway-hero-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(5, 13, 28, 0.94) 0%, rgba(10, 25, 52, 0.88) 100%);
  z-index: 2;
}
.gateway-hero .gateway-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.gateway-hero .gateway-title {
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  overflow-wrap: break-word;
  flex: 0 0 auto;
}
.gateway-hero .gateway-subtitle {
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);
  color: #FFF7F5;
  max-width: 620px;
  min-width: 0;
  margin: 0 auto 32px;
  overflow-wrap: break-word;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .gateway-hero {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    padding: 90px 16px 40px;
  }
  .gateway-hero .gateway-hero-bg {
    background-attachment: scroll;
  }
  .gateway-hero .gateway-hero-content {
    height: auto;
  }
}
@media (min-width: 768px) {
  .gateway-hero:has(.gateway-bento > :nth-child(7)) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }
}

.gateway-lang-wrapper {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 50;
}
.gateway-lang-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gateway-lang-wrapper .language-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.3s ease;
}
.gateway-lang-wrapper .language-switcher.is-pending {
  opacity: 0.6;
}
.gateway-lang-wrapper .language-switcher .lang-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  border: none;
  background: transparent;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.gateway-lang-wrapper .language-switcher .lang-option:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.gateway-lang-wrapper .language-switcher .lang-option:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  bottom: 2px;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  -webkit-transition: all 0.25s ease 0s;
  -moz-transition: all 0.25s ease 0s;
  -o-transition: all 0.25s ease 0s;
  transition: all 0.25s ease 0s;
}
.gateway-lang-wrapper .language-switcher .lang-option:hover {
  color: #fff;
}
.gateway-lang-wrapper .language-switcher .lang-option:hover:after {
  transform: translateX(-50%) scaleX(1);
}
.gateway-lang-wrapper .language-switcher .lang-option.active {
  color: #fff;
}
.gateway-lang-wrapper .language-switcher .lang-option.active:after {
  transform: translateX(-50%) scaleX(0.55);
  opacity: 0.6;
}
.gateway-lang-wrapper .language-switcher .lang-option:disabled {
  cursor: default;
}
.gateway-lang-wrapper .language-switcher .lang-spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  opacity: 0.7;
  animation: lang-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gateway-lang-wrapper .language-switcher .lang-spinner {
    animation: none;
    opacity: 0.4;
  }
}
@media (max-width: 767px) {
  .gateway-lang-wrapper {
    top: 1.5rem;
    right: 1rem;
  }
}

.gateway-logo {
  display: block;
  margin-inline: auto;
  margin-bottom: 2rem;
  max-height: 60px;
  width: auto;
  flex: 0 0 auto;
}

.gateway-bento {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  width: 100%;
}
@media (min-width: 768px) {
  .gateway-bento {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .gateway-bento:has(> :nth-child(1):last-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
  .gateway-bento:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  .gateway-bento:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  .gateway-bento:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  .gateway-bento:has(> :nth-child(5):last-child), .gateway-bento:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gateway-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 220px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  opacity: 0;
  animation: gatewayFadeUp 0.6s ease forwards;
  animation-delay: var(--gateway-card-delay, 0s);
}
.gateway-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.24);
}
.gateway-card:hover .gateway-card-image {
  transform: scale(1.06);
}
.gateway-card .gateway-card-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  z-index: 1;
}
.gateway-card .gateway-card-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(5, 13, 28, 0.35) 0%, rgba(5, 13, 28, 0.85) 100%);
  z-index: 2;
}
.gateway-card .gateway-card-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
  padding: 28px;
  text-align: left;
}
.gateway-card .gateway-card-title {
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  color: #ffffff;
  overflow-wrap: break-word;
  margin-bottom: 8px;
}
.gateway-card .gateway-card-description {
  font-size: clamp(0.85rem, 0.75rem + 0.3vw, 1rem);
  color: #FFF7F5;
  line-height: 1.5;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .gateway-card {
    min-height: 180px;
  }
}
@media (min-width: 768px) {
  .gateway-card {
    height: auto;
    aspect-ratio: 16/9;
  }
}

@keyframes gatewayFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------------------------------------------
under construction (architecture / electrical placeholders)
--------------------------------------------- */
.wip-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(rgba(5, 15, 35, 0.6), rgba(5, 15, 35, 0.8)), url("/assets/images/photos/getaway/WIP.png") center/cover no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 100px 20px;
  text-align: center;
}
.wip-container .under-construction-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  min-width: 0;
}
.wip-container .under-construction-content .gateway-logo {
  margin-bottom: 2.5rem;
}
.wip-container .under-construction-content h1 {
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 1.75rem;
  overflow-wrap: break-word;
}
.wip-container .under-construction-content p {
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.05rem);
  font-weight: 300;
  color: #FFF7F5;
  line-height: 1.75;
  text-align: center;
  overflow-wrap: break-word;
  white-space: pre-line;
}
.wip-container .under-construction-content .btn-primary {
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transition: all 0.3s ease;
}
.wip-container .under-construction-content .btn-primary:hover {
  background: #ffffff;
  color: #050f23;
  border-color: #ffffff;
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  .wip-container {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 90px 16px;
    background-attachment: scroll;
  }
}