/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
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;
}

/* clear fix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.our-portfolio .grid-sizer,
.our-portfolio .grid-item {
  width: 50%;
}
.our-portfolio .grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.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: "Poppins", sans-serif;
  font-weight: 400;
  background-color: #fff;
  -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;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 300;
  color: #afafaf;
}

img {
  width: 100%;
  overflow: hidden;
}

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

::selection {
  background: #fe664e;
  color: #fff !important;
}

::-moz-selection {
  background: #fe664e;
  color: #fff !important;
}

@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

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

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #fe664e;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
}

.section-heading h4 em {
  font-style: normal;
  color: #fe664e;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #fe664e;
}

.border-first-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #fe664e !important;
  border: 1px solid #fe664e !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.5s;
}

.border-first-button a:hover {
  background-color: #fe664e;
  color: #fff !important;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.pre-header {
  background-color: #efefef;
  height: 60px;
  padding: 15px 0px;
}

.pre-header ul li {
  display: inline-block;
}

.pre-header ul.info li {
  margin-right: 45px;
}

.pre-header ul.info li a {
  color: #afafaf;
  font-size: 14px;
  transition: all 0.3s;
}

.pre-header ul.info li a:hover {
  color: #fe664e;
}

.pre-header ul.info li a i {
  font-size: 18px;
  margin-right: 8px;
}

.pre-header ul.social-media {
  text-align: right;
}

.pre-header ul.social-media li {
  margin-left: 5px;
}

.pre-header ul.social-media li a {
  background-color: #afafaf;
  color: #fff;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all 0.3s;
}

.pre-header ul.social-media li a:hover {
  background-color: #fe664e;
}

.background-header {
  background-color: #fff !important;
  height: 80px !important;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
  /* GPU acceleration to prevent flicker */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #fe664e;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fe664e;
  content: "";
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: #fff;
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 9999 !important;
  height: 100px;
  /* Optimized transition - only transition specific properties to prevent flicker */
  -webkit-transition: height 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  -moz-transition: height 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  -o-transition: height 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  transition: height 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  /* GPU acceleration to prevent paint flicker */
  will-change: height, box-shadow;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -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 {
  line-height: 100px;
  float: left;
  -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-header .main-nav .logo {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -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;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a,
.background-header .main-nav .nav li:last-child a {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -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;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fe664e !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fe664e !important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  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 {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a !important;
  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;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #fe664e !important;
  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 .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.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: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.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: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.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: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.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: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #fe664e;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  /* Hide Get In Touch button on tablet and mobile */
  .header-area .main-nav .nav li:last-child,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }

  .background-header .nav li a.active:after {
    display: none;
  }
}

/* Tablet only (768px - 992px) */
@media (min-width: 768px) and (max-width: 992px) {
  /* Hide nav-controls and all language controls on TABLET ONLY */
  .nav-controls,
  .nav-controls .header-controls,
  .nav-controls .language-switcher,
  .header-area .language-switcher,
  .header-area .header-controls,
  li.nav-controls {
    display: none !important;
    visibility: hidden !important;
  }

  /* Reduce nav spacing on tablet */
  .header-area .main-nav .nav li {
    padding-left: 6px;
    padding-right: 6px;
  }

  .header-area .main-nav .nav li a {
    font-size: 13px;
    letter-spacing: 0;
  }
}

@media (max-width: 767px) {
  .pre-header ul.info li:last-child {
    display: none;
  }
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  /* Remove active underline on mobile */
  .background-header .nav li a.active:after,
  .header-area .nav li a.active:after {
    display: none !important;
    content: none !important;
  }
  /* Reset active link positioning */
  .background-header .nav li a.active,
  .header-area .nav li a.active {
    position: static !important;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #fe664e !important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 15px;
  }

  /* Reduce header height when menu is open */
  .header-area.menu-open {
    height: 70px;
  }
  .header-area.menu-open .main-nav .logo {
    line-height: 70px;
  }
  .header-area.menu-open .main-nav .logo img {
    max-height: 45px;
    width: auto;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    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;
    margin-top: 0 !important;
    clear: both; /* Clear logo float */
  }
  .background-header .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
    text-align: center !important;
  }
  /* Ensure all nav li are identical */
  .header-area .main-nav .nav li,
  .header-area .main-nav .nav li:first-child,
  .header-area .main-nav .nav li:last-child {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  /* Adjust nav margin when menu is open */
  .header-area.menu-open .main-nav .nav,
  .header-area.menu-open.header-sticky .nav,
  .background-header.menu-open .nav {
    margin-top: 70px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
    text-align: center;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-indent: 0 !important;
    float: none !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #fe664e !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 {
    font-size: 12px;
    font-weight: 400;
  }
  .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: #3b566e;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #fe664e;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #fe664e;
  border-radius: 50%;
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: "";
  background-image: url(../images/slider-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 60px;
  width: 262px;
  height: 625px;
  z-index: 1;
}

.main-banner:before {
  content: "";
  background-image: url(../images/slider-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 60px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

.main-banner .left-content {
  margin-right: 15px;
}

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #fe664e;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 593px;
}

/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

#about {
  padding-top: 130px;
}

.about-left-image img {
  margin-right: 45px;
}

.about-right-content p {
  margin-top: 30px;
  margin-bottom: 45px;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #fe664e;
}

.second-skill-item .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item .progress .progress-bar {
  border-color: #f58b56;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 14px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
  display: block;
  max-width: 90%;
  margin: 0 auto;
  line-height: 1.3;
  word-wrap: break-word;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 130px;
  position: relative;
}

.services:after {
  content: "";
  background-image: url(../images/services-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services:before {
  content: "";
  background-image: url(../images/services-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

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

.services .icon {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.services .naccs .menu div h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
}

.services .icon img {
  margin-bottom: 10px;
  max-width: 60px;
  min-width: 60px;
}

.services .naccs .menu {
  text-align: center;
  margin-bottom: 30px;
}

.services .naccs .menu div {
  color: #2a2a2a;
  margin: 0px;
  width: 15%;
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services .naccs .menu div .thumb {
  display: inline-block;
  width: 100%;
  padding: 30px 0px;
  background-color: #fff;
}

.services .naccs .menu div.active {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.services ul.nacc {
  height: 100% !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 80px 120px 50px 120px;
}

.services ul.nacc li {
  width: 100%;
}

.services ul.nacc li .right-image img {
  max-width: 420px;
  float: right;
}

.services .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.services .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.services .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.services .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.services .left-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fe664e !important;
}

.services .left-text p {
  margin-bottom: 30px;
}

.nacc .ticks-list span {
  display: inline-block;
  opacity: 1;
  margin-right: 45px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
}

/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../images/quote-bg-v2.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #fe664e;
  font-size: 15px;
  color: #fff;
}

/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 130px;
  overflow: hidden;
  position: relative;
}

.our-portfolio:before {
  content: "";
  background-image: url(../images/portfolio-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 414px;
  height: 861px;
  z-index: 1;
}

.our-portfolio:after {
  content: "";
  background-image: url(../images/portfolio-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 677px;
  height: 759px;
  z-index: 1;
}

.our-portfolio .section-heading {
  margin-bottom: 80px;
}

.our-portfolio .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  position: relative;
  z-index: 2;
}

.our-portfolio .item {
  position: relative;
  z-index: 222;
}

/* Team cards equal height - parent row must be flex */
.nacc li .thumb > .row,
.services ul.nacc li .row {
  display: flex;
  flex-wrap: wrap;
}

.nacc li .thumb > .row > .col-lg-3,
.services ul.nacc li .row > .col-lg-3 {
  display: flex;
}

.portfolio-item {
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin: 15px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  width: 100%;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item:hover .down-content h4,
.portfolio-item:hover .down-content span {
  color: #fe664e;
}

.portfolio-item .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
  overflow: hidden;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Custom image position classes - add to img tag */
.portfolio-item .thumb img.pos-top {
  object-position: center top;
}
.portfolio-item .thumb img.pos-center {
  object-position: center center;
}
.portfolio-item .thumb img.pos-bottom {
  object-position: center bottom;
}
.portfolio-item .thumb img.pos-1 {
  object-position: center 1%;
}
.portfolio-item .thumb img.pos-2 {
  object-position: center 2%;
}
.portfolio-item .thumb img.pos-3 {
  object-position: center 3%;
}
.portfolio-item .thumb img.pos-4 {
  object-position: center 4%;
}
.portfolio-item .thumb img.pos-5 {
  object-position: center 5%;
}
.portfolio-item .thumb img.pos-10 {
  object-position: center 10%;
}
.portfolio-item .thumb img.pos-20 {
  object-position: center 20%;
}
.portfolio-item .thumb img.pos-30 {
  object-position: center 30%;
}
.portfolio-item .thumb img.pos-40 {
  object-position: center 40%;
}
.portfolio-item .thumb img.pos-50 {
  object-position: center 50%;
}

.portfolio-item .down-content {
  background-color: #fff;
  text-align: center;
  padding: 18px 10px;
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.portfolio-item .down-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 8px;
  transition: all 0.3s;
  min-height: 22px;
}

.portfolio-item .down-content span {
  font-size: 14px;
  color: #afafaf;
  transition: all 0.3s;
  min-height: 18px;
}

.our-portfolio .owl-nav {
  display: inline-block !important;
  position: absolute;
  top: -125px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  font-size: 30px;
  background-color: #eee;
  border-radius: 50%;
  color: #fff;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #fff;
  background-color: #fe664e;
}

/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.blog:before {
  content: "";
  background-image: url(../images/blog-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 961px;
  height: 1020px;
  z-index: 0;
}

.blog {
  position: relative;
  padding-top: 130px;
}

.blog .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.blog .section-heading .line-dec {
  margin: 0 auto;
}

.blog-post {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
}

.show-up {
  position: relative;
  z-index: 200;
}

.blog-post .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 23px;
}

.blog-post .down-content {
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
  background-color: #fff;
  padding: 30px;
}

.blog-post .down-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #fe664e;
  border-radius: 18px;
  display: inline-block;
}

.blog-post .down-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.blog-post .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

.blog-post .down-content p {
  margin-bottom: 30px;
}

.blog-post .down-content span.author {
  font-size: 15px;
  color: #2a2a2a;
}

.blog-post .down-content span.author img {
  max-width: 56px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-post .down-content .border-first-button {
  display: inline-block;
  float: right;
}

.blog-posts {
  margin-left: 30px;
}

.post-item {
  margin-bottom: 62px;
}

.last-post-item {
  margin-bottom: 0px;
}

.post-item .thumb {
  display: inline-block;
  float: left;
  margin-right: 30px;
}

.post-item .thumb img {
  border-radius: 23px;
  display: inline-block;
}

.post-item .right-content {
  padding-top: 20px;
}

.post-item .right-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #fe664e;
  border-radius: 18px;
  display: inline-block;
}

.post-item .right-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.post-item .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}
/* tambahan khusus carousel di thumb blog-post */
.blog-post .thumb .carousel,
.blog-post .thumb .carousel-inner,
.blog-post .thumb .carousel-item {
  width: 100%;
}

.blog-post .thumb .carousel-item img {
  width: 100%;
  height: auto;
  display: block;

  /* tetap ikut radius yang sudah kamu set */
  border-top-right-radius: 20px;
  border-top-left-radius: 23px;
}
/* animasi teks */
.fade-text {
  transition: all 0.4s ease;
}

.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* tombol carousel lebih clean & modern */
.custom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 32px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  z-index: 10;
  transition: all 0.3s ease;
}

.custom-nav:hover {
  background: #fe664e;
}

.carousel-control-prev.custom-nav {
  left: 15px;
}

.carousel-control-next.custom-nav {
  right: 15px;
}
/* ===== Carousel Blog Post (Tambahan) ===== */
.blog-post .thumb .carousel,
.blog-post .thumb .carousel-inner,
.blog-post .thumb .carousel-item {
  width: 100%;
}

.blog-post .thumb .carousel-item img {
  width: 100%;
  height: auto;
  display: block;

  /* tetap ikuti radius existing */
  border-top-right-radius: 20px;
  border-top-left-radius: 23px;
}

/* Animasi teks */
.fade-text {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.fade-text.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.fade-text.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Tombol navigasi custom */
.custom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 32px;
  line-height: 46px;
  text-align: center;
  z-index: 10;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  user-select: none;
}

.custom-nav:hover {
  background: #fe664e;
  transform: translateY(-50%) scale(1.05);
}

.carousel-control-prev.custom-nav {
  left: 15px;
}
.carousel-control-next.custom-nav {
  right: 15px;
}

/* Optional: tombol muncul saat hover gambar */
.blog-post .thumb .custom-nav {
  opacity: 0.85;
}
.blog-post .thumb:hover .custom-nav {
  opacity: 1;
}
/* row atas: category + detail + date */
.meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* tombol detail */
.detail-btn {
  border: 0;
  padding: 8px 12px;
  border-radius: 18px;
  background: #2a2a2a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s ease;
}

.detail-btn:hover {
  background: #fe664e;
  color: #fff;
}

/* biar date tetap di kanan */
.meta-row .date {
  margin-left: auto;
}

/* ===== Modal ===== */
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.detail-modal.open {
  display: block;
}

.detail-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.detail-modal__content {
  position: relative;
  max-width: 900px;
  width: calc(100% - 32px);
  margin: 80px auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: modalIn 0.25s ease;
}

@keyframes modalIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.detail-modal__close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  font-size: 22px;
  cursor: pointer;
}

.detail-modal__body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.detail-modal__body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 320px;
}

.detail-modal__text {
  padding: 22px;
}

.detail-modal__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.detail-badge {
  background: #fe664e;
  color: #fff;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
}

.detail-date {
  color: #afafaf;
  font-size: 14px;
  margin-left: auto;
}

.detail-modal__text h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: #2a2a2a;
}

.detail-modal__text p {
  margin: 0;
  color: #5a5a5a;
  line-height: 1.6;
}

/* responsif */
@media (max-width: 768px) {
  .detail-modal__body {
    grid-template-columns: 1fr;
  }
  .detail-modal__content {
    margin: 60px auto;
  }
}
/* ===== Carousel Blog Post (Tambahan) ===== */
.blog-post .thumb .carousel,
.blog-post .thumb .carousel-inner,
.blog-post .thumb .carousel-item {
  width: 100%;
}

.blog-post .thumb .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  border-top-right-radius: 20px;
  border-top-left-radius: 23px;
}

/* meta row: category + detail + date */
.meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* tombol detail */
.detail-btn {
  border: 0;
  padding: 8px 12px;
  border-radius: 18px;
  background: #2a2a2a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s ease;
}

.detail-btn:hover {
  background: #fe664e;
}

/* pastikan date tetap di kanan (karena CSS kamu pakai float) */
.meta-row .date {
  margin-left: auto;
}

/* animasi teks */
.fade-text {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.fade-text.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.fade-text.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* tombol carousel custom */
.custom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 32px;
  line-height: 46px;
  text-align: center;
  z-index: 10;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  user-select: none;
}

.custom-nav:hover {
  background: #fe664e;
  transform: translateY(-50%) scale(1.05);
}

.carousel-control-prev.custom-nav {
  left: 15px;
}
.carousel-control-next.custom-nav {
  right: 15px;
}

/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding-top: 130px;
}

.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

form#contact:before {
  background-image: url(../images/contact-top-right-v2.png);
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  height: 78px;
  background-repeat: no-repeat;
  content: "";
  z-index: 1;
}

.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}

form#contact:after {
  background-image: url(../images/contact-bottom-right-v2.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  height: 106px;
  background-repeat: no-repeat;
  content: "";
  z-index: 1;
}

form#contact {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form {
  padding: 80px 60px 80px 30px;
}

.fill-form .info-post {
  margin-bottom: 20px;
}

.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 23px;
  padding: 25px 15px;
}

.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}

.fill-form .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  transition: all 0.3s;
}

.fill-form .icon:hover a {
  color: #fe664e;
}

form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #fe664e;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #fe664e;
  transition: all 0.3s;
  outline: none;
}

form#contact button:hover {
  background-color: #fe664e !important;
  color: #fff !important;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer-bg-v2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
}

footer p {
  text-align: center;
  margin: 20px 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all 0.5s;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 226px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div {
    font-size: 0px;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}

/* ===== TIM-UYE Services List (Tambahan) ===== */
.timuye-service-card {
  background: #fff;
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.08);
  padding: 28px 22px;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.timuye-service-card:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 140px;
  height: 140px;
  background: rgba(254, 102, 78, 0.1);
  border-radius: 50%;
}

.timuye-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 18px 35px rgba(0, 0, 0, 0.1);
}

.timuye-service-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 18px 0 12px;
  line-height: 1.4;
}

.timuye-service-card p {
  color: #5a5a5a;
  margin-bottom: 14px;
  line-height: 1.7;
  font-size: 14px;
}

.icon-bubble {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #fe664e;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 10px 20px rgba(254, 102, 78, 0.25);
}

.icon-bubble i {
  color: #fff;
  font-size: 22px;
}

.service-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2a2a2a;
  font-size: 13px;
  margin-bottom: 10px;
}

.service-points li i {
  color: #fe664e;
}

.timuye-service-cta {
  margin-top: 35px;
  background: linear-gradient(
    135deg,
    rgba(254, 102, 78, 0.12),
    rgba(255, 255, 255, 1)
  );
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.timuye-service-cta h4 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
}

.timuye-service-cta p {
  margin: 0;
  color: #5a5a5a;
}

@media (max-width: 991px) {
  .timuye-service-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* FIX: pastikan konten services di atas background dekor */
#services_list {
  position: relative;
}

#services_list::before,
#services_list::after {
  z-index: -1; /* dorong dekor ke belakang */
  pointer-events: none;
}

#services_list .container {
  position: relative;
  z-index: 2; /* konten jadi di atas */
}

/* ========================================
   RESPONSIVE ENHANCEMENT - TIM-UYE
   Added: 2025-12-15
   ======================================== */

/* --- Tablet (768px - 991px) --- */
@media (max-width: 991px) and (min-width: 768px) {
  /* Banner: smaller heading, centered layout */
  .main-banner .left-content h2 {
    font-size: 36px;
  }
  .main-banner .right-image img {
    max-width: 400px;
    margin: 0 auto;
  }

  /* Service cards: 2 columns */
  #services_list .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Team grid: 2 columns */
  .nacc .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 20px;
  }

  /* Skill progress circles smaller */
  .skill-item .progress {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
  .progress .progress-value {
    font-size: 28px;
  }

  /* Contact: stack map and form */
  form#contact .col-lg-5,
  form#contact .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  form#contact #map iframe {
    height: 300px;
    border-radius: 23px 23px 0 0;
    border-bottom-left-radius: 0;
  }
  .fill-form {
    padding: 40px 30px;
  }

  /* Info icons: 3 columns still but smaller */
  .fill-form .icon a {
    font-size: 13px;
  }
}

/* --- Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
  /* Banner adjustments */
  .main-banner {
    padding: 160px 0px 60px 0px;
  }
  .main-banner .left-content h2 {
    font-size: 28px;
    line-height: 1.3;
  }
  .main-banner .left-content h6 {
    font-size: 16px;
  }
  .main-banner .left-content p {
    font-size: 14px;
    margin-right: 0;
  }
  .main-banner .right-image img {
    max-width: 100%;
  }

  /* About section */
  #about {
    padding-top: 80px;
  }

  /* Section headings */
  .section-heading h4 {
    font-size: 24px;
  }
  .section-heading h6 {
    font-size: 13px;
  }
  .section-heading p {
    font-size: 14px;
    padding: 0 10px;
  }

  /* Services section */
  .services {
    padding-top: 80px;
  }
  .services .section-heading {
    margin-bottom: 40px;
  }

  /* Service cards: full width, less margin */
  .timuye-service-card {
    margin-bottom: 20px;
  }
  #services_list .col-lg-3.col-md-6 {
    margin-bottom: 15px;
  }

  /* Team grid: 2 columns mobile */
  .nacc .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 8px;
    display: flex;
  }
  .nacc .row {
    display: flex;
    flex-wrap: wrap;
  }
  .portfolio-item {
    margin: 8px;
    width: 100%;
    height: 100%;
    min-height: 280px;
  }
  .portfolio-item .thumb img {
    height: 140px;
  }
  .portfolio-item .down-content {
    padding: 12px 8px;
    flex-grow: 1;
    min-height: 120px;
  }
  .portfolio-item .down-content h4 {
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
    margin-bottom: 5px;
  }
  .portfolio-item .down-content span {
    font-size: 13px;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    color: #666;
  }
  .portfolio-item .thumb img {
    height: auto;
    object-fit: cover;
  }

  /* Skill circles compact */
  .skill-item .progress {
    width: 110px;
    height: 110px;
    line-height: 110px;
  }
  .progress .progress-value {
    font-size: 20px;
    flex-direction: column;
    padding: 10px;
  }
  .progress .progress-value div {
    width: 100%;
    text-align: center;
  }
  .progress .progress-value span {
    font-size: 10px;
    line-height: 1.2;
    display: block;
    max-width: 85%;
    margin: 0 auto;
    word-wrap: break-word;
  }
  .about-right-content .row .col-lg-4.col-sm-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  /* Blog/Portfolio section */
  .blog {
    padding-top: 80px;
  }
  .blog .section-heading {
    margin-bottom: 40px;
  }
  .blog-posts {
    margin-top: 20px;
  }
  .post-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .post-item .thumb {
    float: none;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .post-item .thumb img {
    max-width: 180px !important;
  }
  .post-item .right-content {
    padding-top: 0;
  }
  .post-item .right-content h4 {
    font-size: 16px;
    margin-top: 10px;
  }
  .post-item .right-content span.category,
  .post-item .right-content span.date {
    float: none;
    display: inline-block;
    margin-bottom: 5px;
  }

  /* Contact section */
  .contact-us {
    padding-top: 80px;
  }
  .contact-us .section-heading {
    margin-bottom: 40px;
  }
  form#contact .col-lg-5,
  form#contact .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  form#contact #map iframe {
    height: 250px;
    border-radius: 23px 23px 0 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .fill-form {
    padding: 30px 20px;
  }
  .fill-form .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
  .fill-form .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .fill-form .icon {
    padding: 15px 10px;
  }
  .fill-form .icon a {
    font-size: 13px;
    word-break: break-all;
  }
  .fill-form .icon img {
    max-width: 40px;
  }

  /* Contact decoration hidden on mobile */
  .contact-dec img {
    display: none;
  }
  form#contact:before,
  form#contact:after {
    display: none;
  }

  /* Footer */
  footer {
    margin-top: 60px;
  }
  footer p {
    font-size: 13px;
    padding: 0 15px;
  }

  /* CTA banner */
  .timuye-service-cta {
    padding: 20px 16px;
  }
  .timuye-service-cta h4 {
    font-size: 16px;
  }
  .timuye-service-cta p {
    font-size: 13px;
  }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
  .main-banner {
    padding: 140px 0px 50px 0px;
  }
  .main-banner .left-content h2 {
    font-size: 22px;
  }
  .main-banner .left-content p {
    font-size: 13px;
    line-height: 24px;
  }

  .section-heading h4 {
    font-size: 20px;
  }
  .section-heading h6 {
    font-size: 12px;
  }

  /* Team: still 2 columns but tighter */
  .nacc .col-lg-3 {
    padding: 5px;
  }
  .portfolio-item .down-content h4 {
    font-size: 12px;
  }
  .portfolio-item .down-content span {
    font-size: 14px;
  }
  .portfolio-item .down-content {
    padding: 12px 0px;
  }

  /* Skill circles extra compact */
  .about-right-content .row .col-lg-4.col-sm-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 5px;
  }
  .skill-item .progress {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  .progress .progress-value {
    font-size: 18px;
    line-height: 18px;
  }
  .progress .progress-value span {
    font-size: 10px;
  }

  /* Service CTA button touch-friendly */
  .border-first-button a {
    padding: 12px 20px !important;
    font-size: 14px !important;
    display: block;
    text-align: center;
  }

  /* Blog post card */
  .blog-post .down-content {
    padding: 20px 15px;
  }
  .blog-post .down-content h4 {
    font-size: 16px;
    line-height: 24px;
  }
  .meta-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .meta-row .date {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }

  /* Contact inputs stacked */
  form#contact input,
  form#contact textarea {
    margin-top: 15px;
  }
  form#contact button {
    margin-top: 20px;
    padding: 14px 20px;
  }

  /* Post item even smaller */
  .post-item .thumb img {
    max-width: 140px !important;
  }
  .post-item .right-content h4 {
    font-size: 14px;
  }
}

/* --- Extra Small (max-width: 360px) --- */
@media (max-width: 360px) {
  .main-banner .left-content h2 {
    font-size: 20px;
  }

  .section-heading h4 {
    font-size: 18px;
  }

  /* Single column team on very small screens */
  .nacc .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .skill-item .progress {
    width: 70px;
    height: 70px;
    line-height: 70px;
  }
  .progress .progress-value {
    font-size: 16px;
  }
}

/* --- Smooth Scroll Behavior --- */
html {
  scroll-behavior: smooth;
}

/* --- CSS Custom Properties (for Dark Mode) --- */
:root {
  --bg-primary: #fff;
  --bg-secondary: #f5f5f5;
  --bg-card: #fff;
  --text-primary: #2a2a2a;
  --text-secondary: #afafaf;
  --text-muted: #5a5a5a;
  --accent-color: #fe664e;
  --accent-hover: #e55a44;
  --border-color: #eee;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --header-bg: #fff;
  --nav-link: #2a2a2a;
  --transition-speed: 0.3s;
}

/* --- Dark Mode Styles --- */
html.dark-mode {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-card: #1f2940;
  --text-primary: #eaeaea;
  --text-secondary: #a0a0a0;
  --text-muted: #b0b0b0;
  --accent-color: #fe664e;
  --accent-hover: #ff8066;
  --border-color: #2a3a5a;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --header-bg: #1a1a2e;
  --nav-link: #eaeaea;
}

html.dark-mode body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

html.dark-mode .header-area,
html.dark-mode .background-header {
  background-color: var(--header-bg) !important;
}

html.dark-mode .header-area .main-nav .nav li a {
  color: var(--nav-link);
}

html.dark-mode .main-banner {
  background: linear-gradient(
    135deg,
    var(--bg-secondary) 0%,
    var(--bg-primary) 100%
  );
}

html.dark-mode .main-banner .left-content h2,
html.dark-mode .main-banner .left-content h6 {
  color: var(--text-primary);
}

html.dark-mode .main-banner .left-content h6 {
  color: var(--accent-color);
}

html.dark-mode .section-heading h4,
html.dark-mode .section-heading h6 {
  color: var(--text-primary);
}

html.dark-mode .section-heading h6 {
  color: var(--accent-color);
}

html.dark-mode p {
  color: var(--text-secondary);
}

html.dark-mode .about-right-content,
html.dark-mode .services,
html.dark-mode .blog,
html.dark-mode .contact-us {
  background-color: var(--bg-primary);
}

html.dark-mode .timuye-service-card,
html.dark-mode .blog-post,
html.dark-mode .portfolio-item,
html.dark-mode form#contact {
  background-color: var(--bg-card);
  box-shadow: 0px 0px 15px var(--shadow-color);
}

html.dark-mode .timuye-service-card h4,
html.dark-mode .blog-post .down-content h4,
html.dark-mode .portfolio-item .down-content h4 {
  color: var(--text-primary);
}

html.dark-mode .portfolio-item .down-content {
  background-color: var(--bg-card);
}

html.dark-mode .services ul.nacc li.active {
  background-color: var(--bg-card);
}

html.dark-mode .progress:after {
  border-color: var(--border-color);
}

html.dark-mode .progress .progress-value {
  color: var(--text-primary);
}

html.dark-mode .fill-form {
  background-color: var(--bg-card);
}

html.dark-mode .fill-form .icon {
  background-color: var(--bg-secondary);
}

html.dark-mode .fill-form .icon a {
  color: var(--text-primary);
}

html.dark-mode form#contact input,
html.dark-mode form#contact textarea {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

html.dark-mode form#contact input::placeholder,
html.dark-mode form#contact textarea::placeholder {
  color: var(--text-secondary);
}

html.dark-mode .header-area .main-nav .nav li a:hover,
html.dark-mode .header-area .main-nav .nav li a.active {
  color: var(--accent-color) !important;
}

html.dark-mode .timuye-service-cta {
  background: linear-gradient(135deg, rgba(254, 102, 78, 0.2), var(--bg-card));
}

html.dark-mode footer {
  background-color: var(--bg-secondary);
}

/* Mobile menu dark mode */
html.dark-mode .header-area .main-nav .nav li {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

html.dark-mode .header-area .main-nav .nav li a {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

html.dark-mode .header-area .main-nav .menu-trigger span,
html.dark-mode .header-area .main-nav .menu-trigger span:before,
html.dark-mode .header-area .main-nav .menu-trigger span:after {
  background-color: var(--text-primary);
}

/* --- Dark Mode Toggle Button --- */
.dark-mode-toggle {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 15px;
}

.dark-mode-toggle input {
  display: none;
}

.dark-mode-toggle .toggle-slider {
  width: 50px;
  height: 26px;
  background-color: #ddd;
  border-radius: 26px;
  position: relative;
  transition: background-color 0.3s ease;
}

.dark-mode-toggle .toggle-slider:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dark-mode-toggle input:checked + .toggle-slider {
  background-color: var(--accent-color);
}

.dark-mode-toggle input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.dark-mode-toggle .toggle-icon {
  position: absolute;
  font-size: 12px;
}

.dark-mode-toggle .icon-sun {
  left: 6px;
  top: 6px;
  color: #f39c12;
}

.dark-mode-toggle .icon-moon {
  right: 6px;
  top: 6px;
  color: #fff;
  opacity: 0.7;
}

/* --- Language Switcher --- */
.language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 15px;
}

.language-switcher .lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.language-switcher .lang-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.language-switcher .lang-btn i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.language-switcher.open .lang-btn i {
  transform: rotate(180deg);
}

.language-switcher .lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: var(--bg-card);
  border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow-color);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  min-width: 120px;
}

.language-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-switcher .lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: background-color 0.2s ease;
}

.language-switcher .lang-option:hover {
  background-color: var(--bg-secondary);
}

.language-switcher .lang-option.active {
  background-color: var(--accent-color);
  color: #fff;
}

.language-switcher .lang-option img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

/* --- Back to Top Button --- */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(254, 102, 78, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(254, 102, 78, 0.5);
}

/* --- Scroll Animations --- */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate.delay-1 {
  transition-delay: 0.1s;
}
.scroll-animate.delay-2 {
  transition-delay: 0.2s;
}
.scroll-animate.delay-3 {
  transition-delay: 0.3s;
}
.scroll-animate.delay-4 {
  transition-delay: 0.4s;
}

/* --- Testimonials Section --- */
.testimonials-section {
  padding: 100px 0;
  background-color: var(--bg-secondary);
  position: relative;
}

.testimonial-card {
  background-color: var(--bg-card);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px var(--shadow-color);
  text-align: center;
  margin: 15px;
}

.testimonial-card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  object-fit: cover;
  border: 3px solid var(--accent-color);
}

.testimonial-card .quote {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-card .author {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.testimonial-card .position {
  font-size: 14px;
  color: var(--text-secondary);
}

.testimonial-card .stars {
  color: #f1c40f;
  margin-bottom: 15px;
}

/* Header controls wrapper */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 991px) {
  .header-controls {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
  }

  .language-switcher .lang-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .dark-mode-toggle .toggle-slider {
    width: 40px;
    height: 22px;
  }

  .dark-mode-toggle .toggle-slider:before {
    width: 16px;
    height: 16px;
  }

  .dark-mode-toggle input:checked + .toggle-slider:before {
    transform: translateX(18px);
  }
}

@media (max-width: 480px) {
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
    font-size: 18px;
  }

  .header-controls {
    right: 70px;
  }

  .language-switcher .lang-dropdown {
    right: -50px;
  }
}

/* Nav Controls (Language + Dark Mode in Nav) */
.nav-controls {
  display: flex !important;
  align-items: center;
}

.nav-controls .header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.nav-controls .language-switcher {
  margin-left: 0;
}

.nav-controls .dark-mode-toggle {
  margin-left: 5px;
}

/* Hide nav-controls in mobile menu */
@media (max-width: 767px) {
  /* Fix header controls position on mobile - move next to hamburger */
  .header-area .header-controls {
    position: absolute;
    right: 75px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }

  /* Nav controls styling in mobile dropdown */
  .nav-controls {
    display: flex !important;
    justify-content: center;
    padding: 15px 0 120px !important; /* Extra padding for dropdown */
    background: #f7f7f7 !important;
    border-bottom: 1px solid #e7e7e7;
    overflow: visible !important;
    position: relative;
    z-index: 1000;
    min-height: 80px;
  }

  .nav-controls .header-controls {
    position: static;
    transform: none;
    justify-content: center;
    overflow: visible;
  }

  /* Fix language dropdown on mobile - make it visible above menu */
  .nav-controls .language-switcher {
    position: relative;
    overflow: visible;
  }

  .nav-controls .language-switcher .lang-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    z-index: 9999;
    min-width: 100px;
  }
}

/* Desktop styling */
@media (min-width: 768px) {
  .nav-controls {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ========================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   ======================================== */

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
  /* Banner Section */
  .main-banner {
    padding: 140px 0 80px;
  }

  .main-banner .left-content h2 {
    font-size: 36px;
    line-height: 1.3;
  }

  .main-banner .left-content h6 {
    font-size: 16px;
  }

  .main-banner .left-content p {
    margin-right: 0;
    font-size: 14px;
  }

  .main-banner .right-image {
    margin-top: 40px;
    text-align: center;
  }

  .main-banner .right-image img {
    max-width: 100%;
  }

  /* Section Headings */
  .section-heading h4 {
    font-size: 28px;
  }

  .section-heading h6 {
    font-size: 14px;
  }

  /* About Section */
  #about {
    padding-top: 80px;
  }

  .about-left-image {
    margin-bottom: 30px;
  }

  .about-left-image img {
    margin-right: 0;
  }

  .skills-content {
    padding: 80px 15px 40px;
  }

  .progress {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }

  .progress .progress-value {
    font-size: 28px;
  }

  .progress .progress-value span {
    font-size: 14px;
  }

  /* Services Grid */
  .timuye-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .timuye-service-card {
    padding: 25px 15px !important;
  }

  .timuye-service-card .service-icon {
    width: 55px !important;
    height: 55px !important;
    font-size: 22px !important;
  }

  .timuye-service-card h5 {
    font-size: 16px !important;
  }

  .timuye-service-card p {
    font-size: 13px !important;
  }

  /* Team Section */
  .team-member {
    margin-bottom: 30px;
  }

  .team-item {
    padding: 20px;
  }

  /* Portfolio Grid */
  .our-portfolio .grid-item {
    width: 50%;
  }

  .portfolio-item .hover-effect h4 {
    font-size: 18px;
  }

  /* Contact Section */
  .contact-us {
    padding: 60px 0;
  }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
  /* Banner Section */
  .main-banner {
    padding: 120px 0 60px;
  }

  .main-banner .left-content h2 {
    font-size: 28px;
    line-height: 1.35;
  }

  .main-banner .left-content h6 {
    font-size: 14px;
  }

  .main-banner .left-content p {
    font-size: 13px;
    line-height: 1.7;
  }

  .main-banner .border-first-button a {
    padding: 10px 18px !important;
    font-size: 13px;
  }

  /* Section Headings */
  .section-heading h4 {
    font-size: 24px;
    line-height: 1.35;
  }

  .section-heading h6 {
    font-size: 13px;
  }

  .page-section {
    margin-top: 80px;
  }

  /* About Section */
  #about {
    padding-top: 60px;
  }

  .skills-content {
    padding: 60px 10px 30px;
  }

  .skill-item {
    margin-bottom: 30px;
  }

  .progress {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }

  .progress .progress-value {
    font-size: 24px;
  }

  .progress .progress-value span {
    font-size: 12px;
  }

  /* Services Grid - Stack to single column but keep vertical card */
  .timuye-services-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .timuye-service-card {
    padding: 25px 20px !important;
    text-align: center !important;
  }

  .timuye-service-card .service-icon {
    width: 55px !important;
    height: 55px !important;
    font-size: 22px !important;
    margin: 0 auto 15px !important;
  }

  .timuye-service-card h5 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .timuye-service-card p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Services CTA */
  .timuye-service-cta {
    padding: 30px 20px !important;
    text-align: center;
  }

  .timuye-service-cta h4 {
    font-size: 20px !important;
  }

  .timuye-service-cta p {
    font-size: 13px !important;
  }

  /* Team Section */
  .team-item img {
    max-width: 150px;
  }

  .team-item h4 {
    font-size: 18px;
  }

  .team-item span {
    font-size: 13px;
  }

  /* Portfolio Grid - Stack to single column */
  .our-portfolio .grid-item,
  .our-portfolio .grid-sizer {
    width: 100%;
  }

  .portfolio-item {
    margin-bottom: 20px;
  }

  .portfolio-item img {
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
  }

  .portfolio-item .hover-effect {
    padding: 15px;
  }

  .portfolio-item .hover-effect h4 {
    font-size: 16px;
  }

  /* Contact Form */
  .contact-us input,
  .contact-us textarea {
    font-size: 14px;
    padding: 12px 20px;
  }

  .contact-us button {
    font-size: 14px;
    padding: 12px 25px;
  }

  /* Footer */
  footer {
    padding: 30px 0;
  }

  footer p {
    font-size: 13px;
  }
}

/* Extra Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  /* Banner */
  .main-banner {
    padding: 110px 0 50px;
  }

  .main-banner .left-content h2 {
    font-size: 24px;
  }

  .main-banner .left-content h6 {
    font-size: 13px;
  }

  /* Section Headings */
  .section-heading h4 {
    font-size: 22px;
  }

  .section-heading h6 {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .page-section {
    margin-top: 60px;
  }

  /* Skills */
  .progress {
    width: 85px;
    height: 85px;
    line-height: 85px;
  }

  .progress .progress-value {
    font-size: 20px;
  }

  .progress .progress-value span {
    font-size: 11px;
  }

  /* Service Cards */
  .timuye-service-card {
    padding: 15px 12px !important;
    gap: 12px !important;
  }

  .timuye-service-card .service-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  .timuye-service-card h5 {
    font-size: 14px !important;
  }

  .timuye-service-card p {
    font-size: 11px !important;
  }

  /* Contact */
  .contact-us input,
  .contact-us textarea {
    padding: 10px 15px;
    font-size: 13px;
  }
}

/* Extra Extra Small (max-width: 360px) */
@media (max-width: 360px) {
  .main-banner {
    padding: 100px 0 40px;
  }

  .main-banner .left-content h2 {
    font-size: 22px;
  }

  .section-heading h4 {
    font-size: 20px;
  }

  .progress {
    width: 75px;
    height: 75px;
    line-height: 75px;
  }

  .progress .progress-value {
    font-size: 18px;
  }

  .timuye-service-card .service-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
  }
}

/* ========================================
   RESPONSIVE IMAGE FIXES
   Prevent images from stretching/squashing
   ======================================== */

/* Global image responsive rules */
img {
  max-width: 100%;
  height: auto;
}

/* Hero/Banner Image (slider-dec) */
.main-banner .right-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-banner .right-image img {
  max-width: 100% !important;
  height: auto !important;
  width: auto;
  object-fit: contain;
  display: block;
}

/* About Section Image (about-dec-v2) */
.about-left-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-left-image img {
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Portfolio/Carousel Images */
.carousel-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
}

/* Blog Post Thumbnail Images */
.post-item .thumb img {
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
}

/* Team Member Images */
.team-item img,
.team-member img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
}

/* Tablet Image Adjustments */
@media (max-width: 768px) {
  .main-banner .right-image {
    width: 100%;
    margin-top: 40px;
    padding: 0 20px;
  }

  .main-banner .right-image img {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
  }

  .about-left-image {
    width: 100%;
    margin-bottom: 30px;
    padding: 0 20px;
  }

  .about-left-image img {
    width: 100%;
    max-width: 350px;
  }

  .post-item .thumb img {
    max-width: 180px;
  }

  .carousel-item img {
    aspect-ratio: 4/3;
  }
}

/* Mobile Image Adjustments */
@media (max-width: 576px) {
  .main-banner .right-image img {
    max-width: 280px !important;
  }

  .about-left-image img {
    max-width: 280px;
  }

  .post-item {
    flex-direction: column !important;
    text-align: center;
  }

  .post-item .thumb {
    margin-bottom: 15px;
    margin-right: 0 !important;
  }

  .post-item .thumb img {
    max-width: 150px;
    margin: 0 auto;
  }

  .carousel-item img {
    aspect-ratio: 4/3;
    border-radius: 8px;
  }

  .team-item img,
  .team-member img {
    width: 120px !important;
    height: 120px !important;
  }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
  .main-banner .right-image img {
    max-width: 220px !important;
  }

  .about-left-image img {
    max-width: 220px;
  }

  .post-item .thumb img {
    max-width: 120px;
  }

  .team-item img,
  .team-member img {
    width: 100px !important;
    height: 100px !important;
  }
}

/* Super Small Mobile */
@media (max-width: 360px) {
  .main-banner .right-image img {
    max-width: 180px !important;
  }

  .about-left-image img {
    max-width: 180px;
  }

  .carousel-item img {
    aspect-ratio: 1/1;
  }
}