/* ==== Mobile-only header logo fixes (do not affect desktop) ==== */
@media (max-width: 768px) {
.logo-desktop { display: none; }
.logo-mobile { display: block; }
.logo-mobile .logo-image { max-height: 40px; height: auto; width: auto; }
}
@media (max-width: 480px) {
.logo-mobile .logo-image { max-height: 36px; }
}
@media (max-width: 360px) {
.logo-mobile .logo-image { max-height: 32px; }
}
@import url('vazirmatn.css');
/* Shift Quick Links 30px to the left */
.footer-content .footer-section:nth-child(2) {
transform: translateX(-30px);
}
:root {
--primary-color: #FF6B35;
--primary-dark: #e55a3a;
--bg-dark: #232629;
--bg-secondary: #494949;
--text-light: #d1d1d6;
--text-muted: #bdbdc1;
--custom-radius: 8px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Vazirmatn', 'Tahoma', 'Arial', sans-serif;
line-height: 1.6;
color: #ffffff;
background: #1a1a1a;
direction: rtl;
position: relative;
min-height: 100vh;
}
/* FontAwesome Icons - Must be before other font rules */
.fas, .far, .fab, .fal, .fa, [class*="fa-"] {
font-family: "Font Awesome 6 Free", "FontAwesome" !important;
font-weight: 900 !important;
font-style: normal !important;
font-variant: normal !important;
text-rendering: auto !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* FontAwesome classes are defined in all.min.css */
/* Debug: Ensure icons are visible */
.fas, .far, .fab, .fal, .fa, [class*="fa-"] {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure all text elements use Persian font */
*:not(.fas):not(.far):not(.fab):not(.fal):not(.fa):not([class*="fa-"]) {
font-family: 'Vazirmatn', 'Tahoma', 'Arial', sans-serif !important;
}
/* Shop Header */
.shop-header {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.header-content {
display: flex;
align-items: center;
gap: 30px;
}
.header-logo a {
display: flex;
align-items: center;
text-decoration: none;
color: white;
transition: all 0.3s ease;
}
.header-logo a:hover {
transform: scale(1.05);
}
.logo-img {
width: 150px;
height: 150px;
object-fit: contain;
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
transition: all 0.3s ease;
}
.logo-img:hover {
filter: brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(1352%) hue-rotate(346deg) brightness(119%) contrast(119%);
}
.header-search {
flex: 1;
max-width: 500px;
}
.search-container {
position: relative;
display: flex;
align-items: center;
}
.search-input {
width: 100%;
padding: 12px 50px 12px 20px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
color: white;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.search-input::placeholder {
color: #FF6B35;
}
.search-input:focus {
border-color: var(--primary-color);
background: rgba(255, 255, 255, 0.15);
}
.search-btn {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: var(--primary-color);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.search-btn:hover {
background: #ff8c42;
transform: translateY(-50%) scale(1.1);
}
/* Improved Product Cards */
.product-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 25px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(15px);
position: relative;
cursor: pointer;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.product-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
border-color: var(--primary-color);
}
.product-image-container {
position: relative;
height: 280px;
overflow: hidden;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 140, 66, 0.05));
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.product-card:hover .product-image {
transform: scale(1.1);
}
.product-info {
padding: 25px;
text-align: right;
}
.product-name {
font-size: 1.3rem;
font-weight: 700;
color: white;
margin-bottom: 25px;
line-height: 1.4;
text-align: right;
}
.product-rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 15px;
justify-content: flex-end;
}
.star-shape {
width: 16px;
height: 16px;
background: #ffd700;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
display: inline-block;
}
.rating-text {
color: #ffd700;
font-size: 14px;
font-weight: 600;
}
.product-price {
margin-bottom: 20px;
text-align: left;
}
.price-amount {
font-size: 1.2rem;
font-weight: 800;
color: var(--primary-color);
margin-right: 5px;
}
.price-currency {
font-size: 0.9rem;
color: var(--text-light);
font-weight: 500;
}
.price-current {
font-size: 1.2rem;
color: var(--text-light);
text-align: right;
}
.product-actions {
text-align: center;
}
.btn-primary {
width: 100%;
padding: 15px 25px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(255, 107, 53, 0.4);
background: linear-gradient(135deg, #ff8c42, var(--primary-color));
}
.btn-primary:disabled {
background: #666;
cursor: not-allowed;
opacity: 0.6;
transform: none;
box-shadow: none;
}
.btn-primary:disabled:hover {
transform: none;
box-shadow: none;
background: #666;
}
/* Coming Soon Cards */
.product-card.coming-soon {
position: relative;
cursor: not-allowed;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.product-card.coming-soon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.05) 0%,
rgba(255, 140, 66, 0.03) 50%,
rgba(255, 107, 53, 0.05) 100%);
z-index: 1;
}
.coming-soon-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(128, 128, 128, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
border-radius: 25px;
}
.coming-soon-content {
text-align: center;
color: white;
position: relative;
z-index: 3;
}
.coming-soon-content i {
font-size: 2rem;
color: white;
margin-bottom: 10px;
opacity: 0.8;
}
.coming-soon-content h3 {
font-size: 1.2rem;
font-weight: 600;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.coming-soon-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 2px solid rgba(255, 107, 53, 0.3);
border-radius: 50%;
animation: comingSoonPulse 2s infinite;
z-index: 1;
}
@keyframes comingSoonPulse {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Video Size Fix */
.intro-video {
width: 100% !important;
max-width: 1200px !important;
height: auto !important;
max-height: 200px !important;
object-fit: cover !important;
}
.placeholder-image {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 140, 66, 0.05));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
}
.placeholder-image i {
font-size: 4rem;
opacity: 0.5;
color: var(--primary-color);
}
/* RTL Improvements */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
position: relative;
z-index: 2;
margin-bottom: 60px;
direction: rtl;
}
/* Responsive Design */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 20px;
}
.header-search {
max-width: 100%;
width: 100%;
}
.logo-img {
width: 100px;
height: 100px;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.product-card {
margin: 0 10px;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 20px;
text-align: initial;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 480px) {
.shop-header {
padding: 3px 0;
}
.logo-img {
width: 50px;
height: 50px;
}
.search-input {
padding: 10px 45px 10px 15px;
font-size: 14px;
}
.product-name {
font-size: 1.1rem;
}
.price-amount {
font-size: 1.1rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255, 107, 53, 0.15), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255, 107, 53, 0.1), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(255, 107, 53, 0.2), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(255, 107, 53, 0.15), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(255, 107, 53, 0.1), transparent),
radial-gradient(1px 1px at 200px 50px, rgba(255, 107, 53, 0.12), transparent),
radial-gradient(2px 2px at 250px 90px, rgba(255, 107, 53, 0.08), transparent),
radial-gradient(1px 1px at 300px 20px, rgba(255, 107, 53, 0.18), transparent);
background-repeat: repeat;
background-size: 300px 300px;
animation: globalParticleFloat 30s linear infinite;
pointer-events: none;
z-index: 1;
}
/* Ensure sticky elements work properly */
.top-bar,
.header,
.nav {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
@keyframes globalParticleFloat {
0% { transform: translateY(0px) rotate(0deg); }
100% { transform: translateY(-150px) rotate(360deg); }
}
/* Utilities */
.hidden {
display: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
}
.text-primary {
color: var(--primary-color);
}
/* Top Bar */
.top-bar {
width: 100%;
padding: 0.2rem 0;
z-index: 10001;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
font-size: 1rem;
position: sticky;
top: 0;
}
.top-bar-container {
max-width: 1200px;
margin: 0 auto;
padding: 0.5rem 1rem 0 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar-left,
.top-bar-right {
display: flex;
gap: 45px;
}
.top-bar-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: 'Vazirmatn', sans-serif;
}
.top-bar-item a {
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.75rem;
font-family: 'Vazirmatn', sans-serif;
transition: color 0.3s ease;
}
.top-bar-left .top-bar-item a {
flex-direction: row-reverse;
}
.top-bar-right .top-bar-item {
flex-direction: row-reverse;
}
.top-bar-item a:hover {
color: var(--primary-color);
}
.top-bar-item .icon {
width: 1.2rem;
height: 1.2rem;
color: var(--primary-color);
}
.support-icon {
width: 1.4rem;
height: 1.4rem;
color: white;
transition: color 0.3s ease, transform 0.2s ease;
}
.top-bar-item a:hover .support-icon {
color: white;
}
/* Header */
.header {
width: 100%;
position: sticky;
top: 0;
z-index: 10002;
background: #1a1a1a;
border-bottom: none;
margin-top: 0;
}
.header-container {
width: 100%;
display: flex;
justify-content: center;
padding: 0.25rem 1rem;
position: relative;
background: #1a1a1a;
border-bottom: none;
}
.header-backdrop {
position: absolute;
top: 0.5rem;
width: 100%;
max-width: 1200px;
height: 4rem;
padding: 0 1.5rem;
border-radius: var(--custom-radius);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: -1;
}
.nav {
display: flex;
width: 100%;
max-width: 1200px;
padding: 0 1.5rem;
align-items: center;
justify-content: space-between;
height: 5rem;
background-color: rgba(73, 73, 73, 0.95);
border-radius: var(--custom-radius);
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
position: sticky;
top: 0;
z-index: 10001;
margin-top: 0.5rem;
}
.nav .logo-desktop {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
}
/* Mobile Menu */
.mobile-menu-section {
display: flex;
align-items: center;
gap: 0.5rem;
}
@media (min-width: 1024px) {
.mobile-menu-section {
display: none;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.mobile-menu-btn {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
background: none;
border: none;
color: inherit;
cursor: pointer;
}
.menu-icon {
width: 1.5rem;
height: 1.5rem;
}
.logo-mobile {
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
}
.logo-mobile .logo-image {
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
transition: filter 0.3s ease;
}
.logo-mobile .logo-image:hover {
filter: brightness(0) saturate(100%) invert(20%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(120%) contrast(97%);
}
.logo-image {
height: 2.5rem;
width: auto;
transition: filter 0.3s ease;
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
margin-top: 1rem;
}
.logo-image:hover {
filter: brightness(0) saturate(100%) invert(20%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(120%) contrast(97%);
}
/* Desktop Logo */
.logo-desktop {
display: none;
font-size: 2rem;
font-weight: bold;
align-items: center;
}
.logo-desktop .logo-image {
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
transition: filter 0.3s ease;
}
.logo-desktop .logo-image:hover {
filter: brightness(0) saturate(100%) invert(20%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(120%) contrast(97%);
}
@media (min-width: 1024px) {
.logo-desktop {
display: flex;
align-items: center;
height: 100%;
}
}
/* Desktop Menu */
.desktop-menu {
display: none;
align-items: center;
position: relative;
}
@media (min-width: 1024px) {
.desktop-menu {
display: flex;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.products-dropdown {
position: relative;
}
.dropdown-trigger {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: color 0.3s ease;
}
.dropdown-trigger:hover {
color: var(--primary-color);
}
.dropdown-icon {
width: 1rem;
height: 1rem;
transition: transform 0.3s ease;
}
.products-dropdown:hover .dropdown-icon {
transform: rotate(180deg);
}
.dropdown-content {
position: absolute;
top: 100%;
right: -9rem;
margin-top: 1rem;
width: 37.5rem;
border-radius: var(--custom-radius);
background: linear-gradient(to right, rgba(255, 100, 49, 0.15), rgba(199, 99, 74, 0.15));
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 107, 53, 0.3);
opacity: 1;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.products-dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: var(--custom-radius);
margin: 1.5rem;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown-item:hover {
background: linear-gradient(to right, rgba(255, 100, 49, 0.1), rgba(199, 99, 74, 0.1));
}
.dropdown-icon-box {
width: 3rem;
height: 3rem;
background-color: var(--primary-color);
border-radius: var(--custom-radius);
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-main-icon {
width: 1.5rem;
height: 1.5rem;
color: white;
}
.dropdown-text {
flex: 1;
}
.dropdown-text h3 {
font-weight: 600;
margin-bottom: 0.25rem;
}
.dropdown-text p {
font-size: 0.875rem;
color: var(--text-muted);
}
.dropdown-item:hover .dropdown-text p {
color: white;
}
.dropdown-arrow {
width: 1.25rem;
height: 1.25rem;
color: var(--primary-color);
opacity: 0;
transition: opacity 0.3s ease;
}
.dropdown-item:hover .dropdown-arrow {
opacity: 1;
}
.dropdown-footer {
margin-top: 1rem;
padding: 1rem 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dropdown-title {
font-size: 0.75rem;
color: var(--primary-color);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.dropdown-subtitle {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Navigation Links */
.nav-links {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 1024px) {
.nav-links {
display: flex;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.nav-links a {
color: white;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
font-size: 0.95rem;
}
.english-link {
font-size: 0.875rem;
background: linear-gradient(to right, #FF8D67, #FF9673, #FF916D);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
opacity: 0.9;
}
.nav-links a:hover {
color: var(--primary-color);
transform: translateY(-2px);
}
.nav-contact {
display: flex;
align-items: center;
gap: 1.5rem;
}
/* Auth Buttons */
.auth-buttons {
display: none;
align-items: center;
gap: 1rem;
}
@media (min-width: 1024px) {
.auth-buttons {
display: flex;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border-radius: var(--custom-radius);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: 2px solid transparent;
font-size: 0.875rem;
}
.btn-primary {
background: linear-gradient(135deg, #4a90e2, #357abd);
color: white;
}
.btn-primary:hover {
background: linear-gradient(135deg, #357abd, #4a90e2);
transform: scale(1.05);
}
.btn-secondary {
border-color: var(--primary-color);
color: var(--primary-color);
background: transparent;
}
.btn-secondary:hover {
background-color: var(--primary-color);
color: white;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.125rem;
}
.btn-full {
width: 100%;
}
.btn-white {
background-color: white;
color: var(--primary-color);
}
.btn-white:hover {
background-color: #f5f5f5;
}
.btn-outline {
border: 2px solid white;
color: white;
background: transparent;
}
.btn-outline:hover {
background-color: white;
color: var(--primary-color);
}
/* Cart Button */
.cart-btn {
position: relative;
padding: 0.5rem;
background: none;
border: none;
color: inherit;
cursor: pointer;
transition: color 0.3s ease;
}
.cart-btn:hover {
color: var(--primary-color);
}
.cart-icon {
width: 1.5rem;
height: 1.5rem;
}
.cart-count {
position: absolute;
top: -0.25rem;
left: -0.25rem;
background-color: var(--primary-color);
color: white;
font-size: 0.75rem;
border-radius: 50%;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Mobile Menu */
.mobile-menu {
background-color: var(--bg-secondary);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 1024px) {
.mobile-menu {
display: none !important;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.mobile-menu-content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.mobile-menu-content a {
display: block;
padding: 0.5rem 0;
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.mobile-menu-content a:hover {
color: var(--primary-color);
}
.mobile-auth {
display: flex;
gap: 0.5rem;
padding-top: 0.75rem;
}
.mobile-auth .btn {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
/* New Hero Section */
.new-hero {
padding: 4rem 0;
background: linear-gradient(135deg, var(--bg-dark) 0%, rgba(35, 38, 41, 0.9) 100%);
position: relative;
overflow: hidden;
}
.new-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(241, 99, 52, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(241, 99, 52, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.new-hero-content {
position: relative;
z-index: 10;
}
.ecopeak-title {
text-align: center;
margin-bottom: 3rem;
font-size: 4rem;
font-weight: 900;
background: linear-gradient(135deg, var(--primary-color), #ff6b35, #ff8c42);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textGlow 3s ease-in-out infinite alternate;
}
@keyframes textGlow {
0% {
filter: drop-shadow(0 0 10px rgba(241, 99, 52, 0.3));
}
100% {
filter: drop-shadow(0 0 20px rgba(241, 99, 52, 0.6));
}
}
.ecopeak-text {
display: inline-block;
animation: bounceIn 1.5s ease-out;
}
@keyframes bounceIn {
0% {
transform: scale(0.3) rotate(-10deg);
opacity: 0;
}
50% {
transform: scale(1.1) rotate(5deg);
opacity: 0.8;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
.hero-main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
@media (max-width: 768px) {
.hero-main-content {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.device-section {
display: flex;
justify-content: center;
align-items: center;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.content-section {
display: flex;
flex-direction: column;
gap: 2rem;
}
.main-title {
font-size: 2.5rem;
font-weight: bold;
line-height: 1.2;
color: white;
margin-bottom: 1rem;
animation: slideInRight 1s ease-out;
}
@keyframes slideInRight {
0% {
transform: translateX(30px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.main-description {
font-size: 1.25rem;
color: var(--text-light);
line-height: 1.6;
animation: slideInRight 1s ease-out 0.3s both;
}
.main-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
animation: slideInRight 1s ease-out 0.6s both;
}
@media (max-width: 640px) {
.main-buttons {
flex-direction: column;
}
.ecopeak-title {
font-size: 3rem;
}
.main-title {
font-size: 2rem;
}
}
/* Video Showcase Section */
.video-showcase {
padding: 2rem 0 2rem 0;
background: transparent;
position: relative;
overflow: visible;
z-index: 1;
margin-top: 0;
margin-bottom: 30px;
min-height: 1200px;
}
.video-bg-curve {
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
width: 50%;
max-width: 800px;
pointer-events: none;
}
.curve-image {
width: 100%;
height: auto;
opacity: 1;
display: block;
border-radius: 50% 50% 0 0;
position: relative;
z-index: 1;
mask: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
-webkit-mask: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
}
.video-shapes {
position: absolute;
inset: 0;
pointer-events: none;
}
.video-shapes .shape-1 {
position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
background: linear-gradient(45deg, var(--primary-color), #ff6b35);
border-radius: 50%;
opacity: 0.1;
animation: float 8s ease-in-out infinite;
}
.video-shapes .shape-2 {
position: absolute;
top: 60%;
right: 15%;
width: 60px;
height: 60px;
background: linear-gradient(45deg, #ff8c42, #ffa726);
border-radius: 50%;
opacity: 0.15;
animation: float 6s ease-in-out infinite reverse;
}
.video-shapes .shape-3 {
position: absolute;
bottom: 20%;
left: 20%;
width: 80px;
height: 80px;
background: linear-gradient(45deg, #ffa726, var(--primary-color));
border-radius: 50%;
opacity: 0.1;
animation: float 10s ease-in-out infinite;
}
.video-content {
position: relative;
z-index: 10;
text-align: center;
}
.video-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
}
.video-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, rgba(255,126,95,0.15), rgba(255,165,0,0.1));
color: var(--primary-color);
padding: 0.75rem 1.5rem;
border-radius: 15px;
font-size: 1rem;
font-weight: 700;
margin-bottom: 2rem;
border: 2px solid rgba(255,126,95,0.3);
box-shadow: 0 4px 15px rgba(255,126,95,0.2);
}
.video-badge .badge-icon {
width: 1.25rem;
height: 1.25rem;
color: #ff7e5f;
filter: drop-shadow(0 2px 4px rgba(255,126,95,0.3));
}
.shape-container {
position: absolute;
top: -2rem;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
pointer-events: none;
}
.shape {
position: absolute;
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.shape-1 {
width: 80px;
height: 80px;
background: linear-gradient(45deg, var(--primary-color), #ff6b35);
top: 0;
left: 0;
animation-delay: 0s;
opacity: 0.3;
}
.shape-2 {
width: 60px;
height: 60px;
background: linear-gradient(45deg, #ff8c42, #ffa726);
top: 40px;
right: 20px;
animation-delay: 2s;
opacity: 0.4;
}
.shape-3 {
width: 40px;
height: 40px;
background: linear-gradient(45deg, #ffa726, var(--primary-color));
bottom: 20px;
left: 30px;
animation-delay: 4s;
opacity: 0.5;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
33% {
transform: translateY(-20px) rotate(120deg);
}
66% {
transform: translateY(10px) rotate(240deg);
}
}
.video-title {
font-size: 3rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
margin-top: 300px;
text-shadow: 0 0 20px rgba(241, 99, 52, 0.3);
animation: slideInUp 1s ease-out;
}
/* Video Showcase Specific Adjustments */
.video-showcase .video-container {
margin-top: 0px;
margin-bottom: 400px;
min-height: 500px;
}
/* Video Size */
.video-showcase video {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 15px;
}
/* Video Cover Buttons */
.video-btn {
background: linear-gradient(135deg, #ff7e5f, #f7931e);
color: white;
border: none;
padding: 15px;
border-radius: 50%;
cursor: pointer;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 126, 95, 0.3);
}
.video-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(255, 126, 95, 0.5);
}
.video-btn i {
font-size: 18px;
}
.video-description {
font-size: 1.125rem;
color: var(--text-muted);
text-align: center;
margin: 1rem 0 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.video-subtitle {
font-size: 1.5rem;
color: var(--text-light);
font-weight: 400;
animation: slideInUp 1s ease-out 0.3s both;
}
@keyframes slideInUp {
0% {
transform: translateY(30px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.play-button {
width: 80px;
height: 80px;
background: rgba(173, 100, 74, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
transition: all 0.3s ease;
position: relative;
}
.play-button::before {
content: '';
width: 0;
height: 0;
border-left: 20px solid #ad644a;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 4px;
}
.play-button:hover {
transform: scale(1.1);
background: rgba(173, 100, 74, 1);
}
/* Image Modal */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.modal-content {
margin: auto;
display: block;
width: 90%;
max-width: 1200px;
max-height: 90%;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close {
position: absolute;
top: 20px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
background: rgba(0, 0, 0, 0.5);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.close:hover {
background: rgba(255, 126, 95, 0.8);
transform: scale(1.1);
}
.cover-content {
text-align: center;
color: white;
z-index: 2;
}
.play-icon-large {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.9;
animation: pulse 2s ease-in-out infinite;
}
.cover-content h3 {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.9;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
.play-icon {
width: 36px;
height: 36px;
}
.play-text {
color: white;
font-size: 1.125rem;
font-weight: 600;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.play-icon {
width: 32px;
height: 32px;
color: white;
margin-left: 4px;
}
@media (max-width: 768px) {
.video-title {
font-size: 2.5rem;
}
.video-subtitle {
font-size: 1.25rem;
}
.shape-container {
width: 150px;
height: 150px;
}
.shape-1 {
width: 60px;
height: 60px;
}
.shape-2 {
width: 45px;
height: 45px;
}
.shape-3 {
width: 30px;
height: 30px;
}
}
/* Hero Slider */
.hero-slider {
position: relative;
height: calc(100vh - 4rem - 1rem);
margin-top: 0;
overflow: hidden;
background: var(--bg-dark);
border-radius: var(--custom-radius);
}
.slider-container {
position: relative;
height: 100%;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
.slide-content {
text-align: center;
color: white;
max-width: 800px;
padding: 2rem;
z-index: 2;
position: relative;
}
.slide-title {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
animation: slideInUp 1s ease-out;
}
.slide-subtitle {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.9;
text-shadow: 0 1px 5px rgba(0,0,0,0.5);
animation: slideInUp 1s ease-out 0.2s both;
}
.slide-buttons {
display: flex;
gap: 1rem;
justify-content: center;
animation: slideInUp 1s ease-out 0.4s both;
}
.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 2rem;
z-index: 3;
}
.nav-btn {
background: rgba(255,255,255,0.2);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.nav-btn:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.1);
}
.nav-btn svg {
width: 24px;
height: 24px;
}
.slider-indicators {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 3;
}
.slider-indicators .indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.slider-indicators .indicator.active,
.slider-indicators .indicator:hover {
background: var(--primary-color);
transform: scale(1.3);
}
/* Product Showcase */
.product-showcase {
padding: 6rem 0 2rem 0;
margin-top: 0;
background: transparent;
position: relative;
min-height: 400px;
}
/* Scrolling Features */
.scrolling-features {
background: transparent;
padding: 2rem 0;
margin: 0;
overflow: hidden;
position: relative;
min-height: 80px;
}
.features-container {
width: 100%;
overflow: hidden;
height: 60px;
background: transparent;
margin-top: 4rem;
}
.features-track {
display: flex;
animation: scrollRightToLeft 120s linear infinite;
gap: 0;
width: max-content;
flex-wrap: nowrap;
align-items: center;
height: 60px;
margin-top: 0;
background: transparent;
}
.feature-item {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(64, 64, 64, 0.2);
border-radius: 25px;
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
white-space: nowrap;
min-width: fit-content;
margin: 0 8px;
position: relative;
height: 50px;
flex-shrink: 0;
gap: 0.5rem;
}
.feature-item span {
color: #f8f9fa;
font-size: 0.9rem;
font-weight: 500;
}
.feature-item span::before {
content: "✓";
color: #FF6B35;
font-weight: bold;
margin-left: 0.5rem;
}
@keyframes scrollRightToLeft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* Footer mobile grid layout: row1 (desc + enamad), row2 (quick + contact) */
@media (max-width: 1000px) {
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 1rem 1rem;
width: 100%;
}
.footer-content .footer-section:first-child {
grid-column: 1 / 2;
grid-row: 1;
}
.footer-content .footer-section.enamad-section {
grid-column: 2 / 3;
grid-row: 1;
align-self: center;
justify-self: end;
max-width: 120px;
}
.footer-content .footer-section:nth-child(2) {
grid-column: 1 / 2;
grid-row: 2;
}
.footer-content .footer-section:nth-child(3) {
grid-column: 2 / 3;
grid-row: 2;
max-width: 100%;
}
.footer-section {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 0 10px;
}
.footer-logo {
max-width: 80px;
}
.footer-description {
max-width: 100%;
font-size: 1.07em;
text-align: right;
}
}
@media (max-width: 575px) {
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"desc enamad"
"quick contact";
gap: 8px 8px;
align-items: start;
width: 100%;
max-width: 100%;
overflow: visible;
}
.footer-content .footer-section {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
}
/* Map sections to grid areas by position/classes */
.footer-content .footer-section:nth-child(1) {
grid-area: desc;
max-width: calc(100% - 100px);
}
.footer-content .footer-section.enamad-section {
grid-area: enamad;
justify-self: end;
max-width: 100px;
}
.footer-content .footer-section:nth-child(3) {
grid-area: quick;
max-width: 100%;
}
.footer-content .footer-section:nth-child(4) {
grid-area: contact;
max-width: 100%;
}
.footer-description {
text-align: right;
max-width: 100%;
word-wrap: break-word;
font-size: 0.85rem;
line-height: 1.4;
}
.footer-content *, .footer-content img {
max-width: 100%;
box-sizing: border-box;
overflow: visible;
}
.enamad-logo {
max-width: 80px;
height: auto;
}
/* CTA Mobile Responsive - Stack text, button, and graphics vertically */
.cta-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.cta-text {
order: 1;
text-align: center;
width: 100%;
}
.cta-action {
order: 2;
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cta-visual {
order: 3;
width: 100%;
display: flex;
justify-content: center;
}
.cta-graphic-container {
width: 200px;
height: 200px;
}
.cta-btn, .cta-btn-secondary {
width: 100%;
max-width: 280px;
margin: 0.5rem 0;
}
/* Technical Feature Buttons - Mobile responsive - 2 per row */
.technical-feature-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
box-sizing: border-box;
}
.tech-btn {
font-size: 0.7rem;
padding: 0.5rem 0.4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
}
/* Fix Interactive Services button overflow */
.services-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.services-interactive {
overflow: hidden;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.service-buttons-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.service-btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0.5rem 0.7rem;
font-size: 0.75rem;
}
.btn-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Force Technical Features 2 per row - Override all other rules */
.interactive-technical-features .technical-feature-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, auto);
gap: 0.5rem;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.interactive-technical-features .tech-btn {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0.5rem 0.4rem;
font-size: 0.7rem;
box-sizing: border-box;
display: block;
}
/* Header Mobile Responsive */
.main-header {
padding: 8px 0;
}
.header-container {
padding: 0 10px;
gap: 8px;
flex-wrap: wrap;
}
.header-logo {
flex: 1;
min-width: 120px;
}
.header-actions {
flex: 1;
justify-content: flex-end;
gap: 8px;
}
.logo-img {
max-width: 100px;
height: auto;
}
/* Scrolling Features Mobile Adjustments */
.scrolling-features {
margin-top: 6rem;
margin-bottom: 1rem;
padding: 2rem 0;
}
.features-container {
position: relative;
transform: translateY(-20px);
}
/* Product title right align */
.product-title {
text-align: right;
}
/* Reduce showcase-content margin-top */
.showcase-content {
margin-top: 1rem;
}
.features-track {
animation: scrollRightToLeft 800s linear infinite;
animation-duration: 800s;
animation-timing-function: linear;
animation-play-state: running;
will-change: transform;
margin-top: -10px;
}
.feature-item {
transform: translateY(-20px);
will-change: auto;
}
.features-track .feature-item {
will-change: auto;
}
/* Force animation to work - Override any conflicting rules */
.scrolling-features .features-track {
animation: scrollRightToLeft 800s linear infinite;
animation-play-state: running;
animation-fill-mode: none;
margin-top: -10px;
}
}
/* Force consistent scrolling speed - Prevent speed changes */
.features-track {
animation: scrollRightToLeft 120s linear infinite;
animation-duration: 120s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.showcase-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.product-image {
text-align: center;
}
.device-main-image {
max-width: 100%;
height: auto;
transition: transform 0.3s ease;
margin-top: 30px;
}
.device-main-image:hover {
transform: scale(1.05);
}
.product-title {
font-size: 2.5rem;
font-weight: 700;
color: white;
margin-bottom: 2.5rem;
line-height: 1.2;
}
.product-description {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 3rem;
line-height: 1.6;
}
.product-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(241, 99, 52, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(241, 99, 52, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.lamp-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.15;
z-index: 1;
}
.lamp {
position: absolute;
font-size: 2rem;
animation: lampBlink 3s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}
.lamp-1 {
top: 10%;
left: 5%;
animation-delay: 0s;
}
.lamp-2 {
top: 20%;
right: 10%;
animation-delay: 0.5s;
}
.lamp-3 {
top: 40%;
left: 15%;
animation-delay: 1s;
}
.lamp-4 {
top: 60%;
right: 20%;
animation-delay: 1.5s;
}
.lamp-5 {
top: 80%;
left: 25%;
animation-delay: 2s;
}
.lamp-6 {
top: 30%;
right: 30%;
animation-delay: 2.5s;
}
@keyframes lampBlink {
0%, 50% {
opacity: 0.3;
filter: brightness(0.5) drop-shadow(0 0 5px rgba(255, 215, 0, 0.2));
transform: scale(1);
}
25%, 75% {
opacity: 1;
filter: brightness(2) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
transform: scale(1.1);
}
100% {
opacity: 0.3;
filter: brightness(0.5) drop-shadow(0 0 5px rgba(255, 215, 0, 0.2));
transform: scale(1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.hero-content {
position: relative;
z-index: 20;
}
.brand-title {
text-align: center;
margin-bottom: 3rem;
position: relative;
z-index: 50;
}
.ecopeak-brand {
font-size: 5.5rem;
font-weight: 900;
color: var(--primary-color);
margin: 0;
line-height: 1;
text-shadow: 0 5px 15px rgba(241, 99, 52, 0.4);
}
@keyframes gradientWave {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes textShake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-2px);
}
75% {
transform: translateX(2px);
}
}
.brand-subtitle {
font-size: 1.5rem;
font-weight: 700;
margin-top: 1rem;
background: linear-gradient(90deg, #fff, #ffb088, #fff);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: 0 0; }
}
/* Device Gallery */
/* Creative Gallery Section */
.creative-gallery {
padding: 4rem 0;
background: var(--bg-secondary);
position: relative;
overflow: hidden;
}
/* Main Content */
.main-content {
background:
linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
position: relative;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 10px 30px rgba(0, 0, 0, 0.3);
}
.main-content > * {
position: relative;
z-index: 10;
}
.main-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.01) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Gallery Section */
.gallery-section {
padding: 5rem 0;
background: transparent;
position: relative;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 200px);
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
height: 450px;
}
.gallery-item {
border-radius: 15px;
background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.gallery-item.large {
grid-column: span 2;
grid-row: span 2;
border-radius: 20px;
}
.gallery-item.medium {
grid-column: span 1;
grid-row: span 1;
}
.gallery-item.small {
grid-column: span 1;
grid-row: span 1;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
padding: 1rem;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay h3,
.gallery-overlay h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #FF6B35;
}
.gallery-overlay p {
font-size: 0.9rem;
opacity: 0.9;
}
.grid-gallery-section::before {
content: '';
position: absolute;
top: 20%;
left: 10%;
width: 200px;
height: 200px;
background:
radial-gradient(circle, rgba(255, 107, 53, 0.02) 0%, transparent 70%),
repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
rgba(255, 107, 53, 0.01) 20px,
rgba(255, 107, 53, 0.01) 21px,
transparent 21px,
transparent 40px
);
border-radius: 50%;
animation: electric-pulse 4s ease-in-out infinite;
z-index: 0;
}
.grid-gallery-section::after {
content: '';
position: absolute;
bottom: 20%;
right: 15%;
width: 150px;
height: 150px;
background:
radial-gradient(circle, rgba(52, 152, 219, 0.08) 0%, transparent 70%),
repeating-linear-gradient(
-45deg,
transparent,
transparent 25px,
rgba(52, 152, 219, 0.04) 25px,
rgba(52, 152, 219, 0.04) 26px,
transparent 26px,
transparent 50px
);
border-radius: 50%;
animation: electric-pulse 6s ease-in-out infinite reverse;
z-index: 0;
}
.grid-gallery {
margin-top: 3rem;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 200px);
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
height: 450px;
}
.grid-item {
position: relative;
overflow: hidden;
border-radius: 15px;
cursor: pointer;
transition: all 0.4s ease;
background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
}
.grid-item:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.2);
}
.grid-item.large {
grid-column: span 2;
grid-row: span 2;
border-radius: 20px;
}
.grid-item.medium {
grid-column: span 1;
grid-row: span 1;
}
.grid-item.small {
grid-column: span 1;
grid-row: span 1;
}
.grid-item.tiny {
display: none;
}
.gallery-container {
height: 100%;
overflow: hidden;
position: relative;
}
.grid-item {
position: relative;
overflow: hidden;
border-radius: var(--custom-radius);
cursor: pointer;
transition: transform 0.3s ease;
}
.grid-item:hover {
transform: scale(1.02);
}
.grid-item.large {
grid-column: span 2;
grid-row: span 2;
}
.grid-item.tall {
grid-row: span 2;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.grid-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4));
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.grid-item:hover .grid-overlay {
opacity: 1;
}
.overlay-content {
text-align: center;
color: white;
padding: 1rem;
}
.overlay-content h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.overlay-content h4 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.overlay-content p {
margin-bottom: 1rem;
}
.view-icon {
font-size: 1.5rem;
opacity: 0.8;
}
.gallery-item {
position: relative;
width: 400px;
height: 300px;
margin: 0 1rem;
border-radius: var(--custom-radius);
overflow: hidden;
transition: transform 0.3s ease;
cursor: pointer;
}
.gallery-item:hover {
transform: scale(1.05);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.item-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
padding: 2rem 1.5rem 1.5rem;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.gallery-item:hover .item-overlay {
transform: translateY(0);
}
.item-overlay h4 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.item-overlay p {
font-size: 0.9rem;
opacity: 0.9;
}
@keyframes infiniteScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-2400px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.flip-gallery {
display: grid;
grid-template-columns: 400px 1fr;
gap: 3rem;
margin-top: 3rem;
align-items: start;
}
.gallery-container {
position: relative;
}
.gallery-stack {
position: relative;
height: 300px;
perspective: 1000px;
}
.gallery-card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--custom-radius);
padding: 1.5rem;
color: white;
cursor: pointer;
transition: all 0.5s ease;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.gallery-card:not(.active) {
transform: translateX(20px) translateY(10px) rotateY(-15deg);
opacity: 0.7;
z-index: 1;
}
.gallery-card:not(.active):nth-child(2) {
transform: translateX(40px) translateY(20px) rotateY(-30deg);
opacity: 0.5;
z-index: 0;
}
.gallery-card.active {
transform: translateX(0) translateY(0) rotateY(0deg);
opacity: 1;
z-index: 3;
background: linear-gradient(135deg, var(--primary-color) 0%, #ff6b35 100%);
}
.card-content h4 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.card-content p {
font-size: 0.95rem;
opacity: 0.9;
line-height: 1.5;
}
.gallery-controls {
display: flex;
gap: 1rem;
margin-top: 2rem;
justify-content: center;
}
.gallery-btn {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
width: 45px;
height: 45px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: scale(1.1);
}
.gallery-btn svg {
width: 20px;
height: 20px;
}
.gallery-preview {
position: relative;
border-radius: var(--custom-radius);
overflow: hidden;
}
.gallery-preview img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: var(--custom-radius);
transition: transform 0.3s ease;
}
.gallery-preview:hover img {
transform: scale(1.05);
}
.gallery-bg {
position: absolute;
top: -30px;
right: 10%;
z-index: 1;
}
.gallery-curve {
height: 180px;
width: auto;
opacity: 0.2;
transform: rotate(45deg);
}
.gallery-content {
position: relative;
z-index: 2;
text-align: center;
}
.gallery-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: rgba(241, 99, 52, 0.1);
border: 1px solid rgba(241, 99, 52, 0.2);
border-radius: 50px;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 1.5rem;
}
.badge-icon {
width: 1rem;
height: 1rem;
}
.gallery-title {
font-size: 2.5rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
}
.gallery-description {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.auto-gallery {
margin-top: 3rem;
position: relative;
}
.gallery-slider {
overflow: hidden;
border-radius: 20px;
box-shadow: 0 25px 60px rgba(0,0,0,0.4);
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-dark));
}
.gallery-track {
display: flex;
animation: autoSlide 16s linear infinite;
will-change: transform;
}
.gallery-slide {
min-width: 300px;
height: 400px;
position: relative;
overflow: hidden;
margin-left: 1rem;
border-radius: 15px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
}
.gallery-slide img {
width: 100%;
height: 70%;
object-fit: contain;
background: rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.gallery-slide:hover img {
transform: scale(1.05);
}
.slide-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
background: linear-gradient(transparent, rgba(0,0,0,0.9));
color: white;
}
.slide-info h4 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.slide-info p {
font-size: 0.9rem;
color: var(--text-muted);
margin: 0;
}
.gallery-indicators {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active,
.indicator:hover {
background: var(--primary-color);
transform: scale(1.2);
}
@keyframes autoSlide {
0% { transform: translateX(0); }
100% { transform: translateX(-1800px); }
}
/* Interactive Services Section */
.interactive-services {
padding: 4rem 0;
background: transparent;
position: relative;
margin-bottom: 6rem;
}
.interactive-services::before {
content: '';
position: absolute;
top: 15%;
left: 8%;
width: 120px;
height: 120px;
background:
radial-gradient(circle, rgba(52, 152, 219, 0.1) 0%, transparent 60%),
repeating-linear-gradient(
45deg,
transparent,
transparent 18px,
rgba(52, 152, 219, 0.05) 18px,
rgba(52, 152, 219, 0.05) 19px,
transparent 19px,
transparent 36px
);
border-radius: 50%;
animation: electric-pulse 5s ease-in-out infinite;
z-index: 0;
}
/* Technical Features Interactive Section */
.interactive-technical-features {
padding: 2rem 0 4rem 0;
background: transparent;
position: relative;
margin-top: 6rem;
}
/* Technical Feature Buttons - 2 per row */
.technical-feature-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
margin-bottom: 2rem;
}
/* Interactive Applications */
.interactive-applications {
padding: 4rem 0;
background: var(--bg-dark);
position: relative;
}
.applications-features-container {
background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 3rem;
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
overflow: hidden;
}
.applications-features-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(241, 99, 52, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.application-feature-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 2px solid rgba(255,255,255,0.2);
position: relative;
}
.application-feature-buttons::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}
.app-feature-btn {
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.15);
color: #b0b0b0;
padding: 0.8rem 0.6rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
position: relative;
overflow: hidden;
min-width: 70px;
height: 65px;
font-family: 'Vazir', 'Tahoma', 'Arial', sans-serif;
direction: rtl;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.app-feature-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.6s ease;
}
.app-feature-btn:hover::before {
left: 100%;
}
.app-feature-btn:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
border-color: rgba(255,255,255,0.3);
color: white;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.app-feature-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s ease;
}
.app-feature-btn:hover::after {
left: 100%;
}
.app-feature-btn.active {
background: linear-gradient(135deg, var(--primary-color), #e55a3a);
border-color: var(--primary-color);
color: white;
box-shadow: 0 5px 20px rgba(241, 99, 52, 0.3);
transform: translateY(-2px);
}
.application-feature-detail {
display: none;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
animation: fadeInUp 0.5s ease forwards;
}
.application-feature-detail.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.application-feature-content {
display: flex;
align-items: center;
gap: 3rem;
padding: 2rem;
flex-direction: row-reverse;
}
.application-feature-graphic {
flex-shrink: 0;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.app-graphic {
width: 150px;
height: 150px;
border-radius: 20px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
animation: app-graphic-pulse 3s ease-in-out infinite;
}
.app-home {
background: linear-gradient(135deg, #3498db, #2980b9);
box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
}
.app-commercial {
background: linear-gradient(135deg, #e74c3c, #c0392b);
box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
}
.app-industrial {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
box-shadow: 0 10px 30px rgba(149, 165, 166, 0.3);
}
.app-office {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
box-shadow: 0 10px 30px rgba(155, 89, 182, 0.3);
}
.app-medical {
background: linear-gradient(135deg, #e67e22, #d35400);
box-shadow: 0 10px 30px rgba(230, 126, 34, 0.3);
}
.app-educational {
background: linear-gradient(135deg, #27ae60, #229954);
box-shadow: 0 10px 30px rgba(39, 174, 96, 0.3);
}
.application-feature-text {
flex: 1;
text-align: right;
direction: rtl;
}
.application-feature-text h3 {
color: white;
font-size: 1.5rem;
margin-bottom: 1rem;
text-align: center;
}
.application-feature-text p {
color: #b0b0b0;
line-height: 1.8;
margin-bottom: 1.5rem;
text-align: right;
}
.application-feature-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.app-tag {
background: rgba(241, 99, 52, 0.2);
color: var(--primary-color);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(241, 99, 52, 0.3);
}
.technical-features-container {
background: #2a2d30;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
margin-top: 1rem;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2rem;
z-index: 2;
}
.technical-features-container::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
border-radius: 22px;
z-index: -1;
animation: border-glow 3s ease-in-out infinite;
}
@keyframes border-glow {
0%, 100% {
opacity: 0;
filter: brightness(0);
}
50% {
opacity: 1;
filter: brightness(2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.technical-feature-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
padding: 0;
background: transparent;
border: none;
position: relative;
}
.technical-feature-buttons::after {
content: '';
position: absolute;
bottom: -30px;
left: 0;
right: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, #FF6B35, #FF9673, #FF6B35, transparent);
border-radius: 2px;
box-shadow: 0 2px 15px rgba(255, 107, 53, 0.4);
animation: full-width-separator 2s ease-in-out infinite;
}
@keyframes full-width-separator {
0%, 100% {
opacity: 0.7;
box-shadow: 0 2px 15px rgba(255, 107, 53, 0.4);
}
50% {
opacity: 1;
box-shadow: 0 4px 25px rgba(255, 107, 53, 0.7);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.tech-btn {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: none;
color: #e0e0e0;
padding: 0.7rem 0.6rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 700;
position: relative;
overflow: hidden;
min-width: 70px;
height: 60px;
font-family: 'Vazirmatn', sans-serif;
direction: rtl;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tech-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s ease;
}
.tech-btn:hover::before {
left: 100%;
}
.tech-btn:hover {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 150, 115, 0.05));
color: #FF6B35;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
}
.tech-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s ease;
}
.tech-btn:hover::after {
left: 100%;
}
.tech-btn.active {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 150, 115, 0.08));
color: #FF6B35;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}
.tech-btn i {
font-size: 0.9rem;
margin-left: 0.5rem;
opacity: 0.8;
}
/* Responsive Design for Technical Features */
@media (max-width: 1024px) {
.technical-feature-buttons {
grid-template-columns: repeat(3, 1fr);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.technical-feature-buttons {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
}
.tech-btn {
padding: 0.8rem 1rem;
height: 50px;
font-size: 0.85rem;
}
.technical-feature-content {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.technical-feature-graphic {
width: 150px;
height: 150px;
}
.tech-graphic {
width: 100px;
height: 100px;
}
.technical-feature-text {
text-align: center;
}
.technical-feature-tags {
justify-content: center;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 480px) {
.technical-feature-buttons {
grid-template-columns: 1fr;
}
.tech-btn {
font-size: 0.8rem;
padding: 0.7rem 1rem;
height: 45px;
min-width: 100px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.technical-features-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), transparent);
pointer-events: none;
}
.technical-feature-detail {
display: none;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
animation: fadeInUp 0.5s ease forwards;
}
.technical-feature-detail.active {
display: block;
opacity: 1;
transform: translateY(0);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.technical-feature-content {
background: transparent;
border: none;
border-radius: 0;
padding: 2rem;
position: relative;
overflow: visible;
backdrop-filter: none;
box-shadow: none;
display: flex;
align-items: center;
gap: 3rem;
flex-direction: row-reverse;
}
.technical-feature-graphic {
flex-shrink: 0;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.technical-feature-text {
flex: 1;
text-align: right;
}
.technical-feature-text h3 {
color: white;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.technical-feature-text p {
color: #b0b0b0;
line-height: 1.8;
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.technical-feature-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.tech-tag {
background: rgba(255, 107, 53, 0.05);
color: var(--primary-color);
padding: 0.4rem 1rem;
border-radius: 15px;
font-size: 1rem;
font-weight: 500;
border: 1px solid rgba(255, 107, 53, 0.08);
}
/* Tech Graphics */
.tech-graphic {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
}
/* Power Grid Graphic */
.power-grid {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
border-radius: 50%;
border: 2px solid rgba(255, 107, 53, 0.2);
}
.power-line {
height: 4px;
background: linear-gradient(90deg, transparent, #FF6B35, #FF8E53, #FF6B35, transparent);
animation: power-flow 2s ease-in-out infinite;
border-radius: 2px;
box-shadow: 0 0 8px rgba(255, 107, 53, 0.4);
}
.power-line.line-1 {
animation-delay: 0s;
transform: rotate(15deg);
width: 80%;
}
.power-line.line-2 {
animation-delay: 0.5s;
transform: rotate(-15deg);
width: 60%;
}
.power-line.line-3 {
animation-delay: 1s;
transform: rotate(30deg);
width: 70%;
}
.power-line.line-4 {
animation-delay: 1.5s;
transform: rotate(-30deg);
width: 50%;
}
.power-outage {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.outage-flash {
position: absolute;
width: 20px;
height: 20px;
background: #FF0000;
border-radius: 50%;
animation: outage-flash 1.5s ease-in-out infinite;
}
.outage-flash.flash-1 { animation-delay: 0s; }
.outage-flash.flash-2 { animation-delay: 0.3s; }
.outage-flash.flash-3 { animation-delay: 0.6s; }
.protection-shield {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.shield-icon {
font-size: 3rem;
color: #00FF00;
animation: shield-pulse 2s ease-in-out infinite;
}
.shield-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(0, 255, 0, 0.3), transparent);
border-radius: 50%;
animation: shield-glow 2s ease-in-out infinite;
}
.power-flow {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.flow-arrow {
font-size: 1.5rem;
color: #FF6B35;
animation: flow-move 2s ease-in-out infinite;
}
.flow-arrow.arrow-1 { animation-delay: 0s; }
.flow-arrow.arrow-2 { animation-delay: 0.7s; }
.flow-arrow.arrow-3 { animation-delay: 1.4s; }
@keyframes power-flow {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes outage-flash {
0%, 100% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1.2); }
}
@keyframes shield-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes shield-glow {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes flow-move {
0%, 100% { opacity: 0.5; transform: translateX(0); }
50% { opacity: 1; transform: translateX(10px); }
}
/* New Animations for Enhanced Graphics */
@keyframes voltage-rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes voltage-pulse {
0%, 100% { opacity: 0.6; transform: scaleY(0.5); }
50% { opacity: 1; transform: scaleY(1); }
}
@keyframes circuit-flow {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes node-pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 1; }
}
@keyframes alert-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}
@keyframes alert-blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes sound-wave {
0%, 100% { transform: scaleX(0.5); opacity: 0.3; }
50% { transform: scaleX(1); opacity: 1; }
}
@keyframes installation-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(180deg); }
}
@keyframes tool-bounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes step-progress {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes money-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-5px) rotate(5deg); }
}
@keyframes chart-grow {
0%, 100% { transform: scaleY(0.8); }
50% { transform: scaleY(1); }
}
@keyframes savings-pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
@keyframes display-scan {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes display-scan-line {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes display-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes dimension-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes dimension-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 107, 53, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 107, 53, 0.6); }
}
@keyframes dimension-glow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@keyframes eco-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-8px) rotate(2deg); }
}
@keyframes leaf-sway {
0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); }
50% { transform: translate(-50%, -50%) rotate(5deg); }
}
@keyframes wave-motion {
0%, 100% { transform: scale(0.8) translateX(-10px); opacity: 0.3; }
50% { transform: scale(1) translateX(10px); opacity: 0.8; }
}
/* New Enhanced Graphics Animations */
@keyframes screen-glow {
0%, 100% { box-shadow: 0 0 5px #f39c12; }
50% { box-shadow: 0 0 15px #f39c12, 0 0 25px #f39c12; }
}
@keyframes status-blink {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes status-alert {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.2); }
}
@keyframes level-pulse {
0%, 100% { transform: scaleY(0.8); opacity: 0.7; }
50% { transform: scaleY(1); opacity: 1; }
}
@keyframes warning-blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes wave-expand {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
@keyframes core-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes core-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}
@keyframes layer-rotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sensor-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
@keyframes sensor-line {
0%, 100% { opacity: 0.3; height: 10px; }
50% { opacity: 1; height: 20px; }
}
@keyframes text-glow {
0%, 100% { text-shadow: 0 0 5px #00ff00; }
50% { text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00; }
}
@keyframes indicator-blink {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes port-glow {
0%, 100% { box-shadow: 0 0 3px #ff6b35; }
50% { box-shadow: 0 0 8px #ff6b35, 0 0 15px #ff6b35; }
}
@keyframes step-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes line-extend {
0%, 100% { width: 10px; }
50% { width: 20px; }
}
@keyframes connection-flow {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes arrow-bounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
}
@keyframes percentage-fill {
0% { width: 0%; }
100% { width: 40%; }
}
@keyframes particle-float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
50% { transform: translateY(-10px) rotate(180deg); opacity: 1; }
}
@keyframes graph-draw {
0% { width: 0%; opacity: 0; }
100% { width: 100%; opacity: 1; }
}
@keyframes point-glow {
0%, 100% { transform: scale(1); box-shadow: 0 0 3px #f1c40f; }
50% { transform: scale(1.2); box-shadow: 0 0 8px #f1c40f; }
}
@keyframes value-flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes control-pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
@keyframes signal-pulse {
0%, 100% { transform: scaleX(0.8); opacity: 0.6; }
50% { transform: scaleX(1); opacity: 1; }
}
@keyframes tool-bounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes bar-fill {
0%, 100% { transform: scaleX(0.8); opacity: 0.7; }
50% { transform: scaleX(1); opacity: 1; }
}
@keyframes progress-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes icon-bounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes gear-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes ring-pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
@keyframes support-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes pulse-expand {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
@keyframes wave-expand {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
@keyframes dot-blink {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
@keyframes element-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
@keyframes dot-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.1); }
}
@keyframes core-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes shield-rotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes warning-blink {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
@keyframes flow-move {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1); }
}
@keyframes indicator-blink {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
@keyframes text-glow {
0%, 100% { text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); }
50% { text-shadow: 0 0 15px rgba(0, 255, 0, 0.8); }
}
@keyframes element-bounce {
0%, 100% { transform: translateX(-50%) translateY(0px); }
50% { transform: translateX(-50%) translateY(-15px); }
}
@keyframes element-rotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes element-pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.3); opacity: 1; }
}
@keyframes element-swing {
0%, 100% { transform: translateX(-50%) rotate(-10deg); }
50% { transform: translateX(-50%) rotate(10deg); }
}
@keyframes element-wiggle {
0%, 100% { transform: rotate(0deg) translateX(0px); }
25% { transform: rotate(5deg) translateX(5px); }
75% { transform: rotate(-5deg) translateX(-5px); }
}
@keyframes ring-expand {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
@keyframes glow-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}
@keyframes connection-flow {
0%, 100% { opacity: 0.2; transform: scale(0.8); }
50% { opacity: 0.8; transform: scale(1); }
}
@keyframes particle-float {
0%, 100% { transform: translateY(0px) scale(1); opacity: 0.6; }
50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
}
@keyframes trail-rotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes wave-flow {
0%, 100% { transform: translateX(-100%); opacity: 0.3; }
50% { transform: translateX(0%); opacity: 0.8; }
}
.tech-dimensions {
background: linear-gradient(135deg, #2a2d30, #3a3d40, #2a2d30);
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.tech-dimensions::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: dimension-float 4s ease-in-out infinite;
z-index: 1;
}
.dimension-box {
position: relative;
width: 80px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 107, 53, 0.1));
border: 2px solid rgba(255, 107, 53, 0.5);
border-radius: 8px;
z-index: 2;
animation: dimension-pulse 2s ease-in-out infinite;
}
.dimension-line {
position: absolute;
background: rgba(255, 107, 53, 0.8);
border-radius: 1px;
animation: dimension-glow 1.5s ease-in-out infinite;
}
.dimension-line.line-1 {
width: 60px;
height: 2px;
top: -10px;
left: 10px;
animation-delay: 0s;
}
.dimension-line.line-2 {
width: 2px;
height: 30px;
right: -10px;
top: 10px;
animation-delay: 0.5s;
}
.dimension-line.line-3 {
width: 40px;
height: 2px;
bottom: -10px;
left: 20px;
animation-delay: 1s;
}
.dimensions-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.device-box {
position: relative;
width: 80px;
height: 50px;
background: #34495e;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.device-outline {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
animation: device-pulse 2s ease-in-out infinite;
}
.device-screen {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 20px;
background: #1a1a1a;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.device-screen::before {
content: 'EP-101';
color: #FF6B35;
font-size: 8px;
font-weight: bold;
}
.device-buttons {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
}
.button-small {
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: button-blink 1.5s ease-in-out infinite;
}
.dimensions-labels {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.dimension-label {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
padding: 0.2rem 0.5rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: bold;
border: 1px solid rgba(255, 255, 255, 0.2);
}
@keyframes device-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes button-blink {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.box-outline-simple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid #fff;
border-radius: 8px;
animation: box-pulse 2s ease-in-out infinite;
}
.box-fill-simple {
position: absolute;
top: 3px;
left: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
background: linear-gradient(135deg, #2a2d30, #3a3d40);
border-radius: 5px;
opacity: 0.8;
}
.dimensions-arrows-simple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.arrow-simple {
position: absolute;
background: #fff;
border-radius: 2px;
}
.arrow-h-simple {
width: 30px;
height: 3px;
top: -15px;
left: 50%;
transform: translateX(-50%);
animation: arrow-move-h 2s ease-in-out infinite;
}
.arrow-h-simple::before {
content: '';
position: absolute;
right: -8px;
top: -3px;
width: 0;
height: 0;
border-left: 8px solid #fff;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.arrow-v-simple {
width: 3px;
height: 20px;
left: -20px;
top: 50%;
transform: translateY(-50%);
animation: arrow-move-v 2s ease-in-out infinite;
}
.arrow-v-simple::before {
content: '';
position: absolute;
bottom: -8px;
left: -3px;
width: 0;
height: 0;
border-top: 8px solid #fff;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.dimensions-text-simple {
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.size-text {
display: block;
color: #fff;
font-size: 0.8rem;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.unit-text {
display: block;
color: #bdc3c7;
font-size: 0.6rem;
font-weight: normal;
}
/* Dimensions Ruler */
.dimensions-ruler {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ruler-body {
width: 60px;
height: 20px;
background: linear-gradient(135deg, #ecf0f1, #bdc3c7);
border-radius: 10px;
position: relative;
animation: ruler-pulse 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.ruler-scale {
position: absolute;
top: 2px;
left: 5px;
right: 5px;
height: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.scale-mark {
width: 1px;
height: 4px;
background: #2c3e50;
border-radius: 0.5px;
animation: mark-glow 2s ease-in-out infinite;
}
.mark-1 { animation-delay: 0s; }
.mark-2 { animation-delay: 0.2s; }
.mark-3 { animation-delay: 0.4s; }
.mark-4 { animation-delay: 0.6s; }
.mark-5 { animation-delay: 0.8s; }
.ruler-measurements {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
.measurement {
font-size: 0.4rem;
color: #2c3e50;
font-weight: bold;
font-family: 'Courier New', monospace;
animation: measurement-pulse 2s ease-in-out infinite;
}
.measurement-1 { animation-delay: 0s; }
.measurement-2 { animation-delay: 0.3s; }
.measurement-3 { animation-delay: 0.6s; }
.ruler-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #2a2d30, #3a3d40, #2a2d30);
border-radius: 12px;
opacity: 0.3;
animation: ruler-glow-pulse 2s ease-in-out infinite;
z-index: -1;
}
.tech-alert {
background: linear-gradient(135deg, #e74c3c, #c0392b);
box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
position: relative;
overflow: hidden;
}
.tech-alert::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: alert-pulse 1s ease-in-out infinite;
z-index: 1;
}
.alert-indicators {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 20px;
display: flex;
gap: 10px;
z-index: 2;
}
.alert-light {
flex: 1;
height: 100%;
border-radius: 50%;
background: #fff;
animation: alert-blink 0.5s ease-in-out infinite;
}
.alert-light.light-3 { animation-delay: 0.4s; }
.alert-sound {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 20px;
z-index: 2;
}
.sound-wave {
position: absolute;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.8);
border-radius: 1px;
animation: sound-wave 1s ease-in-out infinite;
}
.sound-wave.wave-1 { animation-delay: 0s; }
.sound-wave.wave-2 { animation-delay: 0.3s; }
.sound-wave.wave-3 { animation-delay: 0.6s; }
.alarm-system {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.alarm-horn {
position: absolute;
top: 20px;
left: 20px;
width: 40px;
height: 40px;
}
.horn-body {
width: 30px;
height: 30px;
background: #fff;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: relative;
animation: horn-pulse 1s ease-in-out infinite;
}
.horn-mouth {
position: absolute;
top: 15px;
left: 25px;
width: 0;
height: 0;
border-left: 15px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
animation: horn-pulse 1s ease-in-out infinite;
}
.sound-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wave {
position: absolute;
border: 2px solid #fff;
border-radius: 50%;
animation: sound-wave 1.5s ease-in-out infinite;
}
.wave.w1 {
width: 20px;
height: 20px;
top: -10px;
left: -10px;
animation-delay: 0s;
}
.wave.w2 {
width: 30px;
height: 30px;
top: -15px;
left: -15px;
animation-delay: 0.3s;
}
.wave.w3 {
width: 40px;
height: 40px;
top: -20px;
left: -20px;
animation-delay: 0.6s;
}
.alarm-light {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
}
.light-bulb {
width: 25px;
height: 25px;
background: #fff;
border-radius: 50%;
position: relative;
animation: light-flash 0.8s ease-in-out infinite;
}
.light-flash {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: radial-gradient(circle, rgba(255, 255, 0, 0.8) 0%, transparent 70%);
border-radius: 50%;
animation: light-flash 0.8s ease-in-out infinite;
}
.alarm-text {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.alert-title {
display: block;
color: #fff;
font-size: 0.8rem;
font-weight: bold;
font-family: 'Vazir', sans-serif;
}
.alert-subtitle {
display: block;
color: #fff;
font-size: 0.6rem;
font-weight: normal;
font-family: 'Courier New', monospace;
opacity: 0.8;
}
/* Alert System */
.alert-system {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.siren-light {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.light-body {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #f39c12, #e67e22);
border-radius: 50%;
position: relative;
animation: light-flash 1s ease-in-out infinite;
}
.light-bulb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
animation: bulb-glow 1s ease-in-out infinite;
}
.light-flash {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 2px solid #e74c3c;
border-radius: 50%;
animation: flash-rotate 2s linear infinite;
}
.light-rotation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #e74c3c;
border-radius: 50%;
animation: rotation-pulse 1.5s ease-in-out infinite;
}
.sound-horn {
position: relative;
width: 35px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.horn-body {
width: 30px;
height: 15px;
background: linear-gradient(135deg, #34495e, #2c3e50);
border-radius: 15px 5px 15px 5px;
position: relative;
animation: horn-pulse 1s ease-in-out infinite;
}
.sound-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 1px solid #e74c3c;
border-radius: 50%;
animation: wave-expand 1.5s ease-in-out infinite;
}
.wave-1 { animation-delay: 0s; }
.wave-2 { animation-delay: 0.5s; }
.wave-3 { animation-delay: 1s; }
.tech-protection {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
box-shadow: 0 10px 30px rgba(155, 89, 182, 0.3);
position: relative;
overflow: hidden;
}
/* Protection Core */
.protection-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
z-index: 2;
}
.core-center {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.core-icon {
font-size: 2rem;
color: #fff;
z-index: 3;
animation: core-rotate 4s linear infinite;
}
.core-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: core-pulse 2s ease-in-out infinite;
}
.protection-layers {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
z-index: 1;
}
.layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: layer-rotate 6s linear infinite;
}
.layer.layer-1 {
width: 60px;
height: 60px;
animation-delay: 0s;
}
.layer.layer-2 {
width: 80px;
height: 80px;
animation-delay: 2s;
}
.layer.layer-3 {
width: 100px;
height: 100px;
animation-delay: 4s;
}
/* Voltage Sensors */
.voltage-sensors {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
}
.sensor {
position: absolute;
width: 20px;
height: 20px;
}
.sensor.sensor-1 {
top: 10px;
left: 10px;
}
.sensor.sensor-2 {
top: 10px;
right: 10px;
}
.sensor.sensor-3 {
bottom: 10px;
left: 10px;
}
.sensor.sensor-4 {
bottom: 10px;
right: 10px;
}
.sensor-dot {
width: 8px;
height: 8px;
background: #e74c3c;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: sensor-pulse 1.5s ease-in-out infinite;
}
.sensor-line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 15px;
background: linear-gradient(to bottom, #e74c3c, transparent);
animation: sensor-line 2s ease-in-out infinite;
}
.sensor.sensor-1 .sensor-line { animation-delay: 0s; }
.sensor.sensor-2 .sensor-line { animation-delay: 0.5s; }
.sensor.sensor-3 .sensor-line { animation-delay: 1s; }
.sensor.sensor-4 .sensor-line { animation-delay: 1.5s; }
.tech-protection::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: voltage-rotation 3s linear infinite;
z-index: 1;
}
.voltage-indicator {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 20px;
display: flex;
gap: 5px;
z-index: 2;
}
.voltage-bar {
flex: 1;
background: linear-gradient(to top, #27ae60, #2ecc71);
border-radius: 2px;
animation: voltage-pulse 1.5s ease-in-out infinite;
}
.voltage-bar.bar-1 { animation-delay: 0s; }
.voltage-bar.bar-2 { animation-delay: 0.2s; }
.voltage-bar.bar-3 { animation-delay: 0.4s; }
.protection-circuit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
z-index: 2;
}
.circuit-line {
position: absolute;
background: rgba(255, 255, 255, 0.8);
border-radius: 1px;
}
.circuit-line.circuit-1 {
width: 60px;
height: 2px;
top: 20px;
left: 10px;
animation: circuit-flow 2s ease-in-out infinite;
}
.circuit-line.circuit-2 {
width: 2px;
height: 40px;
top: 20px;
right: 20px;
animation: circuit-flow 2s ease-in-out infinite 0.5s;
}
.circuit-node {
position: absolute;
width: 8px;
height: 8px;
background: #FF6B35;
border-radius: 50%;
animation: node-pulse 1s ease-in-out infinite;
}
.circuit-node.node-1 {
top: 16px;
left: 10px;
}
.circuit-node.node-2 {
top: 16px;
right: 16px;
}
.protection-shield-large {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.shield-icon-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: #fff;
z-index: 3;
animation: shield-pulse 2s ease-in-out infinite;
}
.shield-glow-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: shield-glow 2s ease-in-out infinite;
}
.voltage-display-large {
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
padding: 6px 12px;
border-radius: 6px;
z-index: 3;
white-space: nowrap;
}
.voltage-text-large {
color: #fff;
font-size: 0.7rem;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.protection-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ring {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: ring-expand 3s ease-in-out infinite;
}
.ring.ring-1 {
width: 60px;
height: 60px;
top: -30px;
left: -30px;
animation-delay: 0s;
}
.ring.ring-2 {
width: 80px;
height: 80px;
top: -40px;
left: -40px;
animation-delay: 1s;
}
.ring.ring-3 {
width: 100px;
height: 100px;
top: -50px;
left: -50px;
animation-delay: 2s;
}
.tech-prevention {
background: linear-gradient(135deg, #f39c12, #e67e22);
box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3);
position: relative;
overflow: hidden;
}
/* Prevention System */
.prevention-system {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
z-index: 2;
}
.system-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
z-index: 3;
}
.core-icon {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
animation: core-pulse 2s ease-in-out infinite;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}
.core-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 2px solid rgba(231, 76, 60, 0.3);
border-radius: 50%;
animation: pulse-expand 2s ease-in-out infinite;
}
.prevention-shield {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
z-index: 2;
}
.shield-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid rgba(52, 152, 219, 0.3);
border-radius: 50%;
animation: shield-rotate 4s linear infinite;
}
.shield-layer.layer-1 {
width: 60px;
height: 60px;
animation-delay: 0s;
}
.shield-layer.layer-2 {
width: 80px;
height: 80px;
animation-delay: 1.3s;
}
.shield-layer.layer-3 {
width: 100px;
height: 100px;
animation-delay: 2.6s;
}
.warning-system {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
}
.warning-light {
position: absolute;
width: 8px;
height: 8px;
background: #f39c12;
border-radius: 50%;
animation: warning-blink 1.5s ease-in-out infinite;
box-shadow: 0 0 10px rgba(243, 156, 18, 0.6);
}
.warning-light.light-1 {
top: 10px;
left: 10px;
animation-delay: 0s;
}
.warning-light.light-2 {
top: 10px;
right: 10px;
animation-delay: 0.4s;
}
.warning-light.light-3 {
bottom: 10px;
left: 10px;
animation-delay: 0.8s;
}
.warning-light.light-4 {
bottom: 10px;
right: 10px;
animation-delay: 1.2s;
}
.power-flow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.flow-line {
position: absolute;
background: linear-gradient(45deg, transparent, #27ae60, transparent);
border-radius: 1px;
animation: flow-move 3s ease-in-out infinite;
}
.flow-line.line-1 {
width: 2px;
height: 40px;
top: 20px;
left: 20px;
animation-delay: 0s;
}
.flow-line.line-2 {
width: 40px;
height: 2px;
top: 20px;
right: 20px;
animation-delay: 0.8s;
}
.flow-line.line-3 {
width: 2px;
height: 40px;
bottom: 20px;
right: 20px;
animation-delay: 1.6s;
}
.flow-line.line-4 {
width: 40px;
height: 2px;
bottom: 20px;
left: 20px;
animation-delay: 2.4s;
}
.monitor-screen {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.screen-border {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
border: 2px solid #f39c12;
border-radius: 6px;
animation: screen-glow 2s ease-in-out infinite;
}
.screen-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: #27ae60;
animation: status-blink 1s ease-in-out infinite;
}
.status-indicator.active {
background: #e74c3c;
animation: status-alert 0.5s ease-in-out infinite;
}
.power-levels {
display: flex;
gap: 2px;
width: 100%;
justify-content: center;
}
.level-bar {
width: 6px;
height: 12px;
background: linear-gradient(to top, #f39c12, #f1c40f);
border-radius: 1px;
animation: level-pulse 1.5s ease-in-out infinite;
}
.level-bar.level-1 { animation-delay: 0s; height: 8px; }
.level-bar.level-2 { animation-delay: 0.2s; height: 10px; }
.level-bar.level-3 { animation-delay: 0.4s; height: 12px; }
.level-bar.level-4 { animation-delay: 0.6s; height: 6px; }
.warning-signs {
display: flex;
gap: 3px;
margin-top: 5px;
}
.warning-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: #e74c3c;
animation: warning-blink 0.8s ease-in-out infinite;
}
.warning-dot.dot-1 { animation-delay: 0s; }
.warning-dot.dot-2 { animation-delay: 0.3s; }
.warning-dot.dot-3 { animation-delay: 0.6s; }
/* Prevention Waves */
.prevention-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
z-index: 1;
}
.wave-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid rgba(243, 156, 18, 0.3);
border-radius: 50%;
animation: wave-expand 3s ease-in-out infinite;
}
.wave-ring.ring-1 {
width: 80px;
height: 80px;
animation-delay: 0s;
}
.wave-ring.ring-2 {
width: 100px;
height: 100px;
animation-delay: 1s;
}
.wave-ring.ring-3 {
width: 120px;
height: 120px;
animation-delay: 2s;
}
.tech-cost {
background: linear-gradient(135deg, #27ae60, #229954);
box-shadow: 0 10px 30px rgba(39, 174, 96, 0.3);
position: relative;
overflow: hidden;
}
/* Cost Calculator */
.cost-calculator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 70px;
z-index: 2;
}
.calculator-screen {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
border-radius: 8px;
border: 2px solid #27ae60;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.screen-header {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
height: 15px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #27ae60;
}
.currency-symbol {
font-size: 10px;
color: #27ae60;
font-weight: bold;
}
.savings-text {
font-size: 6px;
color: #fff;
font-family: 'Courier New', monospace;
}
.cost-display {
position: absolute;
top: 25px;
left: 5px;
right: 5px;
height: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.old-cost {
font-size: 8px;
color: #e74c3c;
text-decoration: line-through;
}
.arrow-down {
font-size: 12px;
color: #27ae60;
animation: arrow-bounce 2s ease-in-out infinite;
}
.new-cost {
font-size: 10px;
color: #27ae60;
font-weight: bold;
}
.percentage-display {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
height: 15px;
}
.percentage-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
margin-bottom: 3px;
}
.percentage-fill {
width: 40%;
height: 100%;
background: linear-gradient(90deg, #27ae60, #2ecc71);
border-radius: 3px;
animation: percentage-fill 3s ease-in-out infinite;
}
.percentage-text {
font-size: 6px;
color: #fff;
text-align: center;
font-family: 'Courier New', monospace;
}
/* Money Particles */
.money-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.particle {
position: absolute;
font-size: 12px;
color: #f1c40f;
font-weight: bold;
animation: particle-float 4s ease-in-out infinite;
}
.particle.particle-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.particle.particle-2 {
top: 30%;
right: 15%;
animation-delay: 1s;
}
.particle.particle-3 {
bottom: 25%;
left: 20%;
animation-delay: 2s;
}
.particle.particle-4 {
top: 60%;
right: 10%;
animation-delay: 3s;
}
.particle.particle-5 {
bottom: 40%;
left: 50%;
animation-delay: 1.5s;
}
/* Cost Graph */
.cost-graph {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 3;
}
.graph-line {
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 1px;
animation: graph-draw 3s ease-in-out infinite;
}
.graph-line.line-1 {
width: 30px;
height: 2px;
top: 20px;
left: 10px;
animation-delay: 0s;
}
.graph-line.line-2 {
width: 2px;
height: 20px;
top: 20px;
left: 40px;
animation-delay: 1s;
}
.graph-line.line-3 {
width: 25px;
height: 2px;
top: 40px;
left: 15px;
animation-delay: 2s;
}
.graph-points {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.point {
position: absolute;
width: 4px;
height: 4px;
background: #f1c40f;
border-radius: 50%;
animation: point-glow 2s ease-in-out infinite;
}
.point.point-1 {
top: 18px;
left: 10px;
animation-delay: 0s;
}
.point.point-2 {
top: 18px;
left: 40px;
animation-delay: 1s;
}
.point.point-3 {
top: 38px;
left: 15px;
animation-delay: 2s;
}
.tech-cost::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: money-float 5s ease-in-out infinite;
z-index: 1;
}
.cost-chart {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 40px;
display: flex;
align-items: end;
gap: 5px;
z-index: 2;
}
.chart-bar {
flex: 1;
background: linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.8));
border-radius: 2px 2px 0 0;
animation: chart-grow 2s ease-in-out infinite;
}
.chart-bar.bar-1 {
height: 60%;
animation-delay: 0s;
}
.chart-bar.bar-2 {
height: 80%;
animation-delay: 0.3s;
}
.chart-bar.bar-3 {
height: 40%;
animation-delay: 0.6s;
}
.savings-indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 20px;
z-index: 2;
}
.savings-arrow {
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
animation: savings-pulse 1.5s ease-in-out infinite;
}
.tech-eco {
background: linear-gradient(135deg, #34495e, #2c3e50);
box-shadow: 0 10px 30px rgba(52, 73, 94, 0.3);
position: relative;
overflow: hidden;
}
.tech-eco::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: eco-float 6s ease-in-out infinite;
z-index: 1;
}
.eco-leaf {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: #2ecc71;
z-index: 2;
animation: leaf-sway 3s ease-in-out infinite;
}
.eco-waves {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
height: 20px;
z-index: 2;
}
.wave {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(46, 204, 113, 0.3), transparent);
border-radius: 50%;
animation: wave-motion 2s ease-in-out infinite;
}
.wave.wave-1 {
animation-delay: 0s;
transform: scale(0.8);
}
.wave.wave-2 {
animation-delay: 0.5s;
transform: scale(0.6);
}
.wave.wave-3 {
animation-delay: 1s;
transform: scale(0.4);
}
.tech-installation {
background: linear-gradient(135deg, #ff7e5f, #ff6b35);
box-shadow: 0 10px 30px rgba(255, 126, 95, 0.3);
position: relative;
overflow: hidden;
}
/* Simple Installation */
.simple-installation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
z-index: 2;
}
.install-icon {
font-size: 2.5rem;
color: #fff;
z-index: 3;
animation: icon-bounce 2s ease-in-out infinite;
}
.install-animation {
position: relative;
width: 80px;
height: 80px;
}
.gear {
position: absolute;
color: rgba(255, 255, 255, 0.8);
font-size: 1.5rem;
animation: gear-rotate 3s linear infinite;
}
.gear.gear-1 {
top: 10px;
left: 10px;
animation-delay: 0s;
}
.gear.gear-2 {
top: 10px;
right: 10px;
animation-delay: 1s;
animation-direction: reverse;
}
.gear.gear-3 {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
animation-delay: 2s;
}
.install-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.progress-ring {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
position: relative;
animation: ring-pulse 2s ease-in-out infinite;
}
.progress-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid transparent;
border-top: 4px solid #fff;
border-radius: 50%;
animation: progress-rotate 2s linear infinite;
}
.progress-text {
font-size: 12px;
color: #fff;
font-family: 'Courier New', monospace;
font-weight: bold;
animation: text-glow 2s ease-in-out infinite;
}
.workspace-tools {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 20px;
display: flex;
gap: 8px;
justify-content: center;
}
.tool-screwdriver, .tool-wrench, .tool-plug {
width: 20px;
height: 20px;
background: linear-gradient(135deg, #ff6b35, #ff8e53);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
animation: tool-bounce 2s ease-in-out infinite;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}
.tool-screwdriver { animation-delay: 0s; }
.tool-wrench { animation-delay: 0.5s; }
.tool-plug { animation-delay: 1s; }
.installation-device {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 40px;
}
.device-outline {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2c2c2c, #3c3c3c);
border-radius: 6px;
border: 2px solid #ff6b35;
position: relative;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.device-screen {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
height: 15px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 3px;
border: 1px solid #ff6b35;
overflow: hidden;
}
.screen-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.status-text {
font-size: 6px;
color: #00ff00;
font-family: 'Courier New', monospace;
animation: text-glow 2s ease-in-out infinite;
}
.status-indicator {
width: 3px;
height: 3px;
background: #00ff00;
border-radius: 50%;
animation: indicator-blink 1s ease-in-out infinite;
}
.installation-steps {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
height: 20px;
display: flex;
gap: 5px;
justify-content: center;
}
.step-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.step-circle {
width: 12px;
height: 12px;
background: #fff;
color: #ff6b35;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 6px;
font-weight: bold;
animation: step-pulse 2s ease-in-out infinite;
}
.step-label {
font-size: 5px;
color: #fff;
font-family: 'Courier New', monospace;
}
.step-indicator.step-1 .step-circle { animation-delay: 0s; }
.step-indicator.step-2 .step-circle { animation-delay: 0.7s; }
.step-indicator.step-3 .step-circle { animation-delay: 1.4s; }
.installation-progress {
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
height: 15px;
}
.progress-bar {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
overflow: hidden;
margin-bottom: 3px;
}
.progress-fill {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #ff6b35, #ff8e53);
border-radius: 2px;
animation: progress-fill 3s ease-in-out infinite;
}
.progress-text {
font-size: 5px;
color: #fff;
text-align: center;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.device-body {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2c2c2c, #3c3c3c);
border-radius: 8px;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.device-screen {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 20px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 4px;
border: 1px solid #ff6b35;
overflow: hidden;
}
.screen-display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.display-text {
font-size: 8px;
color: #00ff00;
font-family: 'Courier New', monospace;
animation: text-glow 2s ease-in-out infinite;
}
.display-indicator {
width: 4px;
height: 4px;
background: #00ff00;
border-radius: 50%;
animation: indicator-blink 1s ease-in-out infinite;
}
.device-ports {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
height: 15px;
display: flex;
gap: 5px;
justify-content: center;
}
.port {
width: 12px;
height: 8px;
background: linear-gradient(135deg, #ff6b35, #ff8e53);
border-radius: 2px;
animation: port-glow 3s ease-in-out infinite;
}
.port.port-1 { animation-delay: 0s; }
.port.port-2 { animation-delay: 1s; }
.port.port-3 { animation-delay: 2s; }
/* Installation Guide */
.installation-guide {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 20px;
z-index: 3;
}
.guide-step {
position: absolute;
display: flex;
align-items: center;
gap: 5px;
}
.guide-step.step-1 {
top: 0;
left: 0;
}
.guide-step.step-2 {
top: 0;
right: 0;
}
.guide-step.step-3 {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.step-number {
width: 12px;
height: 12px;
background: #fff;
color: #ff6b35;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: bold;
animation: step-pulse 2s ease-in-out infinite;
}
.step-line {
width: 15px;
height: 2px;
background: linear-gradient(90deg, #fff, transparent);
border-radius: 1px;
animation: line-extend 2s ease-in-out infinite;
}
.guide-step.step-1 .step-line { animation-delay: 0s; }
.guide-step.step-2 .step-line { animation-delay: 0.5s; }
.guide-step.step-3 .step-line { animation-delay: 1s; }
/* Connection Lines */
.connection-lines {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.connection-line {
position: absolute;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
border-radius: 1px;
animation: connection-flow 3s ease-in-out infinite;
}
.connection-line.line-1 {
width: 2px;
height: 30px;
top: 20px;
left: 20px;
animation-delay: 0s;
}
.connection-line.line-2 {
width: 2px;
height: 25px;
top: 25px;
right: 20px;
animation-delay: 1s;
}
.connection-line.line-3 {
width: 40px;
height: 2px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
animation-delay: 2s;
}
.tech-installation::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: installation-float 4s ease-in-out infinite;
z-index: 1;
}
.installation-tools {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 30px;
display: flex;
gap: 10px;
z-index: 2;
}
.tool {
flex: 1;
height: 100%;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
animation: tool-bounce 2s ease-in-out infinite;
position: relative;
}
.tool::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: #FF6B35;
border-radius: 50%;
}
.tool.tool-1 { animation-delay: 0s; }
.tool.tool-2 { animation-delay: 0.3s; }
.tool.tool-3 { animation-delay: 0.6s; }
.installation-steps {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
height: 20px;
display: flex;
gap: 5px;
z-index: 2;
}
.step {
flex: 1;
height: 100%;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
border-radius: 2px;
animation: step-progress 3s ease-in-out infinite;
}
.step.step-1 { animation-delay: 0s; }
.step.step-2 { animation-delay: 1s; }
.step.step-3 { animation-delay: 2s; }
.tech-display {
background: linear-gradient(135deg, #34495e, #2c3e50);
box-shadow: 0 10px 30px rgba(52, 73, 94, 0.3);
position: relative;
overflow: hidden;
}
/* Display Screen */
.display-screen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 60px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 8px;
border: 2px solid #3498db;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.screen-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
display: flex;
flex-direction: column;
gap: 5px;
}
.display-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #00ff00, transparent);
border-radius: 1px;
animation: wave-motion 2s ease-in-out infinite;
}
.display-line.line-1 {
animation-delay: 0s;
}
.display-line.line-2 {
animation-delay: 0.7s;
}
.display-line.line-3 {
animation-delay: 1.4s;
}
.monitor-frame {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2c2c2c, #3c3c3c);
border-radius: 8px;
border: 2px solid #3498db;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.monitor-screen {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 4px;
display: flex;
flex-direction: column;
padding: 8px;
}
.screen-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
border-bottom: 1px solid #3498db;
padding-bottom: 4px;
}
.header-text {
font-size: 8px;
color: #3498db;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.header-indicator {
width: 6px;
height: 6px;
background: #00ff00;
border-radius: 50%;
animation: indicator-blink 1s ease-in-out infinite;
}
.screen-display {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.display-section {
display: flex;
flex-direction: column;
gap: 2px;
}
.section-label {
font-size: 6px;
color: #888;
font-family: 'Courier New', monospace;
}
.section-value {
font-size: 10px;
color: #fff;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.current-bar {
background: linear-gradient(90deg, #3498db, #2ecc71);
width: 70%;
}
.power-bar {
background: linear-gradient(90deg, #9b59b6, #e91e63);
width: 90%;
}
.screen-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
border-top: 1px solid #3498db;
padding-top: 4px;
}
.footer-status {
font-size: 6px;
color: #00ff00;
font-family: 'Courier New', monospace;
font-weight: bold;
animation: text-glow 2s ease-in-out infinite;
}
.footer-indicators {
display: flex;
gap: 2px;
}
.indicator-dot {
width: 4px;
height: 4px;
background: #f39c12;
border-radius: 50%;
animation: indicator-blink 1.5s ease-in-out infinite;
}
.indicator-dot:nth-child(2) {
animation-delay: 0.5s;
}
.indicator-dot:nth-child(3) {
animation-delay: 1s;
}
.display-waves {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.wave-pattern {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #3498db, transparent);
border-radius: 1px;
animation: wave-motion 3s ease-in-out infinite;
}
.wave-pattern.wave-1 {
top: 20px;
animation-delay: 0s;
}
.wave-pattern.wave-2 {
top: 40px;
animation-delay: 1s;
}
.wave-pattern.wave-3 {
top: 60px;
animation-delay: 2s;
}
.monitor-frame {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2c2c2c, #3c3c3c);
border-radius: 8px;
border: 2px solid #3498db;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.monitor-screen {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 4px;
border: 1px solid #3498db;
overflow: hidden;
}
.screen-header {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
height: 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #3498db;
}
.header-text {
font-size: 6px;
color: #3498db;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.header-indicator {
width: 4px;
height: 4px;
background: #00ff00;
border-radius: 50%;
animation: indicator-blink 1s ease-in-out infinite;
}
.screen-display {
position: absolute;
top: 20px;
left: 5px;
right: 5px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 3px;
}
.display-section {
display: flex;
flex-direction: column;
gap: 1px;
}
.section-label {
font-size: 4px;
color: #3498db;
font-family: 'Courier New', monospace;
}
.section-value {
font-size: 8px;
color: #00ff00;
font-family: 'Courier New', monospace;
font-weight: bold;
animation: value-flicker 3s ease-in-out infinite;
}
.voltage-section .section-value { animation-delay: 0s; }
.current-section .section-value { animation-delay: 1s; }
.power-section .section-value { animation-delay: 2s; }
.bar-fill {
height: 100%;
border-radius: 1px;
animation: bar-fill 2s ease-in-out infinite;
}
.voltage-bar {
background: linear-gradient(90deg, #e74c3c, #f39c12);
width: 80%;
}
.current-bar {
background: linear-gradient(90deg, #3498db, #5dade2);
width: 60%;
}
.power-bar {
background: linear-gradient(90deg, #27ae60, #2ecc71);
width: 70%;
}
.screen-footer {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
height: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-status {
font-size: 6px;
color: #00ff00;
font-family: 'Courier New', monospace;
font-weight: bold;
animation: text-glow 2s ease-in-out infinite;
}
.footer-indicators {
display: flex;
gap: 2px;
}
.indicator-dot {
width: 3px;
height: 3px;
background: #00ff00;
border-radius: 50%;
animation: indicator-blink 1.5s ease-in-out infinite;
}
.indicator-dot:nth-child(1) { animation-delay: 0s; }
.indicator-dot:nth-child(2) { animation-delay: 0.5s; }
.indicator-dot:nth-child(3) { animation-delay: 1s; }
.display-waves {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 15px;
z-index: 1;
}
.wave-pattern {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #3498db, transparent);
border-radius: 1px;
animation: wave-motion 2s ease-in-out infinite;
}
.wave-pattern.wave-1 {
top: 0;
animation-delay: 0s;
}
.wave-pattern.wave-2 {
top: 5px;
animation-delay: 0.7s;
}
.wave-pattern.wave-3 {
top: 10px;
animation-delay: 1.4s;
}
.panel-screen {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 25px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 4px;
border: 1px solid #3498db;
overflow: hidden;
}
.screen-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
}
.grid-line {
position: absolute;
background: #3498db;
}
.grid-line.grid-h-1 {
width: 100%;
height: 1px;
top: 33%;
}
.grid-line.grid-h-2 {
width: 100%;
height: 1px;
top: 66%;
}
.grid-line.grid-h-3 {
width: 100%;
height: 1px;
top: 50%;
}
.grid-line.grid-v-1 {
height: 100%;
width: 1px;
left: 33%;
}
.grid-line.grid-v-2 {
height: 100%;
width: 1px;
left: 66%;
}
.grid-line.grid-v-3 {
height: 100%;
width: 1px;
left: 50%;
}
.current-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 30px;
}
.wave {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #00ff00, transparent);
border-radius: 1px;
animation: wave-motion 2s ease-in-out infinite;
}
.wave.wave-1 {
top: 5px;
animation-delay: 0s;
}
.wave.wave-2 {
top: 15px;
animation-delay: 0.7s;
}
.wave.wave-3 {
top: 25px;
animation-delay: 1.4s;
}
.display-readings {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
height: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.reading {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.reading-label {
font-size: 6px;
color: #3498db;
font-family: 'Courier New', monospace;
}
.reading-value {
font-size: 8px;
color: #00ff00;
font-family: 'Courier New', monospace;
font-weight: bold;
animation: value-flicker 3s ease-in-out infinite;
}
.reading.reading-1 .reading-value { animation-delay: 0s; }
.reading.reading-2 .reading-value { animation-delay: 1s; }
.reading.reading-3 .reading-value { animation-delay: 2s; }
.panel-controls {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
height: 15px;
display: flex;
gap: 5px;
justify-content: center;
}
.control-btn {
width: 12px;
height: 8px;
background: linear-gradient(135deg, #3498db, #5dade2);
border-radius: 2px;
animation: control-pulse 2s ease-in-out infinite;
}
.control-btn.btn-1 { animation-delay: 0s; }
.control-btn.btn-2 { animation-delay: 0.7s; }
.control-btn.btn-3 { animation-delay: 1.4s; }
/* Display Signals */
.display-signals {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 15px;
z-index: 3;
}
.signal {
position: absolute;
width: 20px;
height: 3px;
background: linear-gradient(90deg, #e74c3c, #f39c12);
border-radius: 2px;
animation: signal-pulse 1.5s ease-in-out infinite;
}
.signal.signal-1 {
top: 0;
left: 0;
animation-delay: 0s;
}
.signal.signal-2 {
top: 0;
left: 50%;
transform: translateX(-50%);
animation-delay: 0.5s;
}
.signal.signal-3 {
top: 0;
right: 0;
animation-delay: 1s;
}
.tech-display::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: display-scan 3s linear infinite;
z-index: 1;
}
.display-screen {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
border: 2px solid rgba(0, 255, 0, 0.3);
border-radius: 8px;
z-index: 2;
overflow: hidden;
}
.display-screen::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
animation: display-scan-line 2s linear infinite;
}
.screen-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 60%;
display: flex;
flex-direction: column;
gap: 5px;
}
.display-line {
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, #00ff00, transparent);
border-radius: 1px;
animation: display-pulse 1.5s ease-in-out infinite;
}
.display-line.line-1 { animation-delay: 0s; }
.display-line.line-2 { animation-delay: 0.5s; }
.display-line.line-3 { animation-delay: 1s; }
/* Display Digital */
.display-digital {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.digital-screen {
width: 60px;
height: 40px;
background: linear-gradient(135deg, #2c3e50, #34495e);
border-radius: 8px;
position: relative;
animation: digital-pulse 2s ease-in-out infinite;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
.screen-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 6px;
overflow: hidden;
}
.screen-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
}
.current-reading {
font-size: 0.8rem;
color: #00ff00;
font-weight: bold;
font-family: 'Courier New', monospace;
animation: reading-flicker 1.5s ease-in-out infinite;
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
.current-unit {
font-size: 0.3rem;
color: #00ff00;
font-weight: bold;
font-family: 'Courier New', monospace;
margin-top: 2px;
animation: unit-pulse 2s ease-in-out infinite;
}
.digital-bars {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2px;
}
.bar {
width: 3px;
height: 8px;
background: #00ff00;
border-radius: 1px;
animation: bar-glow 2s ease-in-out infinite;
}
.bar-1 { animation-delay: 0s; }
.bar-2 { animation-delay: 0.2s; }
.bar-3 { animation-delay: 0.4s; }
.bar-4 { animation-delay: 0.6s; }
.bar-5 { animation-delay: 0.8s; }
.screen-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(0, 255, 0, 0.2) 0%, transparent 70%);
animation: glow-pulse 2s ease-in-out infinite;
}
.digital-buttons {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
}
.btn {
width: 4px;
height: 4px;
background: #7f8c8d;
border-radius: 50%;
animation: button-glow 2s ease-in-out infinite;
}
.btn-1 { animation-delay: 0s; }
.btn-2 { animation-delay: 0.5s; }
/* Tech Graphics Animations */
@keyframes tech-glow {
0%, 100% {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
50% {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes cube-rotate {
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes text-pulse {
0%, 100% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes bell-swing {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes clapper-swing {
0%, 100% {
transform: translateX(-50%) rotate(0deg);
}
25% {
transform: translateX(-50%) rotate(10deg);
}
75% {
transform: translateX(-50%) rotate(-10deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes flash-blink {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.3);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes board-pulse {
0%, 100% {
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.05);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes line-flow {
0%, 100% {
opacity: 0.6;
transform: scaleX(1);
}
50% {
opacity: 1;
transform: scaleX(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes component-pulse {
0%, 100% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes prevention-wave-expand {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes alert-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes chart-bar-grow {
0% {
height: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.8;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes chart-line-draw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes arrow-down-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes leaf-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
50% {
transform: translateY(-5px) rotate(10deg);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes eco-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes tool-float {
0%, 100% {
transform: translateY(0);
opacity: 0.8;
}
50% {
transform: translateY(-5px);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes check-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.video-container {
margin: 0 1rem;
}
/* Increase spacing between curve and badge on mobile */
.video-bg-curve {
top: 95px !important;
}
.video-badge {
margin-bottom: 2.5rem !important;
}
}
@media (max-width: 1024px) and (orientation: landscape) {
/* Increase spacing between curve and badge on landscape mobile */
.video-bg-curve {
top: 120px !important;
}
.video-badge {
margin-bottom: 2rem !important;
}
}
@keyframes gauge-pulse {
0%, 100% {
border-color: rgba(255, 255, 255, 0.6);
}
50% {
border-color: rgba(0, 255, 0, 0.8);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes needle-swing {
0%, 100% {
transform: translate(-50%, -100%) rotate(30deg);
}
50% {
transform: translate(-50%, -100%) rotate(60deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes value-flicker {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* New Animations for Updated Graphics */
@keyframes device-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes line-draw {
0% {
width: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
width: 8px;
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes text-flicker {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes button-glow {
0%, 100% {
background: #7f8c8d;
transform: scale(1);
}
50% {
background: #3498db;
transform: scale(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes cable-pulse {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes screen-flash {
0%, 100% {
background: #2c3e50;
}
50% {
background: #34495e;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes icon-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes sound-wave {
0% {
transform: translateX(-50%) scale(0);
opacity: 1;
}
100% {
transform: translateX(-50%) scale(3);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* New Enhanced Animations */
@keyframes ruler-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
50% {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes mark-glow {
0%, 100% {
background: #2c3e50;
transform: scaleY(1);
}
50% {
background: #3498db;
transform: scaleY(1.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes measurement-pulse {
0%, 100% {
color: #2c3e50;
transform: scale(1);
}
50% {
color: #3498db;
transform: scale(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes ruler-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes light-flash {
0%, 100% {
background: linear-gradient(135deg, #f39c12, #e67e22);
}
50% {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes bulb-glow {
0%, 100% {
background: #fff;
transform: translate(-50%, -50%) scale(1);
}
50% {
background: #ffff00;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes flash-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes rotation-pulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes horn-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes wave-expand {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes meter-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes needle-swing {
0%, 100% {
transform: translate(-50%, -100%) rotate(30deg);
}
50% {
transform: translate(-50%, -100%) rotate(60deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes number-glow {
0%, 100% {
color: #2c3e50;
text-shadow: none;
}
50% {
color: #e74c3c;
text-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes center-pulse {
0%, 100% {
background: #2c3e50;
transform: translate(-50%, -50%) scale(1);
}
50% {
background: #e74c3c;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes reading-flicker {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* New Enhanced Animations */
@keyframes digital-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes unit-pulse {
0%, 100% {
color: #00ff00;
transform: scale(1);
}
50% {
color: #ffff00;
transform: scale(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes bar-glow {
0%, 100% {
background: #00ff00;
transform: scaleY(1);
}
50% {
background: #ffff00;
transform: scaleY(1.3);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes cube-rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes face-text-glow {
0%, 100% {
color: #3498db;
text-shadow: none;
}
50% {
color: #fff;
text-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes cube-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes globe-rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes continent-pulse {
0%, 100% {
background: #27ae60;
transform: scale(1);
}
50% {
background: #2ecc71;
transform: scale(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes ring-orbit {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes eco-icon-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Application Graphics Styles */
.home-building {
position: relative;
width: 80px;
height: 60px;
animation: home-float 3s ease-in-out infinite;
}
.building-roof {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 20px solid #fff;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: roof-glow 2s ease-in-out infinite;
}
.building-walls {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 40px;
background: #fff;
border-radius: 0 0 8px 8px;
}
.window {
position: absolute;
width: 8px;
height: 8px;
background: #3498db;
border-radius: 2px;
animation: window-glow 2s ease-in-out infinite;
}
.window-1 {
top: 8px;
left: 10px;
animation-delay: 0s;
}
.window-2 {
top: 8px;
right: 10px;
animation-delay: 0.5s;
}
.door {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 20px;
background: #8b4513;
border-radius: 2px 2px 0 0;
}
.building-foundation {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 5px;
background: #95a5a6;
border-radius: 3px;
}
.home-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(52, 152, 219, 0.3) 0%, transparent 70%);
animation: home-glow-pulse 3s ease-in-out infinite;
}
/* Commercial Building */
.commercial-building {
position: relative;
width: 70px;
height: 80px;
animation: commercial-float 3s ease-in-out infinite;
}
.building-tower {
position: relative;
width: 100%;
height: 100%;
}
.tower-floor {
width: 50px;
height: 15px;
background: #fff;
margin: 0 auto 2px;
border-radius: 2px;
position: relative;
animation: floor-glow 2s ease-in-out infinite;
}
.floor-1 { animation-delay: 0s; }
.floor-2 { animation-delay: 0.3s; }
.floor-3 { animation-delay: 0.6s; }
.building-sign {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: #e74c3c;
padding: 2px 6px;
border-radius: 3px;
}
.sign-text {
color: white;
font-size: 0.3rem;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.commercial-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(231, 76, 60, 0.3) 0%, transparent 70%);
animation: commercial-glow-pulse 3s ease-in-out infinite;
}
/* Industrial Factory */
.industrial-factory {
position: relative;
width: 80px;
height: 70px;
animation: industrial-float 3s ease-in-out infinite;
}
.factory-chimney {
position: absolute;
top: 0;
right: 10px;
width: 8px;
height: 30px;
background: #7f8c8d;
border-radius: 2px;
}
.smoke {
position: absolute;
top: -5px;
right: 50%;
transform: translateX(50%);
width: 4px;
height: 4px;
background: #bdc3c7;
border-radius: 50%;
animation: smoke-rise 2s ease-in-out infinite;
}
.smoke-1 { animation-delay: 0s; }
.smoke-2 { animation-delay: 0.5s; }
.smoke-3 { animation-delay: 1s; }
.factory-building {
position: absolute;
bottom: 0;
left: 0;
width: 70px;
height: 50px;
background: #95a5a6;
border-radius: 4px;
}
.factory-windows {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
}
.window-row {
display: flex;
gap: 5px;
margin-bottom: 5px;
}
.window-row .window {
width: 6px;
height: 6px;
background: #3498db;
border-radius: 1px;
animation: window-flicker 2s ease-in-out infinite;
}
.industrial-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(149, 165, 166, 0.3) 0%, transparent 70%);
animation: industrial-glow-pulse 3s ease-in-out infinite;
}
/* Office Building */
.office-building {
position: relative;
width: 70px;
height: 80px;
animation: office-float 3s ease-in-out infinite;
}
.office-tower {
position: relative;
width: 100%;
height: 100%;
}
.tower-section {
width: 45px;
height: 20px;
background: #fff;
margin: 0 auto 3px;
border-radius: 3px;
position: relative;
animation: section-glow 2s ease-in-out infinite;
}
.section-1 { animation-delay: 0s; }
.section-2 { animation-delay: 0.3s; }
.section-3 { animation-delay: 0.6s; }
.office-antenna {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 15px;
background: #34495e;
}
.antenna-signal {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
border: 1px solid #9b59b6;
border-radius: 50%;
animation: signal-pulse 2s ease-in-out infinite;
}
.office-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(155, 89, 182, 0.3) 0%, transparent 70%);
animation: office-glow-pulse 3s ease-in-out infinite;
}
/* Medical Building */
.medical-building {
position: relative;
width: 80px;
height: 70px;
animation: medical-float 3s ease-in-out infinite;
}
.hospital-cross {
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
}
.cross-horizontal {
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 4px;
background: #fff;
transform: translateY(-50%);
animation: cross-glow 2s ease-in-out infinite;
}
.cross-vertical {
position: absolute;
left: 50%;
top: 0;
width: 4px;
height: 20px;
background: #fff;
transform: translateX(-50%);
animation: cross-glow 2s ease-in-out infinite;
}
.hospital-building {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: #fff;
border-radius: 4px;
}
.building-wings {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
display: flex;
gap: 5px;
}
.wing {
flex: 1;
height: 30px;
background: #e67e22;
border-radius: 2px;
animation: wing-glow 2s ease-in-out infinite;
}
.wing-1 { animation-delay: 0s; }
.wing-2 { animation-delay: 0.5s; }
.medical-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(230, 126, 34, 0.3) 0%, transparent 70%);
animation: medical-glow-pulse 3s ease-in-out infinite;
}
/* Educational Building */
.educational-building {
position: relative;
width: 80px;
height: 70px;
animation: educational-float 3s ease-in-out infinite;
}
.school-tower {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 30px;
background: #fff;
border-radius: 2px;
}
.tower-bell {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #f39c12;
border-radius: 50%;
animation: bell-swing 2s ease-in-out infinite;
}
.school-building {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: #fff;
border-radius: 4px;
}
.building-classrooms {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
display: flex;
gap: 5px;
}
.classroom {
flex: 1;
height: 30px;
background: #27ae60;
border-radius: 2px;
animation: classroom-glow 2s ease-in-out infinite;
}
.classroom-1 { animation-delay: 0s; }
.classroom-2 { animation-delay: 0.5s; }
.educational-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(39, 174, 96, 0.3) 0%, transparent 70%);
animation: educational-glow-pulse 3s ease-in-out infinite;
}
/* Application Graphics Animations */
@keyframes app-graphic-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes home-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes roof-glow {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes window-glow {
0%, 100% {
background: #3498db;
box-shadow: none;
}
50% {
background: #5dade2;
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes home-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes commercial-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes floor-glow {
0%, 100% {
background: #fff;
box-shadow: none;
}
50% {
background: #f8f9fa;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes commercial-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes industrial-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes smoke-rise {
0% {
opacity: 0;
transform: translateX(50%) translateY(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(50%) translateY(-20px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes window-flicker {
0%, 100% {
background: #3498db;
}
50% {
background: #5dade2;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes industrial-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes office-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes section-glow {
0%, 100% {
background: #fff;
box-shadow: none;
}
50% {
background: #f8f9fa;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes signal-pulse {
0%, 100% {
border-color: #9b59b6;
transform: translateX(-50%) scale(1);
}
50% {
border-color: #bb8fce;
transform: translateX(-50%) scale(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes office-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes medical-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes cross-glow {
0%, 100% {
background: #fff;
box-shadow: none;
}
50% {
background: #f8f9fa;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes wing-glow {
0%, 100% {
background: #e67e22;
box-shadow: none;
}
50% {
background: #f39c12;
box-shadow: 0 0 8px rgba(230, 126, 34, 0.3);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes medical-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes educational-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes bell-swing {
0%, 100% {
transform: translateX(-50%) rotate(0deg);
}
25% {
transform: translateX(-50%) rotate(5deg);
}
75% {
transform: translateX(-50%) rotate(-5deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes classroom-glow {
0%, 100% {
background: #27ae60;
box-shadow: none;
}
50% {
background: #2ecc71;
box-shadow: 0 0 8px rgba(39, 174, 96, 0.3);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes educational-glow-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.services-header {
text-align: center;
margin-bottom: 3rem;
}
.services-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(241, 99, 52, 0.1);
color: var(--primary-color);
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1rem;
}
.badge-icon {
width: 1rem;
height: 1rem;
}
.services-title {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.services-description {
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.services-container {
background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 3rem;
margin-top: 3rem;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2rem;
}
.services-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(241, 99, 52, 0.05), transparent);
pointer-events: none;
}
.services-interactive {
display: grid;
grid-template-columns: 250px auto 1fr;
gap: 3rem;
align-items: start;
position: relative;
z-index: 2;
}
.services-divider {
width: 3px;
height: 320px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.divider-line {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, var(--primary-color), rgba(241, 99, 52, 0.3), var(--primary-color));
border-radius: 2px;
}
.divider-dots {
position: absolute;
display: flex;
flex-direction: column;
gap: 1rem;
}
.divider-dots span {
width: 8px;
height: 8px;
background: var(--primary-color);
border-radius: 50%;
animation: pulse 2s infinite;
}
.divider-dots span:nth-child(2) {
animation-delay: 0.5s;
}
.divider-dots span:nth-child(3) {
animation-delay: 1s;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.service-content-box {
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px;
padding: 2.5rem;
height: 320px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.service-detail {
display: none;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.service-detail.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.service-detail-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.service-icon-wrapper {
width: 4rem;
height: 4rem;
background: linear-gradient(135deg, #2c3e50, #34495e);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 20px rgba(44, 62, 80, 0.3);
border: 2px solid rgba(255, 126, 95, 0.3);
}
/* Service Detail Content Layout */
.service-detail-content {
display: flex;
align-items: center;
gap: 3rem;
padding: 2rem;
flex-direction: row-reverse;
}
.service-graphic {
flex-shrink: 0;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-right: 0;
}
.service-text {
flex: 1.2;
text-align: right;
max-width: 80%;
min-width: 0;
margin-left: 100px;
margin: 0;
padding: 0;
}
.wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: ripple 2s infinite;
}
.wave:nth-child(2) {
animation-delay: 0.5s;
}
.wave:nth-child(3) {
animation-delay: 1s;
}
/* Support Graphic */
.support-graphic {
position: relative;
width: 170px;
height: 170px;
background: linear-gradient(135deg, #3498db, #2980b9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
animation: support-pulse 3s ease-in-out infinite;
}
.support-center {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.support-center i {
font-size: 3rem;
color: white;
animation: icon-bounce 2s ease-in-out infinite;
}
.support-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: pulse-expand 2s ease-in-out infinite;
}
.support-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
z-index: 1;
}
.wave-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: wave-expand 3s ease-in-out infinite;
}
.wave-ring.ring-1 {
width: 120px;
height: 120px;
animation-delay: 0s;
}
.wave-ring.ring-2 {
width: 160px;
height: 160px;
animation-delay: 1s;
}
.wave-ring.ring-3 {
width: 200px;
height: 200px;
animation-delay: 2s;
}
.support-dots {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.support-dot {
position: absolute;
width: 8px;
height: 8px;
background: #f39c12;
border-radius: 50%;
animation: dot-blink 1.5s ease-in-out infinite;
box-shadow: 0 0 10px rgba(243, 156, 18, 0.6);
}
.support-dot.dot-1 {
top: 20px;
left: 20px;
animation-delay: 0s;
}
.support-dot.dot-2 {
top: 20px;
right: 20px;
animation-delay: 0.3s;
}
.support-dot.dot-3 {
bottom: 20px;
left: 20px;
animation-delay: 0.6s;
}
.support-dot.dot-4 {
bottom: 20px;
right: 20px;
animation-delay: 0.9s;
}
.support-dot.dot-5 {
top: 50%;
left: 10px;
transform: translateY(-50%);
animation-delay: 1.2s;
}
.support-dot.dot-6 {
top: 50%;
right: 10px;
transform: translateY(-50%);
animation-delay: 1.5s;
}
/* Installation Graphic */
.installation-graphic {
position: relative;
width: 170px;
height: 170px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 50%;
}
.installation-workspace {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
height: 120px;
}
.workspace-tools {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 30px;
display: flex;
gap: 15px;
justify-content: center;
}
.tool-icon {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #fff, #f8f9fa);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #e74c3c;
font-size: 14px;
animation: tool-bounce 2s ease-in-out infinite;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.tool-icon.tool-1 { animation-delay: 0s; }
.tool-icon.tool-2 { animation-delay: 0.5s; }
.tool-icon.tool-3 { animation-delay: 1s; }
.installation-device {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 50px;
}
.device-body {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2c2c2c, #3c3c3c);
border-radius: 8px;
border: 2px solid #fff;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.device-screen {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 20px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 4px;
border: 1px solid #fff;
overflow: hidden;
}
.screen-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
color: #00ff00;
font-family: 'Courier New', monospace;
font-weight: bold;
animation: text-glow 2s ease-in-out infinite;
}
.installation-progress {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.progress-circle {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
position: relative;
animation: progress-rotate 3s linear infinite;
}
.progress-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 3px solid #fff;
border-radius: 50%;
animation: progress-fill 3s ease-in-out infinite;
}
.progress-text {
font-size: 8px;
color: #fff;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.installation-graphic i {
font-size: 3rem;
color: white;
z-index: 2;
}
.installation-gears {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.gear {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: rotate 1.5s linear infinite;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.gear::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
}
.gear::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
}
.gear-1 {
top: 20px;
left: 20px;
animation-delay: 0s;
animation: rotate 1.5s linear infinite, pulse 2s ease-in-out infinite;
}
.gear-2 {
top: 60px;
right: 20px;
animation-delay: 0.5s;
animation: rotate 1.8s linear infinite, pulse 2.5s ease-in-out infinite;
}
.gear-3 {
bottom: 20px;
left: 50px;
animation-delay: 1s;
animation: rotate 2s linear infinite, pulse 3s ease-in-out infinite;
}
/* Warranty Graphic */
.warranty-graphic {
position: relative;
width: 170px;
height: 170px;
background: linear-gradient(135deg, #27ae60, #229954);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(39, 174, 96, 0.3);
animation: warranty-pulse 2s ease-in-out infinite;
}
.warranty-graphic i {
font-size: 3rem;
color: white;
z-index: 2;
}
.warranty-shield {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.shield-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: shield-pulse 2s infinite;
}
.shield-layer:nth-child(2) {
animation-delay: 0.5s;
}
.shield-layer:nth-child(3) {
animation-delay: 1s;
}
/* Animations */
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
50% {
opacity: 0.7;
transform: scale(1.3);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes ripple {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes shield-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
}
@keyframes installation-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(231, 76, 60, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes consultation-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 30px rgba(255, 126, 95, 0.3);
}
50% {
transform: scale(1.08);
box-shadow: 0 15px 40px rgba(255, 126, 95, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes consultation-icon-bounce {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-5px) rotate(2deg);
}
75% {
transform: translateY(3px) rotate(-1deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes consultation-line-move {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes consultation-circuit-flow {
0% {
opacity: 0.3;
transform: scaleX(0.8);
}
50% {
opacity: 1;
transform: scaleX(1.1);
}
100% {
opacity: 0.3;
transform: scaleX(0.8);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes consultation-node-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.3);
opacity: 1;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes consultation-pattern-fade {
0%, 100% {
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Technical Graphics Animations */
@keyframes box-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes box-fill-pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes arrow-move-h {
0%, 100% {
transform: translateX(-50%) translateX(0);
}
50% {
transform: translateX(-50%) translateX(5px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes arrow-move-v {
0%, 100% {
transform: translateY(-50%) translateY(0);
}
50% {
transform: translateY(-50%) translateY(5px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes sound-wave-expand {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes light-flicker {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes shield-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes voltage-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes prevention-wave-expand {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes alert-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes chart-bar-grow {
0% {
height: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.8;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes chart-line-draw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes arrow-down-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(3px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes leaf-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
50% {
transform: translateY(-5px) rotate(10deg);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes eco-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes wire-flow {
0%, 100% {
opacity: 0.6;
transform: scaleX(1);
}
50% {
opacity: 1;
transform: scaleX(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes plug-rotate {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(5deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes digit-flicker {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.service-detail-icon {
font-size: 2rem;
color: white;
flex-shrink: 0;
}
.service-detail h3 {
color: white;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
background: linear-gradient(135deg, #ffffff, #f16334);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.service-features {
display: flex;
flex-wrap: wrap!important;
gap: 0.5rem;
margin: 1rem 0;
justify-content: flex-start;
align-items: center;
}
.feature-tag {
background: rgba(241, 99, 52, 0.1);
color: var(--primary-color);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(241, 99, 52, 0.2);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 140px;
}
@media (max-width: 1024px) {
.service-features {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.service-text {
flex-direction: column!important;
}
.service-features {
justify-content: flex-start;
width: 100%;
}
}
@media (max-width: 480px) {
.service-features {
gap: 0.3rem;
max-width: 100vw;
}
.feature-tag {
max-width: 90vw;
}
}
.service-detail p {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.details-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.details-link:hover {
color: var(--primary-dark);
}
.service-buttons-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.service-btn {
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.15);
border-radius: 15px;
padding: 1.25rem;
color: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
font-family: 'Vazirmatn', sans-serif;
font-size: 0.9rem;
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.service-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s ease;
}
.service-btn:hover::before {
left: 100%;
}
.btn-content {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
position: relative;
z-index: 2;
flex-direction: row-reverse;
}
.btn-arrow {
color: var(--primary-color);
font-size: 1.2rem;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.btn-text {
flex: 1;
text-align: right;
}
.service-icon {
width: 1rem;
height: 1rem;
color: var(--primary-color);
flex-shrink: 0;
}
.service-btn:hover {
background: linear-gradient(135deg, rgba(241, 99, 52, 0.2), rgba(241, 99, 52, 0.1));
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(241, 99, 52, 0.3);
}
.service-btn:hover .btn-arrow {
transform: translateX(-5px);
}
/* Responsive Design */
@media (max-width: 768px) {
.services-interactive {
grid-template-columns: 1fr;
gap: 1rem;
}
.service-buttons-list {
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.service-btn {
flex: 1;
min-width: calc(50% - 0.25rem);
height: 60px;
}
.service-content-box {
height: auto;
min-height: 200px;
}
.technical-buttons-list {
flex-direction: column;
align-items: center;
}
.technical-btn {
width: 100%;
max-width: 300px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.services-wrapper {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--custom-radius);
padding: 2rem;
margin-top: 3rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.interactive-container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1.5rem;
align-items: stretch;
}
.service-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.service-btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--custom-radius);
padding: 0.75rem 1rem;
color: white;
cursor: pointer;
transition: all 0.3s ease, transform 0.2s ease;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
font-size: 0.9rem;
line-height: 1.4;
font-family: 'Vazirmatn', sans-serif;
min-height: 50px;
position: relative;
overflow: hidden;
}
.service-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s ease;
}
.service-btn:hover::before {
left: 100%;
}
.service-btn:hover,
.service-btn.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(241, 99, 52, 0.3);
}
.btn-text {
font-weight: 600;
font-size: 1rem;
}
.service-content {
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--custom-radius);
padding: 2rem;
height: calc((50px + 0.75rem) * 4 - 0.75rem + 4rem);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.detail-icon {
width: 4rem;
height: 4rem;
background: linear-gradient(135deg, var(--primary-color), #ff6b35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.detail-icon svg {
width: 2rem;
height: 2rem;
color: white;
}
@media (max-width: 768px) {
.interactive-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.service-buttons {
order: 2;
}
.service-content {
order: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.services-header {
text-align: center;
margin-bottom: 3rem;
}
.services-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, rgba(255,126,95,0.15), rgba(255,165,0,0.1));
color: var(--primary-color);
padding: 0.75rem 1.5rem;
border-radius: 15px;
font-size: 1rem;
font-weight: 700;
margin-bottom: 2rem;
border: 2px solid rgba(255,126,95,0.3);
box-shadow: 0 4px 15px rgba(255,126,95,0.2);
}
.services-badge i {
font-size: 1.25rem;
color: #ff7e5f;
filter: drop-shadow(0 2px 4px rgba(255,126,95,0.3));
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, rgba(255,126,95,0.15), rgba(255,165,0,0.1));
color: var(--primary-color);
padding: 0.75rem 1.5rem;
border-radius: 15px;
font-size: 1rem;
font-weight: 700;
margin-bottom: 2rem;
border: 2px solid rgba(255,126,95,0.3);
box-shadow: 0 4px 15px rgba(255,126,95,0.2);
}
.section-header {
text-align: center;
}
.section-badge i {
font-size: 1.25rem;
color: #ff7e5f;
filter: drop-shadow(0 2px 4px rgba(255,126,95,0.3));
}
.services-title {
font-size: 2.5rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
}
.services-description {
font-size: 1.125rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--custom-radius);
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(241, 99, 52, 0.1), transparent);
transition: left 0.5s ease;
}
.service-card:hover::before {
left: 100%;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
border-color: var(--primary-color);
}
.service-card.featured {
border: 2px solid var(--primary-color);
background: rgba(241, 99, 52, 0.1);
}
.service-icon {
width: 4rem;
height: 4rem;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--primary-color), #ff6b35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
}
.service-icon svg {
width: 2rem;
height: 2rem;
color: white;
}
.service-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
}
.service-card p {
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.service-card.featured h3,
.service-card.featured p {
color: white;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes brandPulse {
0% {
transform: scale(1);
filter: drop-shadow(0 0 20px rgba(241, 99, 52, 0.6));
}
100% {
transform: scale(1.05);
filter: drop-shadow(0 0 40px rgba(241, 99, 52, 0.9));
}
}
@keyframes fadeInUp {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes textGlow {
0% {
text-shadow: 0 0 20px rgba(241, 99, 52, 0.8);
transform: scale(1);
}
100% {
text-shadow: 0 0 40px rgba(241, 99, 52, 1), 0 0 60px rgba(241, 99, 52, 0.6);
transform: scale(1.02);
}
}
.ecopeak-text {
display: inline-block;
animation: bounceIn 1.5s ease-out;
position: relative;
}
@keyframes bounceIn {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.hero-main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
@media (max-width: 768px) {
.hero-main-content {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.device-section {
display: flex;
justify-content: center;
align-items: center;
}
.device-main-image {
max-width: 100%;
height: auto;
max-height: 400px;
object-fit: contain;
animation: float 3s ease-in-out infinite;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.content-section {
display: flex;
flex-direction: column;
gap: 2rem;
}
.main-title {
font-size: 2.5rem;
font-weight: bold;
line-height: 1.2;
color: white;
margin-bottom: 1rem;
animation: slideInRight 1s ease-out;
}
@keyframes slideInRight {
0% {
transform: translateX(30px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.main-description {
font-size: 1.25rem;
color: var(--text-light);
line-height: 1.6;
animation: slideInRight 1s ease-out 0.3s both;
}
.main-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
animation: slideInRight 1s ease-out 0.6s both;
}
@media (max-width: 640px) {
.main-buttons {
flex-direction: column;
}
.ecopeak-title {
font-size: 3rem;
}
.main-title {
font-size: 2rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (min-width: 1024px) {
.hero {
padding: 6rem 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: rgba(241, 99, 52, 0.1);
color: var(--primary-color);
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.badge-icon {
width: 1rem;
height: 1rem;
}
.hero-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1.2;
}
@media (min-width: 1024px) {
.hero-title {
font-size: 3.75rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.hero-description {
font-size: 1.25rem;
color: var(--text-light);
margin-bottom: 2rem;
line-height: 1.6;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
margin-bottom: 3rem;
}
@media (min-width: 640px) {
.hero-buttons {
flex-direction: row;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
text-align: center;
}
@media (min-width: 768px) {
.hero-stats {
grid-template-columns: repeat(3, 1fr);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.stat {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.stat-number {
font-size: 1.875rem;
font-weight: bold;
color: var(--primary-color);
}
.stat-label {
color: var(--text-light);
}
/* Features Section */
.features {
padding: 5rem 0;
background-color: rgba(128, 128, 128, 0.1);
}
.features-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-size: 1.875rem;
font-weight: bold;
margin-bottom: 1rem;
}
@media (min-width: 1024px) {
.section-title {
font-size: 2.25rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.section-subtitle {
font-size: 1.25rem;
color: var(--text-light);
}
.features-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.feature-card {
background-color: var(--bg-secondary);
border-radius: var(--custom-radius);
padding: 1.5rem;
transition: all 0.3s ease;
}
.feature-card:hover {
background-color: rgba(128, 128, 128, 0.3);
transform: translateY(-2px);
}
.feature-icon {
width: 3rem;
height: 3rem;
background-color: var(--primary-color);
border-radius: var(--custom-radius);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
}
.feature-icon svg {
width: 1.5rem;
height: 1.5rem;
color: white;
}
.feature-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.75rem;
}
.feature-description {
color: var(--text-light);
}
/* Device Showcase */
.device-showcase {
padding: 5rem 0;
background-color: rgba(128, 128, 128, 0.05);
}
.showcase-header {
text-align: center;
margin-bottom: 4rem;
}
.device-content {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.device-content {
grid-template-columns: repeat(2, 1fr);
}
}
.device-image-container {
display: flex;
justify-content: center;
align-items: center;
}
.device-image {
position: relative;
background-color: var(--bg-secondary);
border-radius: var(--custom-radius);
padding: 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.device-image:hover {
transform: translateY(-5px);
}
.device-photo {
width: 100%;
max-width: 400px;
height: auto;
border-radius: var(--custom-radius);
}
.device-badge {
position: absolute;
top: -10px;
right: -10px;
background-color: var(--primary-color);
color: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 10px 20px rgba(241, 99, 52, 0.3);
}
.badge-icon {
width: 1rem;
height: 1rem;
}
.device-info {
display: flex;
flex-direction: column;
gap: 2rem;
}
.device-description h3 {
font-size: 1.875rem;
font-weight: bold;
margin-bottom: 1rem;
color: var(--primary-color);
}
.device-description p {
font-size: 1.125rem;
color: var(--text-light);
line-height: 1.6;
}
.device-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 640px) {
.device-actions {
flex-direction: row;
}
}
/* Features Modern Section */
/* Technical Features Section */
.technical-features {
background: transparent;
padding: 2rem 0 4rem 0;
position: relative;
margin-top: 4rem;
margin-bottom: 8rem;
}
/* Creative Applications Showcase */
.applications-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
position: relative;
z-index: 1;
}
.applications-showcase::before {
content: '';
position: absolute;
top: 10%;
right: 5%;
width: 100px;
height: 100px;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 15px,
rgba(255, 107, 53, 0.015) 15px,
rgba(255, 107, 53, 0.015) 16px,
transparent 16px,
transparent 30px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 15px,
rgba(255, 107, 53, 0.015) 15px,
rgba(255, 107, 53, 0.015) 16px,
transparent 16px,
transparent 30px
);
border-radius: 8px;
animation: electric-glow 3s ease-in-out infinite;
z-index: 0;
}
.application-card {
background: #1a1a1a;
border: 2px solid transparent;
border-radius: 0;
overflow: hidden;
position: relative;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
.application-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ff7e5f;
border-radius: 0;
padding: 2px;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
z-index: -1;
opacity: 0.8;
transition: all 0.3s ease;
}
.application-card:hover::before {
background: linear-gradient(135deg, #ff7e5f, #ff6b35, #3498db, #e74c3c);
opacity: 1;
animation: border-rotate 4s linear infinite;
}
.application-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 126, 95, 0.5);
}
.app-visual {
position: relative;
height: 160px;
overflow: hidden;
}
.app-icon {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(255, 126, 95, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
z-index: 3;
animation: icon-float 3s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4);
}
.app-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.app-bg-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
filter: grayscale(20%) contrast(1.1) brightness(0.9);
}
.application-card:hover .app-bg-image img {
transform: scale(1.1);
filter: grayscale(0%) contrast(1.2) brightness(1.1);
}
/* Application Background Gradients */
.residential-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 100%;
height: 100%;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.residential-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.commercial-bg {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
width: 100%;
height: 100%;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.commercial-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.industrial-bg {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
width: 100%;
height: 100%;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.industrial-bg:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.application-card:hover .app-overlay {
background: linear-gradient(135deg,
rgba(0,0,0,0.2) 0%,
rgba(0,0,0,0.1) 50%,
rgba(0,0,0,0.05) 100%);
}
.app-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(0,0,0,0.4) 0%,
rgba(0,0,0,0.2) 50%,
rgba(0,0,0,0.1) 100%);
z-index: 2;
display: flex;
align-items: flex-end;
padding: 20px;
transition: all 0.3s ease;
}
.app-badge {
background: linear-gradient(135deg, #ff7e5f, #ff6b35);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
font-family: 'Vazir', sans-serif;
box-shadow: 0 4px 15px rgba(255, 126, 95, 0.4);
animation: badge-pulse 2s ease-in-out infinite;
}
.app-content {
padding: 1.5rem;
position: relative;
}
.app-content h3 {
color: #fff;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
font-family: 'Vazir', sans-serif;
}
.app-content p {
color: #b0b0b0;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.app-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feature-tag {
background: rgba(255, 126, 95, 0.2);
color: #ff7e5f;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(255, 126, 95, 0.3);
transition: all 0.3s ease;
}
.feature-tag:hover {
background: rgba(255, 126, 95, 0.3);
transform: translateY(-2px);
}
/* Specific App Styles */
.home-app .app-icon {
background: linear-gradient(135deg, #3498db, #2980b9);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
.commercial-app .app-icon {
background: linear-gradient(135deg, #e74c3c, #c0392b);
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}
.industrial-app .app-icon {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
box-shadow: 0 5px 15px rgba(149, 165, 166, 0.4);
}
.app-home-large {
background: linear-gradient(135deg, #3498db, #2980b9);
box-shadow: 0 20px 60px rgba(52, 152, 219, 0.4);
}
.app-commercial-large {
background: linear-gradient(135deg, #e74c3c, #c0392b);
box-shadow: 0 20px 60px rgba(231, 76, 60, 0.4);
}
.app-industrial-large {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
box-shadow: 0 20px 60px rgba(149, 165, 166, 0.4);
}
/* Modern Home Graphic */
.home-modern-large {
position: relative;
width: 150px;
height: 150px;
animation: home-float 3s ease-in-out infinite;
}
.house-structure {
position: relative;
width: 100px;
height: 80px;
margin: 0 auto;
}
.roof-modern {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #fff;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: roof-glow 2s ease-in-out infinite;
}
.walls-modern {
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 55px;
background: #fff;
border-radius: 0 0 8px 8px;
}
.window-modern {
position: absolute;
width: 10px;
height: 10px;
background: #3498db;
border-radius: 2px;
animation: window-glow 2s ease-in-out infinite;
}
.window-modern.w1 {
top: 10px;
left: 15px;
animation-delay: 0s;
}
.window-modern.w2 {
top: 10px;
right: 15px;
animation-delay: 0.5s;
}
.door-modern {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 15px;
height: 25px;
background: #8b4513;
border-radius: 2px 2px 0 0;
}
.foundation-modern {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 5px;
background: #95a5a6;
border-radius: 3px;
}
.home-icon-modern {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 1.5rem;
animation: icon-bounce 2s ease-in-out infinite;
}
.home-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: particle-float 3s ease-in-out infinite;
}
.particle.p1 {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.particle.p2 {
top: 60%;
right: 20%;
animation-delay: 1s;
}
.particle.p3 {
bottom: 20%;
left: 30%;
animation-delay: 2s;
}
/* Modern Office Graphic */
.office-modern-large {
position: relative;
width: 150px;
height: 150px;
animation: commercial-float 3s ease-in-out infinite;
}
.office-tower {
position: relative;
width: 60px;
height: 120px;
margin: 0 auto;
}
.floor {
width: 60px;
height: 20px;
background: #fff;
margin: 0 auto 2px;
border-radius: 2px;
position: relative;
animation: floor-glow 2s ease-in-out infinite;
}
.floor.f1 { animation-delay: 0s; }
.floor.f2 { animation-delay: 0.3s; }
.floor.f3 { animation-delay: 0.6s; }
.floor.f4 { animation-delay: 0.9s; }
.office-logo {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 1.5rem;
animation: icon-bounce 2s ease-in-out infinite;
}
.office-lights {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.light {
position: absolute;
width: 3px;
height: 3px;
background: #fff;
border-radius: 50%;
animation: light-blink 1.5s ease-in-out infinite;
}
.light.l1 {
top: 15%;
left: 20%;
animation-delay: 0s;
}
.light.l2 {
top: 35%;
right: 20%;
animation-delay: 0.5s;
}
.light.l3 {
top: 55%;
left: 30%;
animation-delay: 1s;
}
.light.l4 {
top: 75%;
right: 30%;
animation-delay: 1.5s;
}
.building-roof-large {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 30px solid #fff;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: roof-glow 2s ease-in-out infinite;
}
.building-walls-large {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 60px;
background: #fff;
border-radius: 0 0 12px 12px;
}
.window-large {
position: absolute;
width: 12px;
height: 12px;
background: #3498db;
border-radius: 3px;
animation: window-glow 2s ease-in-out infinite;
}
.window-large.window-1 {
top: 12px;
left: 18px;
animation-delay: 0s;
}
.window-large.window-2 {
top: 12px;
right: 18px;
animation-delay: 0.5s;
}
.door-large {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 30px;
background: #8b4513;
border-radius: 3px 3px 0 0;
}
.building-foundation-large {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 105px;
height: 8px;
background: #95a5a6;
border-radius: 4px;
}
.home-glow-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(52, 152, 219, 0.4) 0%, transparent 70%);
animation: home-glow-pulse 3s ease-in-out infinite;
}
/* Large Commercial Building */
.commercial-building-large {
position: relative;
width: 100px;
height: 120px;
animation: commercial-float 3s ease-in-out infinite;
}
.building-tower-large {
position: relative;
width: 100%;
height: 100%;
}
.tower-floor-large {
width: 70px;
height: 20px;
background: #fff;
margin: 0 auto 3px;
border-radius: 3px;
position: relative;
animation: floor-glow 2s ease-in-out infinite;
}
.tower-floor-large.floor-1 { animation-delay: 0s; }
.tower-floor-large.floor-2 { animation-delay: 0.3s; }
.tower-floor-large.floor-3 { animation-delay: 0.6s; }
.building-sign-large {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #e74c3c;
padding: 4px 12px;
border-radius: 5px;
}
.sign-text-large {
color: white;
font-size: 0.6rem;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.commercial-glow-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(231, 76, 60, 0.4) 0%, transparent 70%);
animation: commercial-glow-pulse 3s ease-in-out infinite;
}
/* Large Industrial Factory */
.industrial-factory-large {
position: relative;
width: 120px;
height: 100px;
animation: industrial-float 3s ease-in-out infinite;
}
.window-row-large .window-large {
width: 8px;
height: 8px;
background: #3498db;
border-radius: 2px;
animation: window-flicker 2s ease-in-out infinite;
}
.industrial-glow-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(149, 165, 166, 0.4) 0%, transparent 70%);
animation: industrial-glow-pulse 3s ease-in-out infinite;
}
/* New Animations */
@keyframes icon-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes particle-float {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
50% { transform: translateY(-10px) scale(1.2); opacity: 1; }
}
@keyframes light-blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes separator-glow {
0%, 100% {
box-shadow: 0 2px 8px rgba(255, 126, 95, 0.3);
opacity: 0.8;
}
50% {
box-shadow: 0 4px 15px rgba(255, 126, 95, 0.6);
opacity: 1;
}
}
@keyframes box-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes arrow-move-h {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes arrow-move-v {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-50%) translateX(-3px); }
}
@keyframes horn-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes sound-wave {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes light-flash {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
@keyframes shield-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes shield-glow {
0%, 100% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}
@keyframes ring-expand {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
/* Cost Chart Large */
.cost-chart-large {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.chart-bars-large {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
height: 60px;
display: flex;
align-items: end;
gap: 8px;
}
.bar-large {
flex: 1;
background: linear-gradient(to top, #27ae60, #2ecc71);
border-radius: 2px 2px 0 0;
animation: bar-grow 2s ease-in-out infinite;
}
.bar-1-large { height: 20px; animation-delay: 0s; }
.bar-2-large { height: 35px; animation-delay: 0.2s; }
.bar-3-large { height: 50px; animation-delay: 0.4s; }
.bar-4-large { height: 25px; animation-delay: 0.6s; }
.chart-line-large {
position: absolute;
top: 30px;
left: 20px;
right: 20px;
height: 2px;
background: #fff;
animation: line-draw 2s ease-in-out infinite;
}
.cost-arrow-large {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 1.5rem;
animation: arrow-bounce 1.5s ease-in-out infinite;
}
.money-icon-large {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-size: 1.5rem;
animation: money-spin 3s ease-in-out infinite;
}
.cost-text-large {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.cost-title {
display: block;
color: #fff;
font-size: 0.7rem;
font-weight: bold;
font-family: 'Vazir', sans-serif;
}
.cost-percent {
display: block;
color: #27ae60;
font-size: 0.8rem;
font-weight: bold;
font-family: 'Courier New', monospace;
}
/* Eco Nature Large */
.eco-nature-large {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.tree-large {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 80px;
}
.trunk-large {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 30px;
background: #8b4513;
border-radius: 4px;
animation: trunk-sway 3s ease-in-out infinite;
}
.leaves-large {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
}
.leaf-large {
position: absolute;
width: 15px;
height: 15px;
background: #27ae60;
border-radius: 50% 0;
animation: leaf-float 2s ease-in-out infinite;
}
.leaf-large.l1 {
top: 5px;
left: 5px;
animation-delay: 0s;
}
.leaf-large.l2 {
top: 10px;
right: 5px;
animation-delay: 0.5s;
}
.leaf-large.l3 {
bottom: 10px;
left: 10px;
animation-delay: 1s;
}
.leaf-large.l4 {
bottom: 5px;
right: 10px;
animation-delay: 1.5s;
}
.eco-particles-large {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.particle-large {
position: absolute;
width: 4px;
height: 4px;
background: #27ae60;
border-radius: 50%;
animation: particle-float-eco 3s ease-in-out infinite;
}
.particle-large.p1 {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.particle-large.p2 {
top: 30%;
right: 20%;
animation-delay: 0.8s;
}
.particle-large.p3 {
bottom: 30%;
left: 30%;
animation-delay: 1.6s;
}
.particle-large.p4 {
bottom: 20%;
right: 30%;
animation-delay: 2.4s;
}
.eco-text-large {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.eco-title {
display: block;
color: #fff;
font-size: 0.7rem;
font-weight: bold;
font-family: 'Vazir', sans-serif;
}
.eco-subtitle {
display: block;
color: #27ae60;
font-size: 0.6rem;
font-weight: bold;
font-family: 'Courier New', monospace;
}
/* Display Digital Large */
.display-digital-large {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.digital-screen-large {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.screen-frame-large {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
border-radius: 8px;
padding: 10px;
}
.screen-content-large {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.current-reading-large {
color: #00ff00;
font-size: 1.2rem;
font-weight: bold;
font-family: 'Courier New', monospace;
animation: reading-flicker 2s ease-in-out infinite;
}
.current-unit-large {
color: #00ff00;
font-size: 0.6rem;
font-family: 'Courier New', monospace;
margin-top: 2px;
}
.digital-bars-large {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
height: 20px;
display: flex;
gap: 2px;
}
.bar-large {
flex: 1;
background: #00ff00;
border-radius: 1px;
animation: bar-pulse 1.5s ease-in-out infinite;
}
.bar-1-large { animation-delay: 0s; }
.bar-2-large { animation-delay: 0.2s; }
.bar-3-large { animation-delay: 0.4s; }
.bar-4-large { animation-delay: 0.6s; }
.bar-5-large { animation-delay: 0.8s; }
.screen-glow-large {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(0, 255, 0, 0.1) 0%, transparent 70%);
animation: screen-glow-pulse 2s ease-in-out infinite;
}
.digital-buttons-large {
position: absolute;
bottom: 5px;
right: 5px;
display: flex;
gap: 3px;
}
.btn-large {
width: 6px;
height: 6px;
background: #00ff00;
border-radius: 50%;
animation: button-glow 1s ease-in-out infinite;
}
.btn-1-large { animation-delay: 0s; }
.btn-2-large { animation-delay: 0.5s; }
/* New Animations for All Graphics */
@keyframes bar-grow {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.2); }
}
@keyframes line-draw {
0% { width: 0; }
100% { width: 100%; }
}
@keyframes arrow-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes money-spin {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
@keyframes trunk-sway {
0%, 100% { transform: translateX(-50%) rotate(0deg); }
50% { transform: translateX(-50%) rotate(2deg); }
}
@keyframes leaf-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-3px) rotate(5deg); }
}
@keyframes particle-float-eco {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
50% { transform: translateY(-8px) scale(1.2); opacity: 1; }
}
@keyframes reading-flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes bar-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes screen-glow-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
@keyframes button-glow {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
@keyframes icon-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes border-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes container-glow {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
/* Installation Animated Graphic */
.installation-animated {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.device-box {
position: absolute;
top: 30px;
left: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #2c3e50, #34495e);
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
animation: device-pulse 2s ease-in-out infinite;
}
.device-body {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: linear-gradient(135deg, #3498db, #2980b9);
border-radius: 4px;
animation: device-glow 3s ease-in-out infinite;
}
.device-screws {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.screw {
position: absolute;
width: 6px;
height: 6px;
background: #ecf0f1;
border-radius: 50%;
animation: screw-rotate 4s linear infinite;
}
.screw-1 { top: 5px; left: 5px; animation-delay: 0s; }
.screw-2 { top: 5px; right: 5px; animation-delay: 1s; }
.screw-3 { bottom: 5px; left: 5px; animation-delay: 2s; }
.screw-4 { bottom: 5px; right: 5px; animation-delay: 3s; }
.tools-floating {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tool-float {
position: absolute;
width: 20px;
height: 20px;
background: #ff7e5f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
animation: tool-float 3s ease-in-out infinite;
box-shadow: 0 3px 10px rgba(255, 126, 95, 0.4);
}
.tool-float.tool-1 {
top: 10px;
left: 10px;
animation-delay: 0s;
}
.tool-float.tool-2 {
top: 20px;
right: 10px;
animation-delay: 1s;
}
.tool-float.tool-3 {
bottom: 10px;
left: 20px;
animation-delay: 2s;
}
.installation-wires {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wire {
position: absolute;
height: 2px;
background: #f39c12;
animation: wire-flow 2s ease-in-out infinite;
}
.wire-1 {
top: 15px;
left: 0;
width: 30px;
animation-delay: 0s;
}
.wire-2 {
top: 25px;
right: 0;
width: 25px;
animation-delay: 0.5s;
}
.wire-3 {
bottom: 15px;
left: 10px;
width: 35px;
animation-delay: 1s;
}
.check-mark {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 25px;
height: 25px;
background: #27ae60;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
animation: check-bounce 2s ease-in-out infinite;
box-shadow: 0 3px 10px rgba(39, 174, 96, 0.4);
}
/* Installation Animations */
@keyframes device-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes device-glow {
0%, 100% { box-shadow: 0 0 10px rgba(52, 152, 219, 0.3); }
50% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.6); }
}
@keyframes screw-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes tool-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(10deg); }
}
@keyframes wire-flow {
0%, 100% { opacity: 0.6; transform: scaleX(1); }
50% { opacity: 1; transform: scaleX(1.1); }
}
@keyframes check-bounce {
0%, 100% { transform: translateY(-50%) scale(1); }
50% { transform: translateY(-50%) scale(1.2); }
}
.technical-features .section-header {
text-align: center;
margin-bottom: 2rem;
}
.features-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-height: 200px;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(241, 99, 52, 0.2);
border-color: rgba(241, 99, 52, 0.3);
}
.feature-card:hover::before {
transform: scaleY(1);
}
.feature-icon {
width: 4rem;
height: 4rem;
background: linear-gradient(135deg, var(--primary-color), #ff6b35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 10px 30px rgba(241, 99, 52, 0.3);
position: relative;
overflow: hidden;
}
.feature-icon i {
font-size: 1.5rem;
color: white;
}
/* Technical Graphics */
.technical-graphic {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Dimensions Graphic */
.dimensions-box {
position: relative;
width: 30px;
height: 20px;
}
.box-outline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px;
animation: box-pulse 2s ease-in-out infinite;
}
.box-fill {
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
animation: box-fill-pulse 2s ease-in-out infinite;
}
.dimensions-arrows {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.arrow {
position: absolute;
background: rgba(255, 255, 255, 0.6);
border-radius: 1px;
}
.arrow-h {
width: 15px;
height: 2px;
top: -8px;
left: 50%;
transform: translateX(-50%);
animation: arrow-move-h 3s ease-in-out infinite;
}
.arrow-v {
width: 2px;
height: 10px;
left: -8px;
top: 50%;
transform: translateY(-50%);
animation: arrow-move-v 3s ease-in-out infinite;
}
/* Alert Graphic */
.alert-sound {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.sound-wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: sound-wave-expand 2s ease-in-out infinite;
}
.wave-1 {
animation-delay: 0s;
}
.wave-2 {
animation-delay: 0.5s;
}
.wave-3 {
animation-delay: 1s;
}
.alert-light {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.alert-light i {
font-size: 1.2rem;
color: #ffeb3b;
animation: light-flicker 1.5s ease-in-out infinite;
}
/* Protection Graphic */
.protection-shield {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.shield-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
animation: shield-rotate 4s linear infinite;
}
.layer-1 {
animation-delay: 0s;
}
.layer-2 {
width: 40px;
height: 40px;
animation-delay: 1s;
}
.layer-3 {
width: 50px;
height: 50px;
animation-delay: 2s;
}
.protection-voltage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.voltage-text {
font-size: 1rem;
font-weight: bold;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 4px 8px;
border-radius: 5px;
animation: voltage-pulse 2s ease-in-out infinite;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
/* Prevention Graphic */
.prevention-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.prevention-waves .wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: prevention-wave-expand 3s ease-in-out infinite;
}
.prevention-waves .wave-1 {
animation-delay: 0s;
}
.prevention-waves .wave-2 {
animation-delay: 1s;
}
.prevention-waves .wave-3 {
animation-delay: 2s;
}
.prevention-alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.prevention-alert i {
font-size: 1.2rem;
color: #ff5722;
animation: alert-bounce 2s ease-in-out infinite;
}
/* Cost Graphic */
.cost-chart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 20px;
}
.chart-bar {
position: absolute;
bottom: 0;
width: 6px;
background: rgba(255, 255, 255, 0.8);
border-radius: 1px;
animation: chart-bar-grow 3s ease-in-out infinite;
}
.bar-1 {
left: 2px;
height: 8px;
animation-delay: 0s;
}
.bar-2 {
left: 12px;
height: 12px;
animation-delay: 0.5s;
}
.bar-3 {
left: 22px;
height: 6px;
animation-delay: 1s;
}
.chart-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.6);
animation: chart-line-draw 3s ease-in-out infinite;
}
.cost-arrow {
position: absolute;
top: -8px;
right: -8px;
z-index: 2;
}
.cost-arrow i {
font-size: 0.8rem;
color: #4caf50;
animation: arrow-down-bounce 2s ease-in-out infinite;
}
/* Eco Graphic */
.eco-leaves {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.leaf {
position: absolute;
width: 8px;
height: 8px;
background: rgba(76, 175, 80, 0.8);
border-radius: 50% 0;
animation: leaf-float 4s ease-in-out infinite;
}
.leaf-1 {
top: 10px;
left: 15px;
animation-delay: 0s;
}
.leaf-2 {
top: 20px;
right: 10px;
animation-delay: 1.3s;
}
.leaf-3 {
bottom: 15px;
left: 20px;
animation-delay: 2.6s;
}
.eco-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.eco-circle i {
font-size: 1.2rem;
color: #4caf50;
animation: eco-pulse 3s ease-in-out infinite;
}
/* Installation Graphic */
.installation-wires {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wire {
position: absolute;
background: rgba(255, 255, 255, 0.6);
border-radius: 1px;
animation: wire-flow 3s ease-in-out infinite;
}
.wire-1 {
width: 20px;
height: 2px;
top: 15px;
left: 10px;
animation-delay: 0s;
}
.wire-2 {
width: 2px;
height: 15px;
top: 20px;
right: 15px;
animation-delay: 0.5s;
}
.wire-3 {
width: 15px;
height: 2px;
bottom: 15px;
left: 15px;
animation-delay: 1s;
}
.installation-plug {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.installation-plug i {
font-size: 1.2rem;
color: white;
animation: plug-rotate 4s ease-in-out infinite;
}
/* Display Graphic */
.display-screen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 35px;
height: 20px;
background: rgba(0, 0, 0, 0.8);
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 4px;
z-index: 2;
}
.screen-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.current-value {
font-size: 0.6rem;
font-weight: bold;
color: #00ff00;
font-family: 'Courier New', monospace;
}
.current-unit {
font-size: 0.4rem;
color: #00ff00;
font-family: 'Courier New', monospace;
}
.display-digits {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.digit {
position: absolute;
width: 4px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 1px;
animation: digit-flicker 2s ease-in-out infinite;
}
.digit-1 {
top: 5px;
left: 5px;
animation-delay: 0s;
}
.digit-2 {
top: 5px;
left: 15px;
animation-delay: 0.3s;
}
.digit-3 {
top: 5px;
right: 5px;
animation-delay: 0.6s;
}
.feature-content h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-light);
margin-bottom: 0.5rem;
text-align: center;
}
.feature-content p {
color: var(--text-muted);
line-height: 1.6;
font-size: 0.95rem;
text-align: right;
direction: rtl;
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 5px 20px rgba(241, 99, 52, 0.4);
}
@media (max-width: 768px) {
.features-list {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.feature-card {
padding: 1.5rem;
min-height: 150px;
}
.feature-icon {
width: 3rem;
height: 3rem;
}
.feature-icon i {
font-size: 1.2rem;
}
.feature-content h3 {
font-size: 1.1rem;
}
.feature-content p {
font-size: 0.9rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.features-grid-modern {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Applications Creative Section */
.applications-creative {
padding: 4rem 0 8rem 0;
background: var(--bg-dark);
margin-bottom: 6rem;
}
.applications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.app-card {
position: relative;
border-radius: var(--custom-radius);
overflow: hidden;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.4s ease;
cursor: pointer;
}
.app-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
border-color: var(--primary-color);
}
.app-image {
position: relative;
height: 200px;
overflow: hidden;
}
.app-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.app-card:hover .app-image img {
transform: scale(1.1);
}
.app-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(241, 99, 52, 0.8), rgba(255, 107, 53, 0.8));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.app-card:hover .app-overlay {
opacity: 1;
}
.app-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.2);
border-radius: 50%;
color: white;
}
.app-icon svg {
width: 30px;
height: 30px;
}
.app-content {
padding: 1.5rem;
}
.app-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
}
.app-content p {
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.app-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feature-tag {
background: linear-gradient(135deg, var(--primary-color), #ff6b35);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.applications-header {
text-align: center;
margin-bottom: 4rem;
}
.applications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.application-card {
background: var(--bg-dark);
padding: 3rem 2rem;
border-radius: var(--custom-radius);
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.application-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
border-color: var(--primary-color);
}
.application-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #ff6b35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
color: white;
}
.application-icon svg {
width: 2.5rem;
height: 2.5rem;
box-shadow: 0 4px 15px rgba(241, 99, 52, 0.3);
}
.application-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1rem;
}
.application-card p {
color: var(--text-light);
line-height: 1.6;
font-size: 1rem;
text-align: justify;
}
/* Slogan Section */
.slogan-section {
height: calc(100vh - 6.7rem);
display: flex;
align-items: center;
justify-content: center;
background: transparent;
overflow: hidden;
position: relative;
margin-top: -1rem;
}
.slogan-section::before {
content: '';
position: absolute;
top: calc(50% - 100px);
left: 50%;
transform: translateX(-50%) !important;
width: 70%;
height: 3px;
background: linear-gradient(90deg, transparent, #FF6B35, #FF9673, #FF6B35, transparent);
border-radius: 2px;
box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
animation: decorative-line 3s ease-in-out infinite !important;
}
.slogan-section::after {
content: '';
position: absolute;
bottom: calc(50% - 100px);
left: 50%;
transform: translateX(-50%) !important;
width: 70%;
height: 3px;
background: linear-gradient(90deg, transparent, #FF6B35, #FF9673, #FF6B35, transparent);
border-radius: 2px;
box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
animation: decorative-line 3s ease-in-out infinite reverse !important;
}
@keyframes decorative-line {
0%, 100% {
opacity: 0.6;
transform: translateX(-50%) scaleX(0.8) !important;
}
50% {
opacity: 1;
transform: translateX(-50%) scaleX(1.2) !important;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.slogan-container {
width: 100%;
overflow: hidden;
position: relative;
}
.slogan-text {
font-family: 'Dancing Script', 'Vazirmatn', cursive;
font-size: 3.6rem;
font-weight: 700;
color: #FF6B35;
text-align: center;
white-space: nowrap;
animation: scroll-slogan 15s linear infinite, text-glow 2s ease-in-out infinite alternate, text-bounce 3s ease-in-out infinite;
background: linear-gradient(90deg, #FF6B35, #FF9673, #FF8D67, #FF6B35);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 2px;
position: relative;
text-shadow: 0 0 30px rgba(255, 107, 53, 0.4);
}
@keyframes text-glow {
0% {
text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
filter: brightness(1);
}
100% {
text-shadow: 0 0 30px rgba(255, 107, 53, 0.6);
filter: brightness(1.2);
}
}
@keyframes shimmer-text {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
@keyframes scroll-slogan {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@keyframes text-bounce {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-5px) scale(1.05);
}
}
@keyframes text-glow {
0% {
text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
filter: brightness(1);
}
100% {
text-shadow: 0 0 30px rgba(255, 107, 53, 0.6);
filter: brightness(1.2);
}
}
/* CTA Section */
.cta {
padding: 1.5rem 0;
background:
linear-gradient(135deg,
rgba(255, 107, 53, 0.9) 0%,
rgba(255, 107, 53, 0.7) 25%,
rgba(255, 107, 53, 0.8) 50%,
rgba(255, 107, 53, 0.6) 75%,
rgba(255, 107, 53, 0.9) 100%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='50' cy='10' r='1'/%3E%3Ccircle cx='10' cy='50' r='1'/%3E%3Ccircle cx='50' cy='50' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 10px 30px rgba(0, 0, 0, 0.4);
}
.cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-radial-gradient(circle at 20% 20%, transparent 0px, rgba(255, 107, 53, 0.08) 2px, transparent 4px),
repeating-radial-gradient(circle at 80% 80%, transparent 0px, rgba(255, 150, 115, 0.06) 3px, transparent 6px),
repeating-radial-gradient(circle at 50% 50%, transparent 0px, rgba(255, 107, 53, 0.04) 4px, transparent 8px);
pointer-events: none;
z-index: 0;
animation: pattern-pulse 20s ease-in-out infinite;
}
.cta::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255, 107, 53, 0.06) 15px, rgba(255, 107, 53, 0.06) 30px),
repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255, 150, 115, 0.04) 25px, rgba(255, 150, 115, 0.04) 50px),
repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(255, 107, 53, 0.03) 35px, rgba(255, 107, 53, 0.03) 70px);
pointer-events: none;
z-index: 0;
animation: pattern-move 25s linear infinite;
}
@keyframes pattern-pulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
@keyframes pattern-move {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(-10px) translateY(-5px); }
50% { transform: translateX(0) translateY(-10px); }
75% { transform: translateX(10px) translateY(-5px); }
100% { transform: translateX(0) translateY(0); }
}
.cta-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
position: relative;
z-index: 2;
}
.cta-text {
text-align: right;
}
.cta-title {
font-size: 2.2rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.cta-description {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
line-height: 1.6;
}
.cta-visual {
display: flex;
justify-content: center;
align-items: center;
}
.cta-graphic-container {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.cta-graphic {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, rgba(255, 107, 53, 0.2) 0%, transparent 70%);
border-radius: 50%;
border: 3px solid rgba(255, 107, 53, 0.4);
backdrop-filter: blur(15px);
animation: graphic-float 6s ease-in-out infinite;
box-shadow: 0 0 50px rgba(255, 107, 53, 0.2);
}
.cta-graphic::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 140, 66, 0.2));
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.cta-graphic::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.5), rgba(255, 140, 66, 0.3));
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite reverse;
}
.cta-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
z-index: 3;
}
.center-icon {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #fff, #f8f9fa);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FF6B35;
font-size: 2.5rem;
animation: icon-bounce 2s ease-in-out infinite;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.center-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: pulse-expand 2s ease-in-out infinite;
}
.cta-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.cta-element {
position: absolute;
width: 45px;
height: 45px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FF6B35;
font-size: 1.3rem;
animation: element-orbit 4s ease-in-out infinite;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 107, 53, 0.2);
}
.cta-element.element-1 {
top: 20px;
left: 50%;
transform: translateX(-50%);
animation: element-bounce 2s ease-in-out infinite;
animation-delay: 0s;
}
.cta-element.element-2 {
top: 50px;
right: 20px;
animation: element-rotate 3s linear infinite;
animation-delay: 0.5s;
}
.cta-element.element-3 {
bottom: 50px;
right: 20px;
animation: element-pulse 2.5s ease-in-out infinite;
animation-delay: 1s;
}
.cta-element.element-4 {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
animation: element-swing 3.5s ease-in-out infinite;
animation-delay: 1.5s;
}
.cta-element.element-5 {
bottom: 50px;
left: 20px;
animation: element-float 4s ease-in-out infinite;
animation-delay: 2s;
}
.cta-element.element-6 {
top: 50px;
left: 20px;
animation: element-wiggle 2.8s ease-in-out infinite;
animation-delay: 2.5s;
}
.cta-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.pattern-dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: dot-pulse 2s ease-in-out infinite;
}
.pattern-dot.dot-1 {
top: 30px;
left: 30px;
animation-delay: 0s;
}
.pattern-dot.dot-2 {
top: 30px;
right: 30px;
animation-delay: 0.3s;
}
.pattern-dot.dot-3 {
bottom: 30px;
left: 30px;
animation-delay: 0.6s;
}
.pattern-dot.dot-4 {
bottom: 30px;
right: 30px;
animation-delay: 0.9s;
}
.pattern-dot.dot-5 {
top: 50%;
left: 15px;
transform: translateY(-50%);
animation-delay: 1.2s;
}
.pattern-dot.dot-6 {
top: 50%;
right: 15px;
transform: translateY(-50%);
animation-delay: 1.5s;
}
.pattern-dot.dot-7 {
top: 15px;
left: 50%;
transform: translateX(-50%);
animation-delay: 1.8s;
}
.pattern-dot.dot-8 {
bottom: 15px;
left: 50%;
transform: translateX(-50%);
animation-delay: 2.1s;
}
.pattern-dot.dot-9 {
top: 25%;
left: 25%;
animation-delay: 2.4s;
}
.pattern-dot.dot-10 {
top: 25%;
right: 25%;
animation-delay: 2.7s;
}
.center-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
z-index: 1;
}
.ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid rgba(255, 107, 53, 0.3);
border-radius: 50%;
animation: ring-expand 4s ease-in-out infinite;
}
.ring.ring-1 {
width: 120px;
height: 120px;
animation-delay: 0s;
}
.ring.ring-2 {
width: 160px;
height: 160px;
animation-delay: 1.3s;
}
.ring.ring-3 {
width: 200px;
height: 200px;
animation-delay: 2.6s;
}
.ring.ring-4 {
width: 240px;
height: 240px;
animation-delay: 3.9s;
}
.center-particles {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
z-index: 0;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 107, 53, 0.8);
border-radius: 50%;
animation: particle-float 4s ease-in-out infinite;
}
.particle.particle-1 {
top: 20px;
left: 50%;
transform: translateX(-50%);
animation-delay: 0s;
}
.particle.particle-2 {
top: 50px;
right: 30px;
animation-delay: 0.7s;
}
.particle.particle-3 {
bottom: 50px;
right: 30px;
animation-delay: 1.4s;
}
.particle.particle-4 {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
animation-delay: 2.1s;
}
.particle.particle-5 {
bottom: 50px;
left: 30px;
animation-delay: 2.8s;
}
.particle.particle-6 {
top: 50px;
left: 30px;
animation-delay: 3.5s;
}
.element-trail {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 1px solid rgba(255, 107, 53, 0.3);
border-radius: 50%;
animation: trail-rotate 3s linear infinite;
z-index: -1;
}
.cta-waves {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.wave {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.4), transparent);
border-radius: 1px;
animation: wave-flow 5s ease-in-out infinite;
}
.wave.wave-1 {
top: 30%;
animation-delay: 0s;
}
.wave.wave-2 {
top: 50%;
animation-delay: 1.7s;
}
.wave.wave-3 {
top: 70%;
animation-delay: 3.4s;
}
.element-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 107, 53, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: glow-pulse 2s ease-in-out infinite;
z-index: -1;
}
.cta-connections {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.connection-line {
position: absolute;
background: linear-gradient(45deg, transparent, rgba(255, 107, 53, 0.4), transparent);
border-radius: 1px;
animation: connection-flow 3s ease-in-out infinite;
}
.connection-line.line-1 {
width: 2px;
height: 60px;
top: 30px;
left: 50%;
transform: translateX(-50%);
animation-delay: 0s;
}
.connection-line.line-2 {
width: 60px;
height: 2px;
top: 60px;
right: 30px;
animation-delay: 0.5s;
}
.connection-line.line-3 {
width: 2px;
height: 60px;
bottom: 60px;
right: 30px;
animation-delay: 1s;
}
.connection-line.line-4 {
width: 60px;
height: 2px;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation-delay: 1.5s;
}
.connection-line.line-5 {
width: 2px;
height: 60px;
bottom: 60px;
left: 30px;
animation-delay: 2s;
}
.connection-line.line-6 {
width: 60px;
height: 2px;
top: 60px;
left: 30px;
animation-delay: 2.5s;
}
@keyframes graphic-float {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
50% { transform: translateY(-15px) rotate(3deg) scale(1.02); }
}
.central-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ff6b35, #f7931e, #ff6b35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgba(255, 107, 53, 0.5),
0 0 0 4px rgba(255, 107, 53, 0.3),
inset 0 3px 6px rgba(255, 255, 255, 0.3);
border: 3px solid rgba(255, 255, 255, 0.4);
animation: center-pulse 3s ease-in-out infinite;
}
.center-icon {
color: white;
font-size: 2.2rem;
animation: icon-bounce 2s ease-in-out infinite;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
@keyframes center-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes icon-bounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes icon-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.floating-icon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 107, 53, 0.4);
background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 140, 66, 0.1));
animation: float-orbit 8s linear infinite;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.support-icon {
top: 20px;
left: 50%;
transform: translateX(-50%);
background: transparent;
color: var(--primary-color);
box-shadow: none;
animation-delay: 0s;
}
.power-icon {
top: 50%;
right: 20px;
transform: translateY(-50%);
background: linear-gradient(135deg, #ff7e5f, #ff6b35);
color: white;
box-shadow: 0 5px 20px rgba(255, 126, 95, 0.4);
animation-delay: 2s;
}
.shield-icon {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #27ae60, #2ecc71);
color: white;
box-shadow: 0 5px 20px rgba(39, 174, 96, 0.4);
animation-delay: 4s;
}
.phone-icon {
top: 50%;
left: 20px;
transform: translateY(-50%);
background: linear-gradient(135deg, #9b59b6, #8e44ad);
color: white;
box-shadow: 0 5px 20px rgba(155, 89, 182, 0.4);
animation-delay: 6s;
}
@keyframes float-orbit {
0% { transform: translateX(-50%) translateY(-50%) rotate(0deg) translateX(120px) rotate(0deg); }
100% { transform: translateX(-50%) translateY(-50%) rotate(360deg) translateX(120px) rotate(-360deg); }
}
.wave-1 {
width: 100px;
height: 100px;
animation-delay: 0s;
}
.wave-2 {
width: 150px;
height: 150px;
animation-delay: 1s;
}
.wave-3 {
width: 200px;
height: 200px;
animation-delay: 2s;
}
@keyframes wave-expand {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.cta-action {
text-align: right;
position: relative;
z-index: 2;
display: flex;
gap: 1rem;
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 1.5rem;
direction: rtl;
}
.cta-btn {
display: inline-block;
background: linear-gradient(135deg, #D2691E, #B8860B);
color: white;
padding: 0.8rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border: none;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
font-family: inherit;
line-height: 1.5;
text-align: center;
vertical-align: middle;
user-select: none;
}
.cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.cta-btn:hover::before {
left: 100%;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(210, 105, 30, 0.4);
background: linear-gradient(135deg, #B8860B, #D2691E);
}
.cta-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.3);
}
.cta-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(210, 105, 30, 0.3);
}
.cta-btn i {
margin-left: 0.5rem;
}
.cta-btn-secondary {
display: inline-block;
background: white;
color: #FF6B35;
padding: 0.8rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border: 2px solid white;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
margin-left: 400px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
font-family: inherit;
line-height: 1.5;
text-align: center;
vertical-align: middle;
user-select: none;
}
.cta-btn-secondary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s;
}
.cta-btn-secondary:hover::before {
left: 100%;
}
.cta-btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
background: #FF6B35;
color: white;
border-color: #FF6B35;
}
.cta-btn-secondary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.cta-btn-secondary:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cta-btn-secondary i {
margin-left: 0.5rem;
}
/* CTA Responsive */
@media (max-width: 768px) {
.cta-content {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
.cta-text {
text-align: center;
}
.cta-action {
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.cta-btn, .cta-btn-secondary {
width: 100%;
max-width: 250px;
}
.cta-graphic-container {
width: 220px;
height: 220px;
}
.central-circle {
width: 60px;
height: 60px;
}
.center-icon {
font-size: 1.8rem;
}
.floating-icon {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.connection-waves {
width: 150px;
height: 150px;
}
.wave-1 {
width: 80px;
height: 80px;
}
.wave-2 {
width: 120px;
height: 120px;
}
.wave-3 {
width: 150px;
height: 150px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* CTA Animations */
@keyframes cta-glow {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes cta-pattern {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(20px) translateY(20px); }
}
.btn-icon {
width: 1rem;
height: 1rem;
margin-left: 0.5rem;
}
@media (max-width: 768px) {
.cta-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.cta-text {
text-align: center;
}
.cta-title {
font-size: 2rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Cart Sidebar */
.cart-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 50;
}
.cart-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20rem;
background-color: var(--bg-secondary);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 50;
overflow-y: auto;
}
.cart-sidebar.open {
transform: translateX(0);
}
.cart-content {
padding: 1.5rem;
}
.cart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.cart-title {
font-size: 1.25rem;
font-weight: bold;
}
.cart-close {
background: none;
border: none;
color: #FF6B35;
cursor: pointer;
transition: color 0.3s ease;
}
.cart-close:hover {
color: white;
}
.cart-close svg {
width: 1.5rem;
height: 1.5rem;
}
.cart-items {
margin-bottom: 1.5rem;
}
.cart-empty {
color: rgba(255, 255, 255, 0.5);
text-align: center;
}
.cart-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1rem;
}
.cart-total-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.cart-total-row span:first-child {
font-weight: bold;
}
.cart-total {
font-weight: bold;
color: var(--primary-color);
}
/* Footer */
.footer {
background: var(--bg-dark);
color: var(--text-light);
padding: 0.5rem 0 0.25rem;
border-top: 1px solid rgba(241, 99, 52, 0.2);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 80% 20%, rgba(241, 99, 52, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
align-items: start;
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 20px;
text-align: initial;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.footer-section {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-logo {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.footer-logo {
margin-bottom: 1rem;
}
.footer-logo-img {
height: 3rem;
width: auto;
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
.footer-title {
color: var(--primary-color);
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
font-weight: 700;
}
.footer-title-spaced {
margin-top: 1rem;
}
.footer-section:first-child {
margin-top: 1rem;
}
/* Enamad Logo Styles - Clean and Consistent */
.enamad-logo,
.enamad-logo-left,
.enamad-right .enamad-logo {
width: 120px;
height: auto;
cursor: pointer;
transition: transform 0.3s ease;
}
.enamad-logo:hover,
.enamad-logo-left:hover {
transform: scale(1.05);
}
/* Force correct size for all enamad images */
.enamad-right img,
.enamad-logo-left img,
.footer-enamad img {
width: 120px;
height: auto;
max-width: 120px;
max-height: 120px;
}
/* ===== RESPONSIVE DESIGN SYSTEM ===== */
/* Extra Large Devices (1400px and up) */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
.hero-title {
font-size: 4rem;
}
.section-title {
font-size: 3rem;
}
/* Services section for extra large screens */
.services-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.service-detail {
padding: 3rem;
min-height: 400px;
}
.service-detail h3 {
font-size: 2rem;
margin-bottom: 1.8rem;
}
.service-detail p {
font-size: 1.3rem;
line-height: 1.6;
}
/* Technical features for extra large screens */
.tech-features-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.tech-feature-detail {
padding: 3rem;
min-height: 400px;
}
.tech-feature-detail h3 {
font-size: 2rem;
margin-bottom: 1.8rem;
}
.tech-feature-detail p {
font-size: 1.3rem;
line-height: 1.6;
}
/* Key features for extra large screens */
.features-grid {
grid-template-columns: repeat(5, 1fr);
gap: 3rem;
}
.feature-card {
padding: 3rem;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.feature-card p {
font-size: 1.2rem;
line-height: 1.5;
}
}
/* Large Devices (1200px and up) */
@media (min-width: 1200px) and (max-width: 1399px) {
.container {
max-width: 1140px;
}
.hero-title {
font-size: 3.5rem;
}
.section-title {
font-size: 2.5rem;
}
/* Services section for large screens */
.services-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.service-detail {
padding: 2.5rem;
min-height: 350px;
}
.service-detail h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.service-detail p {
font-size: 1.2rem;
line-height: 1.6;
}
/* Technical features for large screens */
.tech-features-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.tech-feature-detail {
padding: 2.5rem;
min-height: 350px;
}
.tech-feature-detail h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.tech-feature-detail p {
font-size: 1.2rem;
line-height: 1.6;
}
/* Key features for large screens */
.features-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
}
.feature-card {
padding: 2.5rem;
}
.feature-card h3 {
font-size: 1.4rem;
margin-bottom: 1.2rem;
}
.feature-card p {
font-size: 1.1rem;
line-height: 1.5;
}
}
/* Medium Devices (992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
.container {
max-width: 960px;
}
.hero-title {
font-size: 3rem;
}
.section-title {
font-size: 2.2rem;
}
.service-btn {
font-size: 0.9rem;
padding: 0.8rem 1.2rem;
}
/* Services section for medium screens */
.services-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.service-detail {
padding: 2rem;
min-height: 300px;
}
.service-detail h3 {
font-size: 1.6rem;
margin-bottom: 1.2rem;
}
.service-detail p {
font-size: 1.1rem;
line-height: 1.6;
}
/* Technical features for medium screens */
.tech-features-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.tech-feature-detail {
padding: 2rem;
min-height: 300px;
}
.tech-feature-detail h3 {
font-size: 1.6rem;
margin-bottom: 1.2rem;
}
.tech-feature-detail p {
font-size: 1.1rem;
line-height: 1.6;
}
/* Key features for medium screens */
.features-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.feature-card {
padding: 2rem;
}
.feature-card h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.feature-card p {
font-size: 1rem;
line-height: 1.5;
}
}
/* Small Devices (768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
.container {
max-width: 720px;
}
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.service-btn {
font-size: 0.85rem;
padding: 0.7rem 1rem;
}
.feature-card {
padding: 1.5rem;
}
.video-title {
font-size: 2.5rem;
}
/* Services section for tablets */
.services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.service-detail {
padding: 1.5rem;
min-height: 250px;
}
.service-detail h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.service-detail p {
font-size: 1rem;
line-height: 1.6;
}
/* Technical features for tablets */
.tech-features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.tech-feature-detail {
padding: 1.5rem;
min-height: 250px;
}
.tech-feature-detail h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.tech-feature-detail p {
font-size: 1rem;
line-height: 1.6;
}
/* Key features for tablets */
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.feature-card {
padding: 1.5rem;
}
.feature-card h3 {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.feature-card p {
font-size: 0.95rem;
line-height: 1.5;
}
}
/* Extra Small Devices (576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
.container {
max-width: 540px;
}
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.service-btn {
font-size: 0.8rem;
padding: 0.6rem 0.8rem;
margin: 0.3rem;
}
.feature-card {
padding: 1.2rem;
}
.video-title {
font-size: 2rem;
}
.enamad-right img,
.enamad-logo-left img,
.footer-enamad img {
width: 90px;
height: auto;
max-width: 90px;
max-height: 90px;
}
}
/* Mobile Devices (up to 575px) */
@media (max-width: 575px) {
/* Top Bar Extra Small Mobile Styles */
.top-bar {
padding: 0.05rem 0;
font-size: 0.8rem;
}
.top-bar-container {
padding: 0.25rem 0.4rem 0 0.4rem;
/* حفظ چیدمان افقی قبلی */
}
.top-bar-left,
.top-bar-right {
gap: 20px;
/* حفظ justify-content: space-between */
}
.top-bar-item {
gap: 0.4rem;
font-size: 0.75rem;
}
.top-bar-item .icon {
width: 0.95rem;
height: 0.95rem;
}
.support-icon {
width: 1.1rem;
height: 1.1rem;
}
.container {
max-width: 100%;
padding: 0 1rem;
}
.hero-title {
font-size: 1.8rem;
line-height: 1.3;
}
.section-title {
font-size: 1.6rem;
line-height: 1.3;
}
.service-buttons-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0.6rem; /* tighter to keep divider close */
}
.service-btn {
font-size: 0.75rem;
padding: 0.5rem 0.7rem;
margin: 0.2rem;
min-width: auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.btn-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.btn-text {
flex: 1;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-arrow {
margin-left: 0.5rem;
flex-shrink: 0;
}
/* Hide services-divider on mobile */
.services-divider {
display: none;
}
/* Service details layout for mobile */
.service-detail-content {
display: flex;
flex-direction: column;
gap: 0.6rem; /* tighter */
margin-top: 0; /* avoid accidental gaps */
padding: 0; /* remove all padding */
}
.service-graphic {
order: 1;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.4rem; /* tighter */
transform: scale(0.8) !important;
}
.service-text {
order: 2;
margin-top: 0; /* normalize */
width: 100%;
max-width: 100%;
margin: 0;
}
/* normalize headings spacing in all service details */
.service-detail h3 { margin-top: 0; }
/* Add divider line between buttons and graphics */
.service-buttons-list::after {
content: '';
display: block;
width: 100%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
#ff6b35 20%,
#f7931e 50%,
#ff6b35 80%,
transparent 100%
);
margin: 0.8rem 0; /* reduced to remove excessive gap */
border-radius: 2px;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}
.feature-card {
padding: 1rem;
margin: 0.5rem 0;
}
.video-title {
font-size: 1.8rem;
margin-top: 200px;
}
.video-showcase {
min-height: 600px;
}
.video-showcase .video-container {
margin-bottom: 200px;
}
.enamad-right img,
.enamad-logo-left img,
.footer-enamad img {
width: 80px;
height: auto;
max-width: 80px;
max-height: 80px;
}
/* Services section improvements */
.services-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.service-detail {
padding: 1rem;
}
.service-detail h3 {
font-size: 1.2rem;
}
.service-detail p {
font-size: 0.9rem;
line-height: 1.5;
}
/* Service buttons improvements */
.service-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.service-btn {
font-size: 0.7rem;
padding: 0.4rem 0.6rem;
margin: 0.1rem;
min-width: auto;
white-space: nowrap;
text-align: center;
}
/* Service details visibility - HIDE inactive, SHOW only active */
.service-detail:not(.active) {
display: none !important;
opacity: 0 !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
.service-detail.active {
display: flex !important;
opacity: 1 !important;
height: auto !important;
min-height: 200px !important;
overflow: visible !important;
flex-direction: column;
justify-content: center;
}
.service-detail h3 {
font-size: 1.1rem;
margin-bottom: 0.8rem;
color: var(--primary-color);
}
.service-detail p {
font-size: 0.85rem;
line-height: 1.6;
text-align: justify;
}
/* Technical features improvements */
.tech-features-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.tech-feature-detail {
padding: 1rem;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tech-feature-detail h3 {
font-size: 1.2rem;
margin-bottom: 0.8rem;
color: var(--primary-color);
}
.tech-feature-detail p {
font-size: 0.9rem;
line-height: 1.5;
text-align: justify;
}
/* Tech feature buttons */
.tech-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.tech-btn {
font-size: 0.7rem;
padding: 0.4rem 0.6rem;
margin: 0.1rem;
min-width: auto;
white-space: nowrap;
text-align: center;
}
/* Key features section */
.key-features {
padding: 2rem 0;
}
.key-features .section-title {
font-size: 1.6rem;
margin-bottom: 1.5rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.feature-card {
padding: 1rem;
text-align: center;
}
.feature-card h3 {
font-size: 1.1rem;
margin-bottom: 0.8rem;
}
.feature-card p {
font-size: 0.85rem;
line-height: 1.5;
}
/* Interactive services improvements */
.interactive-services {
margin-top: 100px;
}
.service-graphic {
width: 160px !important;
height: 160px !important;
transform: scale(0.8) !important;
}
.interactive-services .section-title {
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
/* Horizontal separator between service-text and service-buttons-list */
.service-text::after {
content: '';
display: block;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
#ff6b35 20%,
#f7931e 50%,
#ff6b35 80%,
transparent 100%
);
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
margin: 2rem 0;
border-radius: 1px;
}
.service-buttons-list {
margin-top: 1rem;
}
/* Footer improvements */
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 20px;
text-align: initial;
}
.footer-section h3 {
font-size: 1.2rem !important;
margin-bottom: 15px;
}
.footer-section p,
.footer-section li {
font-size: 0.9rem;
}
/* Navigation improvements for mobile */
.main-nav {
display: none;
}
.mobile-menu {
display: block;
}
/* Hero section improvements for mobile */
.hero-content {
padding: 2rem 1rem;
text-align: center;
}
.hero-title {
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 1.5rem;
}
/* Video section improvements for mobile */
.video-showcase {
padding: 1rem 0;
}
.video-container {
margin: 0 1rem;
}
/* Increase spacing between curve and badge on mobile */
.video-bg-curve {
top: 100px !important;
width: 110% !important;
max-width: 400px !important;
}
.video-badge {
margin-bottom: 2.5rem !important;
}
/* Video size adjustments for mobile */
.video-showcase video {
height: 100px !important;
object-fit: contain !important;
border-radius: 10px !important;
max-height: 100px !important;
}
/* Video container height for mobile */
.video-showcase .video-container {
min-height: 150px !important;
margin-bottom: 100px !important;
}
/* Video subtitle font size for mobile */
.video-subtitle {
font-size: 1.6rem !important;
font-weight: 500 !important;
}
/* Scrolling features improvements for mobile */
.features-container {
padding: 1rem 0;
}
.features-track {
animation-duration: 150s !important;
animation-timing-function: linear !important;
}
/* Scrolling features spacing from video */
.scrolling-features {
margin-top: 15rem !important;
margin-bottom: 1rem !important;
padding: 5rem 0 !important;
}
.features-container {
margin-top: 15rem !important;
padding: 6rem 0 !important;
}
/* Slogan text font size for mobile */
.slogan-text {
font-size: 2.2rem !important;
padding: 35px 30px !important;
margin: 20px 0 !important;
line-height: 1.6 !important;
font-weight: 700 !important;
}
.feature-item {
font-size: 0.8rem;
padding: 0.5rem 1rem;
}
}
/* ===== ADDITIONAL RESPONSIVE IMPROVEMENTS ===== */
/* Landscape orientation for mobile devices */
@media (max-width: 767px) and (orientation: landscape) {
/* Force landscape mobile styles */
.slogan-section {
animation: mobile-slogan-pulse 4s ease-in-out infinite !important;
}
.slogan-text {
font-size: 2.3rem !important;
padding: 25px 20px !important;
line-height: 1.6 !important;
font-weight: 700 !important;
text-align: center !important;
animation: mobile-slogan-glow 5s ease-in-out infinite alternate,
mobile-slogan-bounce 6s ease-in-out infinite,
mobile-slogan-shimmer 10s linear infinite,
mobile-slogan-float 8s ease-in-out infinite,
mobile-slogan-pulse 4s ease-in-out infinite !important;
background: linear-gradient(45deg, #FF6B35, #FF9673, #FF8D67, #FF6B35, #FFB366) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
letter-spacing: 1.3px !important;
text-shadow: 0 0 23px rgba(255, 107, 53, 0.6) !important;
display: block !important;
max-width: 290px !important;
margin: 0 auto !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
filter: drop-shadow(0 0 13px rgba(255, 107, 53, 0.3)) !important;
}
/* Move curve lower for smaller mobile landscape */
.video-bg-curve {
top: 100px !important;
}
.features-track {
animation-duration: 150s !important;
animation-timing-function: linear !important;
}
.scrolling-features {
margin-top: 3rem !important;
padding: 2.5rem 0 !important;
}
.hero-title {
font-size: 1.5rem;
}
/* Showcase content for landscape mobile - Override inline style */
.video-showcase .showcase-content,
section.video-showcase .showcase-content {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
margin-top: 0 !important; /* Override inline style="margin-top: 70px;" */
}
/* Move product-image above product-info and increase product-info width */
.video-showcase .product-image,
section.video-showcase .product-image {
width: 100% !important;
order: 1 !important;
margin-bottom: 15px !important;
}
.video-showcase .product-info,
section.video-showcase .product-info {
width: 100% !important;
max-width: 100% !important;
order: 2 !important;
}
/* Interactive services for landscape mobile */
.service-buttons-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.service-btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.btn-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.btn-text {
flex: 1;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-arrow {
margin-left: 0.5rem;
flex-shrink: 0;
}
/* Hide services-divider on landscape mobile */
.services-divider {
display: none;
}
/* Service details layout for landscape mobile */
.service-detail-content {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.service-graphic {
order: 1;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.8rem;
transform: scale(0.8) !important;
}
.service-text {
order: 2;
}
/* Add divider line between buttons and graphics for landscape mobile */
.service-buttons-list::after {
content: '';
display: block;
width: 100%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
#ff6b35 20%,
#f7931e 50%,
#ff6b35 80%,
transparent 100%
);
margin: 0.8rem 0; /* reduced to remove excessive gap */
border-radius: 2px;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}
.service-buttons-list {
margin-top: 0.8rem;
}
.section-title {
font-size: 1.4rem;
}
.video-title {
font-size: 1.6rem;
margin-top: 150px;
}
.video-showcase {
min-height: 400px;
}
/* Reduce vertical spacing between curve and video-title in video-showcase */
.video-showcase .video-bg-curve {
top: 85px !important;
width: 105% !important;
max-width: 350px !important;
margin-bottom: -30px !important;
}
.video-showcase .video-badge {
margin-bottom: 1rem !important;
}
/* Reduce vertical spacing between curve and video-title */
.video-showcase .video-title {
margin-top: 120px !important;
margin-bottom: 1rem !important;
}
/* Make video smaller (both width and height) in video-showcase */
.video-showcase .video-container {
min-height: 80px !important;
height: 80px !important;
max-width: 350px !important;
width: 60% !important;
margin: 0 auto 1rem auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.video-showcase .video-container video {
height: 60px !important;
width: 100% !important;
max-width: 300px !important;
object-fit: contain !important;
border-radius: 8px !important;
max-height: 60px !important;
}
.video-showcase #videoCover {
height: 60px !important;
max-height: 60px !important;
}
/* Video subtitle font size for landscape mobile */
.video-subtitle {
font-size: 1.4rem !important;
font-weight: 500 !important;
}
/* Scrolling features for landscape mobile */
.features-track {
animation-duration: 180s !important;
animation-timing-function: linear !important;
}
.scrolling-features {
margin-top: 12rem !important;
padding: 4.5rem 0 !important;
}
.features-container {
margin-top: 12rem !important;
padding: 5.5rem 0 !important;
}
/* Slogan text for landscape mobile */
.slogan-text {
font-size: 1.8rem !important;
padding: 30px 25px !important;
margin: 15px 0 !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
/* Technical features: Arrange tech-btn in 2 rows, 4 columns */
.interactive-technical-features .technical-feature-buttons {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
grid-template-rows: repeat(2, auto) !important;
gap: 0.5rem !important;
width: 100% !important;
}
.interactive-technical-features .tech-btn {
width: 100% !important;
padding: 0.5rem 0.3rem !important;
font-size: 0.65rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Reduce vertical spacing between key features and technical-features-container */
.interactive-technical-features .section-header {
margin-bottom: 10px !important;
}
.interactive-technical-features .technical-features-container {
margin-top: 10px !important;
}
/* Improve services-container responsiveness */
.services-container {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
padding: 1rem !important;
box-sizing: border-box !important;
}
.services-interactive {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Shop video showcase: Make "تجربه واقعی" and curve bigger, make section and video smaller */
.shop-video-showcase {
margin-top: 100px !important;
margin-bottom: 20px !important;
padding: 1rem 0 !important;
}
.shop-video-showcase .video-badge {
font-size: 1.2rem !important;
padding: 0.8rem 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.shop-video-showcase .video-bg-curve {
width: 120% !important;
max-width: 400px !important;
top: 60px !important;
transform: translateX(-50%) scale(1.2) !important;
}
.shop-video-showcase .video-title {
font-size: 1.4rem !important;
margin-top: 80px !important;
margin-bottom: 1rem !important;
}
/* Make shop video smaller (both width and height) */
.shop-video-showcase .video-container {
height: 150px !important;
max-height: 150px !important;
max-width: 400px !important;
margin: 0 auto 1rem auto !important;
}
.shop-video-showcase .video-container video {
width: 100% !important;
height: 150px !important;
max-height: 150px !important;
object-fit: cover !important;
}
.shop-video-showcase #shopVideoCover {
height: 150px !important;
max-height: 150px !important;
}
/* Make CTA button rectangular instead of square */
.cta .cta-btn-secondary {
width: auto !important;
min-width: 200px !important;
max-width: 300px !important;
padding: 12px 40px !important;
aspect-ratio: auto !important;
height: auto !important;
border-radius: 8px !important;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.enamad-right img,
.enamad-logo-left img,
.footer-enamad img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* Print styles */
@media print {
.main-nav,
.mobile-menu,
.video-showcase,
.features-container {
display: none !important;
}
.hero-content,
.section-content {
color: #000 !important;
background: #fff !important;
}
.service-detail,
.tech-feature-detail,
.feature-card {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.features-track {
animation: none;
}
.fade-in-up {
animation: none;
}
* {
transition: none !important;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--text-light: #ffffff;
--text-muted: #cccccc;
}
}
/* Mobile responsive - Legacy support */
@media (max-width: 768px) {
.enamad-right img,
.enamad-logo-left img,
.footer-enamad img {
width: 100px;
height: auto;
max-width: 100px;
max-height: 100px;
}
}
.contact-wrapper {
display: flex;
align-items: flex-start;
gap: 8rem;
}
.enamad-right {
flex-shrink: 0;
}
/* Navigation Buttons */
.nav-login-btn {
display: inline-block;
background: transparent;
color: var(--primary-color);
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border: 2px solid var(--primary-color);
transition: all 0.3s ease;
}
/* Mobile Menu Button Override */
#mobile-menu .mobile-auth .nav-login-btn {
flex: 1 !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-align: center !important;
border-radius: 8px !important;
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3) !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
min-width: 100px !important;
margin: 0 3px !important;
text-indent: 10px !important;
text-decoration: none !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
}
.nav-login-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
.nav-register-btn {
display: inline-block;
background: var(--primary-color);
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border: 2px solid var(--primary-color);
transition: all 0.3s ease;
}
/* Mobile Menu Button Override */
#mobile-menu .mobile-auth .nav-register-btn {
flex: 1 !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-align: center !important;
border-radius: 8px !important;
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3) !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
min-width: 100px !important;
margin: 0 3px !important;
text-indent: 10px !important;
text-decoration: none !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
}
.nav-register-btn:hover {
background: transparent;
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
/* Hero Buttons */
.hero-primary-btn {
display: inline-block;
background: linear-gradient(135deg, var(--primary-color), #e74c3c);
color: white;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border: none;
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.hero-primary-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.hero-primary-btn:hover::before {
left: 100%;
}
.hero-primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.6);
}
.hero-secondary-btn {
display: inline-block;
background: transparent;
color: white;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.hero-secondary-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
/* Checkout Button */
.checkout-btn {
display: block;
width: 100%;
background: linear-gradient(135deg, var(--primary-color), #e74c3c);
color: white;
padding: 1rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}
/* Social Icons Row */
.social-icons-row {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
}
.social-icon-link {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
text-decoration: none;
}
.social-icon-link:hover {
color: var(--primary-color);
transform: scale(1.2);
}
.social-icon-link svg {
width: 100%;
height: 100%;
}
.social-icon-img {
width: 24px;
height: 24px;
object-fit: contain;
transition: all 0.3s ease;
display: block;
max-width: 100%;
height: auto;
}
.social-icon-link:hover .social-icon-img {
transform: scale(1.2);
filter: brightness(1.1) contrast(1.1);
}
/* Technical Features Enhanced Animations */
@keyframes button-pulse {
0%, 100% {
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
50% {
box-shadow:
0 15px 40px rgba(255, 107, 53, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes container-glow-enhanced {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes warranty-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 30px rgba(39, 174, 96, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(39, 174, 96, 0.5);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes separator-pulse {
0%, 100% {
opacity: 0.6;
transform: translateX(-50%) scaleX(1);
}
50% {
opacity: 1;
transform: translateX(-50%) scaleX(1.2);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes sport-separator {
0%, 100% {
transform: translateX(-50%) scaleX(1);
box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}
50% {
transform: translateX(-50%) scaleX(1.2);
box-shadow: 0 0 30px rgba(255, 107, 53, 0.8);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes background-pattern {
0% {
transform: translateX(0) translateY(0);
opacity: 0.6;
}
25% {
transform: translateX(2px) translateY(1px);
opacity: 0.8;
}
50% {
transform: translateX(4px) translateY(2px);
opacity: 1;
}
75% {
transform: translateX(2px) translateY(3px);
opacity: 0.8;
}
100% {
transform: translateX(0) translateY(0);
opacity: 0.6;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes background-glow {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.01);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes electric-pulse {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.1);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes electric-glow {
0%, 100% {
opacity: 0.4;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 0.8;
transform: scale(1.05) rotate(180deg);
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.contact-icon {
width: 1.2rem;
height: 1.2rem;
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
transition: all 0.3s ease;
flex-shrink: 0;
}
.contact-icon:hover {
filter: brightness(0) saturate(100%) invert(20%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(120%) contrast(97%);
transform: scale(1.1);
}
.footer-bottom-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
text-align: center;
}
.footer-bottom-left {
flex: 1;
text-align: left;
}
.footer-bottom-center {
flex: 1;
text-align: center;
}
.footer-bottom-right {
flex: 1;
text-align: right;
}
.enamad-section-left {
margin-top: 0.5rem;
}
.social-icon[alt="روبیکا"] {
filter: brightness(0) saturate(100%) invert(100%);
background: transparent;
}
@media (max-width: 768px) {
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.footer-bottom-left,
.footer-bottom-center,
.footer-bottom-right {
text-align: center;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.social-icon {
width: 20px;
height: 20px;
margin-left: 0.5rem;
border-radius: 4px;
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: scale(1.1);
}
.social-title {
color: var(--primary-color);
margin: 1.5rem 0 1rem;
font-size: 1rem;
font-weight: 700;
}
.footer-description {
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
margin-top: 0;
max-width: 75%;
}
.enamad-section {
margin-top: 1rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
color: #FF6B35;
transition: color 0.3s ease;
}
.social-link:hover {
color: var(--primary-color);
}
.social-link svg {
width: 1.25rem;
height: 1.25rem;
}
.footer-heading {
font-weight: bold;
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0;
}
.footer-links li {
display: flex;
align-items: center;
gap: 0.75rem;
}
.footer-links li svg {
width: 1rem;
height: 1rem;
color: var(--primary-color);
flex-shrink: 0;
}
.footer-links a {
color: var(--text-light);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--primary-color);
}
.contact-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
}
.contact-list li {
display: flex;
align-items: center;
gap: 0.3rem;
margin-bottom: 0.5rem;
color: var(--text-light);
font-size: 0.95rem;
}
.contact-list li svg {
width: 1.2rem;
height: 1.2rem;
color: var(--primary-color);
flex-shrink: 0;
}
.social-list {
list-style: none;
padding: 0;
margin: 1rem 0 0 0;
}
.social-list li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--text-light);
font-size: 0.95rem;
}
.social-list li svg {
width: 1.2rem;
height: 1.2rem;
color: var(--primary-color);
flex-shrink: 0;
}
.social-title {
color: white;
font-size: 1rem;
font-weight: 600;
margin: 1.5rem 0 0 0;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--custom-radius);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.contact-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, var(--primary-color), #ff6b35);
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-item:hover {
background: rgba(241, 99, 52, 0.1);
transform: translateX(8px);
box-shadow: 0 4px 20px rgba(241, 99, 52, 0.2);
border-color: rgba(241, 99, 52, 0.3);
}
.contact-item:hover::before {
opacity: 1;
}
.contact-item i {
color: var(--primary-color);
font-size: 1.5rem;
width: 30px;
text-align: center;
background: rgba(241, 99, 52, 0.1);
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.contact-item:hover i {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.contact-item span {
color: var(--text-light);
font-weight: 500;
font-size: 1.1rem;
}
.social-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.social-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
background: rgba(241, 99, 52, 0.1);
border-radius: var(--custom-radius);
color: var(--text-light);
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(241, 99, 52, 0.2);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, var(--primary-color), #ff6b35);
opacity: 0;
transition: opacity 0.3s ease;
}
.social-link:hover {
background: rgba(241, 99, 52, 0.2);
transform: translateX(-8px);
color: var(--primary-color);
box-shadow: 0 4px 20px rgba(241, 99, 52, 0.3);
}
.social-link:hover::before {
opacity: 1;
}
.social-link i {
color: var(--primary-color);
font-size: 1.5rem;
width: 30px;
text-align: center;
background: rgba(241, 99, 52, 0.2);
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.social-link:hover i {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.social-link span {
font-weight: 500;
font-size: 1.1rem;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0.5rem;
padding-top: 0.5rem;
text-align: center;
color: var(--text-light);
}
/* Animations */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Toast Notifications */
.toast {
position: fixed;
top: 20px;
right: 20px;
padding: 16px 24px;
border-radius: var(--custom-radius);
color: white;
font-weight: 600;
z-index: 1000;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.toast.show {
transform: translateX(0);
}
.toast.success {
background-color: #10b981;
}
.toast.error {
background-color: #ef4444;
}
.toast.warning {
background-color: #f59e0b;
}
.toast.info {
background-color: var(--primary-color);
}
/* Responsive Design */
@media (max-width: 640px) {
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.5rem;
}
.cta-title {
font-size: 1.5rem;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Back to Top Button */
.back-to-top {
position: fixed !important;
bottom: 2rem !important;
right: 2rem !important;
width: 3rem !important;
height: 3rem !important;
background-color: var(--primary-color) !important;
color: white !important;
border: none !important;
border-radius: 50% !important;
cursor: pointer !important;
opacity: 0 !important;
pointer-events: none !important;
transition: all 0.3s ease !important;
z-index: 99999 !important;
box-shadow: 0 4px 12px rgba(241, 99, 52, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.5rem !important;
font-weight: bold !important;
}
.back-to-top:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(241, 99, 52, 0.4);
}
.back-to-top svg {
width: 1.5rem;
height: 1.5rem;
}
/* Cart Item Styles */
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cart-item-info h4 {
font-weight: 600;
margin-bottom: 0.25rem;
}
.cart-item-info p {
font-size: 0.875rem;
color: var(--text-muted);
}
.cart-item-price {
font-weight: bold;
color: var(--primary-color);
}
/* Print Styles */
@media print {
.header,
.cart-sidebar,
.toast,
.back-to-top {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.4;
color: black;
background: white;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.gallery-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.gallery-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.gallery-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}
.gallery-badge i {
font-size: 16px;
}
.gallery-title {
font-size: 2.5rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
background: linear-gradient(135deg, #ffffff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gallery-description {
font-size: 1.1rem;
color: var(--text-light);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 20px;
position: relative;
z-index: 2;
max-width: 1000px;
margin: 0 auto;
}
.gallery-item {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
background: #2a2a2a;
cursor: pointer;
}
.gallery-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.gallery-image {
width: 100%;
height: 250px;
object-fit: cover;
transition: all 0.3s ease;
border-radius: 15px;
}
.gallery-item:hover .gallery-image {
transform: scale(1.05);
}
.gallery-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 107, 53, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 15px;
}
.gallery-item:hover::before {
opacity: 1;
}
.gallery-item::after {
content: '🔍';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
opacity: 0;
transition: all 0.3s ease;
z-index: 3;
}
.gallery-item:hover::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
}
/* Special layout for 5th item to span 2 columns */
.gallery-item:nth-child(5) {
grid-column: span 2;
}
/* Responsive Gallery */
@media (max-width: 768px) {
.gallery-section {
padding: 60px 0;
}
.gallery-title {
font-size: 2rem;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 15px;
}
.gallery-item:nth-child(5) {
grid-column: span 2;
}
.gallery-image {
height: 200px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 480px) {
.gallery-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 1fr);
gap: 15px;
}
.gallery-item:nth-child(5) {
grid-column: span 1;
}
.gallery-image {
height: 180px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* Shop Page Styles */
.shop-hero-section {
padding: 120px 0;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d2d2d 100%);
position: relative;
overflow: hidden;
margin-top: 80px;
}
.shop-hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.shop-hero-particles {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255, 107, 53, 0.3), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255, 107, 53, 0.2), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(255, 107, 53, 0.4), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(255, 107, 53, 0.3), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(255, 107, 53, 0.2), transparent);
background-repeat: repeat;
background-size: 200px 200px;
animation: shopHeroParticleFloat 20s linear infinite;
}
.shop-hero-waves {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(45deg,
rgba(255, 107, 53, 0.1) 0%,
transparent 25%,
rgba(255, 107, 53, 0.05) 50%,
transparent 75%,
rgba(255, 107, 53, 0.1) 100%);
animation: shopHeroWaveMove 15s ease-in-out infinite;
}
@keyframes shopHeroParticleFloat {
0% { transform: translateY(0px) rotate(0deg); }
100% { transform: translateY(-100px) rotate(360deg); }
}
@keyframes shopHeroWaveMove {
0%, 100% { transform: translateX(-100px); }
50% { transform: translateX(100px); }
}
.shop-hero-content {
text-align: center;
position: relative;
z-index: 2;
}
.shop-hero-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
padding: 12px 30px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
position: relative;
overflow: hidden;
}
.shop-hero-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: badgeShine 3s infinite;
}
.shop-hero-title {
font-size: 4rem;
font-weight: 800;
margin-bottom: 20px;
position: relative;
}
.shop-hero-title .title-line {
display: block;
background: linear-gradient(135deg, #ffffff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shop-hero-title .title-accent {
display: block;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.shop-hero-title .title-accent::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #ff8c42);
border-radius: 2px;
animation: titleUnderline 2s ease-in-out infinite;
}
.shop-hero-description {
font-size: 1.3rem;
color: var(--text-light);
max-width: 600px;
margin: 0 auto 40px;
line-height: 1.8;
}
.shop-hero-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 50px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 8px;
}
.stat-label {
font-size: 1rem;
color: var(--text-light);
font-weight: 500;
}
/* Shop Section */
.shop-section {
padding: 0;
background: transparent;
position: relative;
overflow: visible;
margin: 0;
border: none;
}
.shop-section .container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 1rem;
margin: 0 auto;
outline: none !important;
border-radius: 0 !important;
filter: none !important;
-webkit-filter: none !important;
}
.shop-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.shop-particles {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255, 107, 53, 0.2), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255, 107, 53, 0.15), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(255, 107, 53, 0.25), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(255, 107, 53, 0.2), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(255, 107, 53, 0.15), transparent);
background-repeat: repeat;
background-size: 250px 250px;
animation: shopParticleFloat 25s linear infinite;
}
.shop-waves {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(45deg,
rgba(255, 107, 53, 0.08) 0%,
transparent 25%,
rgba(255, 107, 53, 0.04) 50%,
transparent 75%,
rgba(255, 107, 53, 0.08) 100%);
animation: shopWaveMove 18s ease-in-out infinite;
}
@keyframes shopParticleFloat {
0% { transform: translateY(0px) rotate(0deg); }
100% { transform: translateY(-120px) rotate(360deg); }
}
@keyframes shopWaveMove {
0%, 100% { transform: translateX(-120px); }
50% { transform: translateX(120px); }
}
.shop-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.shop-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
padding: 12px 30px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
position: relative;
overflow: hidden;
}
.shop-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: badgeShine 3s infinite;
}
.shop-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
position: relative;
}
.shop-title .title-line {
display: block;
background: linear-gradient(135deg, #ffffff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shop-title .title-accent {
display: block;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.shop-title .title-accent::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #ff8c42);
border-radius: 2px;
animation: titleUnderline 2s ease-in-out infinite;
}
.shop-description {
font-size: 1.2rem;
color: var(--text-light);
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
.shop-filters {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
position: relative;
z-index: 2;
flex-wrap: wrap;
gap: 20px;
}
.filter-group {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 24px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
color: white;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.filter-btn:hover,
.filter-btn.active {
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}
.sort-group {
display: flex;
align-items: center;
gap: 10px;
}
.sort-select {
padding: 12px 20px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
color: white;
font-size: 14px;
cursor: pointer;
backdrop-filter: blur(10px);
outline: none;
}
.sort-select option {
background: #1a1a1a;
color: white;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
position: relative;
z-index: 2;
margin-bottom: 60px;
}
.product-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(10px);
position: relative;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
border-color: var(--primary-color);
}
.product-badge {
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
padding: 6px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 600;
z-index: 3;
}
.product-image-container {
position: relative;
height: 250px;
overflow: hidden;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s ease;
}
.product-card:hover .product-image {
transform: scale(1.05);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0.8) 100%);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
opacity: 0;
transition: all 0.4s ease;
}
.product-card:hover .product-overlay {
opacity: 1;
}
.quick-view-btn,
.add-to-cart-btn {
padding: 12px 20px;
background: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.quick-view-btn:hover,
.add-to-cart-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
.product-info {
padding: 25px;
}
.product-category {
color: var(--primary-color);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.product-name {
font-size: 1.4rem;
font-weight: 700;
color: white;
margin-bottom: 10px;
line-height: 1.3;
}
.product-description {
color: var(--text-light);
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
}
.product-features {
display: flex;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.product-feature-item {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.9);
padding: 6px 12px;
border-radius: 15px;
font-size: 12px;
color: #333;
font-weight: 500;
}
.product-feature-item i {
font-size: 14px;
}
.product-rating {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.stars {
display: flex;
gap: 2px;
color: #ffd700;
}
.rating-text {
color: var(--text-light);
font-size: 12px;
}
.product-price {
margin-bottom: 25px;
position: relative;
}
.price-current {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 5px;
}
.price-original {
font-size: 1rem;
color: var(--text-light);
text-decoration: line-through;
margin-bottom: 5px;
}
.discount-badge {
position: absolute;
top: -5px;
left: 0;
background: #ff4444;
color: white;
padding: 4px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
.product-actions {
display: flex;
gap: 10px;
align-items: center;
}
.btn-primary {
flex: 1;
padding: 14px 20px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4);
}
.btn-secondary {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-2px);
}
/* Coming Soon Cards */
.product-card.coming-soon {
opacity: 0.7;
cursor: not-allowed;
}
.coming-soon-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
}
.coming-soon-content {
text-align: center;
color: #1a1a1a;
}
.coming-soon-content i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 15px;
}
.coming-soon-content h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.coming-soon-content p {
font-size: 1rem;
color: var(--text-light);
}
.placeholder-image {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
}
.placeholder-image i {
font-size: 4rem;
opacity: 0.5;
}
.shop-footer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
flex-wrap: wrap;
gap: 20px;
}
.pagination {
display: flex;
align-items: center;
gap: 10px;
}
.page-btn {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.page-btn:hover:not(.disabled) {
background: var(--primary-color);
border-color: var(--primary-color);
}
.page-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.page-numbers {
display: flex;
gap: 5px;
}
.page-number {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
backdrop-filter: blur(10px);
}
.page-number:hover,
.page-number.active {
background: var(--primary-color);
border-color: var(--primary-color);
}
.products-count {
color: var(--text-light);
font-size: 14px;
}
/* Why Choose Us Section */
.why-choose-section {
padding: 100px 0;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
position: relative;
overflow: hidden;
}
.section-header {
text-align: center;
margin-bottom: 60px;
margin-top: 240px !important;
}
.section-title {
font-size: 3rem;
font-weight: 800;
color: white;
margin-bottom: 20px;
}
.section-description {
font-size: 1.2rem;
color: var(--text-light);
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.feature-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
}
.feature-card:hover {
transform: translateY(-10px);
border-color: var(--primary-color);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
color: white;
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.feature-description {
color: var(--text-light);
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 1200px) {
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.shop-hero-stats {
gap: 40px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.shop-hero-section {
padding: 80px 0;
margin-top: 60px;
}
.shop-hero-title {
font-size: 2.5rem;
}
.shop-hero-stats {
flex-direction: column;
gap: 30px;
}
.shop-section {
padding: 0;
margin: 0;
}
.shop-title {
font-size: 2.5rem;
}
.shop-filters {
flex-direction: column;
align-items: stretch;
}
.filter-group {
justify-content: center;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.shop-footer {
flex-direction: column;
text-align: center;
}
.section-title {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media (max-width: 480px) {
.shop-hero-title {
font-size: 2rem;
}
.product-card {
margin: 0 10px;
}
.product-actions {
flex-direction: column;
}
.btn-secondary {
width: 100%;
border-radius: 25px;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* CTA Graphic Styles */
.cta-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
z-index: 3;
}
.center-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: linear-gradient(135deg, #27ae60, #2ecc71);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgba(39, 174, 96, 0.6);
animation: center-pulse 3s ease-in-out infinite;
}
.center-icon i {
font-size: 24px;
color: white;
}
.center-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border: 2px solid rgba(39, 174, 96, 0.3);
border-radius: 50%;
animation: pulse-expand 2s ease-out infinite;
}
.center-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
z-index: 1;
}
.ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid rgba(39, 174, 96, 0.2);
border-radius: 50%;
animation: ring-expand 4s ease-out infinite;
}
.ring.ring-1 {
width: 100px;
height: 100px;
animation-delay: 0s;
}
.ring.ring-2 {
width: 140px;
height: 140px;
animation-delay: 1s;
}
.ring.ring-3 {
width: 180px;
height: 180px;
animation-delay: 2s;
}
.ring.ring-4 {
width: 220px;
height: 220px;
animation-delay: 3s;
}
.center-particles {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
z-index: 2;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #e74c3c;
border-radius: 50%;
animation: particle-float 6s ease-in-out infinite;
}
.particle.particle-1 {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.particle.particle-2 {
top: 30%;
right: 20%;
animation-delay: 1s;
}
.particle.particle-3 {
bottom: 30%;
left: 15%;
animation-delay: 2s;
}
.particle.particle-4 {
bottom: 20%;
right: 25%;
animation-delay: 3s;
}
.particle.particle-5 {
top: 50%;
left: 5%;
animation-delay: 4s;
}
.particle.particle-6 {
top: 60%;
right: 10%;
animation-delay: 5s;
}
.cta-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.cta-element {
position: absolute;
width: 45px;
height: 45px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
animation: element-smooth-orbit 90s ease-in-out infinite;
}
.cta-element i {
font-size: 18px;
color: white;
z-index: 2;
}
.element-glow {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: radial-gradient(circle, rgba(52, 152, 219, 0.3), transparent);
border-radius: 50%;
animation: glow-pulse 2s ease-in-out infinite;
}
.element-trail {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px solid rgba(52, 152, 219, 0.2);
border-radius: 50%;
animation: trail-rotate 3s linear infinite;
}
.cta-element.element-1 {
top: 15%;
left: 20%;
background: linear-gradient(135deg, #f39c12, #e67e22);
box-shadow: 0 0 20px rgba(243, 156, 18, 0.5);
animation-delay: 0s;
animation-name: element-smooth-orbit-1;
}
.cta-element.element-3 {
bottom: 35%;
left: 10%;
background: linear-gradient(135deg, #e91e63, #c2185b);
box-shadow: 0 0 20px rgba(233, 30, 99, 0.5);
animation-delay: 2s;
animation-name: element-smooth-orbit-3;
}
.cta-element.element-4 {
bottom: 25%;
right: 20%;
background: linear-gradient(135deg, #3498db, #2980b9);
box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
animation-delay: 4s;
animation-name: element-smooth-orbit-4;
}
.cta-element.element-5 {
top: 55%;
left: 5%;
background: linear-gradient(135deg, #9b59b6, #8e44ad);
box-shadow: 0 0 20px rgba(155, 89, 182, 0.5);
animation-delay: 6s;
animation-name: element-smooth-orbit-5;
}
.cta-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.pattern-dot {
position: absolute;
width: 3px;
height: 3px;
background: rgba(155, 89, 182, 0.4);
border-radius: 50%;
animation: dot-pulse 3s ease-in-out infinite;
}
.pattern-dot.dot-1 {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.pattern-dot.dot-2 {
top: 30%;
right: 20%;
animation-delay: 0.5s;
}
.pattern-dot.dot-3 {
bottom: 40%;
left: 25%;
animation-delay: 1s;
}
.pattern-dot.dot-4 {
bottom: 30%;
right: 15%;
animation-delay: 1.5s;
}
.pattern-dot.dot-5 {
top: 60%;
left: 10%;
animation-delay: 2s;
}
.pattern-dot.dot-6 {
top: 70%;
right: 25%;
animation-delay: 2.5s;
}
.pattern-dot.dot-7 {
bottom: 15%;
left: 40%;
animation-delay: 3s;
}
.pattern-dot.dot-8 {
top: 40%;
right: 5%;
animation-delay: 3.5s;
}
.pattern-dot.dot-9 {
top: 10%;
left: 50%;
animation-delay: 4s;
}
.pattern-dot.dot-10 {
bottom: 10%;
right: 40%;
animation-delay: 4.5s;
}
.cta-connections {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.connection-line {
position: absolute;
background: linear-gradient(90deg, rgba(155, 89, 182, 0.3), transparent);
height: 1px;
animation: connection-flow 3s ease-in-out infinite;
}
.connection-line.line-1 {
top: 25%;
left: 20%;
width: 60%;
animation-delay: 0s;
}
.connection-line.line-2 {
top: 45%;
left: 15%;
width: 70%;
animation-delay: 1s;
}
.connection-line.line-3 {
top: 65%;
left: 25%;
width: 50%;
animation-delay: 2s;
}
.connection-line.line-4 {
top: 35%;
right: 20%;
width: 40%;
animation-delay: 0.5s;
}
.connection-line.line-5 {
top: 55%;
right: 15%;
width: 55%;
animation-delay: 1.5s;
}
.connection-line.line-6 {
top: 75%;
right: 25%;
width: 35%;
animation-delay: 2.5s;
}
.cta-waves {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
z-index: 0;
}
.wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid rgba(155, 89, 182, 0.1);
border-radius: 50%;
animation: wave-flow 6s ease-out infinite;
}
.wave.wave-1 {
width: 200px;
height: 200px;
animation-delay: 0s;
}
.wave.wave-2 {
width: 300px;
height: 300px;
animation-delay: 2s;
}
.wave.wave-3 {
width: 400px;
height: 400px;
animation-delay: 4s;
}
/* CTA Animations */
@keyframes center-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes pulse-expand {
0% {
width: 60px;
height: 60px;
opacity: 1;
}
100% {
width: 120px;
height: 120px;
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@keyframes ring-expand {
0% {
width: 50px;
height: 50px;
opacity: 1;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
@keyframes element-smooth-orbit-5 {
0% {
transform: translate(0px, 0px) rotate(0deg) scale(1);
opacity: 0.8;
}
25% {
transform: translate(-15px, -30px) rotate(90deg) scale(1.05);
opacity: 0.9;
}
50% {
transform: translate(-30px, 0px) rotate(180deg) scale(1.1);
opacity: 1;
}
75% {
transform: translate(-15px, 30px) rotate(270deg) scale(1.05);
opacity: 0.9;
}
100% {
transform: translate(0px, 0px) rotate(360deg) scale(1);
opacity: 0.8;
}
}
@keyframes glow-pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1); }
}
@keyframes trail-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes dot-pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.5); }
}
@keyframes connection-flow {
0%, 100% { opacity: 0.2; transform: scaleX(1); }
50% { opacity: 0.8; transform: scaleX(1.1); }
}
@keyframes wave-flow {
0% {
width: 100px;
height: 100px;
opacity: 1;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
/* Simple Video Container */
.video-container {
position: relative;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* ===================================
VIDEO CONTAINER FIX
=================================== */
.video-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border-radius: 20px;
object-fit: cover;
}
#videoCover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #464646;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
#videoCover:hover {
background: #555555;
}
#videoCover button {
background: #ff7e5f;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
#videoCover button:hover {
transform: scale(1.1);
background: #ff8c42;
}
/* ===================================
BACK TO TOP BUTTON FIX
=================================== */
.back-to-top {
position: fixed !important;
bottom: 30px !important;
left: 30px !important;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
transition: all 0.3s ease;
opacity: 0;
pointer-events: none;
z-index: 99999 !important;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.6);
}
.back-to-top svg {
width: 24px;
height: 24px;
}
/* Responsive */
@media (max-width: 768px) {
.back-to-top {
bottom: 20px !important;
left: 20px !important;
width: 45px;
height: 45px;
}
.video-container {
max-width: 100%;
}
}
/* Footer Enamad - Responsive */
.footer-enamad,
.footer-enamad a,
.footer-enamad img {
max-width: 120px;
max-height: 120px;
width: 120px;
height: auto;
}
@media (max-width: 768px) {
.footer-enamad,
.footer-enamad a,
.footer-enamad img {
max-width: 100px;
max-height: 100px;
width: 100px;
height: auto;
}
}
/* Video Container Fix - IMPORTANT */
.video-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding-top: 28.125%; /* نصف ارتفاع = 16:9 تقسیم بر 2 */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border-radius: 20px;
object-fit: cover;
}
#videoCover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #464646;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}
#videoCover button {
background: #ff7e5f;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
#videoCover button:hover {
transform: scale(1.1);
background: #ff8c42;
}
/* Responsive */
@media (max-width: 768px) {
.video-container {
padding-top: 56.25%; /* در موبایل نسبت عادی */
}
}
/* ================================================================
RESPONSIVE DESIGN - طراحی واکنشگرا کامل
================================================================ */
/* پیشفرضهای Header */
.main-header {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
padding: 15px 0;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.header-logo a {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-img {
width: 120px;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
.logo-img:hover {
transform: scale(1.05);
filter: brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(1352%) hue-rotate(346deg) brightness(119%) contrast(119%);
}
/* Desktop Navigation */
.desktop-nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav-menu {
list-style: none;
display: flex;
gap: 30px;
margin: 0;
padding: 0;
}
.nav-menu a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 500;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.3s ease;
}
.nav-menu a:hover,
.nav-menu a.active {
background: var(--primary-color);
color: #fff;
}
/* Header Actions */
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
.phone-btn {
display: flex;
align-items: center;
gap: 8px;
background: var(--primary-color);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.phone-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.phone-btn i {
font-size: 16px;
}
/* Mobile Menu Toggle - Hamburger Menu */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
padding: 8px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
transition: all 0.3s ease;
}
.mobile-menu-toggle span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin: 3px 0;
transition: all 0.3s ease;
border-radius: 2px;
}
.mobile-menu-toggle:hover span {
background: var(--primary-color);
}
/* Hamburger animation when active */
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Mobile Navigation */
.mobile-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border-top: 2px solid var(--primary-color);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 999;
transform: translateY(-100%);
opacity: 0;
transition: all 0.3s ease;
}
.mobile-nav.show {
display: block;
transform: translateY(0);
opacity: 1;
}
.mobile-nav.hidden {
display: none !important;
}
.mobile-nav-menu {
list-style: none;
padding: 20px 0;
margin: 0;
}
.mobile-nav-menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav-menu a {
display: block;
padding: 15px 30px;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.mobile-nav-menu a:hover,
.mobile-nav-menu a.active {
background: rgba(255, 107, 53, 0.1);
color: var(--primary-color);
padding-right: 40px;
}
.mobile-nav-menu a::before {
content: '';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid var(--primary-color);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
opacity: 0;
transition: all 0.3s ease;
}
.mobile-nav-menu a:hover::before,
.mobile-nav-menu a.active::before {
opacity: 1;
}
/* ================================================================
TABLET - 768px to 1024px
================================================================ */
@media screen and (max-width: 1024px) {
.header-container {
padding: 0 15px;
gap: 15px;
}
.logo-img {
width: 100px;
}
.nav-menu {
gap: 20px;
}
.nav-menu a {
font-size: 15px;
padding: 8px 12px;
}
.phone-text {
display: none;
}
.phone-btn {
padding: 10px 15px;
}
}
/* ================================================================
MOBILE - 768px و پایینتر
================================================================ */
@media screen and (max-width: 768px) {
/* Top Bar Mobile Styles */
.top-bar {
padding: 0.1rem 0;
font-size: 0.85rem;
}
.top-bar-container {
padding: 0.3rem 0.5rem 0 0.5rem;
/* حفظ چیدمان افقی قبلی */
}
.top-bar-left,
.top-bar-right {
gap: 25px;
/* حفظ justify-content: space-between */
}
.top-bar-item {
gap: 0.5rem;
font-size: 0.9rem;
}
.top-bar-item .icon {
width: 1rem;
height: 1rem;
}
.support-icon {
width: 1.2rem;
height: 1.2rem;
}
/* Force mobile styles with stronger selectors */
.slogan-text {
font-size: 2.6rem !important;
padding: 30px 25px !important;
line-height: 1.6 !important;
font-weight: 700 !important;
text-align: center !important;
animation: mobile-slogan-glow 5s ease-in-out infinite alternate,
mobile-slogan-bounce 6s ease-in-out infinite,
mobile-slogan-shimmer 10s linear infinite,
mobile-slogan-float 8s ease-in-out infinite,
mobile-slogan-pulse 4s ease-in-out infinite !important;
background: linear-gradient(45deg, #FF6B35, #FF9673, #FF8D67, #FF6B35, #FFB366) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
letter-spacing: 1.5px !important;
text-shadow: 0 0 25px rgba(255, 107, 53, 0.7) !important;
display: block !important;
max-width: 320px !important;
margin: 0 auto !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.3)) !important;
}
.features-track {
animation-duration: 120s !important;
animation-timing-function: linear !important;
}
.scrolling-features {
margin-top: 4rem !important;
padding: 3rem 0 !important;
}
/* Header */
.main-header {
padding: 10px 0;
}
.header-container {
padding: 0 15px;
gap: 10px;
}
.logo-img {
width: 80px;
height: auto;
}
/* مخفی کردن منوی دسکتاپ */
.desktop-nav {
display: none !important;
}
/* نمایش دکمه منوی موبایل */
.mobile-menu-toggle {
display: flex !important;
align-items: center;
justify-content: center;
}
/* نمایش منوی موبایل */
.mobile-nav {
display: block;
}
.phone-text {
display: none;
}
.phone-btn {
padding: 8px 10px;
font-size: 14px;
}
.phone-btn i {
font-size: 18px;
}
/* Container */
.container {
padding: 0 15px !important;
max-width: 100% !important;
}
/* Typography - متنها */
h1 {
font-size: 1.5rem !important;
line-height: 1.6 !important;
}
h2 {
font-size: 1.3rem !important;
line-height: 1.6 !important;
}
h3 {
font-size: 1.1rem !important;
line-height: 1.6 !important;
}
p {
font-size: 0.9rem !important;
line-height: 1.7 !important;
}
/* Video Section */
.video-showcase {
padding: 30px 0;
}
.video-title {
font-size: 1.4rem !important;
margin-bottom: 20px;
text-align: center;
}
.video-container {
max-width: 100%;
margin: 0 auto;
}
#myVideo {
width: 100% !important;
max-height: 250px !important;
object-fit: cover;
border-radius: 15px;
}
.video-controls {
bottom: 15px;
right: 15px;
}
.video-btn {
width: 45px !important;
height: 45px !important;
font-size: 18px !important;
}
/* Slogan */
.slogan-section {
padding: 30px 0;
animation: mobile-slogan-pulse 4s ease-in-out infinite !important;
}
.slogan-section {
animation: mobile-slogan-pulse 4s ease-in-out infinite !important;
}
.slogan-text {
font-size: 2.1rem !important;
padding: 20px 15px !important;
line-height: 1.6 !important;
text-align: center !important;
animation: mobile-slogan-glow 5s ease-in-out infinite alternate,
mobile-slogan-bounce 6s ease-in-out infinite,
mobile-slogan-shimmer 10s linear infinite,
mobile-slogan-float 8s ease-in-out infinite,
mobile-slogan-pulse 4s ease-in-out infinite !important;
background: linear-gradient(45deg, #FF6B35, #FF9673, #FF8D67, #FF6B35, #FFB366) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
letter-spacing: 1.2px !important;
text-shadow: 0 0 22px rgba(255, 107, 53, 0.6) !important;
display: block !important;
max-width: 300px !important;
margin: 0 auto !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.3)) !important;
}
/* Features Scrolling */
.features-container {
margin: 30px 0;
overflow: hidden;
}
.feature-item {
padding: 8px 15px !important;
font-size: 13px !important;
min-width: 110px !important;
}
/* Product Showcase */
.product-showcase {
padding: 40px 0;
}
.showcase-content {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.product-image {
width: 100% !important;
order: 1 !important;
margin-bottom: 20px !important;
}
.product-info {
width: 100% !important;
order: 2 !important;
}
.product-title {
font-size: 1.3rem !important;
line-height: 1.6 !important;
margin-bottom: 20px;
text-align: center;
}
.product-description {
font-size: 0.9rem !important;
line-height: 1.8 !important;
text-align: justify;
margin-bottom: 25px;
}
.product-buttons {
flex-direction: column !important;
gap: 15px !important;
width: 100%;
}
.hero-primary-btn,
.hero-secondary-btn {
width: 100% !important;
padding: 14px 20px !important;
font-size: 15px !important;
text-align: center;
justify-content: center;
}
.device-main-image {
max-width: 100% !important;
height: auto !important;
}
/* Technical Features Section */
.interactive-technical-features {
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.section-title {
font-size: 1.4rem !important;
margin-bottom: 30px;
text-align: center;
}
.technical-features-container {
flex-direction: column !important;
gap: 20px !important;
}
.technical-feature-buttons {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
width: 100% !important;
margin-bottom: 20px;
}
.tech-btn {
padding: 12px 10px !important;
font-size: 13px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-height: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.tech-btn i {
font-size: 18px !important;
margin-left: 0 !important;
margin-bottom: 5px;
}
.technical-feature-detail {
width: 100% !important;
padding: 20px 15px !important;
min-height: auto;
}
.technical-feature-content {
flex-direction: column !important;
gap: 20px !important;
padding: 0.2rem !important;
}
.technical-feature-graphic {
width: 100% !important;
height: 120px !important;
margin-bottom: 5px !important;
margin-top: 5px !important;
transform: scale(0.7) !important;
}
.technical-feature-text {
width: 100% !important;
margin: 0 !important;
}
.technical-feature-text h3 {
font-size: 1.2rem !important;
margin-bottom: 15px;
text-align: center;
}
.technical-feature-text p {
font-size: 0.9rem !important;
line-height: 1.8 !important;
text-align: justify;
}
.technical-feature-tags {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.tech-tag {
font-size: 12px !important;
padding: 6px 12px !important;
}
/* Applications Section */
.applications-section {
padding: 40px 0;
}
.app-feature-buttons {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.app-feature-btn {
padding: 12px 10px !important;
font-size: 13px !important;
min-height: 50px;
}
.application-feature-detail {
padding: 20px 15px !important;
}
.application-feature-content {
flex-direction: column !important;
gap: 20px !important;
}
.application-feature-icon {
width: 100% !important;
height: 150px !important;
}
.application-feature-text {
width: 100% !important;
}
/* Gallery */
.gallery-section {
padding: 40px 0;
}
.gallery-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
gap: 15px !important;
height: auto !important;
}
.gallery-item {
grid-column: span 1 !important;
grid-row: span 1 !important;
height: 250px !important;
}
.gallery-item.large,
.gallery-item.medium,
.gallery-item.small {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.gallery-overlay h3,
.gallery-overlay h4 {
font-size: 1.1rem !important;
}
.gallery-overlay p {
font-size: 0.85rem !important;
}
/* Product Cards */
.products-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.product-card {
margin-bottom: 20px;
}
.product-image-container {
height: 250px !important;
}
.product-info {
padding: 20px !important;
}
.product-name {
font-size: 1.1rem !important;
margin-bottom: 15px !important;
}
.product-price {
margin-bottom: 15px;
}
.price-amount {
font-size: 1.1rem !important;
}
.btn-primary {
padding: 12px 20px !important;
font-size: 14px !important;
}
/* Footer */
footer {
padding: 40px 0 20px;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 20px;
text-align: initial;
}
.footer-section h3 {
font-size: 1.2rem !important;
margin-bottom: 15px;
}
.footer-section p,
.footer-section a {
font-size: 0.9rem !important;
}
.social-links {
justify-content: center !important;
}
.footer-bottom {
flex-direction: column !important;
gap: 15px !important;
text-align: center;
padding-top: 20px;
}
}
/* ================================================================
MOBILE SMALL - 480px و پایینتر
================================================================ */
@media screen and (max-width: 480px) {
/* Top Bar Small Mobile Styles */
.top-bar {
padding: 0.05rem 0;
font-size: 0.75rem;
}
.top-bar-container {
padding: 0.2rem 0.3rem 0 0.3rem;
/* حفظ چیدمان افقی قبلی */
}
.top-bar-left,
.top-bar-right {
gap: 15px;
/* حفظ justify-content: space-between */
}
.top-bar-item {
gap: 0.3rem;
font-size: 0.7rem;
}
.top-bar-item .icon {
width: 0.9rem;
height: 0.9rem;
}
.support-icon {
width: 1rem;
height: 1rem;
}
.header-container {
padding: 0 10px;
gap: 8px;
}
.logo-img {
width: 70px !important;
}
.mobile-menu-toggle {
width: 35px;
height: 35px;
}
.mobile-menu-toggle span {
width: 20px;
height: 2px;
}
.phone-btn {
padding: 6px 8px;
font-size: 12px;
}
.phone-btn i {
font-size: 16px;
}
h1 {
font-size: 1.3rem !important;
}
h2 {
font-size: 1.2rem !important;
}
h3 {
font-size: 1rem !important;
}
p {
font-size: 0.85rem !important;
}
#myVideo {
max-height: 200px !important;
}
.slogan-section {
animation: mobile-slogan-pulse 4s ease-in-out infinite !important;
}
.slogan-text {
font-size: 1.8rem !important;
padding: 15px 10px !important;
line-height: 1.5 !important;
text-align: center !important;
animation: mobile-slogan-glow 5s ease-in-out infinite alternate,
mobile-slogan-bounce 6s ease-in-out infinite,
mobile-slogan-shimmer 10s linear infinite,
mobile-slogan-float 8s ease-in-out infinite,
mobile-slogan-pulse 4s ease-in-out infinite !important;
background: linear-gradient(45deg, #FF6B35, #FF9673, #FF8D67, #FF6B35, #FFB366) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
letter-spacing: 1px !important;
text-shadow: 0 0 20px rgba(255, 107, 53, 0.5) !important;
display: block !important;
max-width: 280px !important;
margin: 0 auto !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3)) !important;
}
.feature-item {
font-size: 12px !important;
padding: 6px 12px !important;
min-width: 100px !important;
}
.product-title {
font-size: 1.2rem !important;
}
.product-description {
font-size: 0.85rem !important;
}
.hero-primary-btn,
.hero-secondary-btn {
padding: 12px 15px !important;
font-size: 14px !important;
}
.technical-feature-buttons,
.app-feature-buttons {
grid-template-columns: 1fr !important;
}
.tech-btn,
.app-feature-btn {
font-size: 14px !important;
padding: 15px 12px !important;
}
.section-title {
font-size: 1.2rem !important;
}
.gallery-item {
height: 200px !important;
}
.phone-btn {
padding: 8px 10px;
}
}
/* ================================================================
TABLET LANDSCAPE - 1024px
================================================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.showcase-content {
gap: 30px;
}
.product-title {
font-size: 1.8rem !important;
}
.technical-feature-buttons,
.app-feature-buttons {
grid-template-columns: repeat(3, 1fr) !important;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.gallery-item.large {
grid-column: span 2 !important;
}
.products-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Hide desktop logo on mobile */
@media (max-width: 1023px) {
.logo-desktop {
display: none !important;
}
.nav .logo-desktop {
display: none !important;
}
}
/* Mobile Menu Styles */
#mobile-menu.mobile-menu,
#mobile-menu.mobile-menu.hidden {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) translateY(-100%) !important;
width: 90% !important;
max-width: 350px !important;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%) !important;
border: 1px solid rgba(255, 107, 53, 0.3) !important;
border-radius: 12px !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
z-index: 999 !important;
opacity: 0 !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(10px) !important;
direction: rtl !important;
text-align: right !important;
}
#mobile-menu.mobile-menu.show {
display: block !important;
transform: translateX(-50%) translateY(10px) !important;
opacity: 1 !important;
}
#mobile-menu .mobile-menu-content a {
display: flex !important;
padding: 8px 20px 8px 15px !important;
color: #fff !important;
text-decoration: none !important;
font-size: 15px !important;
font-weight: 500 !important;
position: relative !important;
margin: 0 !important;
border-radius: 0 !important;
background: none !important;
border: none !important;
min-height: auto !important;
align-items: center !important;
text-indent: 20px !important;
}
#mobile-menu .mobile-menu-content a::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 10% !important;
width: 80% !important;
height: 2px !important;
background: linear-gradient(90deg, #ff6b35, #f7931e, #ff6b35) !important;
border-radius: 1px !important;
}
#mobile-menu .mobile-auth {
display: flex !important;
gap: 8px !important;
padding: 15px 20px !important;
margin: 0 !important;
background: none !important;
border-radius: 0 !important;
border: none !important;
}
/* Mobile Slogan Animation Keyframes */
@keyframes mobile-slogan-glow {
0% {
text-shadow: 0 0 20px rgba(255, 107, 53, 0.5), 0 0 30px rgba(255, 107, 53, 0.3);
filter: brightness(1) hue-rotate(0deg);
}
50% {
text-shadow: 0 0 35px rgba(255, 107, 53, 0.8), 0 0 50px rgba(255, 107, 53, 0.5), 0 0 70px rgba(255, 107, 53, 0.2);
filter: brightness(1.2) hue-rotate(10deg);
}
100% {
text-shadow: 0 0 25px rgba(255, 107, 53, 0.6), 0 0 40px rgba(255, 107, 53, 0.4);
filter: brightness(1.1) hue-rotate(0deg);
}
}
@keyframes mobile-slogan-bounce {
0%, 100% {
transform: translateY(0) scale(1) rotate(0deg);
}
25% {
transform: translateY(-4px) scale(1.03) rotate(0.5deg);
}
50% {
transform: translateY(-8px) scale(1.06) rotate(0deg);
}
75% {
transform: translateY(-4px) scale(1.03) rotate(-0.5deg);
}
}
@keyframes mobile-slogan-shimmer {
0% {
background-position: 0% 50%;
filter: saturate(1);
}
25% {
background-position: 25% 25%;
filter: saturate(1.2);
}
50% {
background-position: 100% 50%;
filter: saturate(1.5);
}
75% {
background-position: 75% 75%;
filter: saturate(1.2);
}
100% {
background-position: 0% 50%;
filter: saturate(1);
}
}
@keyframes mobile-slogan-float {
0%, 100% {
transform: translateY(0) rotateX(0deg);
filter: blur(0px);
}
33% {
transform: translateY(-2px) rotateX(2deg);
filter: blur(0.5px);
}
66% {
transform: translateY(2px) rotateX(-2deg);
filter: blur(0.3px);
}
}
@keyframes mobile-slogan-pulse {
0%, 100% {
transform: scale(1);
}
20% {
transform: scale(1.01);
}
40% {
transform: scale(1.03);
}
60% {
transform: scale(1.02);
}
80% {
transform: scale(1.01);
}
}