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

 body {
   margin: 0;
   background-color: #1a1a1a;
   color: #FFFFFFDD;
   position: relative;
   overflow: hidden;
   /* font-family: "Inter", sans-serif; */
   font-family: "Poiret One", sans-serif;
 }


 .card {
   position: absolute;
   left: 0;
   top: 0;
   background-position: center;
   background-size: cover;
   box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.6);
 }

 .card-content {
   position: absolute;
   left: 0;
   top: 0;
   color: #FFFFFFDD;
   padding-left: 16px;
 }

 .content-place {
   margin-top: 6px;
   font-size: 13px;
   font-weight: 500;
 }

 .content-title-1,
 .content-title-2 {
   font-weight: 600;
   font-size: 20px;
   /* font-family: "Oswald", sans-serif; */
 }

 .content-start {
   width: 30px;
   height: 5px;
   border-radius: 99px;
   background-color: #FFFFFFDD;
 }

 .details {
   z-index: 50 !important;
   position: absolute;
   top: 240px;
   left: 60px;
   border-radius: 6px;
   background: rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(6px);
   padding: 0 20px 20px 20px;
 }


 .details .place-box {
   height: 46px;
   overflow: hidden;
 }

 .details .place-box .text {
   padding-top: 16px;
   font-size: 20px;
   position: relative;
 }

 .details .place-box .text:before {
   top: 0;
   left: 0;
   position: absolute;
   content: "";
   width: 30px;
   height: 4px;
   border-radius: 99px;
   background-color: white;
 }

 .details .title-1,
 .details .title-2 {
   font-weight: 900;
   font-size: 72px;
   /* font-family: "Oswald", sans-serif; */
 }

 .details .title-box-1,
 .details .title-box-2 {
   margin-top: 2px;
   height: 100px;
   overflow: hidden;
 }

 .details>.desc {
   margin-top: 26px;
   max-width: 600px;
   font-weight: 700;
   font-size: 26px;
 }

 .details>.cta {
   width: 500px;
   margin-top: 24px;
   display: flex;
   align-items: center;
 }

 .details>.cta .bookmark {
   border: none;
   background-color: #ecad29;
   width: 36px;
   height: 36px;
   border-radius: 99px;
   color: white;
   display: grid;
   place-items: center;
   cursor: pointer;
 }

 .details>.cta .bookmark svg {
   width: 20px;
   height: 20px;
 }

 .details>.cta .discover {
   border: 1px solid #ffffff;
   background-color: transparent;
   height: 36px;
   border-radius: 99px;
   color: #ffffff;
   padding: 4px 24px;
   font-size: 12px;
   margin-left: 16px;
   text-transform: uppercase;
   cursor: pointer;
 }

 nav {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   z-index: 50;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 36px;
   font-weight: 500;
 }

 nav svg {
   width: 20px;
   height: 20px;
 }

 nav .svg-container {
   width: 20px;
   height: 20px;
 }

 nav>div {
   display: inline-flex;
   align-items: center;
   text-transform: uppercase;
   font-size: 14px;
 }

 nav>div:first-child {
   gap: 10px;
 }

 nav>div:last-child {
   gap: 24px;
 }

 nav>div:last-child>.active {
   position: relative;
 }

 nav>div:last-child>.active:after {
   bottom: -8px;
   left: 0;
   right: 0;
   position: absolute;
   content: "";
   height: 3px;
   border-radius: 99px;
   background-color: #ecad29;
 }

 .indicator {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   height: 5px;
   z-index: 60;
   background-color: #ecad29;
 }

 .pagination {
   position: absolute;
   left: 0px;
   top: 0px;
   display: inline-flex;
 }

 .pagination>.arrow {
   z-index: 60;
   width: 50px;
   height: 50px;
   border-radius: 999px;
   border: 2px solid #ffffff55;
   display: grid;
   place-items: center;
   cursor: pointer;
 }

 .pagination>.arrow:nth-child(2) {
   margin-left: 20px;
 }

 .pagination>.arrow svg {
   width: 24px;
   height: 24px;
   stroke-width: 2;
   color: #ffffff99;
 }

 .pagination .progress-sub-container {
   margin-left: 24px;
   z-index: 60;
   width: 500px;
   height: 50px;
   display: flex;
   align-items: center;
 }

 .pagination .progress-sub-container .progress-sub-background {
   width: 500px;
   height: 3px;
   background-color: #ffffff33;
 }

 .pagination .progress-sub-container .progress-sub-background .progress-sub-foreground {
   height: 3px;
   background-color: #ecad29;
 }

 .pagination .slide-numbers {
   width: 50px;
   height: 50px;
   overflow: hidden;
   z-index: 60;
   position: relative;
 }

 .pagination .slide-numbers .item {
   width: 50px;
   height: 50px;
   position: absolute;
   color: white;
   top: 0;
   left: 0;
   display: grid;
   place-items: center;
   font-size: 32px;
   font-weight: bold;
 }

 .cover {
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   background-color: #fff;
   z-index: 100;
 }


 .card {
   border-radius: 16px;
 }

 @media (max-width: 1200px) {
   .details {
     left: 40px;
     top: 200px;
   }

   .details .title-1,
   .details .title-2 {
     font-size: 56px;
   }
 }


 @media (max-width: 992px) {
   .details {
     width: 90%;
     left: 20px;
     top: 160px;
   }

   .details .desc {
     width: 100%;
   }

   .pagination {
     left: 20px !important;
     top: auto !important;
     bottom: 40px;
   }
 }


 @media (max-width: 768px) {
   .details {
     top: auto;
     bottom: 140px;
     left: 20px;
   }

   .details .title-1,
   .details .title-2 {
     font-size: 36px;
   }

   .details .desc {
     font-size: 14px;
   }

   .pagination .progress-sub-container {
     display: none;
   }

   .pagination .arrow {
     width: 42px;
     height: 42px;
   }
 }


 .overlay-style {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.15);
   z-index: 100;
   pointer-events: none;

 }



 /* Project Details Section */
 .project-details {
   padding: 80px 100px;
   display: flex;
   position: relative;
   margin-top: 100vh;
   flex-direction: row;
   color: #2c3e50;
   z-index: 200;
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   gap: 60px;
   align-items: center;
 }

 .project-details-left {
   width: 40%;
 }

 .project-details-left h2 {
   padding: 0 0 24px 0;
   font-size: 42px;
   font-weight: 700;
   color: #1a1a1a;
   line-height: 1.2;
   position: relative;
 }

 .project-details-left h2:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 60px;
   height: 4px;
   background: #ecad29;
   border-radius: 2px;
 }

 .project-details-left p {
   font-size: 18px;
   line-height: 1.8;
   color: #4a5568;
   font-weight: 600;
 }

 .project-details-right {
   width: 60%;
 }

 .project-details-right .details-img {
   width: 100%;
   height: 500px;
   object-fit: cover;
   border-radius: 16px;
   box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   will-change: transform;
 }

 .project-details-right .details-img:hover {
   transform: scale(1.02);
   box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
 }

 /* Project Quality Section */
 .project-quality {
   padding: 80px 100px;
   display: flex;
   position: relative;
   flex-direction: row;
   color: #2c3e50;
   z-index: 200;
   background-color: #ffffff;
   gap: 60px;
   align-items: flex-start;
 }

 .project-quality-right h2 {
   padding: 0 0 24px 0;
   font-size: 42px;
   font-weight: 700;
   color: #1a1a1a;
   margin-bottom: 30px;
   position: relative;
 }

 .project-quality-right h2:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 60px;
   height: 4px;
   background: #ecad29;
   border-radius: 2px;
 }

 .project-quality-right h3 {
   font-size: 24px;
   font-weight: 600;
   color: #1a1a1a;
   margin: 30px 0 16px 0;
 }

 .project-quality-right ul {
   list-style: none;
   padding: 0;
   margin-bottom: 30px;
 }

 .project-quality-right ul li {
   padding: 10px 0 10px 30px;
   font-size: 17px;
   line-height: 1.6;
   color: #4a5568;
   position: relative;
   font-weight: 600;
 }

 .project-quality-right ul li:before {
   content: '▸';
   position: absolute;
   left: 0;
   color: #ecad29;
   font-size: 20px;
   transition: transform 0.3s ease;
 }

 .project-quality-right ul li:hover:before {
   transform: translateX(5px);
 }

 .project-quality-left {
   width: 50%;
 }

 .project-quality-right {
   width: 50%;
 }

 .quality-images {
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 20px 0;
   gap: 20px;
 }

 .project-quality-left img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   border-radius: 12px;
   box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   will-change: transform;
 }

 .project-quality-left img:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15);
 }

 /* Mobile Responsive */
 @media screen and (max-width: 768px) {
   .project-details {
     flex-direction: column;
     padding: 40px 20px;
     gap: 30px;
     /* margin-top: 0; */
   }

   .project-details-left {
     width: 100%;
     order: 1;
   }

   .project-details-right {
     width: 100%;
     order: 2;
   }

   .project-details-left h2 {
     font-size: 32px;
   }

   .project-details-left p {
     font-size: 16px;
   }

   .project-details-right .details-img {
     height: 350px;
   }

   .project-quality {
     flex-direction: column;
     padding: 40px 20px;
     gap: 30px;
   }

   .project-quality-left {
     width: 100%;
     order: 2;
   }

   .project-quality-right {
     width: 100%;
     order: 1;
   }

   .project-quality-right h2 {
     font-size: 32px;
   }

   .project-quality-right h3 {
     font-size: 20px;
   }

   .project-quality-right ul li {
     font-size: 15px;
   }

   .quality-images {
     flex-direction: column;
     gap: 15px;
     padding: 10px 0;
   }

   .project-quality-left img {
     height: 250px;
   }
 }

 /* Tablet Responsive */
 @media screen and (min-width: 769px) and (max-width: 1024px) {
   .project-details {
     padding: 60px 40px;
     gap: 40px;
   }

   .project-details-left h2 {
     font-size: 36px;
   }

   .project-details-right .details-img {
     height: 400px;
   }

   .project-quality {
     padding: 60px 40px;
     gap: 40px;
   }

   .project-quality-left img {
     height: 250px;
   }
 }