.site-header{
 height: 82px !important;
 min-height: 82px !important;
 max-height: 82px !important;
 padding: 15px 32px !important;
 background-color: #ffffff !important;
 position: fixed !important;
 width: 100% !important;
 top: 0 !important;
 z-index: 1000 !important;
 border-bottom: 1px solid #eee !important;
 box-sizing: border-box !important;
 box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; 
}

.tesla-nav{
 height: 52px !important;
 display: flex !important;
 justify-content: space-between !important;
 align-items: center !important;
}


.main-content{
 margin-top: 0 !important; 
 padding-top: 82px !important; 
}


.hero-slider, 
.hero-section,
.slide{
 margin-top: 0 !important;
 padding-top: 0 !important;
}


body:has(.hero-slider) .main-content{
 padding-top: 0 !important;
}

.hero-slider{
 margin-top: 82px !important; 
 padding-top: 0 !important;
}

.logo img{
 height: 48px !important;
 width: auto !important;
 
 filter: brightness(0) saturate(100%) invert(24%) sepia(10%) saturate(10%) hue-rotate(172deg) brightness(97%) contrast(92%) !important;
}


.nav-links{
 list-style: none !important;
 display: flex !important;
 gap: 30px !important;
 margin: 0 !important;
 padding: 0 !important;
}

.nav-links a{
 color: #1C244B !important;
 text-decoration: none !important;
 font-size: 16px !important;
 transition: color 0.3s ease !important;
 font-weight: 700 !important;
 position: relative !important;
 padding: 5px 0 !important;
}

.nav-links a:hover{
 color: #1C244B !important;
}

.nav-links a.active{
 color: #1C244B !important;
 font-weight: 700 !important;
}


.right-nav{
 display: flex !important;
 align-items: center !important;
}

.right-nav .icon-link{
 display: flex !important;
 align-items: center !important;
 color: #1C244B !important;
 font-size: 18px !important;
 margin-left: 10px !important;
}


.right-nav .icon-link.lang-toggle{
 display: flex !important;
}

.lang-switcher{
 display: flex !important;
 align-items: center !important;
}

.lang-item{
 color: #666 !important;
 text-decoration: none !important;
 font-size: 14px !important;
 padding: 2px 5px !important;
 margin: 0 2px !important;
}

.lang-item.active{
 color: #1C244B !important;
 font-weight: bold !important;
}


@media (max-width: 992px){
 
 .right-nav .icon-link.lang-toggle{
 display: none !important;
}
 
 
 .right-nav > *:not(.mobile-menu-btn){
 display: none !important;
}
}


@media (max-width: 768px){
 .site-header{
 height: 60px !important;
 min-height: 60px !important;
 max-height: 60px !important;
 padding: 0 10px !important;
}
 
 .logo img{
 height: 28px !important;
}
 
 
 .main-content{
 padding-top: 60px !important; 
}
 
 
 body:has(.hero-slider) .main-content{
 padding-top: 0 !important;
}
 
 .hero-slider{
 margin-top: 60px !important; 
}
} 

.slide-content{
 max-width: 600px;
 color: #fff;
 text-shadow: 0 2px 10px rgba(0,0,0,0.3); 
} 


.site-footer{
 background-color: #1C244B !important;
 padding: 0 !important;
 text-align: center !important;
 height: 60px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 color: #ffffff !important;
 margin-top: 10px !important;
}

.site-footer p{
 color: #ffffff !important;
 margin: 0 !important;
 font-size: 0.9rem !important;
} 


.back-to-top{
 position: fixed !important;
 bottom: 20px !important;
 right: 15px !important;
 width: 50px !important;
 height: 50px !important;
 border-radius: 50% !important;
 background-color: #1C244B !important;
 color: white !important;
 border: none !important;
 cursor: pointer !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 z-index: 1050 !important;
 box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
 transition: all 0.3s ease !important;
 opacity: 0;
 transform: translateY(20px);
}

.back-to-top:hover{
 background-color: #2d375f !important;
 transform: translateY(-5px) !important;
 box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

.back-to-top i{
 font-size: 20px !important;
}


html[dir="rtl"] .back-to-top{
 left: 15px !important;
 right: auto !important;
}


body, img, video, .main-content, .slide-content{
 user-select: none !important;
 -webkit-user-select: none !important;
 -moz-user-select: none !important;
 -ms-user-select: none !important;
}
img, video{
 -webkit-user-drag: none !important;
 pointer-events: auto;
} 
:root{
 --header-bg: #ffffff;
 --header-text: #1C244B;
 --primary-color: #1C244B;
 --menu-bg: #f2f2f2;
 --menu-text: #1C244B;
 --menu-transition: 0.5s ease;
}


.site-header{
 height: 82px;
 min-height: 82px;
 max-height: 82px;
 padding: 15px 32px;
 background-color: var(--header-bg);
 position: fixed;
 width: 100%;
 top: 0;
 z-index: 1000;
 border-bottom: 1px solid #eee;
 transition: transform 0.3s ease, background-color 0.3s ease;
 box-sizing: border-box; 
}


.site-header.hide{
 transform: translateY(-100%) !important;
 opacity: 0.95 !important;
 transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
 pointer-events: none !important; 
}


.site-header.transparent{
 background-color: rgba(255, 255, 255, 0.9);
 backdrop-filter: blur(10px);
}


.tesla-nav{
 height: 52px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}


.logo a{
 display: flex;
 align-items: center;
 text-decoration: none;
}

.logo img{
 height: 48px;
 width: auto;
 
 filter: brightness(0) saturate(100%) invert(24%) sepia(10%) saturate(10%) hue-rotate(172deg) brightness(97%) contrast(92%);
}


.nav-links{
 list-style: none;
 display: flex;
 gap: 30px;
 margin: 0;
 padding: 0;
}

.nav-links a{
 color: var(--header-text);
 text-decoration: none;
 font-size: 16px;
 transition: color 0.3s ease;
 font-weight: 500;
 position: relative;
 padding: 5px 0;
}

.nav-links a:after{
 content: '';
 position: absolute;
 width: 100%;
 transform: scaleX(0);
 height: 2px;
 bottom: 0;
 left: 0;
 background-color: var(--primary-color);
 transform-origin: bottom right;
 transition: transform 0.3s ease-out;
}

.nav-links a:hover:after{
 transform: scaleX(1);
 transform-origin: bottom left;
}

.nav-links a:hover{
 color: var(--primary-color);
}

.nav-links a.active{
 color: var(--primary-color) !important;
 font-weight: 700 !important;
}

.nav-links a.active:after{
 transform: scaleX(1) !important;
}


.right-nav{
 display: flex;
 align-items: center;
}

.right-nav .icon-link{
 color: var(--header-text);
 font-size: 18px;
 margin-left: 15px;
 transition: color 0.3s ease;
}

.right-nav .icon-link:hover{
 color: var(--primary-color);
}


.mobile-menu-btn{
 display: none;
 flex-direction: column;
 justify-content: space-between;
 width: 24px;
 height: 18px;
 cursor: pointer;
 z-index: 1200;
 position: relative;
}

.mobile-menu-btn span{
 display: block;
 height: 2px;
 width: 100%;
 background-color: var(--header-text);
 transition: all 0.3s ease;
}


.mobile-menu-overlay{
 position: fixed !important;
 top: 0 !important;
 left: 0 !important;
 width: 100% !important;
 height: 100% !important;
 background-color: rgba(0, 0, 0, 0.5) !important;
 z-index: 1050 !important; 
 opacity: 0 !important;
 visibility: hidden !important;
 transition: all var(--menu-transition) !important;
 pointer-events: none !important; 
}

.mobile-menu-overlay.active{
 opacity: 1 !important;
 visibility: visible !important;
 pointer-events: auto !important; 
}

.mobile-menu{
 position: fixed !important;
 top: 0 !important;
 right: -100% !important; 
 left: auto !important; 
 width: 100% !important;
 height: 100% !important;
 background-color: var(--menu-bg) !important;
 z-index: 1100 !important;
 transition: right var(--menu-transition) !important;
 display: flex !important;
 flex-direction: column !important;
 padding: 60px 0 30px !important; 
 overflow-y: auto !important;
}

.mobile-menu.active{
 right: 0 !important;
 left: auto !important;
}


.mobile-menu-nav{
 list-style: none !important;
 padding: 0 !important;
 margin: 80px 0 0 !important; 
 text-align: center !important; 
 position: relative !important;
}

.mobile-menu-nav li{
 margin-bottom: 15px !important; 
 padding: 0 !important;
}

.mobile-menu-nav a{
 color: var(--menu-text) !important;
 text-decoration: none !important;
 font-size: 18px !important; 
 font-weight: 500 !important;
 display: block !important;
 padding: 10px 0 !important;
 transition: opacity 0.5s ease, transform 0.5s ease !important;
 opacity: 0;
 transform: translateY(20px);
}

.mobile-menu.active .mobile-menu-nav a{
 opacity: 1;
 transform: translateY(0);
}

.mobile-menu-nav a:hover{
 opacity: 0.8;
 transform: translateY(-2px); 
}

.mobile-menu-nav a.active{
 font-weight: 700;
 color: var(--primary-color); 
}


.mobile-lang-switcher{
 margin-top: 30px; 
 padding: 0;
 display: none;
 text-align: center;
}

.mobile-lang-switcher .lang-title{
 color: var(--menu-text);
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.5s ease, transform 0.5s ease;
 font-size: 15px; 
 margin-bottom: 12px; 
}

.mobile-menu.active .mobile-lang-switcher .lang-title{
 opacity: 0.7;
 transform: translateY(0);
}


.mobile-lang-switcher i{
 font-size: 20px; 
 margin-bottom: 8px; 
 display: block;
 text-align: center;
}

.mobile-lang-options{
 display: flex;
 justify-content: center;
 gap: 15px; 
}


.mobile-lang-options a{
 color: var(--menu-text);
 text-decoration: none;
 font-size: 14px; 
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.5s ease, transform 0.5s ease;
 padding: 10px 16px; 
 border-radius: 8px;
 background-color: rgba(0,0,0,0.05);
 display: flex;
 flex-direction: column;
 align-items: center;
 min-width: 60px; 
}


.mobile-lang-options a::before{
 content: '';
 display: block;
 width: 25px; 
 height: 16px; 
 margin-bottom: 5px; 
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 border-radius: 3px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


.mobile-lang-options a[data-lang="en"]::before{
 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjgwIDY0MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNyIgZD0iTTAtODRoNjgyLjd2NTEySDAtODR6Ii8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KICA8ZyBjbGlwLXBhdGg9InVybCgjYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgODQpIj4KICAgIDxnIHN0cm9rZS13aWR0aD0iMSI+CiAgICAgIDxwYXRoIGZpbGw9IiMwMDZhYWIiIGQ9Ik0wIDBoMTAyNHY1MTJIMHoiLz4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAtLjFsLjQgMzY4LjFMMzM0LjQgMGgtNDAgbC0yOTQuOSAzMTUuOFYuMUgweiIvPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCA1MTJsLjctMzY3LjlMNDMzLjIgNTEyaC00MGwtMzkyLjktNDE5Ljl2NDIwTDBWNTEyeiIvPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTAyNCAwaC00MC4zbC0zOTQgNDE1LjZWMGgtNDB2NDE5LjdMMTYxLjkgMGgtNDAgTDQyMyAyNTkuMkwxIDQ4Ny44aDQwTDQyMyAyMzkuNCAxMDI0IDUxM3Y0MEwyOS41IDBoOTk1djBaIi8+CiAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMDI0IDUxMmgtNTUuNGwtMzc4LjUtNDAyLjVWNTEySDU1MC4xdi00MDIuNkwxNzEuNSA1MTJIMTE1LjcgbDQwMy4yLTQzMy41TDEwMjQgNTEyem0wLTM5LjVMMTYxLjkgNTEyaC00MEwxMDI0IDM4VjB6Ii8+CiAgICAgIDxwYXRoIGZpbGw9IiNjODEwMmUiIGQ9Ik01NzAuMiAwdjUxMmgzMDYuNlYwSDU3MC4yeiIvPgogICAgICA8cGF0aCBmaWxsPSIjYzgxMDJlIiBkPSJNMzIwLjYgMEgyODZMODAuNCAyMTkuNCAyODYgNDM4LjdIMzIxTDExNS41IDIxOS40IDMyMC42IDB6Ii8+CiAgICAgIDxwYXRoIGZpbGw9IiNjODEwMmUiIGQ9Ik0xMDI0IDAgaC0yMzQuNEw3MDYuNCAwaDMxNy42djI4LjZMMzE5LjcgNTEyaC0zNUw3ODkuNyAyOC42djQuN0wxMDI0IDMzLjRWMHoiLz4KICAgICAgPHBhdGggZmlsbD0iI2M4MTAyZSIgZD0iTTAgMGgyMS40bDY2MiA0NzJoLTk1LjhMMCA4NVYweiIvPgogICAgICA8cGF0aCBmaWxsPSIjYzgxMDJlIiBkPSJNMCAyMTkuNHYNzMuMmgxMDI0djczbDAtMjE5LjVIMHoiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==');
}


.mobile-lang-options a[data-lang="cn"]::before{
 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDgwMCI+PHBhdGggZmlsbD0iI2RlMjkxMCIgZD0iTTAgMGgxMjAwdjgwMEgweiIvPjxwYXRoIGZpbGw9IiNmZmRlMDAiIGQ9Ik0tMTYuNyA5NS4zbDExLjgtOC43IDMzLjMgMy4zLTkuOC0xMC45IDIwLjctMjEtMjguOS0xMC4yLTEuNy0xNS41TDAgMzcuN2wtOC44LTQuNkwtMS42IDQ3LjdMLTMwLjE1IDU3TDcuNiA3OS4xbC05LjkgMTAuN0wzMSA4Ni42eiIgdHJhbnNmb3JtPSJtYXRyaXgoNDAgMCAwIDQwIDIwMCAxNTApIi8+PHBhdGggZmlsbD0iI2ZmZGUwMCIgZD0ibS0yNi0zIDMgOEwtMTQgMGwtMyA4IDcuOC01LjcgNy44IDUuNC0zLjEtOC4xIDcuOC01LjUtOS40LjItMy4xLTguMnoiIHRyYW5zZm9ybT0ibWF0cml4KDEwIDAgMCAxMCAzNzAgMjIwKSIvPjxwYXRoIGZpbGw9IiNmZmRlMDAiIGQ9Im0tMjYtMyAzIDhMLTE0IDAtMyA4IDcuOC01LjcgNy44IDUuNC0zLjEtOC4xIDcuOC01LjUtOS40LjItMy4xLTguMnoiIHRyYW5zZm9ybT0ibWF0cml4KDEwIDAgMCAxMCA0NTAgMTkwKSIvPjxwYXRoIGZpbGw9IiNmZmRlMDAiIGQ9Im0tMjYtMyAzIDhMLTE0IDAtMyA4IDcuOC01LjcgNy44IDUuNC0zLjEtOC4xIDcuOC01LjUtOS40LjItMy4xLTguMnoiIHRyYW5zZm9ybT0ibWF0cml4KDEwIDAgMCAxMCA0MjUgMjcwKSIvPjxwYXRoIGZpbGw9IiNmZmRlMDAiIGQ9Im0tMjYtMyAzIDhMLTE0IDAtMyA4IDcuOC01LjcgNy44IDUuNC0zLjEtOC4xIDcuOC01LjUtOS40LjItMy4xLTguMnoiIHRyYW5zZm9ybT0ibWF0cml4KDEwIDAgMCAxMCAzMzAgMjgwKSIvPjwvc3ZnPg==');
}


.mobile-lang-options a[data-lang="jp"]::before{
 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGg5MDB2NjAwSDB6Ii8+DQogIDxjaXJjbGUgZmlsbD0iI2JjMDAyZCIgY3g9IjQ1MCIgY3k9IjMwMCIgcj0iMTgwIi8+DQo8L3N2Zz4=');
}


.mobile-lang-options a[data-lang="es"]::before{
 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NTAgNTAwIj4NCiAgPHBhdGggZmlsbD0iI2M2MDYxZiIgZD0iTTAgMGg3NTB2NTAwSDB6Ii8+DQogIDxwYXRoIGZpbGw9IiNmZmM0MDAiIGQ9Ik0wIDEyNWg3NTB2MjUwSDB6Ii8+DQo8L3N2Zz4=');
}


.mobile-lang-options a[data-lang="fr"]::before{
 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCiAgPHBhdGggZmlsbD0iI2VkMjkzOSIgZD0iTTAgMGgzMDB2NjAwSDB6Ii8+DQogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zMDAgMGgzMDB2NjAwSDMwMHoiLz4NCiAgPHBhdGggZmlsbD0iIzAwMmQ5YyIgZD0iTTYwMCAwaDMwMHY2MDBINMDB6Ii8+DQo8L3N2Zz4=');
}


.mobile-lang-options a[data-lang="de"]::before{
 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCiAgPHBhdGggZD0iTTAgMGg5MDB2NjAwSDB6Ii8+DQogIDxwYXRoIGZpbGw9IiNEMDAwMjAiIGQ9Ik0wIDIwMGg5MDB2NjAwSDB6Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkNFMDAiIGQ9Ik0wIDQwMGg5MDB2NjAwSDB6Ii8+DQo8L3N2Zz4=');
}

.mobile-menu.active .mobile-lang-options a{
 opacity: 0.7;
 transform: translateY(0);
}

.mobile-lang-options a:hover,
.mobile-lang-options a.active{
 opacity: 1 !important;
 transform: translateY(-2px) !important;
 background-color: rgba(28,36,75,0.1);
 box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


@media (max-width: 992px){
 .center-nav{
 display: none;
}
 
 .mobile-menu-btn{
 display: flex !important;
}
 
 .mobile-lang-switcher{
 display: block;
}
 
 .lang-switcher{
 display: none;
}
 
 
 .tesla-nav{
 justify-content: space-between !important;
 position: relative !important;
}
 
 
 .right-nav > *:not(.mobile-menu-btn){
 display: none;
}
 
 
 .mobile-menu{
 width: 100% !important;
 right: -100% !important;
}
}


.site-header{
 height: 82px !important;
 min-height: 82px !important;
 max-height: 82px !important;
 padding: 15px 32px !important;
 background-color: var(--header-bg) !important;
 position: fixed !important;
 width: 100% !important;
 top: 0 !important;
 z-index: 1000 !important;
 border-bottom: 1px solid #eee !important;
}

.tesla-nav{
 height: 52px !important;
 display: flex !important;
 justify-content: space-between !important;
 align-items: center !important;
}


.hero-section{
 height: 50vh;
 min-height: 350px;
 background-color: #1C244B; 
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
 background-size: cover;
 background-position: center;
 color: #fff;
}

.hero-section::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(28, 36, 75, 0.85) 0%, rgba(20, 26, 55, 0.95) 100%);
 z-index: 1;
}

.hero-content{
 position: relative;
 z-index: 2;
 text-align: center;
 max-width: 800px;
 padding: 0 20px;
}

.hero-section h1{
 font-size: 3rem;
 font-weight: 700;
 margin-bottom: 15px;
 background: linear-gradient(45deg, #ffffff, #e0e0e0);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 text-transform: uppercase;
 letter-spacing: 2px;
}

.hero-section p{
 font-size: 1.1rem;
 opacity: 0.9;
 max-width: 600px;
 margin: 0 auto;
 line-height: 1.6;
}


.home-hero{
 background-image: url('../images/headers/home-header-bg.jpg');
}

.about-hero{
 background-image: url('../images/headers/about-header-bg.jpg');
}

.services-hero{
 background-image: url('../images/headers/services-header-bg.jpg');
}

.projects-hero{
 background-image: url('../images/headers/projects-header-bg.jpg');
}

.contact-hero{
 background-image: url('../images/headers/contact-header-bg.jpg');
}


@media (max-width: 992px){
 .hero-section h1{
 font-size: 2.5rem;
}
}

@media (max-width: 768px){
 
 .site-header{
 height: 45px !important; 
 min-height: 45px !important;
 padding: 0 10px !important;
 border-bottom: none !important;
}
 
 
 .main-content{
 margin-top: 0 !important; 
 padding-top: 48px !important; 
}
 
 
 .main-content > *:first-child{
 margin-top: 0 !important;
 padding-top: 0 !important;
}
 
 
 .tesla-nav{
 height: 45px !important;
 padding: 5px 15px !important;
 justify-content: flex-start !important;
 position: relative !important;
}
 
 
 .logo{
 position: fixed !important;
 left: 10px !important;
 top: 18px !important; 
 transform: none !important;
 display: flex !important;
 align-items: center !important;
 z-index: 2000 !important;
}
 
 
 .logo img{
 height: 25px !important;
 width: auto !important;
 max-height: 25px !important;
 
 filter: brightness(0) saturate(100%) invert(24%) sepia(10%) saturate(10%) hue-rotate(172deg) brightness(97%) contrast(92%) !important;
}
 
 
 .tesla-nav .mobile-menu-btn{
 width: 20px !important;
 height: 14px !important;
 position: fixed !important;
 right: 10px !important;
 top: 23px !important;
 z-index: 2000 !important;
 display: flex !important;
}
}


@media (max-width: 768px){
 html[dir="rtl"] .logo{
 left: auto !important;
 right: 10px !important;
}
 html[dir="rtl"] .tesla-nav .mobile-menu-btn{
 right: auto !important;
 left: 10px !important;
}
 html[dir="rtl"] .tesla-nav{
 flex-direction: row-reverse !important;
}
 html[dir="rtl"] .mobile-menu{
 right: auto !important;
 left: -100% !important;
}
 html[dir="rtl"] .mobile-menu.active{
 left: 0 !important;
 right: auto !important;
}
}


.scroll-indicator{
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 width: 26px;
 height: 40px;
 border: 2px solid rgba(255, 255, 255, 0.7);
 border-radius: 15px;
 display: flex;
 justify-content: center;
 padding-top: 8px;
 z-index: 2;
}

.scroll-indicator::before{
 content: '';
 width: 3px;
 height: 6px;
 background: #fff;
 border-radius: 2px;
 animation: scrollAnim 2s infinite;
 opacity: 0.7;
}

@keyframes scrollAnim{
 0%{transform: translateY(0); opacity: 0.7;}
 30%{transform: translateY(10px); opacity: 0;}
 60%{transform: translateY(0); opacity: 0;}
 100%{transform: translateY(0); opacity: 0.7;}
}


@media (min-width: 769px){
 .main-content{
 margin-top: 0 !important; 
 padding-top: 82px !important; 
 box-sizing: border-box !important; 
}
}


@media (min-width: 769px){
 .main-content{
 margin-top: 0 !important; 
 padding-top: 82px !important; 
}
}


body.menu-open{
 overflow: hidden;
 height: 100%;
 z-index: auto !important; 
 pointer-events: auto !important; 
}


.mobile-menu-close{
 position: absolute;
 top: 20px;
 right: 10px;
 width: 30px;
 height: 30px;
 cursor: pointer;
 z-index: 1110;
 border-radius: 50%;
 background-color: rgba(0, 0, 0, 0.05);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.3s ease;
}

.mobile-menu-close:hover{
 background-color: rgba(0, 0, 0, 0.1);
 transform: rotate(90deg);
}

.mobile-menu-close span{
 display: block;
 height: 2px;
 width: 18px;
 background-color: var(--menu-text);
 position: absolute;
 transition: all 0.3s ease;
}

.mobile-menu-close span:first-child{
 transform: rotate(45deg);
}

.mobile-menu-close span:last-child{
 transform: rotate(-45deg);
}


html, body{
 margin: 0 !important;
 padding: 0 !important;
 width: 100% !important;
 overflow-x: hidden !important;
 scroll-behavior: smooth !important; 
} /* 
* 主样式文件 - 统一管理所有CSS 
* 此文件导入所有现有样式表并提供一个统一的入口点 
*/ 
 
 
/* inlined dependencies; removed @import to satisfy top-of-file rule */
 
 
html{
 scroll-behavior: smooth; 
} 
 
 
img{
 content-visibility: auto; 
} 
 
 
@media print{
 .no-print{
 display: none !important; 
} 
} /* 
 * JYD模型网站现代效果增强 
 * 提供平滑过渡和现代UI效果 
 */ 
 
 
@keyframes fadeIn{
 from{
 opacity: 0; 
 transform: translateY(20px); 
} 
 to{
 opacity: 1; 
 transform: translateY(0); 
} 
} 
 
.fade-in{
 animation: fadeIn 0.6s ease-out forwards; 
} 
 
 
.stagger-item{
 opacity: 0; 
} 
 
.stagger-item.visible{
 animation: fadeIn 0.5s ease-out forwards; 
} 
 
 
html{
 scroll-behavior: smooth; 
} 
 
 
.hover-zoom{
 overflow: hidden; 
} 
 
.hover-zoom img{
 transition: transform 0.5s ease, filter 0.5s ease; 
} 
 
.hover-zoom:hover img{
 transform: scale(1.05); 
 filter: brightness(1.05); 
} 
 
 
.hover-lift{
 transition: transform 0.3s ease, box-shadow 0.3s ease; 
} 
 
.hover-lift:hover{
 transform: translateY(-5px); 
 box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
} 
 
 
.button-glow{
 position: relative; 
 z-index: 1; 
 overflow: hidden; 
} 
 
.button-glow:after{
 content: ''; 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: rgba(255,255,255,0.2); 
 transform: translateX(-100%); 
 transition: transform 0.3s ease; 
 z-index: -1; 
} 
 
.button-glow:hover:after{
 transform: translateX(0); 
} 
 
 
.shadow-soft{
 box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1); 
} 
 
.shadow-strong{
 box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2); 
} 
 
 
.gradient-bg{
 background: linear-gradient(135deg, #1C244B 0%, #2A3A6D 100%); 
} 
 
 
.img-overlay{
 position: relative; 
} 
 
.img-overlay:before{
 content: ''; 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%); 
 z-index: 1; 
} 
 
 
img, video{
 will-change: transform; 
} 
 
.hardware-accelerated{
 transform: translateZ(0); 
 backface-visibility: hidden; 
} 
 
 
.responsive-text-sm{
 font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem); 
} 
 
.responsive-text-md{
 font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); 
} 
 
.responsive-text-lg{
 font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); 
} 
 
 
.btn-modern{
 padding: 12px 24px; 
 border-radius: 6px; 
 border: none; 
 font-weight: 600; 
 transition: all 0.3s ease; 
 position: relative; 
 overflow: hidden; 
} 
 
.btn-modern:before{
 content: ''; 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: rgba(255,255,255,0.1); 
 transform: translateX(-100%) rotate(45deg); 
 transition: transform 0.5s ease; 
} 
 
.btn-modern:hover:before{
 transform: translateX(100%) rotate(45deg); 
} 
 
.btn-primary-modern{
 background-color: #1C244B; 
 color: white; 
} 
 
.btn-primary-modern:hover{
 background-color: #2A3A6D; 
 transform: translateY(-2px); 
 box-shadow: 0 10px 20px rgba(28, 36, 75, 0.3); 
} 
 
 
@media (prefers-color-scheme: dark){
 :root{
 --bg-color: #121212; 
 --text-color: #f0f0f0; 
 --heading-color: #ffffff; 
 --card-bg: #ffffff; 
 --border-color: #ddd; 
} 
 
 body.dark-mode-support{
 background-color: var(--bg-color); 
 color: var(--text-color); 
} 
 
 body.dark-mode-support h1, 
 body.dark-mode-support h2, 
 body.dark-mode-support h3, 
 body.dark-mode-support h4{
 color: var(--heading-color); 
} 
 
 body.dark-mode-support .card, 
 body.dark-mode-support .expertise-card, 
 body.dark-mode-support .model-type-card, 
 body.dark-mode-support .technology-card{
 background-color: var(--card-bg); 
 border-color: var(--border-color); 
 color: #333; 
} 
 
 body.dark-mode-support .card h3, 
 body.dark-mode-support .expertise-card h3, 
 body.dark-mode-support .model-type-card h3, 
 body.dark-mode-support .technology-card h3{
 color: #1C244B; 
} 
} 
 
 
.loading-spinner{
 display: inline-block; 
 width: 40px; 
 height: 40px; 
 border: 4px solid rgba(28, 36, 75, 0.1); 
 border-radius: 50%; 
 border-top-color: #1C244B; 
 animation: spin 1s ease-in-out infinite; 
} 
 
@keyframes spin{
 to{transform: rotate(360deg);} 
} 
 
 
.scroll-progress{
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 0%; 
 height: 4px; 
 background: linear-gradient(90deg, #1C244B, #4B6CDA); 
 z-index: 9999; 
 transition: width 0.1s ease; 
} 
[data-project-id="31"] .project-thumbnail,
[data-project-id="31"] .portfolio-image,
.portfolio-item[data-project-id="31"] img{
 transform: rotate(180deg) !important;
}




@media (max-width: 992px){
 
 .portfolio-grid{
 display: grid !important;
 grid-template-columns: repeat(2, 1fr) !important; 
 gap: 15px !important;
 padding: 15px !important;
}
}


@media (max-width: 768px){
 
 .portfolio-grid{
 display: grid !important;
 grid-template-columns: 1fr !important; 
 gap: 7px !important; 
 padding: 15px !important;
}
 
 
 .portfolio-item{
 height: 468px !important; 
 margin-bottom: 7px !important;
 width: 100% !important;
}
 
 
 .portfolio-image, 
 .project-thumbnail{
 height: 100% !important; 
}
 
 
 .project-title, .portfolio-title{
 font-size: 0.9rem !important; 
 padding: 6px 10px 10px !important; 
}
 
 
 .main-content{
 margin-top: 3px !important; 
 padding-top: 5px !important; 
}
 
 
 .portfolio-item:hover{
 transform: translateY(-3px) !important; 
}
 
 
 .col-1-item, .col-2-item, .col-3-item{
 height: 468px !important; 
}
 
 
 .modal-content{
 margin-top: 48px !important; 
 height: calc(100% - 48px) !important; 
 max-width: 100vw !important; 
 border-radius: 0 !important; 
}
 
 
 .modal-header{
 padding: 6px 8px !important;
 min-height: 36px !important;
 border-bottom: none !important;
}
 
 
 .modal-title{
 font-size: 16px !important;
 padding-left: 0 !important;
 padding-right: 30px !important; 
}
 
 
 .modal-close{
 top: 8px !important; 
 right: 8px !important;
 width: 24px !important;
 height: 24px !important;
 font-size: 18px !important;
 background-color: transparent !important;
 box-shadow: none !important;
 color: #1c244b !important;
 -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
 
 
 .prev-btn, .next-btn{
 width: 36px !important;
 height: 36px !important;
 background-color: rgba(255,255,255,0.5) !important;
 border-radius: 50% !important;
 color: #000000 !important;
 outline: none !important;
 position: absolute !important;
 top: 50% !important;
 transform: translateY(-50%) !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 z-index: 5 !important;
}
 
 .prev-btn{
 left: 10px !important;
}
 
 .next-btn{
 right: 10px !important;
}
 
 
 .carousel-container{
 touch-action: pan-y !important; 
 user-select: none !important; 
 max-height: 75vh !important; 
 background-color: #000 !important; 
}
 
 .carousel-track{
 will-change: transform !important; 
 transition: transform 0.2s ease-out !important; 
 height: 100% !important; 
}
 
 .carousel-slide{
 -webkit-user-drag: none !important; 
 user-select: none !important; 
 height: 100% !important; 
 display: flex !important; 
 align-items: center !important; 
 justify-content: center !important; 
}
 
 .carousel-slide img{
 -webkit-user-drag: none !important; 
 pointer-events: none !important; 
 max-height: 75vh !important; 
 min-width: 100% !important; 
 object-fit: contain !important; 
}
 
 
 .carousel-dots{
 position: absolute !important;
 bottom: 10px !important;
 left: 0 !important;
 width: 100% !important;
 display: flex !important;
 justify-content: center !important;
 gap: 8px !important;
 padding: 0 !important;
 z-index: 10 !important;
 background: linear-gradient(to top, rgba(0,0,0,0.4), transparent) !important;
 padding: 8px 0 12px !important;
}
 
 .carousel-dot{
 width: 8px !important;
 height: 8px !important;
 border-radius: 50% !important;
 background-color: rgba(255,255,255,0.3) !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
 transition: all 0.2s ease !important;
}
 
 .carousel-dot.active{
 background-color: rgba(255,255,255,0.9) !important;
 transform: scale(1.2) !important;
}
 
 
 .swipe-direction-hint{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 40px;
 height: 40px;
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 18px;
 z-index: 40;
 animation: fadeIn 0.2s ease-in;
}
 
 .swipe-direction-hint.prev{
 left: 10px;
}
 
 .swipe-direction-hint.next{
 right: 10px;
}
 
 @keyframes fadeIn{
 from{opacity: 0;}
 to{opacity: 1;}
}
 
 
 .swipe-hint{
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 background-color: rgba(0, 0, 0, 0.6);
 color: white;
 padding: 8px 15px;
 border-radius: 20px;
 font-size: 14px;
 display: flex;
 align-items: center;
 gap: 8px;
 z-index: 30;
 opacity: 0;
 animation: fadeInOut 3s ease-in-out forwards;
}
 
 .swipe-hint i{
 font-size: 16px;
}
 
 @keyframes fadeInOut{
 0%{opacity: 0;}
 15%{opacity: 1;}
 85%{opacity: 1;}
 100%{opacity: 0;}
}
 
 
 .modal-description{
 max-height: 8vh !important; 
 padding: 10px 12px !important; 
 font-size: 0.9rem !important; 
}
 
 
 .scale-info-container{
 padding: 5px 0 !important; 
}
}


@media (max-width: 480px){
 
 .portfolio-item, 
 .col-1-item, 
 .col-2-item, 
 .col-3-item{
 height: 468px !important; 
}
 
 
 .portfolio-grid{
 gap: 7px !important; 
 padding: 10px !important;
}
 
 
 .project-title, .portfolio-title{
 font-size: 0.9rem !important; 
 padding: 5px 8px 8px !important;
}
}


.project-card-link,
.project-detail-link{
 display: block;
 width: 100%;
 height: 100%;
 text-decoration: none;
 color: inherit;
 cursor: pointer;
 position: relative;
 z-index: 10; 
 pointer-events: auto !important; 
}