body {
     overflow-x: unset;
 }

 .collab-section {
     background: var(--card-bg);
     padding: 40px 0;
     overflow: hidden;
     border-top: 1px solid #222;
     border-bottom: 1px solid #222;
 }

 .collab-content {
     display: flex;
     gap: 80px;
     animation: scroll 25s linear infinite;
     width: max-content;
     align-items: center;
 }

 .brand-logo img {
     height: 80px;
     filter: grayscale(100%);
     transition: all 0.5s ease;

 }

 .brand-logo:hover img {
     filter: grayscale(0%);
     transform: scale(1.1);
 }

 .collab-section:hover .collab-content {
     animation-play-state: paused;
 }

 /* Animations */
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

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

 .awards-section {
     padding: 80px 0;
     position: relative;
 }

 .award-menu {
     display: flex;
     justify-content: center;
     gap: 30px;
     flex-wrap: wrap;
     border: 1px solid #474747;
     padding: 10px;
     border-radius: 50px;
     width: fit-content;
     margin: 0 auto 50px auto;
     transition: all 0.3s ease;
     z-index: 100;
     backdrop-filter: blur(10px);
 }

 .award-menu.sticky {
     position: fixed;
     top: 80px;
     width: 100%;
     left: 0;
     right: 0;
     margin: auto;
     max-width: 920px;
     /* transform: translateX(-50%); */
     /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); */
 }

 .award-menu-item {
     padding: 10px 20px;
     border-radius: 30px;
     cursor: pointer;
     transition: all 0.3s ease;
     /* border: 1px solid; */
 }

 .award-menu-item:not(.active):hover {
     color: var(--brand-primary);
 }

 .award-menu-item.active {
     background: var(--brand-primary);
     color: #fff;
     /* border-color: #fff; */
 }

 .my-award-item h1 {
     font-size: 36px;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .my-award-item .artist {
     font-size: 18px;
     color: var(--text-secondary);
     margin-bottom: 20px;
 }

 .my-award-item .course-desc {
     font-size: 16px;
     margin-bottom: 20px;
 }

 .my-award-item ul {
     list-style: none;
     padding: 0;
 }

 .my-award-item ul li {
     font-size: 16px;
     margin-bottom: 10px;
 }

 .my-award-item ul li svg {
     color: var(--brand-secondary);
     margin-right: 10px;
 }

 .my-award-item .award-img {
     border-radius: 20px;
     max-height: 400px;
     object-fit: contain;
     object-position: center;
     text-align: center;
     /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
 }

 .portfolio-track {
     position: relative;
     margin: 40px 0;
     display: flex;
     gap: 40px;
     width: max-content;
     animation: scroll 40s linear infinite;
 }

 .portfolio-track:hover {
     animation-play-state: paused;
 }

 /* Pause on hover */

 /* track before and after fade */
 .portfolio-track::before,
 .portfolio-track::after {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100px;
     pointer-events: none;
     z-index: 5;
 }

 .portfolio-track::before {
     left: 0;
     background: linear-gradient(to right, var(--body-bg), transparent);
 }

 .portfolio-track::after {
     right: 0;
     background: linear-gradient(to left, var(--body-bg), transparent);
 }



 .p-item {
     position: relative;
     height: 360px;
     /* Fixed Height for alignment */
     border-radius: 4px;
     overflow: hidden;
     transition: 0.4s;
     filter: grayscale(100%) brightness(0.7);
     /* Cinematic Dark Look */
     flex-shrink: 0;
     cursor: pointer;
 }

 .p-item img {
     height: 100%;
     width: auto;
     display: block;
     object-fit: cover;
 }

 /* Hover Effect */
 .p-item:hover {
     filter: grayscale(0%) brightness(1.1);
     transform: scale(1.05);
     z-index: 10;
     box-shadow: 0 0 50px rgba(255, 74, 23, 0.3);
     border: 1px solid var(--primary);
 }

 .wall-section {
     padding: var(--section-padding) 0;
 }

 .wall-photo {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     margin-bottom: 20px;
     cursor: pointer;
 }

 .wall-photo img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.4s ease;
 }

 .wall-photo:hover img {
     transform: scale(1.05);
 }

 .wall-content {
     position: absolute;
     bottom: -200px;
     width: calc(100% - 20px);
     left: 0px;
     right: 0;
     margin: auto;
     color: #fff;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(5px);
     padding: 10px;
     border-radius: 5px;
     transition: all 0.4s ease;
 }

 .wall-photo:hover .wall-content {
     bottom: 10px;
 }

 .craft-testimonials {
     padding: var(--section-padding) 0;
     background-color: #121212;
 }

 .slick-testimonials {
     margin-top: 40px;

 }

 .testimonial {
     background-color: #1e1e1e;
     padding: 30px;
     margin: 20px;
     border-radius: 15px;
     color: #e4e4e4;
     text-align: center;
     border: 1px solid #1e1e1e;
     transition: all 0.4s ease;
 }

 .testimonial:hover {
     border: 1px solid rgba(226, 192, 99, 0.5);
 }

 .slick-testimonials .slick-track {
     padding-top: 50px;
 }

 .testimonial .stars {
     margin-bottom: 15px;
 }

 .testimonial .stars svg {
     width: 20px;
     color: #FFD700;
     margin: 0 2px;
 }

 .testimonial p {
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .test-profile {
     display: flex;
     align-items: center;
     gap: 15px;
     justify-content: center;
 }

 .test-profile img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #FF6B00;
 }

 .test-profile h5 {
     margin: 0;
     font-size: 18px;
     font-weight: 600;
 }

 .test-profile p {
     margin: 0;
     color: #888;
     font-size: 14px;
 }

 .test-img {
     border-radius: 50%;
     width: 150px;
     height: 150px;
     object-fit: cover;
     margin-bottom: 40px;
     margin-top: -100px;
     margin-left: auto;
     margin-right: auto;
 }

 /* add a fading ends and starts to .slick-testimonials */
 .slick-testimonials .slick-list::before,
 .slick-testimonials .slick-list::after {
     content: "";
     position: absolute;
     top: 0;
     width: 100px;
     height: 100%;
     z-index: 2;
 }

 .slick-testimonials .slick-list::before {
     left: 0;
     background: linear-gradient(to right, #121212, transparent);
 }

 .slick-testimonials .slick-list::after {
     right: 0;
     background: linear-gradient(to left, #121212, transparent);
 }


 /* new css */
 .hero-1 {
     margin-top: 50px;

 }

 .page-title {
     font-size: 56px;
     font-weight: 700;
     margin-bottom: 0px;
     text-align: left;
 }

 .sub-title {
     font-size: 20px;
     font-weight: 500;
     margin-bottom: 20px;
     text-align: left;
     color: #888;
 }

 .description {
     font-size: 16px;
     line-height: 1.6;
     color: #fff;
     text-align: left;
 }

 .section-title {
     margin-bottom: 20px;
     font-size: 38px;
 }

 .proven {
     padding: 20px 0;
 }

 .proven-grid {
     /* 2/2 grid responsive */
     display: grid;
     grid-template-columns: 1fr 1fr;

 }

 .proven-grid .proven-card {
     /* outline: 1px solid #888; */
     padding: 16px;
     display: flex;
 }

 .proven-card .num {
     font-size: 48px;
     font-weight: 700;
     color: var(--brand-primary);
     margin-right: 20px;
 }

 .proven-card h4 {
     font-size: 28px;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .proven-card p {
     font-size: 16px;
     line-height: 1.3;
     color: #ccc;
 }

 .team {
     width: 100%;
     overflow: hidden;
     display: flex;
 }

 .team .user {
     width: 250px;
     margin-right: 20px;
     position: relative;
     overflow: hidden;
     aspect-ratio: 4/5;
 }

 .team .user img {
     width: 100%;
 }

 .team .user .user-content {
     position: absolute;
     bottom: 0;
     width: 100%;
     background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
 }

 .user .user-content h4 {
     margin: 0;
     font-size: 22px;
     font-weight: 600;
 }

 .user .user-content p {
     margin: 0;
     font-size: 16px;
     color: #888;
 }

 .user .socials {
     position: absolute;
     top: 0;
     left: -30px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     transition: all ease 0.5s;
 }

 .socials svg {
     width: 22px;
     height: 22px;
 }

 .user:hover .socials {
     left: 5px;
 }

 /* Animations */
 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.8);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 0.5;
     }

     50% {
         transform: translate(-50%, -50%) scale(1.1);
         opacity: 0.8;
     }
 }

 /* Advanced Services Section - Premium Interactive Design */
 .advanced-services-section {
     padding: 120px 0;
     background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
     /* position: relative; */
     /* overflow: hidden; */
 }

 .advanced-services-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* background: 
                radial-gradient(circle at 20% 50%, rgba(224, 49, 36, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(248, 112, 22, 0.03) 0%, transparent 50%); */
     pointer-events: none;
 }

 .advanced-services-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 40px;
     position: relative;
     /* z-index: 2; */
 }

 .advanced-services-header {
     text-align: center;
     margin-bottom: 100px;
     opacity: 0;
     transform: translateY(30px);
     animation: fadeInUp 0.8s ease forwards;
 }

 .advanced-services-header h2 {
     font-size: clamp(2.5rem, 5vw, 4rem);
     font-weight: 700;
     margin-bottom: 20px;
     letter-spacing: -1px;
 }

 .advanced-services-header p {
     font-size: 1.2rem;
     color: var(--white-muted);
     max-width: 600px;
     margin: 0 auto;
 }

 .advanced-services-wrapper {
     display: flex;
     gap: 80px;
     align-items: flex-start;
     position: relative;
 }

 .services-list-container {
     flex: 1;
     max-width: 650px;
 }

 .service-item {
     display: flex;
     align-items: center;
     gap: 40px;
     padding: 40px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     cursor: pointer;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     opacity: 0;
     transform: translateX(-30px);
 }

 .service-item.animate-in {
     animation: slideInLeft 0.8s ease forwards;
 }

 .service-item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 80%;
     background: var(--gradient-primary);
     border-radius: 0 10px 10px 0;
     opacity: 0;
     transition: all 0.4s ease;
 }

 .service-item:hover::before,
 .service-item.active::before {
     width: 4px;
     opacity: 1;
 }

 .service-item:hover {
     padding-left: 20px;
 }

 .service-item.active {
     padding-left: 20px;
     background: rgba(224, 49, 36, 0.02);
 }

 .service-number {
     font-size: 1.5rem;
     font-weight: 700;
     color: rgba(255, 255, 255, 0.2);
     min-width: 50px;
     font-family: 'Courier New', monospace;
     transition: all 0.4s ease;
 }

 .service-item:hover .service-number,
 .service-item.active .service-number {
     color: var(--brand-primary);
     transform: scale(1.1);
 }

 .service-content {
     flex: 1;
 }

 .service-title {
     font-size: 1.8rem;
     font-weight: 700;
     margin-bottom: 10px;
     color: var(--white-primary);
     transition: color 0.4s ease;
 }

 .service-item:hover .service-title,
 .service-item.active .service-title {
     color: var(--brand-primary);
 }

 .service-description {
     font-size: 1rem;
     line-height: 1.6;
     color: var(--white-muted);
     max-width: 450px;
 }

 .service-arrow {
     width: 50px;
     height: 50px;
     border: 2px solid rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .service-arrow::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transform: scale(0);
     border-radius: 50%;
     transition: transform 0.4s ease;
 }

 .service-arrow svg {
     width: 20px;
     height: 20px;
     color: rgba(255, 255, 255, 0.4);
     transition: all 0.4s ease;
     position: relative;
     z-index: 1;
 }

 .service-item:hover .service-arrow,
 .service-item.active .service-arrow {
     border-color: var(--brand-primary);
     transform: rotate(45deg) scale(1.1);
 }

 .service-item:hover .service-arrow::before,
 .service-item.active .service-arrow::before {
     transform: scale(1);
 }

 .service-item:hover .service-arrow svg,
 .service-item.active .service-arrow svg {
     color: white;
     transform: rotate(-45deg);
 }

 .service-image-container {
     position: sticky;
     top: 80px;
     width: 500px;
     height: 600px;
     perspective: 1000px;
     opacity: 0;
     transform: scale(0.9);
     animation: scaleIn 0.8s ease 0.4s forwards;
 }

 .service-image-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 20px;
     overflow: hidden;
     box-shadow:
         0 30px 60px rgba(0, 0, 0, 0.5),
         0 0 0 1px rgba(255, 255, 255, 0.05);
     transform: translateZ(0);
     transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .service-image-wrapper::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(224, 49, 36, 0.2) 0%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: 2;
 }

 .service-image-wrapper.active::before {
     opacity: 1;
 }

 .service-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transform: scale(1.1);
     transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .service-image.active {
     opacity: 1;
     transform: scale(1);
 }

 .image-accent-dot {
     position: absolute;
     bottom: 30px;
     right: 30px;
     width: 12px;
     height: 12px;
     background: var(--brand-primary);
     border-radius: 50%;
     opacity: 0;
     transform: scale(0);
     transition: all 0.4s ease;
     z-index: 3;
     box-shadow: 0 0 20px rgba(224, 49, 36, 0.8);
 }

 .service-image-wrapper.active .image-accent-dot {
     opacity: 1;
     transform: scale(1);
     animation: pulse-dot 2s ease infinite;
 }

 @keyframes pulse-dot {

     0%,
     100% {
         box-shadow: 0 0 20px rgba(224, 49, 36, 0.8);
     }

     50% {
         box-shadow: 0 0 40px rgba(224, 49, 36, 1);
     }
 }

 .image-badge {
     position: absolute;
     top: 30px;
     left: 30px;
     padding: 10px 20px;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(10px);
     border-radius: 50px;
     font-size: 0.85rem;
     font-weight: 600;
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.1);
     opacity: 0;
     transform: translateY(-10px);
     transition: all 0.4s ease;
     z-index: 3;
 }

 .service-image-wrapper.active .image-badge {
     opacity: 1;
     transform: translateY(0);
 }

 /* Mobile Responsive for Advanced Services */
 @media (max-width: 1200px) {
     .advanced-services-wrapper {
         flex-direction: column;
         gap: 60px;
     }

     .service-image-container {
         position: relative;
         top: 0;
         width: 100%;
         max-width: 500px;
         height: 500px;
         margin: 0 auto;
         order: -1;
     }

     .services-list-container {
         max-width: 100%;
     }
 }

 @media (max-width: 768px) {
     .advanced-services-section {
         padding: var(--section-padding) 0;
     }

     .advanced-services-container {
         padding: 0 20px;
     }

     .advanced-services-header {
         margin-bottom: 60px;
     }

     .service-item {
         gap: 20px;
         padding: 30px 0;
     }

     .service-number {
         font-size: 1.2rem;
         min-width: 40px;
     }

     .service-title {
         font-size: 1.4rem;
     }

     .service-description {
         font-size: 0.95rem;
     }

     .service-arrow {
         width: 40px;
         height: 40px;
     }

     .service-arrow svg {
         width: 16px;
         height: 16px;
     }

     .service-image-container {
         height: 400px;
     }

     .service-item:hover,
     .service-item.active {
         padding-left: 15px;
     }

     .service-item::before {
         width: 3px;
     }
     .video-container iframe{
            height: 300px;
            width: 100%;
     }
     .team{
        overflow-x: auto;
     }
     .team .user{
        flex-shrink: 0;
     }
 }

 @media (max-width: 480px) {
     .page-title {
         font-size: 32px;
     }

     .sub-title {
         font-size: 16px;
     }

     .description {
         font-size: 14px;
     }

     .section-title {
         font-size: 26px;
     }

     .proven-card .num {
         font-size: 36px;
     }

     .proven-card h4 {
         font-size: 22px;
     }

     .service-item {
         flex-direction: column;
         align-items: flex-start;
     }

     .service-arrow {
         margin-top: 20px;
     }

     
     .proven-grid{
        grid-template-columns: 1fr;
     }

     .proven-grid .proven-card{
            flex-direction: column;
            align-items: left;
            text-align: left;
            padding: 0;
     }

     .slick-testimonials .slick-list::before, .slick-testimonials .slick-list::after{
        display: none;
     }

     .testimonial{
        padding: 5px;
        margin: 10px;
     }
     .test-img{
        margin-top: -50px;
        margin-bottom: 10px;
     }
     .testimonial iframe{
        height: 200px;
        width: 100%;
     }

     .advanced-services-wrapper{
        gap: 10px;
     }
     .service-item{
        gap: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
     }
     .service-content p{
        margin: 0;
        font-size: 14px;
     }
     .service-arrow{
        margin-top: 0;
     }
     .service-item{
        flex-shrink: 0;
     }

     .services-list-container{
        width: 100%;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
     }
 }