/*-------------------------------------------------------------------------------
 1. Global
-------------------------------------------------------------------------------*/

@import url("bootstrap.css");
@import url("font-awesome.min.css");
@import url("ionicons.min.css");
@import url("jquery.fullPage.css");
@import url("jquery.pagepiling.css");
@import url("owl.carousel.css");
@import url('linearicons.css');

html {
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll; /* Add this line */
}

body {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 2.1428;
  color: #7e7e7e;
  background: #272727;
  -webkit-overflow-scrolling: touch;
}

.body-fullpage {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #f3ca2f;
}

::selection {
  background-color: #f3ca2f;
  color: #fff;
}

-webkit-::selection {
  background-color: #f3ca2f;
  color: #fff;
}

::-moz-selection {
  background-color: #f3ca2f;
  color: #fff;
}

/* 1.2 Typography */

@font-face {
  font-family: "Poppins";
  src:
    url("../fonts/poppins-regular-webfont.woff2") format("woff2"),
    url("../fonts/poppins-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

h1,
.h1 {
  font-weight: 700;
  font-size: 3.428rem;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.025em;
  margin: 0.5em 0;
}

h2,
.h2 {
  font-weight: 600;
  font-size: 2.571rem;
  line-height: 1.166;
  color: #fff;
  letter-spacing: 0;
  margin: 2.6rem 0;
}

h3,
.h3 {
  font-weight: 600;
  font-size: 2.142rem;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: #fff;
  margin: 2.6rem 0;
}

h4,
.h4 {
  font-weight: 600;
  font-size: 1.714rem;
  line-height: 1.25;
  letter-spacing: 0.025em;
  color: #fff;
  margin: 2.6rem 0;
}

h5,
.h5 {
  font-weight: 600;
  font-size: 1.571rem;
  line-height: 1.1;
  letter-spacing: 0;
  color: #fff;
  margin: 2.6rem 0;
}

h6,
.h6 {
  font-weight: 600;
  font-size: 1.285rem;
  line-height: 1.3333;
  letter-spacing: 0;
  color: #fff;
  margin: 2.6rem 0;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a,
h6 a,
.h6 a {
  color: inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover,
h5 a:hover,
.h5 a:hover,
h6 a:hover,
.h6 a:hover {
  text-decoration: none;
}

strong {
  font-weight: 600;
}

p,
blockquote {
  margin-bottom: 2.6rem;
}

blockquote {
  font-family: "Playfair Display", serif;
  font-size: 1.714rem;
  letter-spacing: 0.025em;
  line-height: 1.5;
  padding: 0;
  width: 80%;
  padding-left: 6.8rem;
  border-left: 0.3rem solid #f3ca2f;
  margin-top: 5rem;
  color: #fff;
}

cite {
  display: block;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
  font-style: normal;
}

.blockquote-cite {
  font-size: 1rem;
  color: #999999;
  letter-spacing: 0.05em;
  padding-left: 7.1rem;
  margin-bottom: 5rem;
}

.blockquote-cite cite {
  font-size: 1.14rem;
}

a {
  color: #f3ca2f;
  -webkit-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}

a:hover,
a:focus {
  color: #f3ca2f;
  outline: none;
}

a:focus {
  text-decoration: none;
}

/* 1.3 Fields */

input[type="text"],
input[type="address"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  border-radius: 0.75em;
  color: #fff;
  background-color: #333;
  border: 0;
  border-radius: 0;
  padding: 0.2rem 1rem 0;
  height: 3.6em;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}

textarea {
  padding-top: 0.8rem;
  height: 15rem;
  resize: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

input[type="text"]:focus,
input[type="address"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: #f3ca2f;
  outline: 0;
  color: #fff;
}

input.input-gray,
textarea.input-gray {
  background: #f6f6f6;
}

input.input-gray:focus,
textarea.input-gray:focus {
  background: #fff;
}

input::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #999;
}

input::-webkit-input-placeholder {
  color: #999;
}

textarea::-moz-placeholder {
  color: #999;
  opacity: 1;
}

textarea:-ms-input-placeholder {
  color: #999;
}

textarea::-webkit-input-placeholder {
  color: #999;
}

.form-group {
  margin-bottom: 30px;
}

input.error {
  border-color: #f3ca2f;
}

.mc-label,
label.error {
  font-size: 0.83em;
  font-weight: 400;
  margin: 0.7em 0 0 0;
}

/* 1.4 Buttons */

.btn {
  color: #fff;
  letter-spacing: 0.025em;
  font-size: 1rem;
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: 1.1em 2.28em 1em;
  background-color: #000;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out !important;
  transition: all 0.3s ease-out !important;
}

.btn:hover,
.btn:focus {
  background-color: #f3ca2f;
  color: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none !important;
}

.btn-upper {
  font-weight: 600;
  text-transform: uppercase;
}

.btn-yellow {
  background: #f3ca2f;
  color: #000;
}

.btn-yellow:hover,
.btn-yellow:focus {
  background: #000;
}


.btn2 {
  color: #000; /* black text */
  letter-spacing: 0.025em;
  font-size: 1rem;
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: 1.1em 2.28em 1em;
  background-color: #D2B34F; /* Yellow background */
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out !important;
  transition: all 0.3s ease-out !important;
}

.btn2:hover,
.btn2:focus {
  background-color: #f3ca2f; /* Lighter yellow on hover */
  color: #000; /* Yellow text on hover */
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none !important;
}

.btn2-upper {
  font-weight: 600;
  text-transform: uppercase;
}

.btn2-yellow {
  background: #f3ca2f;
  color: #000;
}

.btn2-yellow:hover,
.btn2-yellow:focus {
  background: #000;
}





/* 1.5 Icons */

.icon {
  display: inline-block;
}

.icon-medium {
  font-size: 4.2rem;
}

.link-arrow {
  display: inline-block;
  color: #000;
  line-height: 1 !important;
  font-weight: 600;
}

.link-arrow-2 {
  display: inline-block;
  font-size: 1.14rem;
  color: #999999;
  font-weight: 400;
}

.link-arrow .icon,
.link-arrow-2 .icon {
  position: relative;
  margin-left: 0.7rem;
  font-size: 2.1em;
  vertical-align: middle;
  -webkit-transition: transform 0.3s;
  -o-transition: transform 0.3s;
  transition: transform 0.3s;
}

.link-arrow .icon {
  top: 0.1rem;
}

.link-arrow .ion-ios-arrow-right {
  font-size: 1.5em;
}

.link-arrow-2 .ion-ios-arrow-right {
  font-size: 1.5em;
}

.link-arrow:hover,
.link-arrow-2:hover {
  color: #f3ca2f;
  text-decoration: none;
}

.link-arrow:hover .icon,
.link-arrow-2:hover .icon {
  -webkit-transform: translateX(0.5rem);
  -o-transform: translateX(0.5rem);
  transform: translateX(0.5rem);
}

/* 1.6 Preloader */
/* 1.6 Preloader revised */

.loader, .preloader {
  position: fixed;
  overflow: hidden;
  z-index: 10000; /*was also 100 on other file */
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  background:#272727;
  color:#4b4b4b;
  text-align: center;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f3ca2f; /* Chose the more vibrant yellow */
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite ease-in-out;
  -webkit-animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
}
}

/* revised */

/* 1.7 Helpers */

.text-dark {
  color: #fff;
}

.text-muted {
  color: #999;
}

.text-white {
  color: #fff;
}

.text-primary {
  color: #f3ca2f;
}

.masked {
  position: relative;
}

.masked:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.1;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

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

.overflow-hidden {
  overflow: hidden;
}

/*-------------------------------------------------------------------------------
  2. Navbar
-------------------------------------------------------------------------------*/

.navbar {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 2.7rem;
  height: 7rem;
  background-color: #272727;
  margin: 0;
  border-radius: 0;
}

.navbar .brand {
  float: left;
  margin-top: -0.5rem;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

/* 2.1 Navbar elements */

.brand {
  line-height: 1.6;
  color: #fff;
  display: inline-block;
}

a.brand:hover,
a.brand:focus {
  text-decoration: none;
  color: #fff;
}

.brand img {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.65rem;
  height: 2.356rem;
}

.brand-info {
  display: inline-block;
}

.brand-name {
  font-weight: 600;
  font-size: 1.714rem;
  line-height: 1;
}

.brand-text {
  color: #7e7e7e;
  font-size: 0.857rem;
  font-weight: 300;
  margin-top: -0.3rem;
}

.navbar-toggle {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.navbar-toggle .icon-bar {
  background-color: #fff;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.navbar-toggle:hover .icon-bar {
  background-color: #f3ca2f;
}

.navbar .social-list {
  float: right;
  margin-right: 10%;
}

.social-list {
  overflow: hidden;
}

.social-list a {
  float: left;
  font-size: 1.428rem;
  line-height: 1;
  color: #fff;
  margin-left: 2rem;
}

.social-list a:first-child {
  margin-left: 0;
}

.social-list a:hover {
  color: #f3ca2f;
  text-decoration: none;
}

.navbar-spacer {
  float: right;
  margin: -1rem 4.5rem 0;
  width: 1px;
  height: 3.3rem;
  background-color: #3c3c3c;
}

.navbar-address {
  float: right;
  font-weight: 600;
  text-transform: uppercase;
}

/* 2.2 Navbar affix */

.navbar.affix {
  position: fixed;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.07);
}

/* 2.3 Sidebar menu */

.click-capture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: 99;
}

.menu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background-color: rgb(28, 28, 28); /*menu background */
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.close-menu {
  position: absolute;
  z-index: 2;
  top: 2.3rem;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.close-menu:hover {
  color: #f3ca2f;
}

.menu .menu-lang {
  opacity: 0;
  position: absolute;
  opacity: 0;
  left: 15%;
  top: 3rem;
  text-transform: uppercase;
  -webkit-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  -o-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition:
    transform 0.5s 0.4s ease,
    opacity 0.5s 0.4s ease,
    color 0.3s ease;
  -o-transition:
    transform 0.5s 0.4s ease,
    opacity 0.5s 0.4s ease,
    color 0.3s ease;
  transition:
    transform 0.5s 0.4s ease,
    opacity 0.5s 0.4s ease,
    color 0.3s ease;
}

.menu-lang a {
  display: inline-block;
  margin-left: 1.5rem;
  color: #7e7e7e;
}

.menu-lang a:first-child {
  margin-left: 0;
}

.menu-lang .active,
.menu-lang a:hover {
  color: #f3ca2f;
  text-decoration: none;
}

.menu-list {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 9rem;
  bottom: 10.5rem;
  padding-left: 15%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  font-weight: 600;
  letter-spacing: -0.025rem;
  list-style: none;
  margin: 0;
  -webkit-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  -o-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition:
    transform 0.5s 0.6s ease,
    opacity 0.5s 0.6s ease;
  -o-transition:
    transform 0.5s 0.6s ease,
    opacity 0.5s 0.6s ease;
  transition:
    transform 0.5s 0.6s ease,
    opacity 0.5s 0.6s ease;
}

.menu-list li a {
  color: #7e7e7e;
}

.menu-list .active > a,
.menu-list li a:hover {
  text-decoration: none;
  color: #fff;
}

.menu-list > li {
  font-size: 1.65rem;
  line-height: 0.8;
}

.menu-list > li {
  margin-top: 2.7rem;
}

.menu-list > li:first-child {
  margin-top: 0;
}

.menu-list ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list ul li {
  font-size: 1.142rem;
  margin-top: 1.142rem;
}

.menu-list ul li:first-child {
  margin-top: 2.4rem;
}

.menu-footer {
  position: absolute;
  left: 15%;
  bottom: 4rem;
}

.menu-footer .social-list {
  opacity: 0;
  -webkit-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  -o-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition: all 0.5s 0.7s ease;
  -o-transition: all 0.5s 0.7s ease;
  transition: all 0.5s 0.7s ease;
}

.menu-footer .social-list a {
  color: #7e7e7e;
  margin: 0;
  margin-right: 2.7rem;
}

.menu-footer .social-list a:last-child {
  margin-right: 0;
}

.menu-footer .social-list a:hover {
  color: #f3ca2f;
}

.menu-footer .copy {
  opacity: 0;
  display: none;
  margin-top: 3.2rem;
  color: #fff;
  line-height: 1.71rem;
  -webkit-transform: translateY(2rem);
  -ms-transform: translateY(2rem);
  -o-transform: translateY(2rem);
  transform: translateY(2rem);
  -webkit-transition: all 0.5s 0.9s ease;
  -o-transition: all 0.5s 0.9s ease;
  transition: all 0.5s 0.9s ease;
}

.menu-is-opened .click-capture {
  visibility: visible;
}

.menu-is-opened .menu {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.07);
}

.menu-is-opened .menu .menu-lang,
.menu-is-opened .menu-list,
.menu-is-opened .menu .menu-footer .social-list,
.menu-is-opened .menu .menu-footer .copy {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  transform: translate(0);
  opacity: 1;
}

.menu-is-closed .menu .menu-lang,
.menu-is-closed .menu .menu-list,
.menu-is-closed .menu .menu-footer .social-list,
.menu-is-closed .menu .menu-footer .copy {
  opacity: 0;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.menu-list ul.submenu {
    display: block !important; /* Ensure submenus are always visible */
    padding-left: 1.5rem; /* Indent submenus slightly */
    margin: 0; /* Remove default margin for a clean look */
    list-style: none; /* Remove bullet points */
}

.menu-list ul.submenu li {
    margin-top: 0.5rem; /* Add spacing between submenu items */
}

.menu-list ul.submenu li a {
    color: #5a5a5a; /* Subtle color for submenu links */
    text-decoration: none; /* No underline */
    font-size: 1rem; /* Slightly smaller font for submenu items */
    font-weight: 200; /* Lighter font weight */  
}

.menu-list ul.submenu li a:hover {
    color: #fff; /* Highlight submenu items on hover */
}

/*-------------------------------------------------------------------------------
  3. Homepage
-------------------------------------------------------------------------------*/

.wrapper {
  padding-top: 7rem;
  overflow-x: hidden;
}

.boxed {
  padding-left: 1.7rem;
  padding-right: 1.7rem;
}

.boxed .container,
.boxed .container-fluid {
  padding: 0;
  max-width: 100%;
}

.left-boxed {
  left: 1.7rem;
}

.right-boxed {
  right: 1.7rem;
}

.section {
  padding: 10.28rem 0;
}

.section-title {
  margin: 0;
}

.section-title .link-arrow-2 {
  margin-top: 1.05rem;
}

.section-subtitle {
  display: inline-block;
  font-weight: 500;
  font-size: 1.142rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3ca2f;
  margin-bottom: 1rem;
}

/* 3.3 Section About */

.dots-image {
  display: inline-block;
  position: relative;
}

.dots-image img {
  display: block;
  position: relative;
  z-index: 1;
}

.dots-image .dots {
  position: absolute;
  left: -20%;
  bottom: -15%;
  width: 101%;
  height: 57.2%;
  background: url(../images/bg/dots.png) 0 0 repeat;
}

.experience-box {
  position: relative;
  white-space: nowrap;
  margin: 6rem 0;
}

@media (min-width: 992px) {
  .experience-box {
    margin-top: 6rem;
  }
}

@media (min-width: 1200px) {
  .experience-box {
    margin-top: 12.2rem;
  }
}

.experience-border {
  display: inline-block;
  vertical-align: middle;
  width: 12.15rem;
  height: 12.15rem;
  border: 0.357rem solid #f3ca2f;
}

.experience-content {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -8rem;
  top: 0.2rem;
}

.experience-number {
  display: inline-block;
  vertical-align: middle;
  font-size: 7.142rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

.experience-info {
  display: inline-block;
  vertical-align: middle;
  margin: -1rem 0 0 0.8rem;
  font-size: 1.57rem;
  line-height: 1.181;
  color: #fff;
}

/* 3.4 Section Projects */

.section-projects {
  padding-bottom: 8rem;
}

.filter-content {
  position: relative;
  overflow: hidden;
}

.filter {
  list-style: none;
  font-size: 1.142rem;
  font-weight: 600;
  color: #fff;
  padding-left: 0;
  margin: 0;
}

.filter li {
  margin: 0.6rem 2.6rem 0 0;
  display: inline-block;
}

.filter li:last-child {
  margin-right: 0;
}

.filter li a {
  color: inherit;
}

.filter li a:hover,
.filter .active a {
  color: #f3ca2f;
  text-decoration: none;
}

.section-projects .filter-content {
  margin: 2rem 0 0 0;
}

.section-projects .filter {
  margin: 0;
}

.section-projects .view-projects {
  margin: 0.85rem 0 0 0;
}

.view-projects {
  display: inline-block;
  font-style: italic;
  color: #999999;
}

.view-projects:hover {
  text-decoration: none;
  color: #f3ca2f;
}

/* 3.4.1 Projects Carousel */

.project-carousel-item .inner-content {
  display: table-cell;
  height: 100vh;
  vertical-align: middle;
  padding: 120px 0;
  width: 10000px;
}

.project-detail-info {
  background-color: #272727;
  padding: 3.3rem;
  width: 100%; /* Set to a percentage or a specific value like '500px' or '80%' */
}

.project-detail-control:hover {
  color: #cee002;
}

.project-detail-control .show-info {
  display: none;
}

.project-detail-control.active .show-info {
  display: block;
}

.project-detail-control.active .hide-info {
  display: none;
}

.project-detail-title {
  font-size: 2.57rem;
  letter-spacing: -0.025em;
  line-height: 1.16666;
  margin: 1rem 0 2.4rem 0;
}

.project-detail-list {
  list-style: none;
  padding-left: 0;
  margin-top: 3.6rem;
}

.project-detail-list li {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 0.6rem;
  margin-top: 0.65rem;
  overflow: hidden;
}

.project-detail-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.project-detail-list li .left {
  float: left;
  font-weight: 600;
}

.project-detail-list li .right {
  float: right;
}

.project-detail-meta {
  margin-top: 4.5rem;
  overflow: hidden;
}

.project-detail-meta .left {
  font-weight: 600;
}

.owl-nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.owl-nav .disabled {
  color: #777;
  cursor: default;
}

.owl-prev,
.owl-next {
  display: inline-block;
  font-size: 2.8rem;
  line-height: 1;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.owl-prev:before {
  font-family: "Ionicons";
  content: "\f3d2";
}

.owl-next:before {
  font-family: "Ionicons";
  content: "\f3d3";
}

.owl-prev:hover,
.owl-next:hover {
  color: #f3ca2f;
}

.owl-dots {
  text-align: center;
  margin-top: 5.857rem;
}

.owl-dot {
  display: inline-block;
  vertical-align: top;
  margin: 0 0.6rem;
}

.owl-dot span {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #cccccc;
}

.owl-dot.active span {
  background-color: #f3ca2f;
}

.project-item {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.project-item img {
  width: 100%;
}

.item-shadow {
  position: relative;
}

.item-shadow:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.6) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.6) 100%);
}

.project-item .link-arrow {
  position: absolute;
  z-index: 2;
  color: #fff;
  left: 3rem;
  bottom: 2.3rem;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.project-hover {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100.1%;
  height: 100%;
  padding: 4.85rem 3rem;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

.project-title {
  color: #fff;
  margin: 0;
}

.project-hover .project-title {
  position: absolute;
  bottom: 5.5rem;
}

.project-description {
  opacity: 0;
  margin-top: 12%;
  line-height: 1.71;
  color: #333333;
  -webkit-transform: translateX(-1rem);
  -ms-transform: translateX(-1rem);
  -o-transform: translateX(-1rem);
  transform: translateY(-1rem);
}

.project-item:hover .project-hover {
  background-color: rgba(206, 224, 2, 0.85);
}

.project-item:hover .project-hover .project-title {
  position: relative;
  color: #000;
  bottom: 2rem;
  -webkit-transform: translateY(2rem);
  -ms-transform: translateY(2rem);
  -o-transform: translateY(2rem);
  transform: translateY(2rem);
  -webkit-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}

.project-item:hover .project-hover .project-description {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateY(0);
  -webkit-transition: all 0.4s 0.2s ease;
  -o-transition: all 0.4s 0.2s ease;
  transition: all 0.4s 0.2s ease;
}

.project-item:hover .link-arrow {
  color: #000;
}

/* 3.3 Resume About */

.experience-border {
  display: inline-block;
  vertical-align: middle;
  width: 12.15rem;
  height: 12.15rem;
  border: 0.357rem solid #cee002;
}

.experience-content {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -8rem;
  top: 0.2rem;
}

.experience-number {
  display: inline-block;
  vertical-align: middle;
  font-size: 7.142rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

.experience-info {
  display: inline-block;
  vertical-align: middle;
  margin: -1rem 0 0 0.8rem;
  font-size: 1.57rem;
  line-height: 1.181;
  color: #fff;
}

.resume-title {
  position: relative;
  background: rgba(243, 202, 47, 0.6);
  padding: 1rem;
  color: #000;
  text-align: center;
  margin: 0;
}

.resume-row {
  position: relative;
}

.resume-row:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  background: #0e0e0e;
  left: -3.5rem;
  top: 0;
  border-radius: 50%;
  border: 2px solid #f3ca2f;
}

.resume-type {
  position: relative;
  margin: 1rem 0;
  top: -0.2rem;
}

.resume-study {
  margin-bottom: 1rem;
}

.resume-date {
  font-size: 0.9rem;
}

.resume-content {
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem 1.5rem 1.5rem 3rem;
  margin-bottom: 2rem;
}

.resume-inner {
  border-left: 1px solid #525252;
  padding-left: 3rem;
}

.resume-text {
  opacity: 0.6;
}

.resume-text.last {
  margin-bottom: 0;
}


/* 3.4 Vocabulary */
.vocab-title {
  position: relative;
  background: rgba(243, 202, 47, 0.6);
  padding: 1rem;
  color: #000;
  text-align: center;
  margin: 0;
}

.vocab-content {
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem 1.5rem 1.5rem 3rem;
  margin-bottom: 2rem;
}

.vocab-inner {
  border-left: 1px solid #525252;
  padding-left: 3rem;
}

.vocab-row {
  position: relative;
}

.vocab-row:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  background: #0e0e0e;
  left: -3.5rem;
  top: 0;
  border-radius: 50%;
  border: 2px solid #f3ca2f;
}

.vocab-word {
  position: relative;
  margin: 1rem 0;
  top: -0.2rem;
}

.vocab-definition {
  margin-bottom: 1rem;
}

.vocab-example {
  opacity: 0.6;
}

.vocab-example.last {
  margin-bottom: 0;
}

.vocab-part-of-speech {
  font-size: 0.8em;
  opacity: 0.7;
  font-weight: normal;
}



/* 3.6 Section Partners */
.partner-carousel {
  margin-top: 10.28rem;
}

.partner-carousel .partner-carousel-item img {
  width: auto;
  margin: 0 auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* 3.6 Section Partners */

.partner-carousel {
  margin-top: 10.28rem;
}

.partner-carousel .partner-carousel-item img {
  width: auto;
  margin: 0 auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* 4.1 Navbar */

.navbar-2 {
  background: transparent;
  padding-top: 3rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #fff;
}

.navbar-2 .navbar-bg {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  width: 100%;
  height: 100%;
  background: #272727;
  z-index: -1;
  -webkit-transition: all 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);
  -o-transition: all 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);
  transition: all 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);
}

.navbar-2 .brand {
  width: 18rem;
}

.navbar-2 .brand-text {
  color: #fff;
}

.navbar-2 .navbar-address {
  float: left;
  margin-left: 5rem;
}

.navbar-2 .social-list {
  float: left;
  margin-left: 7.5rem;
}

.navbar-white {
  background: transparent;
}

.navbar-white .navbar-bg {
  height: 0;
}

.navbar-white .brand,
.navbar-white .brand:hover,
.navbar-white .brand:focus,
.navbar-white .brand-text,
.navbar-white .navbar-address,
.navbar-white .navbar-address .text-dark,
.navbar-white .social-list a {
  color: #fff;
}

.navbar-white .navbar-toggle .icon-bar {
  background: #fff;
}

.navbar-white .social-list a:hover {
  color: #f3ca2f;
}

.copy-bottom {
  display: none;
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 2.4rem;
  color: #000;
}

.lang-bottom {
  display: none;
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 2.4rem;
  color: #000;
}

.copy-bottom.white {
  color: #fff;
}

.lang-bottom .menu-lang {
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
}

.lang-bottom .menu-lang a:not(.active) {
  color: #000;
}

.lang-bottom.white,
.lang-bottom.white .menu-lang a:not(.active) {
  color: #fff;
}

.lang-bottom .menu-lang a:hover,
.lang-bottom.white .menu-lang a:hover {
  color: #f3ca2f;
}

#pp-nav {
  z-index: 99;
  width: 2.1428rem;
  margin-top: 0 !important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

#pp-nav .pp-nav-up,
#pp-nav .pp-nav-down {
  display: none;
  font-size: 2.1428rem;
  cursor: pointer;
  color: #000;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#pp-nav .pp-nav-up {
  margin-bottom: 3.5rem;
}

#pp-nav .pp-nav-down {
  margin-top: 3.5rem;
}

#pp-nav li,
.pp-slidesNav li {
  margin: 1.928rem auto;
  width: 10px;
  height: 10px;
}

#pp-nav span,
.pp-slidesNav span {
  left: 0;
  top: 0;
  cursor: pointer;
  width: 10px;
  height: 10px;
  background: #000;
  border: 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#pp-nav .pp-nav-up:hover,
#pp-nav .pp-nav-down:hover,
#pp-nav.white .pp-nav-up:hover,
#pp-nav.white .pp-nav-down:hover {
  color: #f3ca2f;
}

#pp-nav.white .pp-nav-up,
#pp-nav.white .pp-nav-down {
  color: #fff;
}

#pp-nav.white span,
.pp-slidesNav span {
  background: #fff;
}

#pp-nav li .active span,
.pp-slidesNav .active span,
#pp-nav span:hover,
.pp-slidesNav span:hover {
  background: #f3ca2f;
}

/* 4.2 Sections */

.pagepiling .section {
  background: #272727;
  padding-top: 11.3rem;
  padding-bottom: 7rem;
}

.pagepiling .section-1.pp-scrollable .vertical-centred {
  padding-top: 10rem;
  padding-bottom: 11rem;
}

.pagepiling .pp-scrollable {
  padding: 0;
}

.pp-scrollable .vertical-centred {
  padding-top: 11.3rem;
  padding-bottom: 7rem;
}

.scroll-wrap {
  position: relative;
  min-height: 100%;
}

.scrollable-content {
  white-space: nowrap;
  width: 100%;
  font-size: 0;
}

.scrollable-content:before {
  content: "";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
}

.vertical-centred {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  font-size: 1rem;
}

.boxed-inner {
  position: relative;
  padding: 0;
}

.section-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.vertical-title {
  position: absolute;
  white-space: nowrap;
  width: 0;
  top: -0.55rem;
  left: 4.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.vertical-title span {
  display: block;
  float: right;
}

.section .intro {
  opacity: 0;
  -webkit-transition: opacity 1s 0.3s ease;
  -o-transition: opacity 1s 0.3s ease;
  transition: opacity 1s 0.3s ease;
}

.section .intro {
  -webkit-transform: translateY(7rem);
  -ms-transform: translateY(7rem);
  -o-transform: translateY(7rem);
  transform: translateY(7rem);
  -webkit-transition: all 0.35s 0.6s ease;
  -o-transition: all 0.35s 0.6s ease;
  transition: all 0.35s 0.6s ease;
}

.section.active .intro {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.subtitle-top {
  line-height: 1.714;
  margin-bottom: 2.8rem;
  letter-spacing: 0.1em;
}

.progress-bars {
  margin-top: 5rem;
}

.progress {
  height: 8px;
  margin-bottom: 50px;
}

.progress-bar {
  background-color: #f4ca30;
}

/* 4.3 Section About */


.text-container {
  position: absolute;
  margin-top: 5vh;
  margin-bottom: 0;
}

.hr-text {
  display: block;
  width: 12.042rem;
  color: #919191;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-size: 1rem; /* Adjust as needed */
  text-align: justify;
  text-align-last: justify;
  margin-bottom: 0.5rem; /* Space between text and line */
  line-height: 1;
}

.hr-textlogin {
  display: block;
  width: 12.042rem;
  color: #919191;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-size: 1rem; /* Adjust as needed */
  text-align: justify;
  text-align-last: justify;
  margin-top: 40px;
  margin-bottom: 0.5rem; /* Space between text and line */
  line-height: 1;
}

.hr-bottom {
  height: 0.2858rem;
  width: 12.042rem;
  background-color: #f3ca2f;
  margin: 0;
  /* Remove any border or other properties that might create a line */
  border: none;
}

.title-uppercase {
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.33333;
  margin: 0 0 5rem;
}

.service-list {
  margin-bottom: 5rem;
  font-size: 1.2857rem;
  padding-left: 0;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: -0.025rem;
  font-weight: 300;
}

.service-list li {
  margin-bottom: 0.7rem;
}

.service-list li a {
  color: inherit;
}

.service-list li a:hover {
  color: #fff;
  text-decoration: none;
}

.dots-image-2 {
  display: inline-block;
  position: relative;
}

.dots-image-2 .dots {
  position: absolute;
  z-index: -1;
  left: -25%;
  bottom: -19%;
  width: 101%;
  top: 50%;
  opacity: 0.8;
  background: url(../images/bg/dots.png) 0 0 repeat;
}

.dots-image-2 .experience-info {
  position: absolute;
  left: 12%;
  margin-top: -4.4rem;
  top: 100%;
}

.experience-info .number {
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  font-size: 10.71rem;
  margin-right: 1.7rem;
}

.experience-info .text {
  display: inline-block;
  font-size: 1.571rem;
  font-weight: 600;
  line-height: 1.181;
  text-transform: uppercase;
}

/* 4.4 Section Projects*/

.bg-changer {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-changer .section-bg {
  opacity: 0;
  will-change: opacity, transform;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition:
    opacity 0.5s 0.2s ease,
    transform 5s 0.2s ease;
  -o-transition:
    opacity 0.5s 0.2s ease,
    transform 5s 0.2s ease;
  transition:
    opacity 0.5s 0.2s ease,
    transform 5s 0.2s ease;
}

.bg-changer .active {
  opacity: 1;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.bg-changer .section-bg:first-child {
  opacity: 1;
}

.section-3 .vertical-title {
  top: 7.4rem;
}

.row-project-box {
  margin-top: -30px;
}

.row-project-box-longer {
  margin-top: -30px;
  margin-bottom: 30px;
}


.col-project-box {
  margin-top: 30px;
}

.project-box {
  display: block;
  padding-bottom: 30%;
  position: relative;
  border: 1px solid #fff;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.project-box-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 2.14rem 1.928rem;
}

.project-box-inner2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 2.14rem 10.928rem;
}

.project-box h5 {
  margin: 0;
  color: #fff;
}

.project-category {
  color: #cccccc;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem !important;
}

.project-box:hover {
  background: #fff;
  text-decoration: none;
  border-color: transparent;
}

.project-box:hover h5 {
  color: #000;
}

.project-box:hover .project-category {
  color: #666666;
}


/* NEW NEW TEST */

/* Ensure consistent box heights with padding for responsiveness */
.project-box {
  display: block;
  padding-bottom: 30%; /* Aspect ratio */
  position: relative;
  border: 1px solid #fff;
  overflow: hidden; /* Prevents content overflow */
  transition: all 0.3s ease;
}


/* NEW Tag positioned in bottom-right corner */
.project-box .new-tag-vertical {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #C1970A;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.3rem 0.8rem;
    z-index: 10;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.4);
    animation: vertical-pulse-glow 2.5s infinite;
    border-top-left-radius: 8px;
}

/* Coming Soon Tag positioned in bottom-right corner */
.project-box .soon-tag-vertical {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #808080;
    color: white;
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.3rem 0.8rem;
    z-index: 10;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.4);
    border-top-left-radius: 8px;
}

/* login tax positioned in bottom-right corner */
.project-box .login-tag-vertical {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #313131;
    color: white;
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.3rem 0.8rem;
    z-index: 10;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.4);
    border-top-left-radius: 8px;
}



/* Mobile styles */
@media (max-width: 768px) {
    .project-box .new-tag-vertical {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
        letter-spacing: 0.5px;
        box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.4);
    }
    
    .project-box .soon-tag-vertical {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
        letter-spacing: 0.5px;
        box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.4);
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .project-box .new-tag-vertical {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        letter-spacing: 0.3px;
    }
    
    .project-box .soon-tag-vertical {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        letter-spacing: 0.3px;
    }
}

/* Inner padding for content */
.project-box-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.4rem 2.4rem 1.4rem 1.4rem; /* Adjust padding as needed */
  display: flex;
  flex-direction: column; /* Stack content vertically */
}

/* Adjust spacing between elements inside the box */
.project-box-inner h5 {
  margin-bottom: 0.2rem; /* Space between title and category */
}

.project-category {
  margin: 0; /* Removes extra margin */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .project-box {
    padding-bottom: 30%; /* Adjust for smaller screens */
  }
}

/* END OFNEW NEW TEST */


.link-arrow.h5 {
  text-transform: uppercase;
  letter-spacing: -0.025rem;
  margin-bottom: 0;
}

.link-arrow.h5 .icon-chevron-right {
  font-size: 1.8rem;
  margin-top: -0.45rem;
}

.section-3 .link-arrow.h5 {
  margin-top: 4rem;
}

.section-4 h2 {
  margin-bottom: 7rem;
}

/* 4.5 Section Reviews */

.icon-quote {
  display: inline-block;
  margin-top: -0.6rem;
  color: #f3ca2f;
  font-size: 5.14rem;
  margin-bottom: 10rem;
}

.review-carousel .text {
  font-size: 1.142rem;
  line-height: 1.875;
}

.review-author {
  margin-top: 5.7rem;
}

.author-name {
  font-size: 1.2857rem;
  line-height: 1.333;
  font-weight: 600;
}

.review-carousel .owl-nav {
  position: relative;
  top: 0;
  margin-top: 7.7vh;
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}

.review-carousel .owl-prev,
.review-carousel .owl-next {
  font-size: 1.2857rem;
  width: 3.57rem;
  height: 3.57rem;
  line-height: 3.57rem;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  margin-right: 0.857rem;
}

.review-carousel .owl-prev:before {
  font-family: "Linearicons";
  content: "\e93b";
}

.review-carousel .owl-next:before {
  font-family: "Linearicons";
  content: "\e93c";
}

.review-carousel .owl-prev:hover,
.review-carousel .owl-next:hover {
  background: #fff;
  color: #000;
}

.review-carousel .owl-prev.disabled,
.review-carousel .owl-next.disabled {
  cursor: default;
}

.review-carousel .owl-prev.disabled:hover,
.review-carousel .owl-next.disabled:hover {
  background: none;
  color: #fff;
}

/* 4.6 Section Contacts */

.map-2 {
  width: 100%;
  height: 18rem;
  border: 0;
  text-align: center;
}

.contact-info {
  overflow: hidden;
  margin-top: 5.5rem;
}

.row-contact-info {
  margin: -5rem -4% 0;
}

.success-message,
.error-message {
  display: none;
  margin-top: 2rem;
}

.col-contact-info {
  padding: 0 4%;
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid #3c3c3c;
}

.col-contact-info:first-child {
  border-top: 0;
  padding-top: 0;
}

.contact-info h3 {
  font-size: 1.92rem;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 2rem 0;
}

.contact-info .col-right {
  word-wrap: break-word;
  padding-left: 0;
  padding-right: 0;
}

.contact-info-row {
  line-height: 1.5;
  margin-bottom: 2.14rem;
}

.contact-info-row:last-child {
  margin-bottom: 0;
}

.contact-info-row strong {
  font-size: 1.1428rem;
  text-transform: uppercase;
}

/*-------------------------------------------------------------------------------
  6. Pages
-------------------------------------------------------------------------------*/

.display-1 {
  font-size: 4.28rem;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
}

.display-2 {
  font-size: 5.14rem;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  text-transform: uppercase;
}

.text-display-1 {
  font-size: 1.714rem;
  line-height: 2;
  letter-spacing: 0;
}

.text-display-1 p {
  margin-bottom: 3.5rem;
}

.text-display-1 p:last-child {
  margin-bottom: 0;
}

.title-hr {
  width: 7rem;
  max-width: 100%;
  height: 0.28rem;
  background: #f3ca2f;
}

.title-info {
  font-size: 1.28rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.4rem;
}

.page-header,
.page-header-2,
.page-header-3 {
  border-bottom: 0;
  margin: 8rem 0 7rem;
  padding: 0;
}

.page-header h1,
.page-header-2 h1,
.page-header-3 h1 {
  margin: 0;
}

.page-header-3 .title-hr {
  margin-bottom: 2.7rem;
}

.page-inner {
  margin-top: 10.28rem;
}

.section-info {
  color: #999999;
  line-height: 1.111;
  font-size: 1.28rem;
  text-transform: uppercase;
  font-weight: 600;
}

.section-info {
  margin-bottom: 4rem;
}

.section-info .title-hr {
  margin: 0 0 2rem;
}

.info-title {
  width: 1px;
}

.bg-dots {
  background: url(../images/bg/dots2.png) 0 0 repeat;
}

/* 6.1 Works Grid */

.js-isotope {
  overflow: hidden;
}

.filter-content-2 {
  margin-bottom: 5.9rem;
}

.filter-content-2 .filter li,
.filter-content-3 .filter li,
.filter-content-4 .filter li {
  margin-right: 4rem;
}

.filter-content-3 {
  margin-bottom: 4.6rem;
}

.filter-content-4 {
  margin: 6rem 0 9rem;
}

.grid-items {
  margin: -30px -15px 0 -15px;
}

.grid-items:after {
  content: "";
  clear: both;
  display: block;
}

.grid-item {
  float: left;
  padding: 30px 15px 0 15px;
}

.project-hover-2 {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100.1%;
  height: 100%;
  padding: 2.71rem;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

.project-hover-2 .icon-plus {
  opacity: 0;
  position: absolute;
  color: #000;
  right: 2.71rem;
  font-size: 3rem;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.project-hover-2 .project-title {
  opacity: 0;
  position: absolute;
  bottom: 2.71rem;
  color: #000;
  -webkit-transform: translateX(-2rem);
  -ms-transform: translateX(-2rem);
  -o-transform: translateX(-2rem);
  transform: translateX(-2rem);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.project-item:hover .project-hover-2 {
  background-color: rgba(206, 224, 2, 0.85);
}

.project-item:hover .project-hover-2 .project-title,
.project-item:hover .project-hover-2 .icon-plus {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

/* 6.2 Works Carousel */

.sly {
  position: relative;
  overflow: hidden;
}

.slidee {
  list-style: none;
  padding-left: 0;
}

.sly ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.sly ul li {
  float: left;
  width: 400px;
  height: 100%;
  margin: 0 30px 0 0;
  padding: 0;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  color: #fff;
  font-size: 4rem;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.prev.disabled,
.next.disabled {
  opacity: 0.5;
}

.prev:hover,
.next:hover {
  color: #f3ca2f;
}

.prev {
  left: 2.5rem;
}

.next {
  right: 2.5rem;
}

/* Scrollbar Container */
.scrollbar-container {
  overflow: auto; /* Automatically show scrollbar only when needed */
  height: 100%; /* Ensure container height is dynamic */
}

/* Scrollbar */


.scrollbar {
  margin: 6.8rem 0 0;
  height: 1px;
  background: #3c3c3c;
  line-height: 0;
}

.scrollbar .handle {
  position: relative;
  top: -2px;
  width: 100px;
  height: 3px;
  background: #999999;
  cursor: pointer;
}
.scrollbar .handle .mousearea {
  position: absolute;
  top: -9px;
  left: 0;
  width: 100%;
  height: 20px;
}

/* 6.3 Project Detail */

.project-detail {
  position: relative;
  overflow: hidden;
}

.project-detail-item {
  min-height: 420px;
  background-size: cover;
  background-position: 50% 50%;
  padding: 6.78rem 11.2rem;
}

.project-detail-info {
  background-color: #272727;
  padding: 1.0rem 6.3rem 6.3rem 6.3rem; /* margin: top right bottom left (
  width: 100%; /* Set to a percentage or a specific value like '500px' or '80%' */
}

.project-detail-control {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.project-detail-control:hover {
  color: #f3ca2f;
}

.project-detail-control .show-info {
  display: none;
}

.project-detail-control.active .show-info {
  display: block;
}

.project-detail-control.active .hide-info {
  display: none;
}

.project-detail-title {
  font-size: 2.57rem;
  letter-spacing: -0.025em;
  line-height: 1.16666;
  margin: 2rem 0 2.4rem 2.5rem;
}

.project-detail-title2 {
  font-size: 1.8rem;
  color: #fff;;
  letter-spacing: 0.025em;
  line-height: 1.16666;
  margin: 0rem 0 0.4rem 2.6rem;
  font-weight: 200;
  font-variant: capitalize;
  padding-top: 2rem;
}


.project-detail-text {
  margin: 0rem 2.5rem 2rem 2.6rem;
}


.page-wrapper {
  position: relative;
}
.project-detail-list {
  list-style: none;
  padding-left: 0;
  margin-top: 3.6rem;
}

.project-detail-list li {
  border-bottom: 1px solid #3c3c3c;
  padding-bottom: 0.6rem;
  margin-top: 0.65rem;
  overflow: hidden;
}

.project-detail-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.project-detail-list li .left {
  float: left;
  font-weight: 600;
}

.project-detail-list li .right {
  float: right;
}

.project-detail-meta {
  margin-top: 4.5rem;
  overflow: hidden;
}

.project-detail-meta .left {
  font-weight: 600;
}

.project-carousel .owl-nav {
  position: static;
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}

.project-carousel .owl-prev,
.project-carousel .owl-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.2857rem;
  width: 3.57rem;
  height: 3.57rem;
  line-height: 3.57rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  margin-right: 0.857rem;
}

.project-carousel .owl-prev {
  left: 20px;
}

.project-carousel .owl-next {
  right: 20px;
}

.project-carousel .owl-prev:hover,
.project-carousel .owl-next:hover {
  background: #f3ca2f;
}

.project-carousel .owl-prev:before {
  font-family: "Linearicons";
  content: "\e93b";
}

.project-carousel .owl-next:before {
  font-family: "Linearicons";
  content: "\e93c";
}

/* 6.8.2 Partners */

.row-partners {
  margin: -1rem -1rem 0; /* Keep existing margins */
  display: flex; /* Enable Flexbox */
  flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  gap: 1rem; /* Maintain consistent spacing between logos */
}

.col-partner {
  padding: 1rem; /* Adjust padding for consistent spacing */
  margin: 0 auto; /* Center each column horizontally */
  display: inline-block; /* Keep inline-block display for flexibility */
  text-align: center; /* Ensure content inside is centered */
}

.partner-inner img {
  max-width: 100%; /* Ensure logos fit within their container */
  height: auto; /* Maintain aspect ratio */
}

.col-partner img {
  width: 220px !important;
  height: auto;
  opacity: 1 !important;
}

.col-partner:hover img {
  opacity: 1;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* 6.5 News Listing */

/* 6.6 Post Detail */

/* 6.6.1 Related Posts */

.related-posts {
  margin-top: 6rem;
  padding-top: 6rem;
  border-top: 1px solid #383838;
}

.related-post-title {
  margin: 0;
}

.row-partners {
  margin: -5rem -5rem 0;
}

.col-partner {
  padding: 0 5rem;
  margin-top: 5rem;
  display: inline-block;
}

.col-partner img {
  max-width: 100%;
  opacity: 0.4;
}

.col-partner:hover img {
  opacity: 1;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* 6.9 Contacts */

/*-------------------------------------------------------------------------------
  7. Footer
-------------------------------------------------------------------------------*/

.footer {
  color: #fff;
  line-height: 1.71;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li a {
  color: #fff;
}

.footer ul .active a,
.footer ul li a:hover {
  color: #f3ca2f;
  text-decoration: none;
}

.footer-flex {
  margin-top: -4rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-flex .flex-item {
  margin-top: 4rem;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
/* ------------------------------------------------------------------------------- */
/* 8. Responsive styles - This section contains rules that apply based on screen size or orientation. */
/* ------------------------------------------------------------------------------- */




/* Added June 16th with advice from Claude */
html { 
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

@media (min-width: 768px) { 
  html { font-size: 13px; } 
}

@media (min-width: 992px) { 
  html { font-size: 14px; } 
}





/* 8.1 Min width 768px */
/* These styles apply when the browser window's width is 768 pixels or wider. */
/* This typically targets tablets in portrait mode and larger screens. */
/* @media (min-width: 768px) {
  html {
    font-size: 13px; /* Increases the base font size for the entire page, affecting rem units. */
  }
  .pull-sm-left { /* Utility class (likely from Bootstrap 3 or similar) to float an element to the left on small screens and up. */
    float: left !important; /* Force float left. Added !important for emphasis, usually good to avoid if possible. */
  }
  .pull-sm-right { /* Utility class to float an element to the right on small screens and up. */
    float: right !important; /* Force float right. */
  }

  /* Sidebar Menu */
  .menu { /* Styles for the main slide-out menu container. */
    width: 42%; /* Sets the width of the sidebar menu to half of the screen width. */
  }
  .menu-list { /* Styles for the list of navigation items within the menu. */
    top: 5.5rem; /* Positions the top of the menu list 10rem from the top of the menu container. */
                /* User comment: "I adjusted this from 14 and seems to be the right place" - Indicates a custom adjustment for better spacing. */
    bottom: 10rem; /* Positions the bottom of the menu list 10rem from the bottom of the menu container, defining the scrollable area. */
  }
  .menu-list > li { /* Styles for individual list items directly under .menu-list. */
    font-size: 2rem; /* Increases the font size of the main menu items. */
  }
  .menu-footer { /* Styles for the footer area within the sidebar menu. */
    bottom: 1rem; /* Positions the menu footer 1rem from the bottom of the menu container. */
                  /* User comment: "I adjusted this from 6 and seems to be the right place" - Custom adjustment for footer positioning. */
  }

  /* Homepage / General Layout */
  .boxed { /* A common class for content containers that have side padding. */
    padding-left: 3rem;   /* Increases the left padding for .boxed containers. */
    padding-right: 3rem;  /* Increases the right padding for .boxed containers. */
  }
  .boxed-inner { /* A nested container, possibly within another .boxed element. */
    padding-left: 0; /* Resets left padding, perhaps because the parent .boxed provides it. */
  }
  .right-boxed { /* Utility class for elements absolutely positioned or needing right offset based on .boxed padding. */
    /* right: 3rem; Adjusts the right offset to match the increased .boxed padding. */
        line-height: 1; /* Tightens spacing between menu items */

  }
  .left-boxed { /* Utility class for elements absolutely positioned or needing left offset. */
    left: 3rem; /* Adjusts the left offset to match the increased .boxed padding. */
  }

  /* Section About */
  .section-about { /* Styles specific to the "About" section of the page. */
    padding-top: 12rem; /* Increases the top padding for the "About" section for more spacing. */
  }

  /* Section Projects */
  .section-projects .filter { /* Styles for the filter controls in the "Projects" section. */
    margin-right: 14rem; /* Adds a large right margin to the filter, possibly to make space for other elements. */
  }
  .section-projects .view-projects { /* Styles for a "View Projects" link/button. */
    position: absolute; /* Takes the element out of normal document flow. */
    top: 0;             /* Positions it at the top of its containing positioned ancestor. */
    right: 0;           /* Positions it at the right of its containing positioned ancestor. */
  }

  /* Works Carousel (Likely for a specific carousel component, e.g., Sly carousel) */
  .sly ul li { /* Styles for list items within a Sly carousel. */
    width: 555px; /* Sets a fixed width for carousel items. */
  }

  /* Homepage v2 specific styles (PagePiling version) */
  .project-box { /* Styles for individual project display boxes. */
    padding-bottom: 75%; /* Sets padding-bottom as a percentage of width to maintain aspect ratio (e.g., 4:3). */
  }


  .row-contact-info { /* Styles for a row containing contact information. */
    margin-top: -2rem; /* Negative top margin to pull the element upwards, possibly to overlap or adjust spacing. */
  }
  .col-contact-info { /* Styles for columns within the contact information row. */
    padding-top: 4rem;  /* Adds top padding. */
    margin-top: 2rem;   /* Adds top margin. */
  }

  /* Footer */
  .footer-flex .flex-item { /* Styles for items within a flexbox footer. */
    /* These properties define the flex item's ability to grow/shrink and its base size. */
    /* Effectively sets the item to take up 1/3 of the available space in a row. */
    -webkit-flex: 0 0 33.3333%; /* For older Safari browsers. */
    -ms-flex: 0 0 33.3333%;     /* For Internet Explorer. */
    flex: 0 0 33.3333%;         /* Standard flex property. */
  }
}


/* 8.2 Min width 992px */
/* These styles apply when the browser window's width is 992 pixels or wider. */
/* This typically targets tablets in landscape mode, small laptops, and desktops. */
/* @media (min-width: 992px) {
  html {
    font-size: 14px; /* Further increases the base font size for the page. */
  }

  /* Helpers */
  .pull-md-right { /* Utility class (Bootstrap 3 style) to float an element to the right on medium screens and up. */
    float: right !important; /* Force float right. */
  }

  /* Sidebar Menu */
  .menu { /* Styles for the main slide-out menu container. */
    width: 45%; /* Reduces the width of the sidebar menu compared to the 768px breakpoint, making it narrower. */
  }
  
  /* The following .menu-list and .menu-footer rules for this breakpoint (992px) seem to have values that might be
     less than or equal to the 768px breakpoint, or significantly different.
     This could be intentional for a specific layout change at this width, or might need review
     if the expectation is for the menu to generally become more spacious on wider screens.
     The user comments also indicate adjustments were made. */
  .menu-list {
    top: 5.5rem; /* Positions top of menu list. User comment notes adjustment from 14rem. This is same as 768px breakpoint. */
    bottom: 10rem; /* Positions bottom of menu list. This is same as 768px breakpoint. */
  }
  .menu-list > li { /* Styles for individual list items directly under .menu-list. */
    font-size: 2rem; /* Font size of main menu items, same as 768px breakpoint. */
  }
  .menu-footer { /* Styles for the footer area within the sidebar menu. */
    bottom: 1rem; /* Positions menu footer. User comment notes adjustment. This is same as 768px breakpoint. */
  }
  
  /* Homepage / General Layout */
  .boxed { /* Further increases side padding for .boxed containers on wider screens. */
    padding-left: 4.2857rem;
    padding-right: 4.2857rem;
  }
  .right-boxed { /* Adjusts right offset to match the new .boxed padding. */
    right: 4.2857rem;
  }
  .left-boxed { /* Adjusts left offset to match the new .boxed padding. */
    left: 4.2857rem;
  }
}

/* 8.2 Min width 1145px */
/* These styles apply when the browser window's width is 992 pixels or wider. */
/* This typically targets tablets in landscape mode, small laptops, and desktops. */
/* @media (min-width: 1145px) {
  html {
    font-size: 14px; /* Further increases the base font size for the page. */
  }

  /* Helpers */
  .pull-md-right { /* Utility class (Bootstrap 3 style) to float an element to the right on medium screens and up. */
    float: right !important; /* Force float right. */
  }

  /* Sidebar Menu */
  .menu { /* Styles for the main slide-out menu container. */
    width: 38%; /* Reduces the width of the sidebar menu compared to the 768px breakpoint, making it narrower. */
  }
  
  /* The following .menu-list and .menu-footer rules for this breakpoint (992px) seem to have values that might be
     less than or equal to the 768px breakpoint, or significantly different.
     This could be intentional for a specific layout change at this width, or might need review
     if the expectation is for the menu to generally become more spacious on wider screens.
     The user comments also indicate adjustments were made. */
  .menu-list {
    top: 5.5rem; /* Positions top of menu list. User comment notes adjustment from 14rem. This is same as 768px breakpoint. */
    bottom: 10rem; /* Positions bottom of menu list. This is same as 768px breakpoint. */
  }
  .menu-list > li { /* Styles for individual list items directly under .menu-list. */
    font-size: 2rem; /* Font size of main menu items, same as 768px breakpoint. */
  }
  .menu-footer { /* Styles for the footer area within the sidebar menu. */
    bottom: 1rem; /* Positions menu footer. User comment notes adjustment. This is same as 768px breakpoint. */
  }
  
  /* Homepage / General Layout */
  .boxed { /* Further increases side padding for .boxed containers on wider screens. */
    padding-left: 4.2857rem;
    padding-right: 4.2857rem;
  }
  .right-boxed { /* Adjusts right offset to match the new .boxed padding. */
    right: 4.2857rem;
  }
  .left-boxed { /* Adjusts left offset to match the new .boxed padding. */
    left: 4.2857rem;
  }
}


/* 8.2 Min width 1375px */
/* These styles apply when the browser window's width is 992 pixels or wider. */
/* This typically targets tablets in landscape mode, small laptops, and desktops. */
/* T@media (min-width: 1375px) {
  html {
    font-size: 14px; /* Further increases the base font size for the page. */
  }

  /* Helpers */
  .pull-md-right { /* Utility class (Bootstrap 3 style) to float an element to the right on medium screens and up. */
    float: right !important; /* Force float right. */
  }

  /* Sidebar Menu */
  /* .menu { /* Styles for the main slide-out menu container. */
  /*   width: 29%; /* Reduces the width of the sidebar menu compared to the 768px breakpoint, making it narrower. */
  /* }
  
  /* The following .menu-list and .menu-footer rules for this breakpoint (992px) seem to have values that might be
     less than or equal to the 768px breakpoint, or significantly different.
     This could be intentional for a specific layout change at this width, or might need review
     if the expectation is for the menu to generally become more spacious on wider screens.
     The user comments also indicate adjustments were made. */
  .menu-list {
    top: 5.5rem; /* Positions top of menu list. User comment notes adjustment from 14rem. This is same as 768px breakpoint. */
    bottom: 10rem; /* Positions bottom of menu list. This is same as 768px breakpoint. */
  }
  .menu-list > li { /* Styles for individual list items directly under .menu-list. */
    font-size: 2rem; /* Font size of main menu items, same as 768px breakpoint. */
  }
  .menu-footer { /* Styles for the footer area within the sidebar menu. */
    bottom: 1rem; /* Positions menu footer. User comment notes adjustment. This is same as 768px breakpoint. */
  }
  
  /* Homepage / General Layout */
  .boxed { /* Further increases side padding for .boxed containers on wider screens. */
    padding-left: 4.2857rem;
    padding-right: 4.2857rem;
  }
  .right-boxed { /* Adjusts right offset to match the new .boxed padding. */
    right: 4.2857rem;
  }
  .left-boxed { /* Adjusts left offset to match the new .boxed padding. */
    left: 4.2857rem;
  }









  /* Homepage v2 specific styles (PagePiling version) */
  .boxed-inner .boxed { /* For nested .boxed containers specifically within .boxed-inner (likely page sections). */
    padding-left: 6rem; /* Applies a larger left padding, creating an asymmetrical inner padding. */
  }
  .service-list { /* Styles for the service list (e.g., "What I Love To Do" section). */
    margin-bottom: 0; /* Removes bottom margin, perhaps because spacing is handled by other elements. */
  }

  /* Contact Info Columns */
  .col-contact-info { /* Styles for columns in contact information. */
    border-top: 0;    /* Removes the top border that might have been applied at smaller breakpoints. */
    padding-top: 0;   /* Removes top padding. */
  }
  .row-contact-info { /* Styles for the row containing contact information. */
    margin-top: -5rem; /* Larger negative top margin to pull the element further upwards. */
  }
  .col-contact-info { /* Re-declared to set margin-top specifically at this breakpoint. */
    margin-top: 5rem; /* Adds top margin to individual contact columns. */
  }

  /* Pages (Generic page headers, likely for non-PagePiling pages if they exist) */
  .page-header { /* Styles for a standard page header. */
    margin: 12.8rem 0 10.8rem; /* Sets large top and bottom margins. */
  }
  .page-header-2 { /* Styles for an alternative page header. */
    margin: 8.7rem 0 10.5rem; /* Different margins for this header type. */
  }
  .page-header-3 { /* Styles for another alternative page header. */
    margin: 9.2rem 0 12.2rem;
  }
  .page-header-3 .title-hr { /* Styles for a horizontal rule within .page-header-3. */
    margin: 0.9rem 0 0; /* Adjusts margin of the HR. */
  }
  .about-info .section-info .title-hr { /* Styles for an HR within section-info in about-info. */
    margin-top: 1rem;
  }

  /* About section specific styling */
  .about-info {
    padding-top: 1.2rem; /* Adds top padding to the .about-info container. */
  }

  /* Contact page map */
  .map { /* Styles for an embedded map. */
    height: 36rem; /* Increases the height of the map container. */
  }

  /* Homepage v2 specific contact column border */
  .col-contact-info:nth-child(2n) { /* Targets every second (even) .col-contact-info element. */
    border-left: 1px solid #3c3c3c; /* Adds a left border, creating a separator between columns. */
  }
}

/* 8.3 Min width 1200px */
/* These styles apply when the browser window's width is 1200 pixels or wider. */
/* This typically targets larger desktops and high-resolution screens. */
@media (min-width: 1200px) {
  /* Helpers */
  .pull-lg-right { /* Utility class (Bootstrap 3 style) to float an element to the right on large screens and up. */
    float: right !important; /* Force float right. */
  }

  /* Section Projects */
  .section-projects .filter-content { /* Styles for the container of project filters. */
    margin-top: 0; /* Removes top margin, aligning it differently on very large screens. */
  }

  /* Homepage v2 - Section 3 specific link styling */
  /* Note: Section 3 in your HTML is "What I Love To Do". This rule might target a "view all" link within that section. */
  .section-3 .link-arrow.h5 { /* Targets a link with classes .link-arrow and .h5 within .section-3. */
    float: right;        /* Floats the link to the right. */
    margin-top: -1.3rem; /* Negative top margin to pull it upwards relative to its normal position. */
  }

  /* Works Carousel (e.g., Sly carousel) */
  .sly ul li { /* Styles for list items within a Sly carousel. */
    width: 685px; /* Further increases the fixed width for carousel items on very large screens. */
  }

  /* Homepage v2 - Contact Info Column Border */
  /* This rule is repeated from the 992px breakpoint. It ensures the left border on contact columns persists. */
  .col-contact-info {
    border-left: 1px solid #3c3c3c; /* Adds a left border to all contact columns. */
  }
  /* You might want to add: .col-contact-info:first-child { border-left: 0; } if the first one shouldn't have it. */


  /* Footer */
  .footer-flex .flex-item { /* Styles for items within a flexbox footer. */
    /* `flex: none;` means the item will not grow or shrink and will be sized based on its content or explicit width/height. */
    -webkit-box-flex: 0; /* Older flexbox syntax. */
    -webkit-flex: none;  /* Older flexbox syntax. */
    -ms-flex: none;      /* IE10 flexbox syntax. */
    flex: none;          /* Standard flexbox syntax. */
  }
}

/* 8.5 Min Height 500px */
/* These styles apply when the browser window's height is 500 pixels or more. */
@media (min-height: 500px) {
  #pp-nav .pp-nav-up,   /* Selector for the PagePiling "up" navigation arrow. */
  #pp-nav .pp-nav-down { /* Selector for the PagePiling "down" navigation arrow. */
    display: block;     /* Makes the up and down navigation arrows visible. They are likely hidden by default. */
  }
}

/* YOUR NEW RULE TO HIDE DOTS ON SHORT SCREENS */
/* These styles apply when the browser window's height is 499 pixels or less. */
@media (max-height: 499px) {
  #pp-nav { /* Selector for the entire PagePiling navigation element (which contains the dots). */
    display: none !important; /* Hides the PagePiling navigation dots. !important ensures this rule overrides others. */
  }
}

/* 8.6 Min Height 600px */
/* These styles apply when the browser window's height is 600 pixels or more. */
@media (min-height: 600px) {
  /* Sidebar Menu */
  .menu .menu-lang { /* Styles for the language selector within the sidebar menu. */
    top: 7rem; /* Adjusts the top position of the language selector. */
  }

  .menu-list { /* Styles for the list of navigation items within the menu. */
      top: 15%;        /* Sets top position as percentage of parent container height. */
      bottom: 4.5rem;   /* Sets bottom position, defining the scrollable area. */
      line-height: 1;  /* Tightens spacing between menu items */
  }

  .menu-list > li { /* Styles for individual main menu items. */
    font-size: 2rem; /* Sets font size for main menu items, consistent with 768px and 992px width breakpoints. */
  }

  .menu-footer { /* Styles for the footer area within the sidebar menu. */
    bottom: 1rem;  /* Sets bottom position. User comment: "I adjusted this from 6 and seems to be the right place". */
  }

  .menu-footer .copy { /* Styles for copyright text (and visitor counter if it shares the .copy class) in the menu footer. */
    display: block; /* Ensures the copyright/footer content is visible. It might be hidden on shorter screens by default. */
  }
}

/* 8.7 Min Height 700px */
/* These styles apply when the browser window's height is 700 pixels or more. */


@media (min-height: 700px) {
  /* Homepage v2 specific elements (likely positioned at the very bottom of the viewport) */
  .copy-bottom { /* Styles for a copyright notice at the bottom of the page (not in the sidebar menu). */
    display: block; /* Makes this copyright notice visible. */
  }

  .lang-bottom { /* Styles for a language selector at the bottom of the page. */
    display: block; /* Makes this language selector visible. */
  }
}

/* Mobile Optimizations for Sidebar Menu */
@media (max-width: 767px) { /* Applies to screens up to 767px wide (typical for mobile portrait) */

  .menu-list {
    top: 10%; /* Reduce space at the top; adjust as needed. Ensure space for close button. */
    bottom: 4rem;  /* Reduce space taken by footer, allowing more menu items. */
                  /* This value should be coordinated with .menu-footer adjustments. */
  }

  .menu-footer {
    bottom: 1rem; /* Position footer very close to the bottom of the menu */
    padding-left: 0; /* Assuming .right-boxed already handles overall padding for menu-footer */
    padding-right: 0;
  }

  .menu-footer .copy {
    display: block; /* Ensure it's visible on mobile if theme hides it by default on short screens */
    margin-top: 0.5rem; /* Drastically reduce top margin for each .copy element */
    font-size: 0.85rem; /* Slightly smaller text in footer for mobile */
    line-height: 1.4;
  }

  .menu-footer .copy:first-child {
    margin-top: 0; /* Remove top margin from the very first .copy element (e.g., copyright) */
  }

  /* Specific styling for the paragraph within your visitor counter .copy div */
  .menu-footer .copy p[style*="font-size: 12px"] { /* Targets the paragraph with inline font-size */
    font-size: 11px !important; /* Override inline style if needed, or match */
    margin-bottom: 4px !important; /* Adjust space above the counter image */
  }

.unlock-icon {
    margin-left: 0.5em; /* Adds spacing between the text and the image */
    height: 0.8em; /* Scales the image with the font size */
    width: auto; /* Maintains the image's aspect ratio */
    display: inline-block; /* Ensures it behaves like an inline element */
    vertical-align: middle; /* Aligns the icon with the text */

  }

.unlock-icon2 {
    margin-left: 0.5em; /* Adds spacing between the text and the image */
    height: 0.8em; /* Scales the image with the font size */
    width: auto; /* Maintains the image's aspect ratio */
    display: inline-block; /* Ensures it behaves like an inline element */
    vertical-align: middle; /* Aligns the icon with the text */

  }
}

/* Optional: For very short screens, make it even more compact */
@media (max-height: 500px) and (max-width: 767px) { /* Only when both height and width are small */
  .menu-list {
    top: 4rem;    /* Even less top space */
    bottom: 3.5rem; /* Make space for a very compact footer */
  }

  .menu-footer {
    bottom: 0.25rem;
  }

  .menu-footer .copy {
    margin-top: 0.25rem;
    font-size: 0.75rem;
  }
  .menu-footer .copy:first-child {
    margin-top: 0;
  }
}

.unlock-icon {
    margin-left: 0.5em; /* Adds spacing between the text and the image */
    height: 0.8em; /* Scales the image with the font size */
    width: auto; /* Maintains the image's aspect ratio */
    display: inline-block; /* Ensures it behaves like an inline element */
    vertical-align: middle; /* Aligns the icon with the text */
    position: relative; /* Enables precise positioning */
    top: -2px; /* Nudges the icon slightly upward */
}

.unlock-icon2 {
    margin-left: 0.5em; /* Adds spacing between the text and the image */
    height: 0.8em; /* Scales the image with the font size */
    width: auto; /* Maintains the image's aspect ratio */
    display: inline-block; /* Ensures it behaves like an inline element */
    vertical-align: middle; /* Aligns the icon with the text */
    position: relative; /* Enables precise positioning */
    top: 2px; /* Nudges the icon slightly upward */
}

.lock-icon1 {
    margin-left: 0.5em; /* Adds spacing between the text and the image */
    height: 1em; /* Scales the image with the font size */
    width: auto; /* Maintains the image's aspect ratio */
    display: inline-block; /* Ensures it behaves like an inline element */
    vertical-align: middle; /* Aligns the icon with the text */
    position: relative; /* Enables precise positioning */
    top: 0px; /* Nudges the icon slightly upward */
}

.loginmenu-text {
    font-size: 0.9rem;
    color: #D2B34F;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.5; /* Adds 50% more space between lines */
}







/* GALLERY BASE STYLES */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 10px;
  max-width: 100%;
  margin: 20px auto;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

/* MOBILE PHONES - Up to 743px (preserve our mobile work) */
@media (max-width: 743px) {
    /* Make the gallery break out of container constraints */
    .gallery {
        /*  width: 100vw !important;  don't think I need this it is causing images to break boundaires and go to next slide*/
        margin-left: calc(-50vw + 50%) !important;
        padding: 0 !important;
        box-sizing: border-box;
        grid-template-columns: 1fr !important; /* Single column for mobile */
        gap: 0 !important; /* Remove gap for full-width mobile */
        margin: 0 !important; /* Remove margin for full-width mobile */
    }
    
    /* Remove container padding that might affect gallery and bring container up */
    .project-detail-info .container,
    .project-detail-info .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: -40px !important;
    }
    
    /* Bring the container up by additional 20px */
    .container {
        margin-top: -28px !important;
    }
    
    /* Vertical align carousel item content to top */
    .project-carousel-item .inner-content {
        vertical-align: top !important;
    }
    
    /* Style the login link and lock icon */
    .project-category a {
        color: #D2B34F !important;
        text-decoration: none !important;
    }
    
    .project-category {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Remove top padding from project detail info */
    .project-detail-info.col-md-6,
    .project-detail-info.col-md-12 {
        padding-top: 0.2rem !important;
    }
    
    /* Keep padding for title and text content */
    .project-detail-title,
    .project-detail-text {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Reduce title font size on mobile */
    .project-detail-title {
        font-size: 2.4em !important;
    }
    
    /* Mobile gallery images - full width with vertical spacing */
    .gallery img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important; /*  square aspect ratio for mobile */
        object-fit: cover;
        display: block;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }
    
    /* Remove bottom margin from last image */
    .gallery img:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Alternative approach if the above doesn't work due to container constraints */
    .project-detail-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    
/* Move owl carousel navigation to top right on mobile - adjacent to each other */
.project-carousel .owl-prev,
.project-carousel .owl-next {
    top: var(--owl-nav-top, 100px) !important;
    position: absolute !important;
    z-index: 10 !important;
    left: auto !important;
    right: auto !important;
    display: none;
}
.project-carousel .owl-next {
    right: 7px !important;
}

.project-carousel .owl-prev {
    right: calc(15px + 40px + 3px) !important;
}

/* Make sure the icons still work */
.project-carousel .owl-prev:before {
    font-family: "Linearicons" !important;
    content: "\e93b" !important;
}
.project-carousel .owl-next:before {
    font-family: "Linearicons" !important;
    content: "\e93c" !important;
}






}

/* TABLETS - iPad Mini and similar (744px to 834px) */
@media (min-width: 744px) and (max-width: 834px) {
    .gallery {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) !important;
        gap: 10px !important;
        max-width: calc(3 * 175px + 2 * 10px) !important; /* Max 3 columns for tablets */
        margin: 20px auto !important;
        width: auto !important; /* Reset the mobile full-width */
        margin-left: auto !important; /* Reset the mobile margin */
        padding: 0 !important;
        box-sizing: border-box;
    }
    
    .gallery img {
        width: 100% !important;
        aspect-ratio: 1 !important; /* Restore square aspect ratio */
        object-fit: cover !important;
        cursor: pointer;
        transition: transform 0.3s ease;
        margin: 0 !important; /* Reset mobile margins */
        display: block;
    }
}

/* DESKTOP SMALL - 835px to 1199px */
@media (min-width: 835px) and (max-width: 1199px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
        max-width: calc(4 * 175px + 3 * 10px);
    }
}

/* DESKTOP LARGE - 1200px and up */
@media (min-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
        max-width: 100%;
    }
}


/* CAROUSEL ARROWS */
.project-carousel .owl-prev,
.project-carousel .owl-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.project-carousel .owl-prev {
  left: 10px;
}

.project-carousel .owl-next {
  right: 10px;
}





/* Friends Login Styles */
#loginButton {
    background-color: #333;
    color: #fff;
    margin-top: 7px;
    padding: 14px 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 12.042rem;
    text-align: center;
    opacity: 0.9;
    font-size: 1rem;
    font-weight: 400;
    align-self: flex-start; /* Prevents stretching */
    flex-shrink: 0; /* Prevents shrinking */
    flex: none;
    height: 35px; /* or a specific height like 37px */
    box-sizing: border-box;

    /* Add these for consistent text centering */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

}
#passwordInput {
    margin-top: 5px;
    padding: 5px;
    padding-left: 10px;
    width: calc(12.042rem - 0px);
    text-align: left;
}

#userinput {
    margin-top: 5px;
    padding: 5px;
    padding-left: 10px;
    width: calc(8.042rem - 0px);
    text-align: left;
}


/* Commented out for future use */
/*
#FriendsName {
    margin-top: 5px;
    padding: 5px;
    padding-left: 10px;
    width: calc(12.042rem - 40px);
    text-align: left;
}
*/

#submitButton {
    margin-top: 7px;
    margin-left: 5px;
    padding: 7px 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 6.042rem;
    text-align: center;
    opacity: 0.9;
}

.hidden {
    display: none;
}


@media (max-width: 743px) {
  .pagepiling .section-1.pp-scrollable .vertical-centred {
    padding-bottom: 16rem;
  }
}

/* New Section */

/* Final Mobile Login CSS with all updates */
/* General Body Style for Demo */



/* --- Main Login Component Styles --- */

/* General class to hide elements */
.hidden {
    display: none !important;
}

#passwordBox {
    display: flex;
    align-items: center; /* This vertically aligns the form elements */
    gap: 10px;
    flex-wrap: wrap; 
    margin-top: 10px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Styling for desktop inputs */
#userinput,
#passwordInput {
    flex-grow: 1; 
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
    height: 35px;
    box-sizing: border-box;
    min-width: 150px;
}

/* Generic button styling */
.btn2 {
    height: 35px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid transparent; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    
    /* Use Flexbox to perfectly center text inside the button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* THE DEFINITIVE FIX: Reset line-height to prevent conflicts with flexbox alignment */
    line-height: 1;
}

/* Specific styles for login/submit button */
#loginButton,
#submitButton {
    background: #D2B34F;
    color: white;
    border-color: #D2B34F;
}

#loginButton:hover,
#submitButton:hover {
    background: #c4a545;
    border-color: #c4a545;
}

/* Desktop cancel button styling */
#desktopCancelButton {
    background: transparent;
    color: #ccc;
    border-color: #666;
}

#desktopCancelButton:hover {
    color: #fff;
    border-color: #999;
    background: rgba(255, 255, 255, 0.1);
}

/* Desktop logout button styling */
#logoutButton {
    background: transparent;
    color: #ccc;
    border-color: #666;
}

#logoutButton:hover {
    color: #fff;
    border-color: #999;
    background: rgba(255, 255, 255, 0.1);
}








/* --- Main Login Component Styles --- */

/* General class to hide elements */
.hidden {
    display: none !important;
}

#passwordBox {
    display: flex;
    align-items: center; /* This vertically aligns the form elements */
    gap: 10px;
    flex-wrap: wrap; 
    margin-top: 10px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* THE DEFINITIVE FIX: Force all direct children of the form to have the same vertical alignment */
#passwordBox > * {
    vertical-align: middle;
}

/* Styling for desktop inputs */
#userinput,
#passwordInput {
    flex-grow: 1; 
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
    height: 35px;
    box-sizing: border-box;
    min-width: 150px;
}

/* Generic button styling */
.btn2 {
    height: 35px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid transparent; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    
    /* Use Flexbox to perfectly center text inside the button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Reset line-height to prevent conflicts with flexbox alignment */
    line-height: 1;
}

/* Specific styles for login/submit button */
#loginButton,
#submitButton {
    background: #D2B34F;
    color: white;
    border-color: #D2B34F;
}

#loginButton:hover,
#submitButton:hover {
    background: #c4a545;
    border-color: #c4a545;
}

/* Desktop cancel button styling */
#desktopCancelButton {
    background: transparent;
    color: #ccc;
    border-color: #666;
}

#desktopCancelButton:hover {
    color: #fff;
    border-color: #999;
    background: rgba(255, 255, 255, 0.1);
}

/* --- Mobile Modal Styles --- */
.scroll-disabled {
    overflow: hidden !important;
}

.mobile-login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: none; 
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.mobile-login-content {
    background: #272727;
    padding: 30px;
    border-radius: 10px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
}

.mobile-login-content h3 {
    margin-top: 0;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

.mobile-login-content input[type="text"],
.mobile-login-content input[type="password"] {
    font-size: 16px;
    padding: 12px;
    margin: 8px 0;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #555;
    border-radius: 5px;
    background: #333;
    color: #fff;
}

.mobile-login-content input[type="text"]:focus,
.mobile-login-content input[type="password"]:focus {
    border-color: #D2B34F;
    outline: none;
    box-shadow: 0 0 5px rgba(210, 179, 79, 0.5);
}

#modal-submitButton {
    min-height: 44px;
    background: #D2B34F;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px;
    font-weight: bold; /* Keeping this bold for emphasis on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-submitButton:hover {
    background: #c4a545;
}

.modal-cancel-button {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid #666;
    color: #ccc;
    text-decoration: none;
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

.modal-cancel-button:hover {
    color: #fff;
    border-color: #999;
    background: rgba(255, 255, 255, 0.1);
}







/* This is designed to prevent accidental left to right scrolling in the gallery  */
.owl-carousel .owl-stage-outer {
  touch-action: pan-y !important;
}






/* Navigation Tooltips Added June 12*/
/* Navigation Tooltips Added June 12*/

/* Base tooltip styles */
/* Base tooltip styles */
/* Base tooltip styles - ALIGNMENT FIX */
.nav-tooltip {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) !important; /* Force consistent centering */
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, right 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    font-weight: 500;
    /* Prevent layout shifts */
    will-change: opacity, visibility, right;
    backface-visibility: hidden;
}

.nav-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.9);
}

/* Show all tooltips on hover (other pages) */
body.show-all-tooltips .nav-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    right: 30px !important;
}

/* Auto-show all tooltips (Home page) */
body.show-all-tooltips-auto .nav-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    right: 30px !important;
}

/* Dot scaling on hover */
#pp-nav li:hover a {
    transform: scale(1.3);
}

/* TOP TO BOTTOM staggered animation for showing tooltips on homepage */
body.show-all-tooltips-auto #pp-nav li:nth-child(1) .nav-tooltip { 
    transition-delay: 0.1s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(2) .nav-tooltip { 
    transition-delay: 0.2s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(3) .nav-tooltip { 
    transition-delay: 0.3s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(4) .nav-tooltip { 
    transition-delay: 0.4s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(5) .nav-tooltip { 
    transition-delay: 0.5s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(6) .nav-tooltip { 
    transition-delay: 0.6s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(7) .nav-tooltip { 
    transition-delay: 0.7s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(8) .nav-tooltip { 
    transition-delay: 0.8s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(9) .nav-tooltip { 
    transition-delay: 0.9s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(10) .nav-tooltip { 
    transition-delay: 1s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(11) .nav-tooltip { 
    transition-delay: 1.1s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(12) .nav-tooltip { 
    transition-delay: 1.2s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(13) .nav-tooltip { 
    transition-delay: 1.3s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}
body.show-all-tooltips-auto #pp-nav li:nth-child(14) .nav-tooltip { 
    transition-delay: 1.4s; 
    animation: tooltipSlideIn 0.5s ease-out forwards;
}

/* Slide-in animation (top to bottom for homepage) */
@keyframes tooltipSlideIn {
    0% {
        right: 15px;
        opacity: 0;
        transform: translateY(-50%) !important;
    }
    100% {
        right: 30px;
        opacity: 1;
        transform: translateY(-50%) !important;
    }
}

/* Fast hover animation for other pages */
body.show-all-tooltips #pp-nav li .nav-tooltip { 
    transition-delay: 0s;
}
body.show-all-tooltips #pp-nav li:nth-child(1) .nav-tooltip { transition-delay: 0s; }
body.show-all-tooltips #pp-nav li:nth-child(2) .nav-tooltip { transition-delay: 0.02s; }
body.show-all-tooltips #pp-nav li:nth-child(3) .nav-tooltip { transition-delay: 0.04s; }
body.show-all-tooltips #pp-nav li:nth-child(4) .nav-tooltip { transition-delay: 0.06s; }
body.show-all-tooltips #pp-nav li:nth-child(5) .nav-tooltip { transition-delay: 0.08s; }
body.show-all-tooltips #pp-nav li:nth-child(6) .nav-tooltip { transition-delay: 0.1s; }
body.show-all-tooltips #pp-nav li:nth-child(7) .nav-tooltip { transition-delay: 0.12s; }
body.show-all-tooltips #pp-nav li:nth-child(8) .nav-tooltip { transition-delay: 0.14s; }
body.show-all-tooltips #pp-nav li:nth-child(9) .nav-tooltip { transition-delay: 0.16s; }
body.show-all-tooltips #pp-nav li:nth-child(10) .nav-tooltip { transition-delay: 0.18s; }
body.show-all-tooltips #pp-nav li:nth-child(11) .nav-tooltip { transition-delay: 0.2s; }
body.show-all-tooltips #pp-nav li:nth-child(12) .nav-tooltip { transition-delay: 0.22s; }
body.show-all-tooltips #pp-nav li:nth-child(13) .nav-tooltip { transition-delay: 0.24s; }
body.show-all-tooltips #pp-nav li:nth-child(14) .nav-tooltip { transition-delay: 0.26s; }

/* Base styles for navigation items */
#pp-nav li {
    position: relative; /* Ensure proper positioning for tooltips */
}

/* Tooltip becomes yellow when active or hovered */
#pp-nav li:hover .nav-tooltip,
#pp-nav li:focus-within .nav-tooltip,
#pp-nav li:active .nav-tooltip {
    background-color: #EDCB52; /* Change background color to yellow */
    color: black; /* Ensure text remains readable */
}

/* Update arrow color for yellow tooltips */
#pp-nav li:hover .nav-tooltip::after,
#pp-nav li:focus-within .nav-tooltip::after,
#pp-nav li:active .nav-tooltip::after {
    border-left-color: #EDCB52;
}

/* Tooltip hover styling */
#pp-nav li:hover .nav-tooltip {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Immediately show the tooltip on hover */
}

/* Tooltip fade-out styling */
.nav-tooltip.fade-out {
    opacity: 0;
    visibility: hidden;
    transition-delay: 4s; /* Add a delay before the fade-out starts */
}




/* Universal two-column responsive spacing */
@media (min-width: 768px) {
  .two-col-left {
    padding-right: 30px;
  }
  
  .two-col-right {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .two-col-left,
  .two-col-right {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .two-col-left {
    margin-bottom: 40px;
  }
}


/* Hide the text and show your original icons */
.project-carousel .owl-prev,
.project-carousel .owl-next {
  font-size: 0 !important;
}

.project-carousel .owl-prev:before {
  font-size: 20px !important;
  font-family: "Linearicons" !important;
  content: "\e93b" !important;
}

.project-carousel .owl-next:before {
  font-size: 20px !important;
  font-family: "Linearicons" !important;
  content: "\e93c" !important;
}

/* Private section styling overrides */
.private-resume-name {
    font-size: 1.2em;
    font-weight: bold;
    color: inherit;
    margin-bottom: 0.5rem;
}

.private-resume-role {
    color: white !important;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.private-resume-contact {
    color: #D2B34F !important;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.private-resume-details {
    color: white !important;
    line-height: 1.6;
    margin-bottom: 1rem;
}







/* "New" Tag CSS */
.new-tag {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    margin-left: 0.5rem;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
    animation: pulse-glow 2s infinite;
}

/* Subtle pulsing animation */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 3px 12px rgba(255, 107, 107, 0.5);
        transform: scale(1.05);
    }
}

/* Alternative versions */

/* Golden version */
.new-tag.golden {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3);
}

@keyframes pulse-glow-golden {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 3px 12px rgba(243, 156, 18, 0.5);
        transform: scale(1.05);
    }
}

.new-tag.golden {
    animation: pulse-glow-golden 2s infinite;
}

/* Green version */
.new-tag.green {
    background: linear-gradient(135deg, #27ae60, #229954);
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3);
}

@keyframes pulse-glow-green {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 3px 12px rgba(39, 174, 96, 0.5);
        transform: scale(1.05);
    }
}

.new-tag.green {
    animation: pulse-glow-green 2s infinite;
}

/* Static version (no animation) */
.new-tag.static {
    animation: none;
    transform: none;
}




/* Rotate the owl-prev arrow */
.back-link .owl-prev {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

/* Style the back link */
.back-link {
    display: inline-flex; /* Ensures the link and arrow are on the same line */
    align-items: center; /* Vertically aligns the arrow with the text */
    color: #f7f7f7; /* Yellow color */
    text-decoration: none; /* Removes underline */
    font-size: 1.5rem; /* Adjust font size */
    margin-left: auto; /* Pushes the link to the right */
}

/* Hover effect for the link */
.back-link:hover {
    text-decoration: none; /* Removes underline */
    color: #F4C930; /* Yellow color */

}