/* Consolidated fonts moved to HTML */
/* =============================== */
/* GLOBAL STYLES */
/* =============================== */
/* --- General Styles & Reset --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Screen reader only - visually hidden but accessible to search engines and screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body {
font-family: "Poppins", sans-serif;
line-height: 1.6;
background-color: #ffffff;
color: #e0e0e0;
}
.container {
max-width: 1280px;
width: 95%;
margin: 0 auto;
padding: 0 20px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
/* --- Header --- */
/* =============================== */
/* HEADER STYLES (Stacked Logo Layout) */
/* =============================== */
/* --- Font Usage: Poppins (Body), Chakra Petch (Nav/CTA), Inter/Oswald (Special Sections) --- */
/* =============================== */
/* HEADER STYLES (Final Notch Layout) */
/* =============================== */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: transparent;
z-index: 1000;
padding: 15px 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
header .container {
max-width: 100%;
width: 100%;
padding: 0 40px;
}
header.header-hidden {
transform: translateY(-100%);
opacity: 0;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
/* --- Left Side: Social Icons --- */
.header-socials {
display: flex;
gap: 8px;
}
.header-socials .social-link {
width: 40px;
height: 40px;
background-color: #00d4ff;
border: 1px solid #00d4ff;
color: #1a2332;
font-size: 16px;
transition: all 0.3s ease;
}
.header-socials .social-link:hover {
background-color: #ffffff;
color: #1a2332;
transform: translateY(-2px);
}
/* --- Mobile-Only Logo --- */
.mobile-logo-link {
display: none;
/* Hidden on desktop */
text-decoration: none;
}
/* --- Centerpiece: Split Nav & Stacked Logo --- */
.main-navigation-split {
display: flex;
align-items: center;
gap: 30px;
flex-grow: 1;
justify-content: center;
}
.nav-left,
.nav-right {
display: flex;
gap: 30px;
list-style: none;
padding: 0;
margin: 0;
}
.nav-left a,
.nav-right a {
font-family: "Chakra Petch", sans-serif;
color: #ffffff;
text-decoration: none;
font-weight: 500;
font-size: 16px;
transition: color 0.3s ease;
position: relative;
letter-spacing: 0.5px;
}
.nav-left a.active,
.nav-right a.active,
.nav-left a:hover,
.nav-right a:hover {
color: #00d4ff;
}
.nav-left a.active::after,
.nav-right a.active::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: #00d4ff;
}
.logo-section-link-center {
text-decoration: none;
}
.logo-section {
display: flex;
align-items: center;
gap: 12px;
}
.logo-section.vertical-logo {
flex-direction: column;
gap: 8px;
}
.logo-icon {
width: 50px;
height: 50px;
background: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-image {
height: 45px;
width: auto;
}
.logo-text-wrapper {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.logo-text-main {
font-family: "Poppins", sans-serif;
color: white;
font-size: 26px;
font-weight: 700;
}
.logo-text-sub {
font-family: "Poppins", sans-serif;
color: #a0a0a0;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
/* --- Right Side: CTA & Hamburger --- */
.header-right-side {
display: flex;
align-items: center;
gap: 20px;
}
.header-cta-btn {
background-color: #00d4ff;
color: #1a2332;
padding: 10px 24px;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
font-family: "Chakra Petch", sans-serif;
}
.header-cta-btn:hover {
background-color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}
/* --- Mobile Menu & Hamburger --- */
.menu-toggle {
display: none;
z-index: 1001;
}
.mobile-nav-container {
display: none;
}
.nav-menu {
/* Main mobile menu container styles are in the media query */
}
/* --- Responsive Breakdowns --- */
@media (max-width: 1200px) {
.main-navigation-split,
.nav-left,
.nav-right {
gap: 20px;
}
}
@media (max-width: 1024px) {
/* --- HIDE ALL DESKTOP ELEMENTS --- */
.header-socials,
/* This now correctly hides the social icons from the header bar */
.main-navigation-split,
.header-cta-btn:not(.mobile-cta) {
display: none !important;
}
/* --- HEADER BAR LAYOUT --- */
header .container {
width: 100%;
/* IMPORTANT: Make container full width */
padding: 0;
/* Remove all padding from the container */
max-width: 100%;
}
/* AFTER EDITING */
.header-content {
display: flex !important;
align-items: center !important;
width: 100%;
}
/* ADD THE NEW LINE */
.mobile-logo-link {
display: flex !important;
align-items: center;
text-decoration: none;
padding-left: 20px;
margin-right: auto;
/* This is the key -> it pushes the hamburger to the far right */
}
/* --- Right Side: CTA & Hamburger --- */
.header-right-side {
padding-right: 20px;
/* Add padding here to push hamburger from the right edge */
}
/* --- HAMBURGER ICON (Far Right, Cleaned Style) --- */
.menu-toggle {
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 8px;
z-index: 1001;
background: none;
/* Removes default button background */
border: none;
/* Removes default button border */
}
.hamburger-lines {
display: flex;
flex-direction: column;
gap: 4px;
/* Adjusted for a cleaner look */
}
.hamburger-lines span {
width: 25px;
height: 3px;
background: #fff;
display: block;
transition: all 0.3s ease;
}
/* --- Hamburger Icon Animation --- */
/* This rotates the top bar and moves it down */
.menu-toggle.active .hamburger-lines span:first-child {
transform: translateY(7px) rotate(45deg);
}
/* This makes the middle bar disappear */
.menu-toggle.active .hamburger-lines span:nth-child(2) {
opacity: 0;
}
/* This rotates the bottom bar and moves it up */
.menu-toggle.active .hamburger-lines span:last-child {
transform: translateY(-7px) rotate(-45deg);
}
/* --- SLIDE-OUT MENU CONTAINER --- */
.mobile-nav-container {
display: block !important;
}
.nav-menu {
position: fixed;
top: 75px;
left: 0;
width: 100%;
height: calc(100vh - 75px);
background: rgba(10, 26, 46, 0.98);
display: flex;
flex-direction: column;
padding: 20px 0;
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.4s ease-in-out;
z-index: 999;
overflow-y: auto;
text-align: center;
}
.nav-menu.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
/* --- SLIDE-OUT MENU CONTENT --- */
.mobile-menu-header,
.mobile-menu-links,
.mobile-menu-socials,
.nav-menu-footer {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.mobile-menu-links ul {
display: flex;
flex-direction: column;
gap: 10px;
/* Reduced gap between links */
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu-links li a {
font-size: 1.1rem;
/* Reduced font size */
font-weight: 600;
padding: 12px 20px;
/* Reduced padding */
}
/* --- SLIDE-OUT MENU CTA & SOCIALS --- */
.mobile-menu-socials {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
/* Increased gap between CTA and icons */
}
.mobile-menu-socials .mobile-cta {
order: -1;
/* Puts CTA above icons */
}
.mobile-menu-socials .social-links {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: nowrap;
}
}
/* --- Shared: Section Headers --- */
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-title {
font-size: 3rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.1rem;
color: #666;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* --- Shared: Category Cards (Used on both pages) --- */
.category-card {
background: linear-gradient(135deg, #1e5bff 0%, #4285f4 100%);
border-radius: 15px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
padding: 30px;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(30, 91, 255, 0.3);
}
.category-icon {
font-size: 3rem;
margin-bottom: 20px;
opacity: 0.9;
transition: opacity 0.4s ease;
}
.category-title {
font-size: 1.4rem;
font-weight: 600;
margin: 0;
transition: opacity 0.4s ease;
}
.category-card:hover .category-icon,
.category-card:hover .category-title {
opacity: 0;
}
.category-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: contain;
/* <-- THIS IS THE FIX */
background-repeat: no-repeat;
/* <-- ADD THIS LINE */
background-position: center;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
padding: 30px;
}
.category-card:hover .category-overlay {
opacity: 1;
}
.overlay-content {
text-align: center;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.category-card:hover .overlay-content {
transform: translateY(0);
}
.overlay-content h4 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
color: white;
}
.overlay-content p {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 25px;
color: rgba(255, 255, 255, 0.9);
}
.view-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.view-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateX(5px);
}
.view-btn i {
transition: transform 0.3s ease;
}
.view-btn:hover i {
transform: translateX(3px);
}
/* --- Shared: Animations --- */
.animate-on-scroll {
opacity: 0;
transform: translateY(40px);
transition: all 0.7s ease;
}
.is-visible {
opacity: 1 !important;
transform: none !important;
}
.section-title.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.section-subtitle.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease 0.2s;
}
@keyframes cardFloat {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-3px) scale(1);
}
}
/* --- Shared: Footer --- */
.footer-main {
background-color: rgba(10, 26, 46, 0.95);
color: white;
padding: 60px 0 40px 0;
position: relative;
overflow: hidden;
}
.footer-main::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%),
radial-gradient(circle at 80% 20%,
rgba(255, 255, 255, 0.08) 0%,
transparent 50%);
pointer-events: none;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 60px;
align-items: start;
}
.footer-brand {
max-width: 350px;
}
.footer-logo-container {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.footer-logo-img {
width: 40px;
height: 40px;
border-radius: 8px;
flex-shrink: 0;
}
.footer-logo {
font-size: 28px;
font-weight: 700;
color: white;
text-decoration: none;
position: relative;
margin-bottom: 0;
display: inline-block;
}
/* .footer-logo::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, #008000, #4ecdc4);
border-radius: 2px;
} */
.footer-description {
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
font-size: 14px;
margin-bottom: 0;
}
.footer-section h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 25px;
color: white;
position: relative;
}
.footer-section h4::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: #4ecdc4;
border-radius: 1px;
}
.contact-info {
list-style: none;
}
.contact-info li {
margin-bottom: 15px;
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
}
.contact-info li i {
margin-right: 12px;
width: 16px;
color: #4ecdc4;
font-size: 14px;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 10px;
}
.social-link {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.social-link.facebook:hover {
background: #1877f2;
border-color: #1877f2;
}
.social-link.instagram:hover {
background: linear-gradient(45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%);
border-color: #bc1888;
}
.social-link.viber:hover {
background: #665cac;
border-color: #665cac;
}
.social-link.whatsapp:hover {
background: #25d366;
border-color: #25d366;
}
.quick-links {
list-style: none;
padding: 0;
}
.quick-links li {
margin-bottom: 15px;
}
.quick-links li a {
display: flex;
align-items: center;
padding: 5px 0;
}
.quick-links li a i {
margin-right: 10px;
width: 20px;
color: #4ecdc4;
}
.quick-links li a::after {
content: "➜";
font-size: 1.1em;
margin-left: 8px;
opacity: 0;
transition: all 0.3s ease;
transform: translateX(-10px);
}
.quick-links li a:hover::after {
opacity: 1;
transform: translateX(0);
}
.quick-links li a:hover {
color: #4ecdc4;
}
.footer-section .social-links {
margin-top: 20px;
}
.footer-bottom {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.footer-copyright {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
margin-bottom: 8px;
font-weight: bold;
}
.footer-designed {
color: rgba(255, 255, 255, 0.5);
font-size: 15px;
}
.footer-designed a {
color: inherit;
text-decoration: none;
transition: opacity 0s ease;
}
.footer-designed a:hover {
opacity: 0.9;
}
.designer-name {
color: #00d4ff;
font-weight: 500;
}
/* SCROLL TO TOP & PROGRESS BUTTON */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #ffffff;
border-radius: 50%;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 998;
/* Nën headerin por mbi gjithçka tjetër */
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition:
opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s ease;
/* I fshehur si standard */
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.scroll-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top:hover {
background-color: #f4f4f4;
}
.scroll-to-top i {
color: #4285f4;
/* Ngjyra juaj kryesore blu */
font-size: 16px;
line-height: 1;
}
.progress-circle-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
/* E fillon progresin nga lart */
}
.progress-circle-bg {
fill: none;
stroke: #e6e6e6;
/* Ngjyra e sfondit të rrethit */
}
.progress-circle-bar {
fill: none;
stroke: #4285f4;
/* Ngjyra juaj kryesore blu */
stroke-linecap: round;
/* Këto vlera do të menaxhohen nga JavaScript */
stroke-dasharray: 144.5;
/* r=23 -> 2 * pi * 23 = 144.51... */
stroke-dashoffset: 144.5;
transition: stroke-dashoffset 0.1s linear;
}
/* =============================== */
/* GLOBAL BREAKPOINTS */
/* =============================== */
@media (max-width: 992px) {
/* --- Header --- */
#header {
background-color: #121212;
position: sticky;
}
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #1c1c1c;
flex-direction: column;
padding: 1rem 0;
border-top: 1px solid #333;
}
.main-nav.active {
display: flex;
}
.main-nav ul {
flex-direction: column;
align-items: center;
width: 100%;
gap: 0;
}
.main-nav li {
width: 100%;
text-align: center;
}
.main-nav a {
padding: 1rem;
display: block;
width: 100%;
border-bottom: 1px solid #333;
}
.main-nav a.active::after {
display: none;
}
/* --- Shared Sections --- */
.section-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
/* --- Header --- */
/* Find and replace the .nav-menu rule inside @media (max-width: 768px) */
.nav-menu {
position: fixed;
top: 75px;
/* Positions the menu directly below your 75px tall header */
left: 0;
width: 100%;
height: auto !important;
/* Force auto height - overrides any other height rules */
min-height: unset !important;
/* Remove any minimum height constraints */
max-height: 80vh;
/* Limit to 80% of viewport height */
background: rgba(10, 26, 46, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex !important;
flex-direction: column !important;
align-items: center;
justify-content: flex-start !important;
/* Content starts from top */
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 999;
/* Below the header */
padding: 10px 0;
/* Minimal padding - menu starts right at top */
gap: 0;
/* Remove gap to have tighter control */
/* ADDED: These properties make the menu size to its content */
overflow-y: auto;
/* Allows scrolling if content is too tall */
box-sizing: border-box;
}
.nav-menu.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
/* Hide the duplicate header in mobile menu */
.nav-menu.active .mobile-menu-header {
display: none !important;
/* Hide the duplicate "IGMA Electronics" header */
}
/* Make mobile-only elements visible (except header) */
.nav-menu.active .nav-menu-footer,
.nav-menu.active .mobile-menu-socials {
display: block;
width: 100%;
text-align: center;
}
/* Add gap between CTA button and social icons */
.nav-menu .mobile-menu-socials .social-links {
margin-top: 20px;
}
/* REMOVED: margin-top: auto; - This was pushing footer to bottom */
.nav-menu.active .nav-menu-footer {
padding: 20px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0 !important;
/* Force no top margin */
margin-bottom: 0 !important;
/* Force no bottom margin */
}
/* Stack the links vertically - start immediately at top */
.nav-menu .mobile-menu-links ul {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
/* Reduced gap for more compact menu */
padding: 10px 0;
/* Minimal padding */
margin: 0;
list-style: none;
}
.nav-menu .mobile-menu-links li a {
padding: 12px 30px;
/* Reduced padding for more compact look */
display: block;
font-size: 1.3rem;
/* Slightly smaller font */
font-weight: 600;
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
.nav-menu .mobile-menu-links li a:hover {
color: #00d4ff;
/* Updated hover to match the active color */
}
/* This new rule sets the text color for the active link in the mobile menu */
.nav-menu .mobile-menu-links a.active {
color: #00d4ff;
background-color: rgba(0, 212, 255, 0.1);
/* Optional: Adds a subtle background glow */
border-radius: 8px;
}
/* This rule removes the underline from the active link ONLY on mobile */
.nav-menu .mobile-menu-links a.active::after {
display: none;
}
/* Hide the "|" dividers on mobile */
.nav-divider {
display: none;
}
.menu-toggle {
display: block;
}
/* Also add this new hover rule right below it, inside the same media query */
.menu-toggle:hover {
background: rgba(255, 255, 255, 0.2);
}
/* --- Shared Sections --- */
.section-title {
font-size: 2.2rem;
}
.section-subtitle {
font-size: 1rem;
}
.category-card {
padding: 25px;
}
.category-icon {
font-size: 2.5rem;
}
.category-title {
font-size: 1.3rem;
}
/* --- Footer --- */
.footer-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.footer-brand {
max-width: 100%;
}
.footer-logo-container {
justify-content: center;
}
.footer-logo::after {
left: 50%;
transform: translateX(-50%);
}
.footer-section h4::after {
left: 50%;
transform: translateX(-50%);
}
.contact-info {
display: inline-block;
text-align: left;
}
/* Center quick links like contact-info */
.quick-links {
display: inline-block;
text-align: left;
}
.social-links {
justify-content: center;
}
.footer-main {
padding: 40px 0 30px 0;
}
}
@media (max-width: 480px) {
/* --- General --- */
.container {
padding: 0 15px;
}
.logo {
font-size: 1.6rem;
}
/* --- Shared Sections --- */
.section-title {
font-size: 1.8rem;
margin-bottom: 0.8rem;
}
.section-subtitle {
font-size: 0.95rem;
padding: 0 15px;
}
.category-card {
padding: 20px;
}
.category-icon {
font-size: 2.2rem;
margin-bottom: 15px;
}
.category-title {
font-size: 1.2rem;
}
.overlay-content h4 {
font-size: 1.3rem;
margin-bottom: 12px;
}
.overlay-content p {
font-size: 0.9rem;
margin-bottom: 20px;
}
.view-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
/* --- Footer --- */
.footer-container {
padding: 0 15px;
}
.footer-logo {
font-size: 24px;
}
.social-link {
width: 40px;
height: 40px;
font-size: 16px;
}
}
/* =============================== */
/* INDEX.HTML STYLES */
/* =============================== */
.new-hero-container {
--primary-color: #00d4ff;
/* Using your site's blue as primary */
--text-color: #ffffffdd;
background-color: #1a1a1a;
color: var(--text-color);
position: relative;
overflow: hidden;
font-family: "Inter", sans-serif;
width: 100%;
height: 100vh;
/* Make it full screen */
}
.new-hero-container .card {
position: absolute;
left: 0;
top: 0;
background-position: center 10%;
background-size: cover;
box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.6);
}
/* Hide small preview cards (only show fullscreen main card) */
.new-hero-container .card:not([style*="width: 100vw"]) {
opacity: 0 !important;
pointer-events: none;
}
.new-hero-container .card-content {
position: absolute;
left: 0;
top: 0;
color: var(--text-color);
padding-left: 16px;
/* Hide preview card labels */
opacity: 0 !important;
pointer-events: none;
}
.new-hero-container .content-place {
margin-top: 6px;
font-size: 13px;
font-weight: 500;
}
.new-hero-container .content-title-1,
.new-hero-container .content-title-2 {
font-weight: 600;
font-size: 20px;
font-family: "Oswald", sans-serif;
}
.new-hero-container .content-start {
width: 30px;
height: 5px;
border-radius: 99px;
background-color: var(--text-color);
}
.new-hero-container .details {
z-index: 22;
position: absolute;
top: 240px;
left: 60px;
}
.new-hero-container .details .place-box {
height: 46px;
overflow: hidden;
}
.new-hero-container .details .place-box .text {
padding-top: 16px;
font-size: 20px;
}
.new-hero-container .details .place-box .text:before {
top: 0;
left: 0;
position: absolute;
content: "";
width: 30px;
height: 4px;
border-radius: 99px;
background-color: white;
}
.new-hero-container .details .title-1,
.new-hero-container .details .title-2 {
font-weight: 600;
font-size: 72px;
font-family: "Oswald", sans-serif;
}
.new-hero-container .details .title-box-1,
.new-hero-container .details .title-box-2 {
margin-top: 2px;
height: 100px;
overflow: hidden;
}
.new-hero-container .details>.desc {
margin-top: 16px;
width: 500px;
}
.new-hero-container .details>.cta {
width: 500px;
margin-top: 24px;
display: flex;
align-items: center;
}
.new-hero-container .details>.cta>.discover {
border: 1px solid #ffffff;
background-color: transparent;
height: 36px;
border-radius: 99px;
color: #ffffff !important;
/* Force white text */
padding: 0 24px;
/* Adjusted padding */
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
display: grid;
/* Added for centering */
place-items: center;
/* Added for centering */
}
.new-hero-container .details>.cta>.discover:hover {
background-color: #ffffff;
color: #1a1a1a !important;
/* Dark text on hover */
}
/* --- Style for the new primary button --- */
.new-hero-container .details>.cta {
gap: 15px;
/* Adds space between the buttons */
}
.new-hero-container .details>.cta>.discover.primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.new-hero-container .details>.cta>.discover.primary:hover {
background-color: #ffffff;
border-color: #ffffff;
color: #1a1a1a !important;
}
.new-hero-container .pagination {
position: absolute;
left: 0px;
top: 0px;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.new-hero-container .pagination>.arrow {
z-index: 60;
width: 50px;
height: 50px;
border-radius: 999px;
border: 2px solid #ffffff55;
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
}
.new-hero-container .pagination>.arrow:nth-child(2) {
margin-left: 20px;
}
.new-hero-container .pagination>.arrow svg {
width: 24px;
height: 24px;
stroke-width: 2;
color: #ffffff99;
}
.new-hero-container .pagination .progress-sub-container {
margin-left: 24px;
margin-right: 24px;
z-index: 60;
flex: 1;
height: 50px;
display: flex;
align-items: center;
}
.new-hero-container .pagination .progress-sub-background {
width: 100%;
height: 3px;
background-color: #ffffff33;
}
.new-hero-container .pagination .progress-sub-foreground {
height: 3px;
background-color: var(--primary-color);
}
.new-hero-container .pagination .slide-numbers {
width: 50px;
height: 50px;
overflow: hidden;
z-index: 60;
position: relative;
}
.new-hero-container .pagination .slide-numbers .item {
width: 50px;
height: 50px;
position: absolute;
color: white;
top: 0;
left: 0;
display: grid;
place-items: center;
font-size: 32px;
font-weight: bold;
}
/* --- Hero Section --- */
/* .hero-section {
background: linear-gradient(
135deg,
#0a2e1a 0%,
#16213e 25%,
#1a4332 50%,
#0d3d4f 75%,
#1a2332 100%
);
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 80px;
padding-bottom: 100px;
}
.hero-section::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: white;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
z-index: 10;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.circuit-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../images/banner.jpg") !important;
background-size: cover !important;
z-index: 1;
}
.floating-elements {
position: absolute;
width: 100%;
height: 100%;
}
.tech-dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: floatParticle 8s ease-in-out infinite;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.tech-dot:nth-child(1) {
top: 15%;
left: 10%;
animation-delay: 0s;
animation-duration: 10s;
}
.tech-dot:nth-child(2) {
top: 70%;
right: 20%;
animation-delay: 2s;
animation-duration: 12s;
}
.tech-dot:nth-child(3) {
bottom: 25%;
left: 25%;
animation-delay: 4s;
animation-duration: 9s;
}
.tech-dot:nth-child(4) {
top: 35%;
right: 10%;
animation-delay: 6s;
animation-duration: 11s;
}
.tech-dot:nth-child(5) {
top: 80%;
left: 60%;
animation-delay: 1s;
animation-duration: 13s;
}
.tech-dot:nth-child(6) {
top: 50%;
left: 80%;
animation-delay: 3s;
animation-duration: 8s;
}
@keyframes floatParticle {
0%,
100% {
opacity: 0.3;
transform: translateY(0px) translateX(0px) scale(0.8);
}
25% {
opacity: 0.8;
transform: translateY(-20px) translateX(10px) scale(1.2);
}
50% {
opacity: 1;
transform: translateY(-40px) translateX(-15px) scale(1);
}
75% {
opacity: 0.6;
transform: translateY(-10px) translateX(20px) scale(1.1);
}
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.hero-text {
color: white;
}
.hero-subtitle {
color: #00d4ff;
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero-title {
font-size: 64px;
font-weight: 700;
line-height: 1.1;
margin-bottom: 30px;
}
.hero-title .highlight {
color: #00d4ff;
} */
.service-section {
margin-top: 40px;
}
.service-description {
color: #a0a0a0;
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
}
/* .hero-buttons {
display: flex;
gap: 20px;
margin-top: 30px;
}
.hero-btn {
padding: 15px 30px;
border-radius: 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
display: inline-block;
}
.btn-primary {
background: linear-gradient(135deg, #00d4ff, #0099cc);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}
.btn-secondary {
background: transparent;
color: #00d4ff;
border-color: #00d4ff;
}
.btn-secondary:hover {
background: #00d4ff;
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
} */
.logo-container {
position: relative;
width: 400px;
height: 400px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px;
transform: rotate(45deg);
}
.logo-shape {
width: 180px;
height: 180px;
border-radius: 25%;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #00d4ff, #0099cc);
padding: 3px;
transition: all 0.3s ease;
animation: logoFloat 6s ease-in-out infinite;
}
.logo-shape:hover {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
}
.logo-shape img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 25%;
transform: rotate(-45deg) scale(1.4);
transition: transform 0.3s ease;
}
.logo-shape:hover img {
transform: rotate(-45deg) scale(1.5);
}
.logo-shape:nth-child(1) {
animation-delay: 0s;
background: linear-gradient(135deg, #00d4ff, #0066cc);
}
.logo-shape:nth-child(2) {
animation-delay: 1.5s;
background: linear-gradient(135deg, #0099cc, #004499);
}
.logo-shape:nth-child(3) {
animation-delay: 3s;
background: linear-gradient(135deg, #00ccee, #0088bb);
}
.logo-shape:nth-child(4) {
animation-delay: 4.5s;
background: linear-gradient(135deg, #00aadd, #0055aa);
}
@keyframes logoFloat {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* --- Categories Section (Index) --- */
.shop-categories-section {
background-color: #f8f9fa;
padding: 100px 0;
position: relative;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 280px);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.category-card:nth-child(1) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/cl5200n-1.png");
}
.category-card:nth-child(2) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/honeywell-ms7120-1.png");
}
.category-card:nth-child(3) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/rongta-rp400-1.png");
}
.category-card:nth-child(4) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/zebra-tc26-1.png");
}
.category-card:nth-child(5) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/detectalia-d7x-1.png");
}
.category-card:nth-child(6) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/ipos-x100-2.png");
}
.category-card:nth-child(7) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/ipos-icd17p-1.png");
}
.category-card:nth-child(8) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/etiketa-vn-termotransfer-1.png");
}
.category-card:nth-child(9) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/rfid-bracelet-1.png");
}
.category-card:nth-child(10) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/cl5200n-1.png");
}
.category-card:nth-child(11) .category-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../images/products/rfid-bracelet-1.png");
}
.category-card.animate-on-scroll {
opacity: 0;
transform: translateY(40px) scale(0.95);
transition: all 0.7s ease;
}
.category-card.is-visible {
animation: cardFloat 4s ease-in-out infinite;
animation-delay: var(--float-delay, 0s);
}
.category-card:nth-child(1) {
--float-delay: 0s;
}
.category-card:nth-child(2) {
--float-delay: 0.5s;
}
.category-card:nth-child(3) {
--float-delay: 1s;
}
.category-card:nth-child(4) {
--float-delay: 1.5s;
}
.category-card:nth-child(5) {
--float-delay: 2s;
}
.category-card:nth-child(6) {
--float-delay: 2.5s;
}
/* --- CTA Section --- */
.categories-cta {
max-width: 1200px;
margin: 60px auto 0;
text-align: center;
}
.cta-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.cta-text {
font-size: 1.1rem;
color: #666;
margin: 0;
font-weight: 400;
animation: fadeInUp 0.8s ease 0.2s both;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #1e5bff 0%, #4285f4 100%);
color: white;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2);
position: relative;
overflow: hidden;
animation:
fadeInUp 0.8s ease 0.4s both,
float 3s ease-in-out infinite;
}
.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 ease;
}
.cta-btn:hover::before {
left: 100%;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
background: linear-gradient(135deg, #008000 0%, #66b266 100%);
animation-play-state: paused;
}
.cta-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px;
border: 2px solid #4f46e5;
opacity: 0;
animation: pulse 2s ease-in-out infinite;
}
.cta-btn i {
transition: transform 0.3s ease;
}
.cta-btn:hover i {
transform: translateX(4px);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
/* --- Services Section --- */
.services-section {
background-color: #ffffff;
color: #333;
padding: 100px 20px 50px 20px;
position: relative;
z-index: 5;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 50px;
align-items: stretch;
}
.service-card {
background-color: #F0F1F2;
padding: 40px 30px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
min-height: 380px;
opacity: 0;
transform: translateY(50px);
cursor: pointer;
position: relative;
overflow: hidden;
}
.service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2ecc71;
transform: translateY(100%);
transition: transform 0.4s ease;
z-index: 1;
}
.service-card:hover::before {
transform: translateY(0);
}
.service-card:nth-child(2)::before,
.service-card:nth-child(4)::before {
transform: translateY(-100%);
}
.service-card:nth-child(2):hover::before,
.service-card:nth-child(4):hover::before {
transform: translateY(0);
}
.service-card>* {
position: relative;
z-index: 2;
transition: color 0.4s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(46, 204, 113, 0.2);
}
.service-card:hover>* {
color: #ffffff !important;
}
.service-card .service-icon {
font-size: 2.5rem;
color: #2ecc71;
margin-bottom: 20px;
display: inline-block;
border: 2px solid #2ecc71;
padding: 15px;
border-radius: 50%;
line-height: 0;
transition: all 0.4s ease;
}
.service-card:hover .service-icon {
color: #ffffff;
border-color: #ffffff;
transform: scale(1.1);
}
.service-card:first-child {
background-color: #2c3e50;
color: #ffffff;
flex: 0 0 380px;
min-height: 380px;
}
.service-card:first-child::before {
background-color: #2ecc71;
}
.service-card:first-child .service-icon {
border-color: #2ecc71;
color: #2ecc71;
}
.service-card:first-child .service-description {
color: #bdc3c7;
}
.service-card:first-child:hover .service-description {
color: #ffffff !important;
}
.service-title {
font-size: 1.4rem;
margin-bottom: 15px;
font-weight: 600;
color: #2c3e50;
}
.service-card:first-child .service-title {
color: #ffffff;
}
.service-description {
font-size: 0.95rem;
line-height: 1.7;
}
/* Darker text for light-background service cards (2, 3, 4) */
/* .service-card:not(:first-child) .service-title {
color: #1a252f;
} */
.service-card:not(:first-child) .service-description {
color: #50606F;
}
@keyframes slideFromTop {
0% {
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideFromBottom {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.service-card:nth-child(1).is-visible,
.service-card:nth-child(3).is-visible {
animation: slideFromTop 1.2s ease-out forwards;
}
.service-card:nth-child(2).is-visible,
.service-card:nth-child(4).is-visible {
animation: slideFromBottom 1.2s ease-out forwards;
}
/* --- About Us Section --- */
/* --- New "Rreth Nesh" Section (3D Cube Design) --- */
.about-us-section {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
overflow: hidden;
}
.about-us-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 60px;
}
.about-text-wrapper {
flex: 1;
max-width: 550px;
}
.about-us-title {
font-size: 3.5rem;
font-weight: 800;
color: #0056b3;
margin-bottom: 2.5rem;
/* Increased margin */
line-height: 1.1;
position: relative;
display: inline-block;
}
.about-us-title::after {
content: "";
position: absolute;
bottom: -15px;
/* Adjusted position */
left: 0;
width: 80px;
height: 5px;
background: linear-gradient(90deg, #00d4ff, #0056b3);
border-radius: 3px;
}
.about-us-text {
font-size: 1.1rem;
line-height: 1.8;
color: #444;
margin-bottom: 2rem;
}
.highlight-box {
background: linear-gradient(135deg, #e6f7ff 0%, #f0f9eb 100%);
border-left: 4px solid #0056b3;
padding: 25px;
border-radius: 8px;
margin: 30px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
color: #444;
}
.highlight-box strong {
color: #0056b3;
font-weight: 700;
}
.stats-container {
display: flex;
gap: 20px;
margin-top: 40px;
}
.stat-item {
flex: 1;
text-align: center;
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #0056b3;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
color: #666;
}
/* AFTER (Added a 'cursor' property for user feedback) */
.tech-showcase {
flex: 1;
position: relative;
min-height: 550px;
perspective: 1500px;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
/* Shows a "grab" hand icon to indicate it's interactive */
}
/* Find this rule... */
.tech-cube {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ADD THIS NEW RULE */
.tech-cube.is-dragging {
transition: none;
/* Disables the smooth animation for instant drag feedback */
}
/* AFTER (Larger faces to match the new cube size) */
.cube-face {
position: absolute;
width: 300px;
/* Increased from 250px */
height: 300px;
/* Increased from 250px */
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
backface-visibility: visible;
}
/*.cube-face:hover {
transform: translateZ(10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}*/
.cube-face i {
font-size: 3rem;
margin-bottom: 15px;
color: #0056b3;
}
.cube-face h3 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #0056b3;
}
.cube-face p {
font-size: 0.9rem;
text-align: center;
padding: 0 15px;
color: #666;
}
/* AFTER (Updated to match the new 300px size) */
.face-1 {
transform: translateZ(150px);
border-top: 4px solid #00d4ff;
}
.face-2 {
transform: rotateY(90deg) translateZ(150px);
border-top: 4px solid #2ecc71;
}
.face-3 {
transform: rotateY(180deg) translateZ(150px);
border-top: 4px solid #8b5cf6;
}
.face-4 {
transform: rotateY(-90deg) translateZ(150px);
border-top: 4px solid #ff6b6b;
}
.face-5 {
transform: rotateX(90deg) translateZ(150px);
border-top: 4px solid #ffa502;
}
.face-6 {
transform: rotateX(-90deg) translateZ(150px);
border-top: 4px solid #5c7cfa;
}
.decorative-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.1) 0%,
rgba(0, 84, 179, 0.1) 100%);
z-index: 1;
}
.circle-1 {
top: -50px;
right: -50px;
width: 250px;
height: 250px;
}
.circle-2 {
bottom: -75px;
left: -75px;
width: 300px;
height: 300px;
}
/* --- Brands Section --- */
.brands-section {
background-color: #ffffff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.brands-slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
-webkit-mask: linear-gradient(to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
mask: linear-gradient(to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
}
.brands-slider {
display: flex;
gap: 30px;
width: fit-content;
animation: scrollBrands 20s linear infinite;
}
.brand-card {
width: 200px;
height: 120px;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.brand-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
background-color: #ffffff;
}
.brand-logo {
max-width: 140px;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
transition: filter 0.3s ease;
}
.brand-card:hover .brand-logo {
filter: grayscale(0%);
}
@keyframes scrollBrands {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* --- Contact Section --- */
.pre-footer-contact {
padding: 80px 0 0 0;
background-image: url("../images/ui/contact-bg.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
min-height: 100vh;
}
.contact-section-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.contact-cards-container {
display: flex;
justify-content: center;
gap: 20px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
padding: 0;
margin-bottom: 60px;
}
.info-card {
background-color: #ffffff;
padding: 30px;
text-align: center;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
flex-basis: calc(25% - 15px);
color: #333;
position: relative;
overflow: hidden;
}
.info-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(66, 133, 244, 0.1),
transparent);
transition: left 0.5s;
}
.info-card:hover::before {
left: 100%;
}
.info-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.info-card i {
font-size: 2rem;
color: #555;
margin-bottom: 15px;
}
.info-card h4 {
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 1px;
color: #4285f4;
}
.info-card p {
font-size: 1rem;
line-height: 1.5;
color: #444;
font-weight: bold;
}
.form-map-container {
display: flex;
gap: 20px;
background-color: #000000;
padding: 40px;
border-radius: 8px;
color: #ffffff;
}
.contact-form-wrapper {
flex: 1;
padding-right: 20px;
min-width: 0;
}
.contact-form-wrapper h3 {
font-size: 2rem;
margin-bottom: 30px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
flex: 1;
display: flex;
flex-direction: column;
}
.form-group label {
font-size: 0.9rem;
margin-bottom: 10px;
}
.form-group input,
.form-group textarea {
background: transparent;
border: none;
border-bottom: 1px solid #555;
color: #ffffff;
padding: 10px 0;
font-size: 1rem;
font-family: "Poppins", sans-serif;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #888;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-bottom-color: #ffffff;
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.submit-btn {
background-color: #ffffff;
color: #000000;
border: none;
padding: 15px 30px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
margin-top: 20px;
}
.submit-btn:hover {
background-color: #ccc;
}
.map-wrapper {
flex: 0 0 430px;
width: 430px;
min-height: 450px;
border-radius: 8px;
overflow: hidden;
}
/* --- Contact Form Feedback Message --- */
.form-feedback {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
font-weight: 500;
text-align: center;
display: none;
/* Hidden by default */
}
.form-feedback.sending {
display: block;
background-color: #eaf2f8;
/* Light blue */
color: #3498db;
border: 1px solid #aed6f1;
}
.form-feedback.success {
display: block;
background-color: #e8f8f5;
/* Light green */
color: #2ecc71;
border: 1px solid #a9dfbf;
}
.form-feedback.error {
display: block;
background-color: #fdedec;
/* Light red */
color: #e74c3c;
border: 1px solid #f5b7b1;
}
/* --- intl-tel-input (Phone Country Selector) --- */
.iti {
width: 100%;
}
.iti__flag-container {
z-index: 10;
}
.iti__country-list {
background: #1a1a2e !important;
color: #fff !important;
}
.iti__country:hover {
background: #16213e;
}
.iti__country.iti__highlight {
background: #16213e;
}
.iti__divider {
border-bottom-color: #333;
}
/* Hide flags for specific countries */
.iti__flag.iti__rs,
.iti__flag.iti__il {
background-image: none !important;
background-color: transparent !important;
}
/* Force equal width columns in form rows */
.contact-form-wrapper .form-row {
display: flex;
gap: 20px;
}
.contact-form-wrapper .form-row .form-group {
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
}
.contact-form-wrapper .form-row .form-group .iti {
width: 100% !important;
}
.contact-form-wrapper .form-row .form-group .iti input {
width: 100% !important;
}
/* =============================== */
/* INDEX.HTML BREAKPOINTS */
/* =============================== */
@media (max-width: 1024px) {
/* --- Hero --- */
.hero-content {
gap: 40px;
}
.hero-title {
font-size: 48px;
}
}
@media (max-width: 992px) {
/* --- Services --- */
.services-section {
padding: 80px 20px;
}
.services-grid {
flex-direction: column;
margin-top: 0;
}
.service-card {
width: 100%;
flex: 0 0 100%;
min-height: auto;
opacity: 1 !important;
transform: none !important;
}
.service-card:first-child {
width: 100%;
flex: 0 0 100%;
min-height: auto;
}
.service-card.is-visible {
animation: none;
}
/* --- About --- */
.about-us-content {
gap: 50px;
}
.about-us-title {
font-size: 3.5rem;
}
.diamond-images-container {
width: 450px;
height: 450px;
}
/* --- Categories (Index) --- */
.categories-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 280px);
gap: 15px;
}
/* --- Contact --- */
.contact-cards-container {
flex-wrap: wrap;
gap: 15px;
}
.info-card {
flex-basis: calc(48% - 7.5px);
}
.form-map-container {
flex-direction: column;
}
.contact-form-wrapper {
padding-right: 0;
}
}
@media (max-width: 768px) {
/* --- Hero --- */
/* .hero-section {
height: 100vh;
min-height: 100vh;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 30px;
}
.hero-section::after {
height: 60px;
}
.hero-title {
font-size: 36px;
}
.circuit-pattern {
opacity: 0.9;
background-image: url("../images/banner.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-image {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-buttons {
justify-content: center;
margin-top: 20px;
}
.hexagon-frame {
/* Legacy style, kept as per rules
display: block;
height: 200px;
width: 200px;
margin: 20px auto; /
}
/*.hexagon-frame img {
width: 100%;
height: 100%;
object-fit: cover;
} */
.new-hero-container .card:not([style*="width: 100vw"]),
.new-hero-container .card-content:not([style*="opacity: 0"]) {
display: none !important;
}
/* Details section - text at top, under header */
.new-hero-container .details,
.new-hero-container #details-even,
.new-hero-container #details-odd {
left: 20px !important;
right: auto !important;
transform: none !important;
top: 100px !important;
/* Under the header */
bottom: auto !important;
width: calc(100% - 40px) !important;
text-align: left !important;
}
.new-hero-container .details .title-1,
.new-hero-container .details .title-2 {
font-size: 42px;
}
.new-hero-container .details .title-box-1,
.new-hero-container .details .title-box-2 {
height: 55px;
}
.new-hero-container .details>.desc {
width: 100%;
font-size: 13px;
margin-top: 10px;
}
/* CTA buttons - hidden on mobile per client request */
.new-hero-container .details>.cta {
display: none !important;
}
.new-hero-container .details>.cta>.discover {
height: 44px !important;
padding: 0 28px !important;
font-size: 14px !important;
}
/* Pagination - smaller arrows, progress bar, and number */
#pagination {
left: 20px !important;
transform: none !important;
top: auto !important;
bottom: 30px !important;
width: calc(100% - 40px) !important;
height: 40px !important;
}
.new-hero-container .pagination>.arrow {
width: 36px !important;
height: 36px !important;
}
.new-hero-container .pagination>.arrow svg {
width: 18px !important;
height: 18px !important;
}
.new-hero-container .pagination .progress-sub-container {
height: 36px !important;
margin-left: 12px !important;
margin-right: 12px !important;
}
.new-hero-container .pagination .progress-sub-background,
.new-hero-container .pagination .progress-sub-foreground {
height: 2px !important;
}
.new-hero-container .pagination .slide-numbers {
width: 36px !important;
height: 36px !important;
overflow: hidden;
}
.new-hero-container .pagination .slide-numbers .item {
width: 36px !important;
height: 36px !important;
font-size: 22px !important;
}
/* --- Services --- */
.services-section {
padding: 60px 0;
}
.services-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.service-card:nth-child(1).is-visible,
.service-card:nth-child(3).is-visible {
animation: slideFromTop 1.2s ease-out forwards;
}
.service-card:nth-child(2).is-visible,
.service-card:nth-child(4).is-visible {
animation: slideFromBottom 1.2s ease-out forwards;
}
@keyframes fillFromBottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@keyframes fillFromTop {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
.service-card:nth-child(1):hover::before,
.service-card:nth-child(3):hover::before,
.service-card:nth-child(1):active::before,
.service-card:nth-child(3):active::before {
animation: fillFromBottom 0.8s ease-out forwards;
}
.service-card:nth-child(2):hover::before,
.service-card:nth-child(4):hover::before,
.service-card:nth-child(2):active::before,
.service-card:nth-child(4):active::before {
animation: fillFromTop 0.8s ease-out forwards;
}
.service-card:hover>*,
.service-card:active>* {
color: #ffffff !important;
}
.service-card:hover .service-icon,
.service-card:active .service-icon {
color: #ffffff !important;
border-color: #ffffff !important;
}
/* --- About --- */
.about-us-content {
flex-direction: column;
gap: 40px;
text-align: center;
}
.about-us-title {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.about-us-text {
font-size: 1rem;
}
.diamond-images-container {
width: 300px;
height: 300px;
}
.diamond-image {
width: 120px;
height: 120px;
}
.diamond-1 {
top: 30px;
left: 90px;
}
.diamond-2 {
top: 90px;
right: 30px;
}
.diamond-3 {
bottom: 30px;
left: 90px;
}
.diamond-4 {
top: 90px;
left: 30px;
}
/* --- Categories (Index) --- */
.shop-categories-section {
padding: 80px 0;
}
.categories-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 260px);
gap: 15px;
padding: 0 20px;
}
.categories-cta {
margin: 40px auto 0;
padding: 0 20px;
}
.cta-text {
font-size: 1rem;
}
.cta-btn {
padding: 14px 28px;
font-size: 0.95rem;
}
/* --- Brands --- */
.brand-card {
width: 180px;
height: 110px;
}
.brand-logo {
max-width: 110px;
max-height: 50px;
}
.brands-slider {
gap: 20px;
animation-duration: 15s;
}
/* --- Contact --- */
.contact-section-wrapper {
padding: 0 15px;
}
.contact-cards-container {
flex-direction: column;
margin-bottom: 40px;
}
.info-card {
flex-basis: auto;
margin-bottom: 20px;
}
.form-row {
flex-direction: column !important;
gap: 0 !important;
}
.form-row .form-group,
.contact-form-wrapper .form-row .form-group {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
margin-bottom: 20px;
}
.form-map-container {
flex-direction: column;
padding: 30px 20px;
}
.map-wrapper {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 300px;
margin-bottom: 30px;
}
}
@media (max-width: 480px) {
/* Phone country dropdown - wider on mobile */
.iti__country-list {
width: 280px !important;
max-width: 90vw !important;
}
/* --- Hero --- */
.hero-section {
height: 100vh;
min-height: 100vh;
padding: 0;
}
.hero-section::after {
height: 40px;
}
.hero-title {
font-size: 28px;
}
.circuit-pattern {
opacity: 0.9;
background-image: url("../images/banner.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
.service-section {
margin-top: 20px;
}
.hero-image {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.hero-buttons {
flex-direction: column;
gap: 15px;
align-items: center;
margin-top: 15px;
}
.hero-btn {
padding: 12px 25px;
font-size: 14px;
width: 200px;
}
/* --- About --- */
.about-us-section {
padding: 60px 0;
}
.about-us-title {
font-size: 2.5rem;
}
.diamond-images-container {
width: 250px;
height: 250px;
}
.diamond-image {
width: 100px;
height: 100px;
}
.diamond-1 {
top: 25px;
left: 75px;
}
.diamond-2 {
top: 75px;
right: 25px;
}
.diamond-3 {
bottom: 25px;
left: 75px;
}
.diamond-4 {
top: 75px;
left: 25px;
}
.geometric-accent-1 {
width: 60px;
height: 60px;
}
.geometric-accent-2 {
width: 40px;
height: 40px;
}
/* --- Services --- */
.services-section {
padding: 60px 15px 40px 15px;
}
.service-card {
padding: 30px 20px;
}
.service-title {
font-size: 1.3rem;
}
.service-description {
font-size: 0.9rem;
}
/* --- Categories (Index) --- */
.shop-categories-section {
padding: 60px 0;
}
.categories-grid {
grid-template-rows: repeat(6, 240px);
gap: 12px;
padding: 0 15px;
}
.categories-cta {
margin: 35px auto 0;
padding: 0 15px;
}
.cta-content {
gap: 15px;
}
.cta-text {
font-size: 0.95rem;
}
.cta-btn {
padding: 12px 24px;
font-size: 0.9rem;
gap: 8px;
}
/* --- Brands --- */
.brands-section {
padding: 50px 0;
}
.brand-card {
width: 160px;
height: 100px;
}
.brand-logo {
max-width: 100px;
max-height: 45px;
}
.brands-slider {
gap: 15px;
animation-duration: 12s;
}
/* --- Contact --- */
.pre-footer-contact {
padding: 40px 0 0 0;
}
.contact-section-wrapper {
padding: 0 10px;
}
.contact-cards-container {
margin-bottom: 30px;
}
.info-card {
padding: 20px;
margin-bottom: 15px;
}
.info-card h4 {
font-size: 0.8rem;
}
.info-card p {
font-size: 0.9rem;
}
.form-map-container {
padding: 20px 15px;
}
.contact-form-wrapper h3 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.map-wrapper {
min-height: 300px;
}
}
/* =============================== */
/* PRODUKTET.HTML STYLES */
/* =============================== */
/* --- Hero Section (Products Page) --- */
.hero-section-products {
background: rgba(10, 26, 46, 0.95);
padding: 160px 0 80px 0;
text-align: center;
color: white;
}
.page-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.page-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
max-width: 700px;
margin: 0 auto;
}
/* --- All Products Grid --- */
.all-products-grid {
/* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); layout with 4 cards per row */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 25px;
}
.all-products-grid .category-card {
height: 260px;
}
/* --- Product Listing Section --- */
.product-listing-section {
padding: 80px 0;
border-bottom: 1px solid #e9ecef;
}
.product-listing-section:nth-of-type(odd) {
background-color: #f8f9fa;
}
.product-listing-section .section-title {
text-align: left;
margin-bottom: 50px;
color: #333;
font-size: 2.5rem;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.product-card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: all 0.3s ease-in-out;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.product-image {
width: 100%;
height: 220px;
overflow: hidden;
background-color: #ffffff;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-info {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.product-title {
font-size: 1.25rem;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.product-description {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.product-btn {
display: inline-block;
background-color: #4285f4;
color: white;
padding: 12px 25px;
border-radius: 50px;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
align-self: flex-start;
border: none;
cursor: pointer;
}
.product-btn:hover {
background-color: #1e5bff;
box-shadow: 0 5px 15px rgba(66, 133, 244, 0.4);
}
/* --- Product Modal --- */
.product-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-content {
background-color: #fefefe;
margin: 2% auto;
padding: 0;
border-radius: 15px;
width: 90%;
max-width: 1000px;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: slideIn 0.3s ease-in-out;
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-header {
background: linear-gradient(135deg, #1e5bff 0%, #4285f4 100%);
color: white;
padding: 30px;
border-radius: 15px 15px 0 0;
position: relative;
}
.modal-header h2 {
margin: 0;
font-size: 1.8rem;
padding-right: 60px;
}
.modal-close {
position: absolute;
right: 20px;
top: 20px;
color: white;
font-size: 28px;
font-weight: bold;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: background-color 0.3s;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.modal-body {
padding: 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.modal-gallery .main-image {
width: 100%;
height: 350px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
}
.modal-gallery .main-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.thumbnail-gallery {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.thumbnail {
width: 80px;
height: 80px;
border-radius: 8px;
cursor: pointer;
opacity: 0.7;
transition: all 0.3s ease;
object-fit: contain;
border: 2px solid transparent;
}
.thumbnail:hover,
.thumbnail.active {
opacity: 1;
border-color: #4285f4;
transform: scale(1.05);
}
.modal-details h3 {
color: #333;
font-size: 1.3rem;
margin-bottom: 15px;
border-bottom: 2px solid #4285f4;
padding-bottom: 10px;
}
.product-description-full,
.product-specifications {
margin-bottom: 30px;
}
.product-description-full p {
color: #666;
line-height: 1.6;
font-size: 1rem;
}
.product-specifications ul {
list-style: none;
padding: 0;
}
.product-specifications li {
padding: 8px 0;
border-bottom: 1px solid #eee;
color: #555;
position: relative;
padding-left: 25px;
}
.product-specifications li:before {
content: "→";
color: #4285f4;
font-weight: bold;
position: absolute;
left: 0;
}
/* --- Special Buttons for Peshore Modal --- */
#special-buttons-container {
margin-top: 20px;
}
.special-buttons {
display: flex;
gap: 15px;
width: 100%;
}
.special-btn {
flex: 1;
padding: 14px 20px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
cursor: pointer;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.special-btn.brochure-btn {
background: linear-gradient(135deg, #2ecc71 0%, #28b485 100%);
}
.special-btn.brochure-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(46, 204, 113, 0.4);
}
.special-btn.manual-btn {
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}
.special-btn.manual-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}
.special-btn:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* --- "Porosit Tani" Button --- */
.order-now-container {
margin-top: 15px;
border-top: 1px solid #e0e0e0;
padding-top: 15px;
}
.order-now-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px;
font-size: 16px;
font-weight: 700;
color: white;
background: linear-gradient(135deg, #ff6b6b 0%, #e74c3c 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(231, 76, 60, 0.3);
}
.order-now-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
}
/* --- Order Choice Modal --- */
.order-choice-modal {
display: none;
position: fixed;
z-index: 1001;
/* Must be higher than the main modal */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-in-out;
}
.order-choice-content {
background-color: #ffffff;
padding: 40px;
border-radius: 15px;
width: 90%;
max-width: 500px;
text-align: center;
position: relative;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.order-choice-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
color: #aaa;
cursor: pointer;
transition: color 0.3s;
}
.order-choice-close:hover {
color: #333;
}
.order-choice-content h2 {
font-size: 1.8rem;
color: #333;
margin-bottom: 10px;
}
.order-choice-content p {
color: #666;
margin-bottom: 30px;
}
.order-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.order-option {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px;
border-radius: 12px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: white;
transition: all 0.3s ease;
}
.order-option:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.order-option.email {
background: linear-gradient(135deg, #5c7cfa, #3b5998);
}
.order-option.viber {
background: linear-gradient(135deg, #8b5cf6, #665cac);
}
.order-option.whatsapp {
background: linear-gradient(135deg, #25d366, #128c7e);
}
/* =============================== */
/* PRODUKTET.HTML BREAKPOINTS */
/* =============================== */
@media (max-width: 992px) {
.all-products-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
@media (max-width: 768px) {
.page-title {
font-size: 2.8rem;
}
.all-products-grid {
grid-template-columns: repeat(2, 1fr);
}
/* --- Modal --- */
.modal-body {
grid-template-columns: 1fr;
gap: 20px;
}
.modal-content {
width: 95%;
margin: 5% auto;
}
.modal-gallery .main-image {
height: 250px;
}
.thumbnail {
width: 60px;
height: 60px;
}
}
@media (max-width: 576px) {
.all-products-grid {
grid-template-columns: 1fr;
}
.all-products-grid .category-card {
height: 240px;
}
}
/* =============================== */
/* SKEDARET.HTML STYLES */
/* =============================== */
.skedaret-body {
font-family: "Poppins", sans-serif;
/* Match the font of other pages */
background: linear-gradient(135deg, #1e5bff 0%, #4285f4 100%);
padding: 40px 0 80px 0;
/* Add padding to contain content */
}
/* Push content below fixed header */
.skedaret-body .container {
padding-top: 120px;
}
.page-header {
text-align: center;
margin-bottom: 40px;
color: white;
}
.page-header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.page-header p {
font-size: 1.1rem;
opacity: 0.9;
}
.search-section {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.search-box {
display: flex;
gap: 15px;
flex-wrap: wrap;
align-items: center;
}
.search-input {
flex: 1;
min-width: 250px;
padding: 12px 20px;
border: none;
border-radius: 25px;
font-size: 16px;
outline: none;
background: white;
font-family: "Poppins", sans-serif;
}
.filter-select {
padding: 12px 20px;
border: none;
border-radius: 25px;
font-size: 16px;
outline: none;
background: white;
cursor: pointer;
min-width: 150px;
font-family: "Poppins", sans-serif;
}
.drivers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
}
.driver-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
color: #333;
/* Set default text color */
}
.driver-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.device-image {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
font-size: 2rem;
color: #666;
overflow: hidden;
}
.device-image img {
max-width: 70px;
max-height: 70px;
width: auto;
height: auto;
object-fit: contain;
}
.device-name {
font-size: 1.3rem;
font-weight: bold;
color: #333;
margin-bottom: 8px;
}
.device-category {
color: #666;
font-size: 0.9rem;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.driver-info {
margin-bottom: 20px;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-size: 0.9rem;
}
.info-label {
color: #666;
}
.info-value {
color: #333;
font-weight: 500;
}
.download-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.download-btn {
background: linear-gradient(45deg, #1e5bff, #4285f4);
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: "Poppins", sans-serif;
}
.download-btn:hover {
transform: scale(1.02);
box-shadow: 0 5px 15px rgba(30, 91, 255, 0.4);
}
.download-btn.secondary {
background: linear-gradient(45deg, #95a5a6, #7f8c8d);
}
.download-btn.secondary:hover {
box-shadow: 0 5px 15px rgba(149, 165, 166, 0.4);
}
.no-results {
text-align: center;
padding: 60px 20px;
color: white;
font-size: 1.2rem;
}
@media (max-width: 768px) {
.drivers-grid {
grid-template-columns: 1fr;
}
.search-box {
flex-direction: column;
}
.search-input,
.filter-select {
width: 100%;
min-width: unset;
}
}
@media (max-width: 480px) {
.page-header h1 {
font-size: 2rem;
}
.driver-card {
padding: 20px;
}
.device-name {
font-size: 1.15rem;
}
}
/* ... existing CSS code ... */
/* =============================== */
/* BRENDET.HTML STYLES */
/* =============================== */
.hero-section-brands {
background: rgba(10, 26, 46, 0.95);
padding: 160px 0 80px 0;
text-align: center;
color: white;
}
.brands-showcase-section {
padding: 100px 0;
background-color: #f8f9fa;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.brand-showcase-card {
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
}
.brand-showcase-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.brand-logo-wrapper {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.4s ease;
}
.brand-logo-wrapper img {
max-width: 70%;
max-height: 80px;
object-fit: contain;
transition: transform 0.4s ease;
}
.brand-showcase-card:hover .brand-logo-wrapper img {
transform: scale(1.05);
}
.brand-info {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.brand-info h3 {
font-size: 1.5rem;
font-weight: 700;
color: #333;
margin-bottom: 15px;
}
.brand-info p {
font-size: 1rem;
line-height: 1.6;
color: #666;
margin-bottom: 25px;
flex-grow: 1;
}
.brand-products-link {
color: #4285f4;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
align-self: flex-start;
/* Aligns the button to the start */
}
.brand-products-link:hover {
color: #1e5bff;
transform: translateX(5px);
}
.brand-products-link i {
transition: transform 0.3s ease;
}
/* --- Brand Specific Hover Effects --- */
.brand-showcase-card[data-brand="cas"]:hover {
box-shadow: 0 15px 40px rgba(31, 63, 120, 0.5);
}
.brand-showcase-card[data-brand="cas"]:hover .brand-products-link {
color: #1f3f78;
}
.brand-showcase-card[data-brand="vibra"]:hover {
box-shadow: 0 15px 40px rgba(7, 92, 170, 0.5);
}
.brand-showcase-card[data-brand="vibra"]:hover .brand-products-link {
color: #075caa;
}
.brand-showcase-card[data-brand="tysso"]:hover {
box-shadow: 0 15px 40px rgba(0, 96, 168, 0.5);
}
.brand-showcase-card[data-brand="tysso"]:hover .brand-products-link {
color: #0060a8;
}
.brand-showcase-card[data-brand="ipos"]:hover {
box-shadow: 0 15px 40px rgba(46, 68, 155, 0.5);
}
.brand-showcase-card[data-brand="ipos"]:hover .brand-products-link {
color: #2e449b;
}
.brand-showcase-card[data-brand="godex"]:hover {
box-shadow: 0 15px 40px rgba(237, 28, 36, 0.5);
}
.brand-showcase-card[data-brand="godex"]:hover .brand-products-link {
color: #ed1c24;
}
.brand-showcase-card[data-brand="chainway"]:hover {
box-shadow: 0 15px 40px rgba(20, 62, 122, 0.5);
}
.brand-showcase-card[data-brand="chainway"]:hover .brand-products-link {
color: #143e7a;
}
.brand-showcase-card[data-brand="rongta"]:hover {
box-shadow: 0 15px 40px rgba(241, 129, 1, 0.5);
}
.brand-showcase-card[data-brand="rongta"]:hover .brand-products-link {
color: #f18101;
}
.brand-showcase-card[data-brand="detectalia"]:hover {
box-shadow: 0 15px 40px rgba(235, 177, 34, 0.5);
}
.brand-showcase-card[data-brand="detectalia"]:hover .brand-products-link {
color: #ebb122;
}
.brand-showcase-card[data-brand="hitachi"]:hover {
box-shadow: 0 15px 40px rgba(254, 0, 2, 0.5);
}
.brand-showcase-card[data-brand="hitachi"]:hover .brand-products-link {
color: #fe0002;
}
.brand-showcase-card[data-brand="toshiba"]:hover {
box-shadow: 0 15px 40px rgba(230, 29, 29, 0.5);
}
.brand-showcase-card[data-brand="toshiba"]:hover .brand-products-link {
color: #e61d1d;
}
.brand-showcase-card[data-brand="sunlux"]:hover {
box-shadow: 0 15px 40px rgba(169, 42, 46, 0.5);
}
.brand-showcase-card[data-brand="sunlux"]:hover .brand-products-link {
color: #a92a2e;
}
.brand-showcase-card[data-brand="ocom"]:hover {
box-shadow: 0 15px 40px rgba(0, 155, 77, 0.5);
}
.brand-showcase-card[data-brand="ocom"]:hover .brand-products-link {
color: #009b4d;
}
.brand-showcase-card[data-brand="zebra"]:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
.brand-showcase-card[data-brand="zebra"]:hover .brand-products-link {
color: #000000;
}
.brand-showcase-card[data-brand="honeywell"]:hover {
box-shadow: 0 15px 40px rgba(238, 26, 46, 0.5);
}
.brand-showcase-card[data-brand="honeywell"]:hover .brand-products-link {
color: #ee1a2e;
}
.brand-showcase-card[data-brand="symbol"]:hover {
box-shadow: 0 15px 40px rgba(194, 30, 37, 0.5);
}
.brand-showcase-card[data-brand="symbol"]:hover .brand-products-link {
color: #c21e25;
}
/* =============================== */
/* BRENDET.HTML BREAKPOINTS */
/* =============================== */
@media (max-width: 768px) {
.brands-showcase-section {
padding: 80px 0;
}
.brands-grid {
grid-template-columns: 1fr;
gap: 25px;
}
}
/* =============================== */
/* SEARCH & FILTER SECTION */
/* =============================== */
.search-filter-section {
padding: 20px 0 40px;
background-color: #f8f9fa;
}
.search-filter-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
align-items: center;
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.search-box {
flex: 1;
min-width: 300px;
position: relative;
}
.search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0a0a0;
font-size: 18px;
}
.search-box input {
width: 100%;
padding: 12px 15px 12px 45px;
border: 2px solid #e0e0e0;
border-radius: 50px;
font-family: "Poppins", sans-serif;
font-size: 16px;
color: #333;
transition: all 0.3s ease;
outline: none;
}
.search-box input:focus {
border-color: #00d4ff;
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1);
}
.filter-box {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.select-wrapper {
position: relative;
min-width: 200px;
}
.select-wrapper i.fa-filter,
.select-wrapper i.fa-tag {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #00d4ff;
z-index: 1;
}
.select-wrapper select {
width: 100%;
padding: 12px 40px 12px 45px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 50px;
font-family: "Poppins", sans-serif;
font-size: 18px;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
}
.select-wrapper select:focus {
border-color: #00d4ff;
background-color: white;
}
.select-wrapper .dropdown-arrow {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0a0a0;
pointer-events: none;
font-size: 12px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.search-filter-container {
flex-direction: column;
align-items: stretch;
}
.search-box {
min-width: 100%;
}
.filter-box {
flex-direction: column;
width: 100%;
}
.select-wrapper {
width: 100%;
}
}
/* =============================== */
/* CART & OFFER STYLES */
/* =============================== */
/* --- Cart Trigger in Header --- */
.cart-trigger {
position: relative;
cursor: pointer;
color: white;
font-size: 20px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.cart-trigger:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.cart-count {
position: absolute;
top: -5px;
right: -5px;
background-color: #ff4757;
color: white;
font-size: 12px;
font-weight: bold;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #0a1a2e;
}
/* --- Cart Modal --- */
.cart-modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
}
.cart-modal-content {
background-color: #fff;
margin: 5% auto;
padding: 0;
border-radius: 15px;
width: 90%;
max-width: 500px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: slideDown 0.3s ease-out;
display: flex;
flex-direction: column;
max-height: 80vh;
}
.cart-header {
padding: 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-header h2 {
margin: 0;
font-size: 1.5rem;
color: #333;
}
.cart-close {
font-size: 28px;
font-weight: bold;
color: #aaa;
cursor: pointer;
transition: color 0.3s;
}
.cart-close:hover {
color: #333;
}
.cart-body {
padding: 20px;
overflow-y: auto;
flex-grow: 1;
}
.cart-items-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.empty-cart-msg {
text-align: center;
color: #777;
font-style: italic;
margin-top: 20px;
}
.cart-item {
display: flex;
align-items: center;
padding: 10px;
background: #f9f9f9;
border-radius: 10px;
border: 1px solid #eee;
}
.cart-item-image img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
margin-right: 15px;
}
.cart-item-details {
flex-grow: 1;
}
.cart-item-details h4 {
margin: 0;
font-size: 1rem;
color: #333;
}
.remove-item-btn {
background: none;
border: none;
color: #ff4757;
cursor: pointer;
font-size: 1.2rem;
padding: 5px;
transition: transform 0.2s;
}
.remove-item-btn:hover {
transform: scale(1.2);
}
.cart-footer {
padding: 20px;
border-top: 1px solid #eee;
background: #f9f9f9;
border-radius: 0 0 15px 15px;
}
.cart-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.clear-cart-btn {
background-color: #ff4757;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.clear-cart-btn:hover {
background-color: #e84118;
}
.request-offer-btn {
background-color: #2ecc71;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.request-offer-btn:hover {
background-color: #27ae60;
}
/* =============================== */
/* BUG FIXES & GENERAL STYLES */
/* =============================== */
/* --- Order Choice Modal (Offer) --- */
.order-choice-modal {
display: none;
position: fixed;
z-index: 2100;
/* Higher than cart modal (2000) */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
}
.order-choice-content {
background-color: #fff;
padding: 30px;
border-radius: 15px;
width: 90%;
max-width: 400px;
position: relative;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: slideDown 0.3s ease-out;
}
.order-choice-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
font-weight: bold;
color: #aaa;
cursor: pointer;
transition: color 0.3s;
}
.order-choice-close:hover {
color: #333;
}
.order-choice-content h2 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.order-choice-content p {
color: #666;
margin-bottom: 25px;
}
.order-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.order-option {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
color: white;
transition: transform 0.2s;
}
.order-option:hover {
transform: translateY(-2px);
}
.order-option.email {
background-color: #3498db;
}
.order-option.viber {
background-color: #665cac;
}
.order-option.whatsapp {
background-color: #25d366;
}
/* --- Add to Cart Button (in Product Modal) --- */
.order-now-container {
display: flex;
align-items: center;
gap: 15px;
margin-top: 20px;
}
.add-to-cart-btn {
background-color: #3498db;
color: white;
border: none;
padding: 16px;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
flex: 1;
}
.add-to-cart-btn:hover {
background-color: #2980b9;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}
.order-now-btn {
flex: 1;
/* Make buttons equal width if desired, or remove */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* --- Toast Notification --- */
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast {
background-color: #333;
color: white;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
font-size: 0.9rem;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
.cart-trigger {
margin-right: 10px;
}
.cart-modal-content {
width: 95%;
margin: 10% auto;
}
.cart-actions {
flex-direction: column;
}
.clear-cart-btn,
.request-offer-btn {
width: 100%;
}
.order-now-container {
flex-direction: column;
gap: 10px;
}
.add-to-cart-btn,
.order-now-btn {
width: 100%;
justify-content: center;
margin-right: 0 !important;
}
}