@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');

 body {
     width: 100%;
     overflow-x: hidden;
     background-color: #1f2029;
     color: #c4c3ca;
     font-family: 'Muli', sans-serif;
     margin: 0;
     padding: 0;
 }

 /* Parallax Layers */
 .shadow-title {
     position: fixed;
     top: 0;
     margin-top: 30px;
     left: 20px;
     width: 100%;
     height: 300%;
     text-align: left;
     -webkit-writing-mode: vertical-lr;
     writing-mode: vertical-lr;
     font-size: 18vw;
     line-height: 1;
     color: rgba(200, 200, 200, .1);
     background: linear-gradient(90deg, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.35));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 900;
     z-index: 1;
     pointer-events: none;
 }

 .parallax-top-shadow {
     top: 0;
 }

 .section-parallax {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-position: center;
     background-size: cover;
     z-index: 2;
 }

 /* Sections */
 .section {
     position: relative;
     width: 100%;
     display: block;
 }

 .full-height {
     height: 100vh;
 }

 .z-bigger {
     z-index: 100;
 }

 .z-bigger-2 {
     z-index: 200;
 }

 .over-hide {
     overflow: hidden;
 }

 .background-dark {
     background-color: #101010;
 }

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

 /* Hero Title */
 .section-title-wrap {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     transform: translateY(-50%);
     z-index: 3;
     text-align: center;
 }

 .section-title-wrap p {
     letter-spacing: 4px;
     font-size: 24px;
     font-weight: 700;
     color: #8b5cf6;
     margin-bottom: 10px;
 }

 .section-title-wrap h1 {
     font-size: 7vw;
     letter-spacing: 10px;
     font-weight: 900;
     color: #fff;
     text-transform: uppercase;
     line-height: 1;
 }

 /* Case Study Navigation */
 .case-study-wrapper {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
     background: rgba(31, 32, 41, .9);
     padding: 15px 25px;
     border-radius: 12px;
     box-shadow: 0 0 40px rgba(0, 0, 0, .9);
     backdrop-filter: blur(10px);
 }

 .case-study-name a {
     color: #8e8d9a;
     opacity: 0.6;
     font-weight: 800;
     font-size: 15px;
     letter-spacing: 3px;
     text-transform: uppercase;
     text-decoration: none;
     padding: 8px 15px;
     transition: all 0.3s ease;
 }

 .case-study-name a:hover,
 .case-study-name.active a {
     opacity: 1;
     color: #fff;
 }

 /* Hero Images */
 .case-study-images li {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 0.6s ease;
 }

 .case-study-images li.show {
     opacity: 1;
 }

 .img-hero-background {
     position: absolute;
     top: 50%;
     left: 50%;
     width: calc(100% - 100px);
     max-width: 1100px;
     height: 80vh;
     background: #000;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 0 80px rgba(0, 0, 0, .8);
     transform: translate(-50%, -50%);
 }

 .img-hero-background img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Details Section (after scroll) */
 .app-details-section {
     min-height: 100vh;
     padding: 150px 10%;
     background: #101010;
     position: relative;
     z-index: 300;
 }

 .app-details-card {
     max-width: 900px;
     margin: 20px auto;
     background: rgba(30, 32, 41, 0.8);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(12px);
 }

 .app-details-header {
     padding: 60px 50px;
     text-align: center;
     background: linear-gradient(135deg, #6366f1, #8b5cf6);
 }

 .app-details-header img {
     width: 140px;
     height: 140px;
     border-radius: 28px;
     border: 8px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
     margin-bottom: 20px;
 }

 .app-details-header h1 {
     font-size: 3.5rem;
     font-weight: 900;
     color: white;
     margin: 0;
 }

 .app-details-body {
     padding: 50px;
     color: #e2e8f0;
 }

 .app-details-body p {
     font-size: 1.2rem;
     line-height: 1.9;
     margin-bottom: 30px;
 }

 .info-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 20px;
     margin-top: 40px;
 }

 .info-item {
     background: rgba(139, 92, 246, 0.1);
     padding: 20px;
     border-radius: 16px;
     border: 1px solid rgba(139, 92, 246, 0.3);
 }

 .info-item strong {
     color: #8b5cf6;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* Cursor */
 .cursor,
 .cursor2,
 .cursor3 {
     position: fixed;
     border-radius: 50%;
     transform: translateX(-50%) translateY(-50%);
     pointer-events: none;
     left: -100px;
     top: 50%;
     z-index: 99999;
 }

 .cursor {
     background: #fff;
     height: 0;
     width: 0;
 }

 .cursor2,
 .cursor3 {
     height: 36px;
     width: 36px;
     z-index: 99998;
     transition: all 0.3s ease-out;
 }

 .cursor2 {
     border: 2px solid #fff;
     box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
 }

 .cursor2.hover {
     transform: scale(2) translateX(-25%) translateY(-25%);
     background: rgba(255, 255, 255, 0.1);
 }

 /* Scroll to top */
 .scroll-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 10px;
     height: 40px;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 8l-6 6h12z"/></svg>') center/10px no-repeat;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
     cursor: pointer;
     z-index: 999;
 }

 .scroll-to-top.active-arrow {
     opacity: 0.7;
     visibility: visible;
 }

 @media (max-width: 1200px) {

     .cursor,
     .cursor2,
     .cursor3 {
         display: none;
     }
 }

 @media (max-width: 768px) {
     .section-title-wrap h1 {
         font-size: 10vw;
     }

     .case-study-wrapper {
         padding: 10px;
     }

     .case-study-name a {
         font-size: 12px;
         padding: 6px 10px;
     }
 }

 /* Contact Section Styles */
 .contact-main-wrapper {
     width: 100%;
     background: #2d2d2d;
     margin-top: 100px;
 }

 .contact-header-bar {
     background: #3d3d3d;
     padding: 15px 20px;
     text-align: center;
     font-size: 18px;
     color: white;
 }

 .contact-content-container {
     display: flex;
     min-height: 600px;
 }

 .contact-map-section {
     flex: 1;
     background: linear-gradient(135deg, #1f2029 0%, #333 100%);
     padding: 40px;
     position: relative;
 }

 .contact-map-title {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 30px;
     letter-spacing: 1px;
     color: white;
 }

 .contact-map-container {
     position: relative;
     width: 100%;
     height: calc(100% - 100px);
     min-height: 400px;
 }

 .contact-location-marker {
     position: absolute;
     width: 40px;
     height: 40px;
     background: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: transform 0.2s;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }

 .contact-location-marker:hover {
     transform: scale(1.1);
 }

 .contact-location-marker::after {
     content: '';
     width: 12px;
     height: 12px;
     background: #6eb892;
     border-radius: 50%;
 }

 .contact-marker-israel {
     left: 45%;
     top: 40%;
 }

 .contact-info-popup {
     position: absolute;
     background: white;
     color: #333;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     min-width: 200px;
     display: none;
     z-index: 10;
 }

 .contact-info-popup.contact-popup-active {
     display: block;
 }

 .contact-info-popup h3 {
     margin-bottom: 15px;
     color: #333;
     font-size: 18px;
 }

 .contact-info-popup p {
     margin: 8px 0;
     font-size: 14px;
 }

 .contact-info-popup a {
     color: #6eb892;
     text-decoration: none;
 }

 .contact-sidebar-form {
     width: 400px;
     background: #2d2d2d;
     padding: 40px;
     display: flex;
     flex-direction: column;
 }

 .contact-sidebar-heading {
     margin-bottom: 30px;
     font-size: 14px;
     letter-spacing: 1px;
     color: white;
 }

 .contact-form-group {
     margin-bottom: 20px;
 }

 .contact-form-input,
 .contact-form-textarea {
     width: 100%;
     padding: 12px;
     background: #3d3d3d;
     border: 1px solid #4d4d4d;
     color: white;
     border-radius: 4px;
     font-size: 14px;
     font-family: 'Muli', sans-serif;
 }

 .contact-form-input::placeholder,
 .contact-form-textarea::placeholder {
     color: #888;
 }

 .contact-form-textarea {
     min-height: 120px;
     resize: vertical;
 }

 .contact-submit-btn {
     width: 100%;
     padding: 14px;
     background: #7ec99d;
     border: none;
     color: white;
     font-weight: bold;
     cursor: pointer;
     border-radius: 4px;
     margin-bottom: 30px;
     transition: background 0.3s;
     font-size: 14px;
     letter-spacing: 1px;
 }

 .contact-submit-btn:hover {
     background: #6eb892;
 }

 .contact-other-way {
     margin-top: auto;
     padding-top: 20px;
     border-top: 1px solid #3d3d3d;
 }

 .contact-other-way h3 {
     font-size: 14px;
     margin-bottom: 10px;
     letter-spacing: 1px;
     color: white;
 }

 .contact-other-way p {
     font-size: 13px;
     color: #888;
     margin: 5px 0;
 }

 .contact-footer-tabs {
     display: flex;
     background: #6eb892;
     height: 50px;
 }

 .contact-tab {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.1);
     cursor: pointer;
     transition: background 0.3s;
     font-size: 14px;
     font-weight: 500;
     color: white;
 }

 .contact-tab:hover {
     background: rgba(0, 0, 0, 0.2);
 }

 .contact-tab.contact-tab-active {
     background: transparent;
 }

 /* Responsive */
 @media (max-width: 992px) {
     .contact-content-container {
         flex-direction: column;
     }

     .contact-sidebar-form {
         width: 100%;
     }

     .contact-map-section {
         min-height: 400px;
     }
 }

 @media (max-width: 768px) {
     .contact-footer-tabs {
         flex-wrap: wrap;
     }

     .contact-tab {
         flex: 1 1 50%;
         height: 45px;
     }
 }