/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
--white-color: hsl(0, 0%, 100%);
--black-color: hsl(0, 0%, 0%);
--bg-color: hsl(0, 2%, 10%);
--bg-transparent: hsla(0, 2%, 10%);
--bg2-transparent: hsla(0, 2%, 10%, 0.99);
/*========== Font and typography ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--body-font: "Montserrat", sans-serif;
--h1-font-size: 1.5rem;
--normal-font-size: .938rem;
/*========== Font weight ==========*/
--font-regular: 400;
--font-medium: 500;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
:root {
--normal-font-size: 1rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
font-size: var(--normal-font-size);
background:
radial-gradient(circle at 30% 30%, #20282D, transparent 70%),
/* dark top-left */
radial-gradient(circle at 70% 70%, #20282D, transparent 70%),
/* dark bottom-right */
radial-gradient(circle at 60% 50%, #9FF14E, transparent 70%);
/* green glow bottom center */
background-color: #1a1919;
/* base fallback */
background-size: 200% 200%;
animation: auroraShift 3s ease-in-out infinite alternate;
}
@keyframes auroraShift {
0% { background-position: 20% 20%, 80% 80%, 50% 100%; }
50% { background-position: 80% 30%, 20% 70%, 50% 90%; }
100% { background-position: 30% 80%, 70% 20%, 50% 95%; }
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
/* max-width: 1120px; */
max-width: 1800px;
margin-inline: 1.5rem;
}
/* ================= PRELOADER ================= */
/* Preloader container */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
/* change if needed */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999999;
transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}
/* Hidden state (when finished) */
#preloader.hidden {
opacity: 0;
transform: translateY(-30px);
/* slide up */
visibility: hidden;
}
/* Loader text styling */
#loader-text {
margin-bottom: 20px;
/* space between % and loader */
font-weight: bold;
font-size: 2rem;
color: #9ff14e;
/* your theme color */
text-align: center;
}
/* Loader animation */
/* .loader {
width: 48px;
height: 48px;
position: relative;
}
.loader:before {
content: '';
width: 48px;
height: 5px;
background: #000;
opacity: 0.25;
position: absolute;
top: 60px;
left: 0;
border-radius: 50%;
animation: shadow 0.5s linear infinite;
}
.loader:after {
content: '';
width: 100%;
height: 100%;
background: #fff;
animation: bxSpin 0.5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
}
@keyframes bxSpin {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
} */
/* HTML: */
.loader {
width: 80px;
aspect-ratio: 1;
border: 10px solid #0000;
padding: 5px;
box-sizing: border-box;
background:
radial-gradient(farthest-side,#fff 98%,#0000 ) 0 0/20px 20px no-repeat,
conic-gradient(from 90deg at 10px 10px,#0000 90deg,#fff 0) content-box,
conic-gradient(from -90deg at 40px 40px,#0000 90deg,#fff 0) content-box,
#000;
filter: blur(4px) contrast(10);
animation: l11 2s infinite;
}
@keyframes l11 {
0% {background-position:0 0}
25% {background-position:100% 0}
50% {background-position:100% 100%}
75% {background-position:0% 100%}
100% {background-position:0% 0}
}
/* ================= PRELOADER /END ================= */
/*=============== HEADER & NAV ===============*/
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
/* background-color: var(--bg-transparent); */
background-color: transparent;
transition: background-color 0.4s ease;
z-index: var(--z-fixed);
}
/* When scrolled */
.navbar.scrolled {
background-color: rgba(10, 10, 10, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* border: 1px solid rgba(255, 255, 255, 0.18); */
}
.nav {
position: relative;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
color: var(--white-color);
font-weight: var(--font-medium);
}
/* Style the picture container */
.nav__logo picture {
display: block;
width: 200px;
height: auto;
}
/* Make the image fill the picture container responsively */
.nav__logo picture img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
max-width: 100%;
}
/* Responsive scaling */
@media screen and (max-width: 1150px) {
.nav__logo picture {
width: 120px;
}
}
@media screen and (max-width: 480px) {
.nav__logo picture {
width: 120px;
}
}
.nav__close,
.nav__toggle {
display: flex;
color: var(--white-color);
font-size: 1.5rem;
cursor: pointer;
}
/* Navigation for mobile devices */
@media screen and (max-width: 1150px) {
.nav__menu {
position: fixed;
top: 0;
left: -100%;
/* hide it completely when closed */
width: 100%;
height: 100vh;
/* full viewport */
background-color: var(--bg2-transparent);
padding: 6rem 3.5rem 4.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: left .4s ease;
overflow-y: auto;
/* allow scrolling inside */
z-index: var(--z-fixed);
/* make sure it sits above navbar but not always on top */
}
/* When menu is open */
.show-menu {
left: 0;
/* slide in */
}
.nav__item {
transform: translateX(-150px);
visibility: hidden;
transition: transform .4s ease-out, visibility .4s;
}
.nav__social__desk {
display: none;
}
.nav__item:nth-child(1) {
transition-delay: .1s;
}
.nav__item:nth-child(2) {
transition-delay: .2s;
}
.nav__item:nth-child(3) {
transition-delay: .3s;
}
.nav__item:nth-child(4) {
transition-delay: .4s;
}
.nav__item:nth-child(5) {
transition-delay: .5s;
}
}
.nav__list,
.nav__social {
display: flex;
}
.nav__list {
flex-direction: column;
row-gap: 3rem;
}
.nav__link {
position: relative;
color: var(--white-color);
font-size: var(--h1-font-size);
font-weight: var(--font-medium);
display: inline-flex;
align-items: center;
transition: opacity .4s;
}
.nav__link i {
font-size: 2rem;
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity .4s, visibility .4s;
}
.nav__link span {
position: relative;
transition: margin .4s;
}
.nav__link span::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background-color: #78ff00;
transition: width .4s ease-out;
box-shadow: 0px 02px 6px #78ff00, 0px 02px 6px #78ff00;
}
/* Animation link on hover */
.nav__link:hover span {
margin-left: 2.5rem;
}
.nav__link:hover i {
opacity: 1;
visibility: visible;
/* box-shadow: 8px 8px 80px #78ff00, 8px 8px 80px #78ff00; */
}
.nav__link:hover span::after {
width: 100%;
}
/* Sibling fade animation */
.nav__list:has(.nav__link:hover) .nav__link:not(:hover) {
opacity: .4;
}
.nav__close {
position: absolute;
top: 1rem;
right: 1.5rem;
}
.nav__social {
column-gap: 1rem;
}
.nav__social-link {
color: var(--white-color);
font-size: 1.5rem;
transition: all .4s ease;
}
.nav__social-link:hover {
transform: translateY(-.25rem);
color: #78ff00;
}
/* Show menu */
.show-menu {
left: 0;
}
/* Animation link when displaying menu */
.show-menu .nav__item {
visibility: visible;
transform: translateX(0);
}
/*=============== BREAKPOINTS ===============*/
/* For large devices */
@media screen and (min-width: 1150px) {
.container {
margin-inline: auto;
}
.nav {
height: calc(var(--header-height) + .5rem);
}
.nav__toggle,
.nav__close {
display: none;
}
.nav__link {
font-size: var(--normal-font-size);
}
.nav__link i {
font-size: 1.5rem;
}
.nav__list {
flex-direction: row;
column-gap: 3.5rem;
margin-right: 90px;
}
.nav__menu {
display: flex;
align-items: center;
column-gap: 3.5rem;
}
.nav__social__desk {
display: flex;
column-gap: 1rem;
}
.nav__social {
display: none;
}
}
/*=============== DROPDOWN MENU STYLES ===============*/
/* Dropdown container */
.nav__item--dropdown {
position: relative;
}
/* Dropdown icon */
.nav__dropdown-icon {
font-size: 1.5rem !important;
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
margin-left: 0.5rem;
transition: transform .3s ease;
}
/* Rotate icon when dropdown is active */
.nav__item--dropdown.dropdown-active .nav__dropdown-icon {
transform: rotate(180deg);
}
/* Dropdown menu */
.nav__dropdown {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
max-height: 0;
transition: max-height .4s ease, opacity .4s ease;
opacity: 0;
}
/* Show dropdown */
.nav__item--dropdown.dropdown-active .nav__dropdown {
max-height: 500px;
opacity: 1;
margin-top: 1.5rem;
}
/* Dropdown item */
.nav__dropdown-item {
padding-left: 2rem;
}
/* Dropdown link */
.nav__dropdown-link {
position: relative;
color: var(--white-color);
font-size: var(--h2-font-size);
font-weight: var(--font-medium);
display: inline-flex;
align-items: center;
transition: opacity .4s;
padding: 0.75rem 0;
}
.nav__dropdown-link i {
font-size: 1.5rem;
margin-right: 0.5rem;
opacity: 1;
visibility: visible;
transition: transform .3s ease, color .3s ease;
}
.nav__dropdown-link span {
position: relative;
transition: margin .4s;
}
.nav__dropdown-link span::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
background-color: #78ff00;
transition: width .4s ease-out;
box-shadow: 0px 02px 6px #78ff00, 0px 02px 6px #78ff00;
}
/* Dropdown link hover animation */
.nav__dropdown-link:hover i {
transform: translateX(0.25rem);
color: #78ff00;
}
.nav__dropdown-link:hover span::after {
width: 100%;
}
/* Desktop dropdown styles */
@media screen and (min-width: 1150px) {
/* Remove dropdown icon rotation for desktop hover */
.nav__item--dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
/* Position dropdown absolutely on desktop */
.nav__dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.9);
/* backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); */
padding: 1rem 0;
border-radius: 0.5rem;
min-width: 200px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
margin-top: 1rem;
}
/* Show dropdown on hover for desktop */
.nav__item--dropdown:hover .nav__dropdown {
max-height: 500px;
opacity: 1;
}
/* Dropdown item spacing for desktop */
.nav__dropdown-item {
padding: 0;
}
/* Dropdown link styles for desktop */
.nav__dropdown-link {
font-size: var(--normal-font-size);
padding: 0.75rem 1.5rem;
display: flex;
width: 100%;
}
.nav__dropdown-link i {
font-size: 1.25rem;
}
/* Adjust main nav link for dropdown items on desktop */
.nav__item--dropdown > .nav__link {
display: flex;
align-items: center;
}
.nav__item--dropdown > .nav__link .nav__dropdown-icon {
margin-left: 0.25rem;
font-size: 1.25rem !important;
}
/* Keep parent nav link hovered when hovering dropdown */
.nav__item--dropdown:hover > .nav__link span {
margin-left: 2.5rem;
}
.nav__item--dropdown:hover > .nav__link i:not(.nav__dropdown-icon) {
opacity: 1;
visibility: visible;
}
.nav__item--dropdown:hover > .nav__link span::after {
width: 100%;
}
/* Prevent sibling fade when hovering dropdown parent */
.nav__list:has(.nav__item--dropdown:hover) .nav__link:not(.nav__item--dropdown:hover > .nav__link) {
opacity: .4;
}
}
/* =============== NAVBAR /END ================== */
/* =============== Overlay =================================== */
/* Overlay container - Full screen positioned element */
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: transparent; /* Fully transparent for desktop */
z-index: 50;
/* Flexbox layout for left and right sections */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
box-sizing: border-box;
color: white;
/* Fade-in animation properties */
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* Fade-in effect when overlay is visible */
#overlay.visible {
opacity: 1;
}
/* ===== Left Text Section ===== */
.overlay-text {
font-size: clamp(1.2rem, 3vw, 2rem); /* Fluid typography */
max-width: 40%;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
/* ===== Right Text Section - Glass Surface Container ===== */
#overlay .right-text {
position: relative;
/* Fluid padding based on viewport */
padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 24px);
/* Glass morphism effect */
background: rgba(10, 10, 10, 0.55);
border-radius: clamp(18px, 2.5vw, 26px);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
/* Center content vertically and horizontally */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Fluid width for responsiveness */
min-width: clamp(200px, 25vw, 400px);
}
/* ===== Quick Navigation Title ===== */
.quick-nav-title {
width: 100%; /* Full width of parent */
text-align: center; /* Center the text */
margin-bottom: clamp(12px, 1.5vw, 18px);
pointer-events: none;
font-size: clamp(0.7rem, 1vw, 0.85rem);
letter-spacing: 0.35em;
opacity: 0.7;
transition: opacity 0.3s ease;
}
#quickNavText {
display: inline-block;
white-space: nowrap;
font-size: clamp(0.7rem, 1vw, 0.85rem);
letter-spacing: 0.35em;
text-transform: uppercase;
opacity: 0.7;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
/* ===== Navigation Items Container ===== */
#overlay .nav-item {
position: relative;
display: flex;
justify-content: center; /* Center icons */
align-items: center;
cursor: pointer;
text-decoration: none;
/* Fluid spacing between items */
margin: clamp(8px, 1vw, 12px) 0;
width: 100%;
}
/* ===== Icon & SVG Styling ===== */
#overlay i,
#overlay svg {
/* Fluid icon sizing */
font-size: clamp(32px, 5vw, 52px);
width: clamp(42px, 6vw, 72px);
height: clamp(32px, 5vw, 52px);
color: #fff;
display: inline-block;
transition: transform 0.3s ease, color 0.3s ease, fill 0.3s ease;
}
/* ===== Icon Hover Effects (Desktop Only) ===== */
@media (hover: hover) and (pointer: fine) {
#overlay .right-text > div:hover i,
#overlay .right-text > div:hover svg {
transform: scale(1.1);
}
}
/* ===== Brand/Company Heading ===== */
#overlay .content__sub {
font-size: clamp(1rem, 2vw, 1.25em);
background: #9ff14e;
color: #20282d;
padding: 0.45em 0.5em;
line-height: 1;
letter-spacing: 0.5em;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 15px;
text-align: center;
}
/* =============== Responsive Breakpoints =================================== */
/* ===== Large Tablets (≤1024px) ===== */
@media (max-width: 1024px) {
#overlay {
padding: 0 30px;
}
#overlay .right-text {
min-width: clamp(180px, 30vw, 350px);
}
}
/* ===== Tablets (≤768px) ===== */
@media (max-width: 768px) {
#overlay {
background-color: rgba(0, 0, 0, 0.5); /* Add background for readability */
padding: 0 20px;
flex-direction: column; /* Stack vertically on smaller screens */
justify-content: center;
gap: 30px;
}
.overlay-text {
font-size: 1.5rem;
max-width: 90%; /* Wider on tablets */
text-align: center;
text-shadow: none;
}
/* Right text container adjustments */
#overlay .right-text {
width: 90%;
max-width: 400px;
min-width: unset;
}
/* Smaller icons on tablets */
#overlay i,
#overlay svg {
font-size: 36px;
width: 36px;
height: 36px;
}
}
/* ===== Mobile Devices (≤480px) ===== */
@media (max-width: 480px) {
#overlay {
background-color: rgba(0, 0, 0, 0.6); /* Darker background for mobile */
padding: 0 15px;
}
.overlay-text {
font-size: 1.2rem;
max-width: 95%;
}
/* Hide right section completely on small mobile */
#overlay .right-text {
display: none !important;
}
/* Brand heading adjustments */
#overlay .content__sub {
font-size: 0.9rem;
letter-spacing: 0.3em;
}
}
/* ===== Extra Small Mobile (≤360px) ===== */
@media (max-width: 360px) {
#overlay {
padding: 0 10px;
}
.overlay-text {
font-size: 1rem;
}
}
/* =============== Utility Classes =================================== */
/* Hide active dot indicator (per your requirement) */
.active-dot {
display: none !important;
}
/* Globe container overlay (if needed) */
#globe-container-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* =============== Accessibility Improvements =================================== */
/* Ensure proper focus states for keyboard navigation */
#overlay .nav-item:focus-visible {
outline: 2px solid #9ff14e;
outline-offset: 4px;
border-radius: 4px;
}
/* Improve touch target sizes for mobile */
@media (max-width: 768px) {
#overlay .nav-item {
min-height: 44px; /* Minimum touch target size */
min-width: 44px;
}
}
/* =============== Animation Enhancements =================================== */
/* Smooth navigation item appearance */
#overlay .nav-item {
animation: fadeInUp 0.5s ease-out backwards;
}
#overlay .nav-item:nth-child(1) { animation-delay: 0.1s; }
#overlay .nav-item:nth-child(2) { animation-delay: 0.2s; }
#overlay .nav-item:nth-child(3) { animation-delay: 0.3s; }
#overlay .nav-item:nth-child(4) { animation-delay: 0.4s; }
#overlay .nav-item:nth-child(5) { animation-delay: 0.5s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =============== Anchor Tag Styling for Navigation =================================== */
/* Reset anchor tag styles to prevent any layout or design changes */
#overlay .nav-item a,
#overlay .right-text a {
/* Remove default link styling */
color: inherit;
text-decoration: none;
/* Ensure anchor takes full width/height of parent */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
/* Remove any default padding/margin */
padding: 0;
margin: 0;
/* Maintain cursor pointer */
cursor: pointer;
/* Smooth transitions */
transition: all 0.3s ease;
/* Prevent text selection on click */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* Remove tap highlight on mobile */
-webkit-tap-highlight-color: transparent;
/* Ensure proper positioning */
position: relative;
}
/* Remove any outline on focus (we'll add custom focus state) */
#overlay .nav-item a:focus {
outline: none;
}
/* Custom focus state for accessibility */
#overlay .nav-item a:focus-visible {
outline: 2px solid #9ff14e;
outline-offset: 4px;
border-radius: 8px;
}
/* Ensure anchor doesn't interfere with hover effects */
#overlay .nav-item a:hover {
color: inherit;
text-decoration: none;
}
/* Visited link state - keep same appearance */
#overlay .nav-item a:visited {
color: inherit;
}
/* Active state - slight scale down for feedback */
#overlay .nav-item a:active {
transform: scale(0.95);
}
/* Ensure SVGs inside anchors maintain their properties */
#overlay .nav-item a svg,
#overlay .nav-item a i {
pointer-events: none; /* Let anchor handle all clicks */
}
/* Optional: Add subtle background on hover for better UX */
@media (hover: hover) and (pointer: fine) {
#overlay .nav-item a:hover {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 8px;
}
}
/* Mobile touch feedback */
@media (max-width: 768px) {
#overlay .nav-item a:active {
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
}
/* ====================== Overlay /END============================== */
/* ===== Distribution Partner Footer ===== */
.distribution-footer {
margin-top: 18px;
display: flex;
align-items: center;
gap: 10px;
font-size: clamp(0.65rem, 1vw, 0.8rem);
opacity: 0.75;
}
/* Footer text */
.distribution-footer span {
white-space: nowrap;
}
/* Clickable logo */
.distribution-footer a {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* Logo image */
.distribution-footer img {
height: 40px;
width: auto;
object-fit: contain;
filter: brightness(1.1);
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Hover effect (desktop only) */
@media (hover: hover) and (pointer: fine) {
.distribution-footer a:hover img {
transform: scale(1.08);
opacity: 1;
}
}
/* Mobile sizing tweak */
@media (max-width: 768px) {
.distribution-footer {
justify-content: center;
}
.distribution-footer img {
height: 38px;
}
}
/* ==========================PROJECT====================== */
/* ===== Section Background ===== */
.project-section {
padding: 60px;
/* background: linear-gradient(45deg, #9FF14E, #20282D, #20282D, #20282D, #20282D); */
background: #1a1919;
background-size: 200% 200%;
/* animation: gradientShift 14s ease-in-out infinite; */
color: #ffffff;
}
/* ===== Centered Container ===== */
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
@keyframes gradientShift {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
/* ===== Content Styling ===== */
.project-content {
max-width: 50%;
}
.project-content h2 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.project-content p {
font-size: 1.1rem;
margin-bottom: 20px;
opacity: 0.9;
}
.contact-btn {
display: inline-block;
padding: 12px 25px;
background: #9FF14E;
color: #20282D;
font-weight: bold;
border-radius: 50px;
text-decoration: none;
transition: 0.3s;
}
.contact-btn:hover {
background: #ffffff;
color: #20282D;
}
.stats {
margin-top: 20px;
font-size: 1rem;
}
.stats span {
margin-right: 20px;
}
/* ===== Image Container ===== */
.project-images {
position: relative;
max-width: 40%;
display: flex;
justify-content: center;
align-items: center;
}
.main-img {
width: 250px;
border-radius: 50%;
/* border: 1px solid #9FF14E; */
animation: floatMain 6s ease-in-out infinite;
}
/* ===== Orbit Containers ===== */
.orbit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: orbitRotate 20s linear infinite;
z-index: 2;
}
/* Orbit variations */
.orbit-top-left {
width: 110%;
height: 100%;
animation-duration: 16s;
/* faster */
}
.orbit-top-right {
width: 50%;
/* horizontal ellipse */
height: 100%;
animation-duration: 9s;
}
.orbit-bottom-right {
width: 100%;
height: 120%;
/* vertical ellipse */
transform: translate(-50%, -50%) rotate(25deg);
/* tilted */
animation-duration: 19s;
/* slower */
}
/* ===== Small Images ===== */
.small-img {
width: 40px;
aspect-ratio: 1/1;
/* border-radius: 50%; */
/* border: 3px solid white; */
animation: floatSmall 5s ease-in-out infinite;
}
/* Position each small image on its orbit path */
.orbit-top-left .small-img {
position: absolute;
top: -15%;
left: -15%;
}
.orbit-top-right .small-img {
position: absolute;
top: -15%;
right: -15%;
}
.orbit-bottom-right .small-img {
position: absolute;
bottom: -15%;
right: -15%;
}
/* ===== Animations ===== */
@keyframes orbitRotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes floatMain {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
@keyframes floatSmall {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* ===== Responsive Design ===== */
/* Tablets */
@media (max-width: 768px) {
.project-container {
flex-direction: column;
text-align: center;
padding: 0 20px;
}
.project-content {
max-width: 100%;
margin-bottom: 30px;
}
.project-images {
max-width: 70%;
}
.main-img {
width: 180px;
}
.small-img {
width: 60px;
}
}
/* Mobile */
@media (max-width: 480px) {
.project-section {
padding: 30px 15px;
}
.project-content h2 {
font-size: 1.8rem;
}
.project-content p {
font-size: 1rem;
}
.contact-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.main-img {
width: 140px;
}
.small-img {
width: 50px;
}
.orbit-top-left .small-img {
top: -20%;
left: -20%;
}
.orbit-top-right .small-img {
top: -8%;
right: -20%;
}
.orbit-bottom-right .small-img {
bottom: -20%;
right: -8%;
}
}
/* ===== Animation Initial States ===== */
/* ===== Initial State for Main Image ===== */
.project-images {
position: relative;
}
.project-images .main-img {
opacity: 0;
position: absolute;
top: 50vh;
/* absolute center of viewport */
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
transition: all 1.2s ease-in-out;
z-index: 5;
}
/* Orbit & Content hidden initially */
.project-images .orbit,
.project-content {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* ===== Reveal Animation ===== */
.project-images.reveal .main-img {
opacity: 1;
position: relative;
/* goes back to normal flow */
top: auto;
left: auto;
transform: translate(0, 0) scale(1);
transition-delay: 0.2s;
}
.project-images.reveal .orbit {
opacity: 1;
transform: translateY(0);
}
.project-images.reveal .orbit:nth-child(2) {
transition-delay: 1.2s;
}
.project-images.reveal .orbit:nth-child(3) {
transition-delay: 1.5s;
}
.project-images.reveal .orbit:nth-child(4) {
transition-delay: 1.8s;
}
.project-content.reveal {
opacity: 1;
transform: translateY(0);
transition-delay: 2.2s;
/* last */
}
/* ==========================PROJECT /END====================== */
/* ========================= Glass Section ===================== */
.glass-section-main {
text-align: center;
background: transparent;
padding: 100px 10px;
margin-top: -95px;
}
/* ==== Layout wrapper for left + center + right ==== */
.glass-total-layout {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 30px;
max-width: 1600px;
margin: 0 auto;
flex-wrap: nowrap;
/* prevents center from pushing right pane */
}
/* ===== Glass Panes (left + right) ===== */
/* Stack both glass panes vertically on the left */
.glass-pane-stack {
display: flex;
flex-direction: column;
gap: 25px;
/* space between top and bottom panes */
flex: 1;
min-width: 250px;
max-width: 350px;
}
.glass-pane-left {
flex: 1;
min-width: 250px;
max-width: 350px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 40px 20px;
max-height: 550px;
background: rgba(10, 10, 10, 0.55);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 18px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
animation: autoLeft;
animation-timeline: view(80% auto);
animation-timing-function: ease-in-out;
}
.glass-pane-left h3 {
color: #fff;
font-size: 22px;
margin-bottom: 12px;
}
.glass-pane-left p {
color: #ddd;
font-size: 15px;
line-height: 1.6em;
}
/* Animation */
@keyframes autoLeft {
from {
transform: translateX(-300px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Glass Pane Right */
.glass-pane-right {
flex: 1;
/* expands evenly */
min-width: 250px;
max-width: 350px;
/* ensures glass panes don’t overgrow */
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 40px 20px;
max-height: 650px;
/* Glassmorphism */
background: rgba(10, 10, 10, 0.55);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 18px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
animation: autoRight;
animation-timeline: view(80% auto);
animation-timing-function: ease-in-out;
/* or try ease-in-out */
}
@keyframes autoRight {
from {
transform: translateX(300px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.glass-pane-right h3 {
color: #fff;
font-size: 22px;
margin-bottom: 12px;
}
.glass-pane-right p {
color: #ddd;
font-size: 15px;
line-height: 1.6em;
margin-bottom: 33px;
}
.glass-pane-right ul {
list-style-type: disc; /* Standard bullets */
padding-left: 20px; /* Indent bullets nicely */
margin-bottom: 15px;
}
.glass-pane-right ul li {
color: #ddd; /* Match paragraph color */
font-size: 15px; /* Match paragraph font size */
line-height: 1.6em; /* Match paragraph line height */
margin-bottom: 8px; /* Small spacing between items */
}
.responsive-video {
width: 100%;
height: auto;
max-width: 100%;
display: block;
border-radius: 12px;
/* optional, if you want rounded corners like images */
object-fit: cover;
/* keeps aspect ratio, fills area */
}
.youtube-wrapper {
width: 100%;
margin-top: 20px;
border-radius: 12px;
overflow: hidden;
/* same visual depth as glass panes */
background: rgba(10, 10, 10, 0.45);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.45),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
/* 16:9 aspect ratio */
aspect-ratio: 16 / 9;
}
.youtube-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* 🔹 Middle column for top glass + more*/
.mid-glass-center {
flex: 2;
/* wider than side panes */
max-width: 900px;
/* prevents overflow */
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
min-width: 0;
/* allows proper shrinking in flex */
/* animation: autoUp both; */
animation-timeline: view(80% 8%);
animation-timing-function: ease-in-out;
/* or try ease-in-out */
}
@keyframes autoUp {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.services-container {
padding: 40px 25px;
}
.services-title {
font-size: 2rem;
}
@keyframes showup-servicecard {
from {
transform: translateY(0) scale(1);
opacity: 1;
}
to {
transform: translateX(0) scale(1);
opacity: 1;
}
}
}
/* Top Glass Pane styling */
.top-glass-pane {
width: 100%;
max-width: 800px;
text-align: center;
padding: 30px 20px;
margin-bottom: 10px;
/* same glassmorphism */
background: rgba(10, 10, 10, 0.55);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 18px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.top-glass-pane h4 {
margin-bottom: 10px;
}
.top-glass-pane-2 {
width: 100%;
max-width: 800px;
text-align: center;
padding: 30px 20px;
margin-bottom: 20px;
/* same glassmorphism */
background: rgba(10, 10, 10, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 18px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.top-glass-pane-2 h4 {
margin-bottom: 10px;
}
/* Hide
by default (desktop/tablet) */
br.mobile-only {
display: none;
}
/* Show
on mobile only */
@media (max-width: 768px) {
br.mobile-only {
display: inline;
}
}
/* Bottom Glass Pane */
.glasscenter {
max-width: 1200px;
margin: 0 auto;
/* centers entire container horizontally */
display: flex;
justify-content: center;
/* centers the inner div */
gap: 0px;
margin-top: -40px;
}
.bot-glass-pane {
width: 100%;
max-width: 1200px;
text-align: center;
padding: 30px 20px;
margin-bottom: 20px;
/* same glassmorphism */
background: rgba(10, 10, 10, 0.55);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 18px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
/* animation: showup both; */
/* animation-timeline: view(98% 1%);
animation-timing-function: ease-in-out; */
/* or try ease-in-out */
}
@keyframes showup {
from {
transform: translateY(300px) scale(0.8);
opacity: 0;
}
to {
transform: translateX(0) scale(1);
opacity: 1;
}
}
/* ===== Text + headings + Button ===== */
.section-title {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
}
.section-heading {
font-size: 32px;
font-weight: bold;
margin: 10px 0;
color: #fff;
position: relative;
display: inline-block;
overflow: hidden;
background: linear-gradient(90deg, #4e7725, #9ff14e, #4e7725);
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* animation: shine 10s linear infinite; */
}
@keyframes shine {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
.section-heading span {
color: #9FF14E;
}
.section-desc {
max-width: 700px;
margin: 0 auto 40px;
color: #fff;
font-size: 16px;
line-height: 1.6rem;
}
.section-desc2 {
max-width: 700px;
margin: 0 auto 40px;
color: #fff;
font-size: 16px;
line-height: 1.8;
text-align: center;
letter-spacing: 0.3px;
}
.top-glass-pane .section-desc {
max-width: 700px;
margin: 0 auto 10px;
color: #fff;
font-size: 16px;
line-height: 1.6rem;
}
.see-more-btn {
display: inline-block;
padding: 6px 16px;
background: #9FF14E;
color: #20282D;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 0 25px rgba(159, 241, 78, 0.5);
cursor: pointer;
border: none;
/* remove old border */
margin-top: 20px;
}
.see-more-btn:hover {
background-color: #baff6b;
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(159, 241, 78, 0.8);
}
.section-desc span {
color: #9FF14E;
}
.section-des {
max-width: 700px;
margin: 0 auto 05px;
color: #fff;
font-size: 16px;
line-height: 1.6rem;
}
.section-desc-bottom {
max-width: 800px;
margin: 60px auto 20px;
color: #fff;
font-size: 16px;
}
/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1024px) {
.glass-total-layout {
flex-direction: column;
align-items: center;
gap: 20px;
}
.glass-pane {
width: 90%;
max-width: 350px;
}
.mid-glass-center {
max-width: 100%;
}
}
@media (max-width: 768px) {
@keyframes autoLeft {
from {
transform: translateX(-100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes autoRight {
from {
transform: translateY(300px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes autoUp {
from {
transform: translateY(300px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes autoR {
from {
transform: translateX(-300px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.glass-pane-right {
margin-bottom: 20px;
}
}
/* ========================= Glass Section /END =============== */
/* ========================= Slider Left Glass ==================== */
.slider-container {
width: 100%;
margin-bottom: 30px;
}
.slider {
width: 100%;
height: 120px;
overflow: hidden;
mask-image: linear-gradient(to right,
transparent,
#000 10% 90%,
transparent);
border-radius: 8px;
}
.slider .list {
display: flex;
width: 100%;
min-width: calc(var(--width) * var(--quantity));
position: relative;
}
.slider .list .item {
width: var(--width);
height: var(--height);
position: absolute;
left: 100%;
animation: autoRun 15s linear infinite;
transition: filter 0.5s;
animation-delay: calc((15s / var(--quantity)) * (var(--position) - 1) - 15s) !important;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
overflow: hidden;
/* ✅ important for responsive image fit */
}
/* ✅ Responsive image fit */
.slider .list .item img {
width: 100%;
height: 100%;
object-fit: contain;
/* change to 'cover' if you want no empty space */
display: block;
}
@keyframes autoRun {
from {
left: 100%;
}
to {
left: calc(var(--width) * -1);
}
}
.slider:hover .item {
animation-play-state: paused !important;
filter: grayscale(1);
}
.slider .item:hover {
filter: grayscale(0);
}
/* Code Display */
.code-display {
width: 100%;
background: #1e1e1e;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.code-header {
background: #2d2d30;
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #3e3e42;
}
.code-header .filename {
color: #d4d4d4;
font-size: 13px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.copy-btn {
background: #0e639c;
color: white;
border: none;
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background 0.2s;
}
.copy-btn:hover {
background: #1177bb;
}
.copy-btn:active {
background: #0d5689;
}
.code-content {
padding: 16px;
overflow-x: auto;
max-height: 400px;
overflow-y: auto;
text-align: left;
}
.code-content pre {
color: #d4d4d4;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
margin: 0;
text-align: left;
}
/* VS Code syntax highlighting */
.tag {
color: #d7ba7d;
}
.property {
color: #9cdcfe;
}
.value {
color: #ce9178;
}
.keyword {
color: #c586c0;
}
/* Scrollbar styling */
.code-content::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.code-content::-webkit-scrollbar-track {
background: #1e1e1e;
}
.code-content::-webkit-scrollbar-thumb {
background: #424242;
border-radius: 5px;
}
.code-content::-webkit-scrollbar-thumb:hover {
background: #4e4e4e;
}
@media (max-width: 768px) {
.slider {
height: 100px;
}
.code-content {
max-height: 300px;
}
}
/* ========================= Slider Left Glass /END =============== */
/* ========================= Slider Showcase Grid ==================*/
.slider-showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
width: 100%;
}
.slider-showcase-item {
position: relative;
width: 100%;
padding-bottom: 75%;
/* 4:3 aspect ratio */
border-radius: 12px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.slider-showcase-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.slider-showcase-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.slider-showcase-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
/* Buttons Container */
.slider-showcase-buttons {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
margin-top: 30px;
flex-wrap: wrap;
}
.slider-showcase-btn {
display: inline-block;
padding: 14px 36px;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
font-size: 1rem;
transition: all 0.3s ease;
text-align: center;
white-space: nowrap;
}
.slider-showcase-btn-primary {
background: #9FF14E;
color: #20282D;
box-shadow: 0 0 25px rgba(159, 241, 78, 0.5);
}
.slider-showcase-btn-primary:hover {
background-color: #baff6b;
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(159, 241, 78, 0.8);
}
.slider-showcase-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}
.slider-showcase-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-4px);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.slider-showcase-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
}
.slider-showcase-buttons {
flex-direction: column;
gap: 12px;
}
.slider-showcase-btn {
width: 100%;
max-width: 280px;
}
}
@media (max-width: 480px) {
.slider-showcase-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.slider-showcase-item {
padding-bottom: 60%;
/* Slightly shorter on mobile */
}
}
/* Ensure grid adapts when items are added/removed */
@media (min-width: 769px) and (max-width: 1024px) {
.slider-showcase-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
}
/* ========================= Slider Showcase Grid /END==================*/
/* ======================== WHY NOXBLOC ========================== */
.noxbloc-section-whynox {
position: relative;
background: linear-gradient(to top, rgba(26, 25, 25, 0) 0%, #1a1919 100%);
color: #fff;
padding: clamp(40px, 6vw, 80px) 20px;
overflow: hidden;
}
/* Logo overlay (background) */
.noxbloc-section-whynox::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(180px, 40vw, 400px);
/* responsive size */
height: clamp(180px, 40vw, 400px);
background: url("assets/img/logo6.png") no-repeat center center;
background-size: contain;
opacity: 0.5;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
/* Content above overlay */
.noxbloc-container-whynox {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.noxbloc-subtitle-whynox {
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: clamp(12px, 1.5vw, 14px);
color: #9ff14e;
margin-bottom: 10px;
text-align: left;
}
.noxbloc-title-whynox {
font-size: clamp(20px, 4vw, 32px);
line-height: 1.4;
margin-bottom: 40px;
text-align: left;
}
.noxbloc-title-whynox .highlight-whynox {
color: #9FF14E;
}
.noxbloc-grid-whynox {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(20px, 3vw, 35px);
}
/* Card Styling */
.noxbloc-card-whynox {
min-height: 300px;
display: flex;
flex-direction: column;
text-align: center;
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: clamp(20px, 4vw, 32px);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
position: relative;
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* Shine effect */
.noxbloc-card-whynox::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
transform: skewX(-25deg);
transition: left 0.7s ease;
}
.noxbloc-card-whynox:hover::after {
left: 200%;
}
.noxbloc-card-whynox:hover {
transform: scale(1.04) translateY(-4px);
box-shadow: 0px 8px 25px rgba(159, 241, 78, 0.35);
}
/* Icons */
.noxbloc-icon-whynox {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 18px;
color: #ffffff;
}
.noxbloc-icon-whynox svg {
width: clamp(42px, 6vw, 56px);
height: clamp(42px, 6vw, 56px);
}
.noxbloc-card-whynox h3 {
font-size: clamp(16px, 2vw, 20px);
margin-bottom: 12px;
color: #9FF14E;
}
.noxbloc-card-whynox p {
font-size: clamp(13px, 1.8vw, 15px);
line-height: 1.6;
color: #e0e0e0;
margin: 0;
}
/* Scroll animation */
.noxbloc-card-whynox {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.noxbloc-card-whynox.reveal {
opacity: 1;
transform: translateY(0);
}
/* Staggered animation effect */
.noxbloc-card-whynox.reveal {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Add delay for wave effect */
.noxbloc-card-whynox.reveal:nth-child(1) {
transition-delay: 0.1s;
}
.noxbloc-card-whynox.reveal:nth-child(2) {
transition-delay: 0.25s;
}
.noxbloc-card-whynox.reveal:nth-child(3) {
transition-delay: 0.4s;
}
.noxbloc-card-whynox.reveal:nth-child(4) {
transition-delay: 0.55s;
}
.noxbloc-card-whynox.reveal:nth-child(5) {
transition-delay: 0.7s;
}
.noxbloc-card-whynox.reveal:nth-child(6) {
transition-delay: 0.85s;
}
/* ================= RESPONSIVE ================= */
/* Tablet tweaks */
@media (max-width: 1024px) {
.noxbloc-title-whynox {
text-align: center;
}
.noxbloc-subtitle-whynox {
text-align: center;
}
}
/* Small mobile */
@media (max-width: 480px) {
.noxbloc-grid-whynox {
grid-template-columns: 1fr;
}
.noxbloc-card-whynox {
min-height: auto;
/* let it expand naturally */
padding: 20px;
}
}
/* ======================== WHY NOXBLOC /END ========================== */
/* ================= NOXBLOC Web3 Development Process Section ============= */
.web3-process {
background: linear-gradient(to top, rgba(26, 25, 25, 0) 0%, #1a1919 100%);
color: #fff;
text-align: center;
padding: 60px 20px;
}
.web3-process h1 {
font-size: clamp(24px, 4vw, 36px);
font-weight: bold;
margin-bottom: 50px;
}
.web3-process h1 span {
color: #9ff14e;
}
.web3-process .process {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
gap: 40px;
max-width: 1200px;
margin: 0 auto 80px;
position: relative;
padding-bottom: 40px;
}
/* Connecting line (default horizontal) */
.web3-process .process::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 2px;
background: linear-gradient(90deg, transparent, #9ff14e, transparent);
z-index: 1;
}
.web3-process .step {
flex: 1;
min-width: 160px;
max-width: 200px;
text-align: center;
position: relative;
opacity: 0;
transform: translateY(40px);
transition: all 0.8s ease-out;
z-index: 2;
}
.web3-process .step.active {
opacity: 1;
transform: translateY(0);
}
.web3-process .icon {
position: relative;
width: clamp(60px, 8vw, 90px);
height: clamp(60px, 8vw, 90px);
background: rgba(255, 255, 255, 0.1);
/* backdrop-filter: blur(8px); */
border: 1px solid rgba(255, 255, 255, 0.2);
margin: 0 auto 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 16px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
/* Shine strip */
.web3-process .icon::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0) 100%);
transform: skewX(-25deg);
transition: left 0.7s ease;
}
.web3-process .icon:hover::after {
left: 130%;
}
.web3-process .step:hover .icon {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(159, 241, 78, 0.6);
}
.web3-process h3 {
color: #9ff14e;
margin-bottom: 10px;
font-size: clamp(16px, 2vw, 20px);
}
.web3-process p {
font-size: clamp(13px, 1.8vw, 15px);
color: #ccc;
line-height: 1.6em;
}
/* Maintenance centered below */
.web3-process .maintenance {
max-width: 600px;
margin: 0 auto;
}
/* =================== Responsive =================== */
/* Large tablets: allow wrapping in two rows */
@media (max-width: 1024px) {
.web3-process .process {
flex-wrap: wrap;
justify-content: center;
gap: 40px 60px;
}
.web3-process .process::after {
width: 95%;
}
}
/* Mobile: vertical layout with vertical connecting line */
@media (max-width: 767px) {
.web3-process .process {
flex-direction: column;
align-items: center;
gap: 60px;
padding-bottom: 0;
}
/* Replace horizontal line with vertical */
.web3-process .process::after {
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #9ff14e, transparent);
}
.web3-process .step {
max-width: 100%;
}
}
/* ================= NOXBLOC Web3 Development Process Section /END ============= */
/* =========================== TECH STACK ======================================= */
.tech-stack {
padding: 70px 8%;
text-align: center;
color: #fff;
font-family: var(--body-font);
font-size: var(--normal-font-size);
/* background: linear-gradient(145deg, #1a1919, #1d1d1d); */
background: linear-gradient(to bottom, rgba(26, 25, 25, 0) 0%, #1a1919 100%);
}
.tech-stack h2 {
font-size: 3.2rem;
font-weight: 800;
margin-bottom: 60px;
letter-spacing: 1px;
color: #fff;
text-transform: uppercase;
position: relative;
display: inline-block;
}
.tech-stack h2::after {
content: "";
display: block;
width: 60%;
height: 4px;
background: #9FF14E;
margin: 12px auto 0;
border-radius: 10px;
}
.tech-stack-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 2 columns */
gap: 50px;
}
.tech-column {
position: relative;
padding: 40px 25px;
text-align: center;
background: rgba(255, 255, 255, 0.03);
/* card effect */
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.tech-column:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
border-color: #9FF14E;
}
.tech-column h3 {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 30px;
color: #9FF14E;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.tech-column ul {
list-style: none;
padding: 0;
margin: 0;
}
/* List items */
.tech-column ul li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 28px;
font-size: 1.2rem;
font-weight: 600;
color: #ddd;
text-align: center;
opacity: 0;
/* hidden by default */
transform: translateY(40px);
transition: color 0.3s ease;
}
.tech-column ul li.show {
animation: fadeUp 0.8s ease forwards;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.tech-column ul li.show {
animation: fadeUp 0.8s ease forwards;
}
.tech-column ul li i,
.tech-column ul li svg {
width: 2.6rem;
height: 2.6rem;
color: #fff;
filter: brightness(0) invert(1);
transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
}
/* Hover effect */
/* Responsive */
@media (max-width: 900px) {
.tech-stack-container {
grid-template-columns: 1fr;
}
}
/* Icons / Logos inside list */
.tech-column ul li i,
.tech-column ul li svg,
.tech-column ul li img {
width: 2.6rem;
height: 2.6rem;
object-fit: contain;
/* makes logos not stretch */
color: #fff;
filter: brightness(0) invert(1);
/* turns dark logos white */
transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
}
/* Hover effect */
.tech-column ul li:hover i,
.tech-column ul li:hover svg,
.tech-column ul li:hover img {
transform: scale(1.2);
}
/* =========================== TECH STACK /END ======================================= */
/* =========================== FOOTER ================================================ */
footer {
position: relative;
background: #000;
color: #fff;
padding: 90px 8%;
overflow: hidden;
z-index: 1;
}
footer {
position: relative;
overflow: hidden;
}
/* First Logo */
footer::before {
content: "";
position: absolute;
bottom: -40px;
left: 35%;
/* shifted a bit left */
transform: translateX(190%);
/* hidden initially */
width: 400px;
height: 400px;
background: url("../img/rahul.webp") no-repeat center center;
background-size: contain;
opacity: 0.07;
pointer-events: none;
z-index: 0;
filter: brightness(0) invert(1);
transition: transform 1.8s ease-out, opacity 1.8s ease-out;
}
/* Second Logo */
footer::after {
content: "";
position: absolute;
bottom: -40px;
left: 65%;
/* shifted a bit right */
transform: translateX(220%);
/* hidden initially */
width: 300px;
height: 400px;
background: url("../img/Icon-01.webp") no-repeat center center;
background-size: contain;
opacity: 0.07;
pointer-events: none;
z-index: 0;
filter: brightness(0) invert(1);
transition: transform 1.8s ease-out 0.6s, opacity 1.8s ease-out 0.6s;
/* delay for "after" effect */
}
/* Active State */
footer.show-logo::before {
transform: translateX(-90%);
opacity: 0.07;
}
footer.show-logo::after {
transform: translateX(-50%);
opacity: 0.07;
}
footer * {
position: relative;
z-index: 2;
/* keeps text & links above logo */
}
.footer-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
margin-bottom: 40px;
}
.footer-column h4 {
font-size: 0.85rem;
font-weight: 700;
color: #aaa;
margin-bottom: 20px;
letter-spacing: 1px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 12px;
}
.footer-column ul li a {
color: #fff;
text-decoration: none;
transition: 0.3s;
font-size: 1rem;
}
.footer-column ul li a:hover {
color: #9FF14E;
/* accent color */
}
.footer-column ul li a {
position: relative;
color: #fff;
text-decoration: none;
font-size: 1rem;
transition: color 0.3s ease;
}
.footer-column ul li a::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: #9FF14E;
/* green */
transform: scaleX(0);
transform-origin: left;
/* start from left */
transition: transform 0.6s ease;
}
.footer-column ul li a:hover {
color: #9FF14E;
}
.footer-column ul li a:hover::after {
transform: scaleX(1);
transform-origin: right;
/* collapse to right when leaving */
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 0.85rem;
color: #aaa;
}
.footer-bottom a {
color: #fff;
text-decoration: none;
margin: 0 5px;
transition: 0.3s;
}
.footer-bottom a:hover {
color: #9FF14E;
}
@media (max-width: 900px) {
.footer-container {
grid-template-columns: 1fr;
text-align: center;
gap: 30px;
}
.footer-bottom {
flex-direction: column;
gap: 10px;
text-align: center;
}
}
.glow-text {
font-size: 1rem;
color: #fff;
text-align: center;
letter-spacing: 2px;
animation: greenGlow 1s infinite alternate;
}
@keyframes greenGlow {
0% {
text-shadow: 0 0 0px #9FF14E;
color: #fff;
}
100% {
text-shadow: 0 0 10px #9FF14E, 0 0 30px #9FF14E;
color: #9FF14E;
}
}
@media (max-width: 900px) {
/* Hide first logo on mobile */
footer::before {
display: none;
}
/* Center second logo on mobile */
footer::after {
left: 50%;
transform: translateX(-50%);
/* center horizontally */
width: 250px;
/* scale down a bit if needed */
height: 250px;
transition: transform 1.8s ease-out, opacity 1.8s ease-out;
margin-bottom: 300px;
}
/* Keep text above */
footer * {
position: relative;
z-index: 2;
}
}
/* =========================== FOOTER /END ================================================ */
/* ================================ INVERTED =================================== */
/* ===== Section Background ===== */
.inverted-project-section {
padding: 60px;
background: #1a1919;
color: #ffffff;
}
/* ===== Centered Container ===== */
.inverted-project-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
/* ===== Content Styling ===== */
.inverted-project-content {
max-width: 50%;
/* animation: slideright both; */
/* animation-timeline: view(70% 10%); */
animation-timing-function: ease-in-out;
/* or try ease-in-out */
}
@keyframes slideright {
from {
transform: translateX(-300px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.inverted-project-content h2 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.inverted-project-content p {
font-size: 1.1rem;
margin-bottom: 20px;
opacity: 0.9;
}
.inverted-contact-btn {
display: inline-block;
padding: 12px 25px;
background: #9FF14E;
color: #20282D;
font-weight: bold;
border-radius: 50px;
text-decoration: none;
transition: 0.3s;
}
.inverted-contact-btn:hover {
background: #ffffff;
color: #20282D;
}
/* Stats layout */
.inverted-stats {
margin-top: 20px;
display: grid;
gap: 10px;
}
/* Each row */
.stat-item {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 1rem;
line-height: 1.3;
color: #fff;
}
/* The green tick */
.tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #9FF14E;
font-weight: 700;
font-size: 0.9rem;
flex: 0 0 22px;
/* prevents squish */
line-height: 1;
/* perfect centering */
}
.inverted-stats span {
display: block;
margin-bottom: 8px;
}
/* ===== Image Container ===== */
.inverted-project-images {
max-width: 40%;
display: flex;
justify-content: center;
align-items: center;
}
.inverted-main-img {
width: 450px;
animation: inverted-floatMain 6s ease-in-out infinite;
}
/* ===== Animations ===== */
@keyframes inverted-floatMain {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
.inverted-project-container {
flex-direction: column;
text-align: center;
padding: 0 20px;
}
.inverted-project-content {
max-width: 100%;
margin-top: 30px;
/* 👈 content now below image */
}
.inverted-project-images {
max-width: 70%;
}
.inverted-main-img {
width: 180px;
}
}
@media (max-width: 480px) {
.inverted-project-section {
padding: 30px 15px;
}
.inverted-project-content h2 {
font-size: 1.8rem;
}
.inverted-project-content p {
font-size: 1rem;
}
.inverted-contact-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.inverted-main-img {
width: 140px;
}
}
/* ================================ INVERTED /END =================================== */
/* ============================== Radon Plug & Play Section ============================= */
.radon-plug {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1919;
overflow: hidden;
padding: 60px 20px;
/* font-family: "Poppins", sans-serif; */
color: #fff;
}
.radon-bg-grid {
position: absolute;
top: 10%;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 40px;
opacity: 0.08;
transform: rotateX(55deg) rotateZ(45deg);
z-index: 0;
pointer-events: none;
}
.radon-bg-grid .cube {
background: #9FF14E;
border-radius: 4px;
animation: radonPulse 5s ease-in-out infinite;
}
@keyframes radonPulse {
0%,
100% {
opacity: 0.05;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.1);
}
}
.radon-inner {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 60px;
z-index: 2;
max-width: 1200px;
width: 100%;
}
.radon-visual {
width: 320px;
height: 320px;
position: relative;
perspective: 1000px;
flex: 1 1 280px;
}
.radon-visual .block {
position: absolute;
width: 100px;
height: 100px;
background: linear-gradient(145deg, #9FF14E, #6fc33e);
border-radius: 14px;
box-shadow: 0 0 30px rgba(159, 241, 78, 0.4);
animation: floatBlock 6s ease-in-out infinite alternate;
}
.radon-visual .block:nth-child(1) {
top: 40px;
left: 40px;
animation-delay: 0s;
}
.radon-visual .block:nth-child(2) {
top: 150px;
left: 150px;
animation-delay: 1.5s;
background: linear-gradient(145deg, #aaff58, #73c93c);
}
.radon-visual .block:nth-child(3) {
top: 230px;
left: 60px;
animation-delay: 3s;
background: linear-gradient(145deg, #cfff82, #9FF14E);
}
@keyframes floatBlock {
from {
transform: translateY(0) rotateX(20deg) rotateY(20deg);
}
to {
transform: translateY(-25px) rotateX(35deg) rotateY(35deg);
}
}
.radon-content {
flex: 1 1 400px;
max-width: 550px;
text-align: left;
}
.radon-title {
font-size: 2.8rem;
background: linear-gradient(90deg, #9FF14E, #d6ff96);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.radon-sub {
font-size: 1.3rem;
color: #d4d8cf;
margin-bottom: 20px;
}
.radon-desc {
font-size: 1.05rem;
line-height: 1.8;
color: #d9d9d9;
margin-bottom: 35px;
}
.radon-btn {
display: inline-block;
padding: 14px 36px;
background: #9FF14E;
color: #20282D;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 0 25px rgba(159, 241, 78, 0.5);
}
.radon-btn:hover {
background-color: #baff6b;
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(159, 241, 78, 0.8);
}
/* === Responsive === */
@media (max-width: 900px) {
.radon-inner {
flex-direction: column;
text-align: center;
}
.radon-content {
text-align: center;
}
.radon-visual {
width: 240px;
height: 240px;
}
.radon-title {
font-size: 2.2rem;
}
.radon-bg-grid {
grid-template-columns: repeat(6, 1fr);
gap: 25px;
}
}
/* ===================== RADON / END =================== */
/* ===========CHATBOT-SECTION============= */
.radon-one-section {
--radon-bg: #1a1919;
--radon-accent: #9FF14E;
--radon-cycle-duration: 6s;
}
/* Reset for section only */
.radon-one-section * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.radon-one-section {
font-family: "Montserrat", sans-serif;
background: var(--radon-bg);
color: #fff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
padding: 60px 20px;
}
.radon-one-bg-grid {
position: absolute;
top: 0;
right: 7%;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 40px;
opacity: 0.08;
transform: rotateX(-55deg) rotateZ(-45deg);
transform-origin: top right;
z-index: 0;
pointer-events: none;
}
.radon-one-bg-grid .radon-one-cube {
background: #9ff14e;
border-radius: 4px;
animation: radonOnePulse 5s ease-in-out infinite;
}
@keyframes radonOnePulse {
0%,
100% {
opacity: 0.05;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.1);
}
}
.radon-one-inner {
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
gap: 250px;
z-index: 2;
max-width: 1200px;
width: 100%;
}
.radon-one-visual {
width: 380px;
height: 480px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.radon-one-chat-container {
width: 100%;
height: 100%;
position: relative;
background: #1f1f1f;
border-radius: 16px;
border: 1px solid rgba(159, 241, 78, 0.2);
padding: 0;
overflow: hidden;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.6),
0 0 1px rgba(159, 241, 78, 0.3);
display: flex;
flex-direction: column;
}
.radon-one-chat-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 65px;
background: #181818;
border-bottom: 1px solid rgba(159, 241, 78, 0.15);
z-index: 1;
}
.radon-one-chat-messages {
position: absolute;
top: 80px;
left: 0;
right: 0;
bottom: 70px;
padding: 20px;
overflow-y: auto;
z-index: 2;
}
.radon-one-chat-input {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: #181818;
border-top: 1px solid rgba(159, 241, 78, 0.15);
padding: 15px 20px;
display: flex;
align-items: center;
gap: 12px;
z-index: 3;
}
.radon-one-input-field {
flex: 1;
background: #262626;
border: 1px solid rgba(159, 241, 78, 0.2);
border-radius: 25px;
padding: 12px 20px;
color: #fff;
font-size: 0.9rem;
outline: none;
font-family: inherit;
}
.radon-one-input-field::placeholder {
color: #666;
}
.radon-one-send-btn {
width: 40px;
height: 40px;
background: linear-gradient(145deg, var(--radon-accent), #6fc33e);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(159, 241, 78, 0.4);
transition: all 0.3s ease;
}
.radon-one-send-btn::before {
content: '➤';
color: #1a1919;
font-size: 16px;
font-weight: bold;
}
.radon-one-send-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(159, 241, 78, 0.6);
}
.radon-one-status-badge {
display: none !important;
}
.radon-one-typing-indicator {
position: absolute;
bottom: 90px;
left: 34px;
display: flex;
gap: 6px;
align-items: flex-end;
pointer-events: none;
animation: radonOneTypingCycle var(--radon-cycle-duration) linear infinite;
z-index: 4;
}
.radon-one-typing-indicator span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--radon-accent);
display: inline-block;
transform-origin: center;
animation: radonOneTypingDot 1s ease-in-out infinite;
box-shadow: 0 0 12px rgba(159, 241, 78, 0.6);
}
.radon-one-typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.radon-one-typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes radonOneTypingCycle {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes radonOneTypingDot {
0%,
60%,
100% {
transform: translateY(0);
opacity: 0.5;
}
30% {
transform: translateY(-10px);
opacity: 1;
}
}
.radon-one-chat-bubble {
position: absolute;
padding: 18px 22px;
border-radius: 22px;
font-size: 0.95rem;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
max-width: 220px;
will-change: opacity, transform;
pointer-events: none;
backdrop-filter: blur(10px);
}
.radon-one-chat-bubble.radon-one-user {
background: #2a2a2a;
color: #fff;
border-bottom-right-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.05);
top: 110px;
right: 28px;
opacity: 1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 4;
}
.radon-one-chat-bubble.radon-one-bot {
background: linear-gradient(145deg, var(--radon-accent), #6fc33e);
color: #1a1919;
font-weight: 600;
border-bottom-left-radius: 6px;
top: 185px;
left: 28px;
opacity: 0;
transform: translateY(10px) scale(0.98);
animation: radonOneBotCycle var(--radon-cycle-duration) linear infinite;
box-shadow: 0 4px 16px rgba(159, 241, 78, 0.35);
z-index: 4;
}
.radon-one-chat-bubble.radon-one-user-2 {
background: #2a2a2a;
color: #fff;
border-bottom-right-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.05);
top: 260px;
right: 28px;
opacity: 0;
transform: translateY(8px) scale(0.98);
animation: radonOneUser2Cycle var(--radon-cycle-duration) linear infinite;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 4;
}
@keyframes radonOneBotCycle {
0% {
opacity: 0;
transform: translateY(10px) scale(0.98);
filter: blur(2px);
}
20% {
opacity: 0;
transform: translateY(10px) scale(0.98);
filter: blur(2px);
}
25% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
45% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
50% {
opacity: 0;
transform: translateY(-8px) scale(0.98);
filter: blur(2px);
}
100% {
opacity: 0;
transform: translateY(-8px) scale(0.98);
filter: blur(2px);
}
}
@keyframes radonOneUser2Cycle {
0% {
opacity: 0;
transform: translateY(8px) scale(0.98);
filter: blur(2px);
}
45% {
opacity: 0;
transform: translateY(8px) scale(0.98);
filter: blur(2px);
}
50% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
70% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
75% {
opacity: 0;
transform: translateY(-6px) scale(0.98);
filter: blur(2px);
}
100% {
opacity: 0;
transform: translateY(-6px) scale(0.98);
filter: blur(2px);
}
}
.radon-one-bot-icon {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: linear-gradient(145deg, var(--radon-accent), #6fc33e);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow:
0 0 50px rgba(159, 241, 78, 0.5),
0 8px 32px rgba(159, 241, 78, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.3);
animation: radonOnePulser 3s ease-in-out infinite;
z-index: 10;
}
@keyframes radonOnePulser {
0%,
100% {
transform: translateX(-50%) scale(1);
box-shadow:
0 0 50px rgba(159, 241, 78, 0.5),
0 8px 32px rgba(159, 241, 78, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.3);
}
50% {
transform: translateX(-50%) scale(1.08);
box-shadow:
0 0 70px rgba(159, 241, 78, 0.7),
0 12px 48px rgba(159, 241, 78, 0.6),
inset 0 2px 8px rgba(255, 255, 255, 0.4);
}
}
.radon-one-content {
flex: 1 1 400px;
max-width: 550px;
}
.radon-one-title {
font-size: 2.8rem;
background: linear-gradient(90deg, var(--radon-accent), #d6ff96);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.radon-one-sub {
font-size: 1.3rem;
color: #d4d8cf;
margin-bottom: 20px;
}
.radon-one-desc {
font-size: 1.05rem;
line-height: 1.8;
color: #d9d9d9;
margin-bottom: 35px;
text-align: left;
}
.radon-one-benefits-grid {
list-style: none;
padding: 0;
margin: 25px 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 25px;
color: #d9d9d9;
text-align: left;
}
.radon-one-benefits-grid li {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
}
.radon-one-tick {
color: var(--radon-accent);
font-weight: bold;
font-size: 1.2rem;
}
.radon-one-features-title {
font-size: 1.5rem;
margin-top: 10px;
margin-bottom: 15px;
color: #9FF14E;
text-align: left;
}
.radon-one-btn {
display: inline-block;
padding: 14px 36px;
background: var(--radon-accent);
color: #20282D;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 0 25px rgba(159, 241, 78, 0.5);
}
.radon-one-btn:hover {
background-color: #baff6b;
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(159, 241, 78, 0.8);
}
@media (max-width: 900px) {
.radon-one-inner {
flex-direction: column;
text-align: center;
gap: 80px;
}
.radon-one-content {
text-align: center;
}
.radon-one-visual {
width: 340px;
height: 420px;
}
.radon-one-chat-container {
padding: 0;
}
.radon-one-chat-bubble.radon-one-user-2 {
display: none;
}
.radon-one-bg-grid {
grid-template-columns: repeat(6, 1fr);
gap: 25px;
}
}
/* ===========CHATBOT-SECTION /END============= */
/* ===========CHATBOT-SECTION /END============= */
/* ================== NOXCOMMERCE ================== */
.ecom-section {
margin: 0;
padding: 0;
box-sizing: border-box;
background: linear-gradient(135deg, #1a1919 0%, #1a1919 100%);
}
/* Grid Background with Animation */
.grid-bg {
position: relative;
background: linear-gradient(135deg, #1a1919 0%, #1a1919 100%);
padding: 100px 60px;
overflow: hidden;
font-family: "Montserrat", sans-serif;
}
.grid-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 255, 0, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 0, 0.15) 1px, transparent 1px);
background-size: 65px 65px;
opacity: 0.3;
pointer-events: none;
animation: gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.5;
}
}
/* Floating Particles */
.ecom-section .particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
overflow: hidden;
}
.ecom-section .particle {
position: absolute;
width: 50px;
height: 50px;
background: #baff6b;
border-radius: 50%;
box-shadow: 0 0 10px #9FF14E;
animation: float 15s infinite ease-out;
opacity: 0.2;
}
.ecom-section .particle:nth-child(1) {
left: 10%;
animation-delay: 0s;
animation-duration: 12s;
}
.ecom-section .particle:nth-child(2) {
left: 30%;
animation-delay: 2s;
animation-duration: 15s;
}
.ecom-section .particle:nth-child(3) {
left: 50%;
animation-delay: 4s;
animation-duration: 18s;
}
.ecom-section .particle:nth-child(4) {
left: 70%;
animation-delay: 1s;
animation-duration: 13s;
}
.ecom-section .particle:nth-child(5) {
left: 90%;
animation-delay: 3s;
animation-duration: 16s;
}
@keyframes float {
0%, 100% {
transform: translateY(100vh) translateX(0);
opacity: 0;
}
10% {
opacity: 0.5;
}
90% {
opacity: 0;
}
100% {
transform: translateY(-100px) translateX(100px);
opacity: 0;
}
}
/* Section Layout */
.ecom-section {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
color: white;
width: 100%;
z-index: 1;
padding: 100px;
}
/* Content Styling */
.ecom-section .content {
width: 50%;
animation: fadeInLeft 0.8s ease-out;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ecom-section .noxcom-title {
font-size: 2.8rem;
background: linear-gradient(90deg, #9ff14e, #d6ff96);
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.ecom-section .content p {
line-height: 1.6;
font-size: 18px;
color: #d9d9d9;
margin-bottom: 25px;
}
/* Features */
.ecom-section .features {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.ecom-section .feature-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 255, 0, 0.2);
border-radius: 8px;
color: #9ff14e;
font-size: 18px;
font-weight: 500;
transition: all 0.3s ease;
cursor: default;
}
.ecom-section .feature-item:hover {
background: rgba(0, 255, 0, 0.1);
border-color: #9ff14e;
transform: translateY(-2px);
}
/* Additional Info Section */
.ecom-section .additional-info {
margin-top: 30px;
}
.ecom-section .additional-info h3 {
font-size: 24px;
color: #9ff14e;
margin-bottom: 15px;
font-weight: 600;
}
.ecom-section .benefits-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 20px;
}
.ecom-section .benefits-list li {
padding: 6px 0;
padding-left: 25px;
position: relative;
color: #d9d9d9;
font-size: 14px;
line-height: 1.5;
}
.ecom-section .benefits-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #9ff14e;
font-size: 16px;
font-weight: bold;
}
/* CTA Button */
.ecom-section .cta-button {
margin-top: 30px;
padding: 14px 36px;
font-size: 16px;
font-weight: 600;
color: #0a0a0a;
background: #9ff14e;
border: none;
border-radius: 30px;
width: 50%;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(159, 241, 78, 0.3);
}
.ecom-section .cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(159, 241, 78, 0.5);
}
.ecom-section .cta-button:active {
transform: translateY(-1px);
}
/* Showcase Container */
.ecom-section .showcase-container {
width: 45%;
max-width: 700px;
position: relative;
height: 600px;
animation: fadeInRight 0.8s ease-out;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Showcase Images */
.ecom-section .showcase-image {
position: absolute;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
overflow: hidden;
}
.ecom-section .showcase-image:hover {
transform: translateY(-10px) scale(1.02);
z-index: 10;
}
.ecom-section .showcase-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Image 1 - Large back left */
.ecom-section .showcase-image-1 {
width: 380px;
height: 450px;
top: 0;
left: 0;
z-index: 1;
transform: rotate(-5deg);
}
/* Image 2 - Medium center */
.ecom-section .showcase-image-2 {
width: 350px;
height: 280px;
top: 80px;
left: 150px;
z-index: 3;
}
/* Image 3 - Small top right */
.ecom-section .showcase-image-3 {
width: 280px;
height: 320px;
top: 20px;
right: 0;
z-index: 2;
transform: rotate(5deg);
}
/* Responsive - Tablet */
@media (max-width: 968px) {
.ecom-section {
flex-direction: column;
padding: 60px 30px;
}
.ecom-section .content,
.ecom-section .showcase-container {
width: 100%;
max-width: 600px;
}
.ecom-section .showcase-container {
height: 500px;
}
.ecom-section .noxcom-title {
font-size: 2.4rem;
}
.ecom-section .benefits-list {
grid-template-columns: 1fr;
}
.ecom-section .cta-button {
width: 100%;
}
/* Adjust showcase for tablet */
.ecom-section .showcase-image-1 {
width: 280px;
height: 350px;
}
.ecom-section .showcase-image-2 {
width: 260px;
height: 220px;
left: 100px;
}
.ecom-section .showcase-image-3 {
width: 220px;
height: 260px;
}
}
/* Responsive - Small Mobile */
@media (max-width: 412px) {
.ecom-section {
padding: 40px 20px;
}
.ecom-section .showcase-container {
height: 350px;
}
.ecom-section .noxcom-title {
font-size: 2rem;
}
.ecom-section .content p {
font-size: 16px;
}
/* Scale down showcase images significantly */
.ecom-section .showcase-image-1 {
width: 180px;
height: 220px;
}
.ecom-section .showcase-image-2 {
width: 160px;
height: 140px;
left: 60px;
top: 60px;
}
.ecom-section .showcase-image-3 {
width: 140px;
height: 170px;
top: 15px;
}
.ecom-section .feature-item {
font-size: 14px;
padding: 8px 14px;
}
.ecom-section .additional-info h3 {
font-size: 20px;
}
.ecom-section .benefits-list li {
font-size: 13px;
}
}
/* Pricing Note */
.ecom-section .pricing-note {
margin-top: 40px;
padding: 25px 30px;
border-radius: 14px;
background: linear-gradient(
135deg,
rgba(159, 241, 78, 0.12),
rgba(159, 241, 78, 0.05)
);
border: 1px solid rgba(159, 241, 78, 0.35);
box-shadow: 0 10px 35px rgba(159, 241, 78, 0.15);
max-width: 420px;
position: relative;
overflow: hidden;
}
/* Glow accent */
.ecom-section .pricing-note::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at top left,
rgba(159, 241, 78, 0.35),
transparent 60%
);
opacity: 0.35;
pointer-events: none;
}
/* Price */
.ecom-section .pricing-note h3 {
margin: 0 0 10px;
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(90deg, #ffffff, #baff6b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1px;
}
/* Pricing text */
.ecom-section .pricing-note p {
margin: 0;
font-size: 15px;
color: #d9d9d9;
line-height: 1.6;
}
/* Emphasis line (Cancel anytime, etc.) */
.ecom-section .pricing-note p strong {
color: #9ff14e;
font-weight: 600;
}
/* Hover micro-interaction */
.ecom-section .pricing-note:hover {
transform: translateY(-3px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 14px 45px rgba(159, 241, 78, 0.25);
}
/* Responsive */
@media (max-width: 968px) {
.ecom-section .pricing-note {
max-width: 100%;
}
.ecom-section .pricing-note h3 {
font-size: 1.9rem;
}
}
@media (max-width: 412px) {
.ecom-section .pricing-note {
padding: 20px;
}
.ecom-section .pricing-note h3 {
font-size: 1.7rem;
}
.ecom-section .pricing-note p {
font-size: 14px;
}
}
/* ==============NOXCOMMERCE-END================ */
/* ===================== Services Section =============== */
.new-services-section {
--gap: 20px;
--left-w: 80px;
--accent: #9ff14e;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 200px 20px 80px;
background: linear-gradient(180deg, #1a1919 60%, #9ff14e 100%);
overflow-x: hidden;
overflow-y: visible;
position: relative;
}
.new-slider-container {
width: 100%;
max-width: none;
padding-left: clamp(16px, 4vw, 80px);
padding-right: clamp(16px, 6vw, 120px);
height: clamp(60vh, 75vh, 85vh);
display: flex;
background: transparent;
overflow: visible;
position: relative;
}
/* Updated h1 styling - now positioned relative to section */
.new-slider-container h1 {
font-size: clamp(28px, 5vw, 48px);
font-weight: 700;
background: linear-gradient(90deg, #9FF14E, #d6ff96);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 90%;
z-index: 10;
margin: 0;
padding: 0 20px;
line-height: 1.2;
}
/* Swipe Indicator - hidden by default (only for slider) */
.swipe-indicator {
position: absolute;
top: -55px;
left: 50%;
transform: translateX(-50%);
display: none;
align-items: center;
gap: clamp(6px, 1vw, 10px);
color: #ffffff;
font-size: clamp(10px, 1.2vw, 13px);
font-weight: 600;
letter-spacing: clamp(1.5px, 0.3vw, 2.5px);
z-index: 15;
animation: swipeHint 2s ease-in-out infinite;
white-space: nowrap;
}
.swipe-indicator svg {
width: clamp(16px, 2vw, 22px);
height: clamp(16px, 2vw, 22px);
animation: arrowSlide 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes swipeHint {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
@keyframes arrowSlide {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
}
/* Left controls (pane) */
.left-controls {
width: var(--left-w);
min-width: var(--left-w);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 18px 10px;
z-index: 20;
position: relative;
}
.arrow-btn {
width: 56px;
height: 56px;
border-radius: 50%;
border: 2px solid rgba(159, 241, 78, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
transition: all .3s ease;
color: rgba(159, 241, 78, 0.8);
background: rgba(32, 40, 45, 0.5);
font-size: 28px;
font-weight: 300;
}
.arrow-btn:hover {
background: rgba(159, 241, 78, 0.15);
border-color: rgba(159, 241, 78, 0.6);
color: #9ff14e;
transform: scale(1.1);
box-shadow: 0 0 20px rgba(159, 241, 78, 0.3);
}
.arrow-btn.disabled {
opacity: 0.2;
cursor: not-allowed;
transform: none;
border-color: rgba(255, 255, 255, 0.1);
}
/* Slides area */
.viewport {
flex: 1;
overflow: visible;
height: 100%;
position: relative;
touch-action: pan-y pinch-zoom;
}
.slides-wrapper {
display: flex;
gap: var(--gap);
align-items: stretch;
height: 100%;
transition: transform .7s cubic-bezier(.25, .8, .25, 1);
will-change: transform;
padding: 10px 20px 10px 0;
overflow: visible;
width: max-content;
cursor: grab;
}
.slides-wrapper:active {
cursor: grabbing;
}
.slide {
flex: 0 0 clamp(280px, 24vw, 340px);
min-width: clamp(280px, 24vw, 340px);
height: 100%;
background: rgba(32, 40, 45, 0.6);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: clamp(30px, 4vh, 40px) clamp(20px, 3vw, 30px);
position: relative;
overflow: hidden;
transition: all .5s cubic-bezier(.25, .8, .25, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
opacity: 1;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
user-select: none;
}
/* Hover state - brighten and scale */
.slide.is-hover {
opacity: 1;
transform: scale(1.05);
z-index: 10;
box-shadow: 0 20px 80px rgba(186, 255, 107, 0.4), 0 0 60px rgba(32, 40, 45, 0.2);
border-color: rgba(159, 241, 78, 0.3);
}
/* Dimmed state */
.slide.is-dim {
opacity: 0.25;
transform: scale(0.95);
}
/* Glowing background - only visible on hover */
.slide .glow-bg {
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center,
rgba(186, 255, 107, 0.4) 0%,
rgba(32, 40, 45, 0.3) 25%,
transparent 60%);
opacity: 0;
transition: opacity .6s ease;
pointer-events: none;
z-index: 1;
filter: blur(40px);
}
.slide.is-hover .glow-bg {
opacity: 1;
}
/* Icon styling - larger and centered */
.slide .icon-wrap {
width: clamp(80px, 10vw, 100px);
height: clamp(80px, 10vw, 100px);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: clamp(20px, 3vh, 30px);
z-index: 6;
position: relative;
color: rgba(255, 255, 255, 0.5);
transition: all .5s ease;
}
.slide.is-hover .icon-wrap {
color: rgba(255, 255, 255, 0.9);
transform: translateY(-5px);
}
.slide .icon-wrap svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 10px rgba(255, 59, 107, 0.3));
}
/* Title styling */
.slide h3 {
margin: 0 0 8px 0;
font-size: clamp(26px, 3.5vw, 32px);
font-weight: 600;
line-height: 1.2;
color: #fff;
z-index: 6;
position: relative;
letter-spacing: 0.5px;
}
/* Subtitle - small caps style */
.slide .subtitle {
margin: 0 0 clamp(15px, 2vh, 20px) 0;
font-size: clamp(10px, 1.2vw, 11px);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(159, 241, 78, 0.7);
z-index: 6;
position: relative;
}
/* Description - hidden by default */
.slide .desc {
margin: 0 0 clamp(20px, 2.5vh, 25px) 0;
color: rgba(255, 255, 255, 0.85);
font-size: clamp(13px, 1.5vw, 14px);
line-height: 1.6;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all .5s cubic-bezier(.25, .8, .25, 1);
z-index: 6;
position: relative;
}
.slide.is-hover .desc {
max-height: 200px;
opacity: 1;
}
/* CTA Button */
.slide .cta {
display: inline-block;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid rgba(159, 241, 78, 0.4);
background: transparent;
color: rgba(159, 241, 78, 0.9);
text-decoration: none;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.5px;
z-index: 6;
position: relative;
transition: all .3s ease;
opacity: 0;
transform: translateY(10px);
}
.slide.is-hover .cta {
opacity: 1;
transform: translateY(0);
background: rgba(32, 40, 45, 0.15);
border-color: rgba(186, 255, 107, 0.6);
color: #fff;
box-shadow: 0 5px 20px rgba(186, 255, 107, 0.3);
}
.slide.is-hover .cta:hover {
background: rgba(159, 241, 78, 0.25);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(186, 255, 107, 0.4);
}
/* Remove the old reveal effect */
.slide .reveal {
display: none;
}
/* Content layer */
.slide .content-layer {
position: relative;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Desktop adjustments */
@media (min-width: 1400px) {
.new-services-section {
padding: 220px 20px 100px;
}
.new-slider-container h1 {
font-size: 52px;
top: -140px;
}
}
/* Tablet breakpoint */
@media (max-width: 1100px) {
.new-services-section {
--gap: 16px;
padding: 180px 20px 70px;
}
.new-slider-container h1 {
font-size: clamp(26px, 4.5vw, 42px);
top: -110px;
}
.slide {
flex: 0 0 clamp(260px, 28vw, 300px);
min-width: clamp(260px, 28vw, 300px);
}
.arrow-btn {
width: 48px;
height: 48px;
font-size: 24px;
}
.left-controls {
width: 60px;
min-width: 60px;
}
}
/* ==================== MOBILE GRID VIEW ==================== */
/* Tablet portrait and below - Switch to Grid */
@media (max-width: 800px) {
.new-services-section {
--gap: 20px;
padding: 140px 20px 60px;
min-height: auto;
}
.new-slider-container {
height: auto;
padding: 0;
display: block;
}
.new-slider-container h1 {
font-size: clamp(24px, 6vw, 36px);
top: -100px;
max-width: 95%;
position: absolute;
}
/* Hide swipe indicator on grid */
.swipe-indicator {
display: none !important;
}
/* Hide slider controls */
.left-controls {
display: none;
}
/* Convert viewport to grid container */
.viewport {
overflow: visible;
height: auto;
}
.slides-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: var(--gap);
width: 100%;
padding: 0;
height: auto;
transition: none;
transform: none !important;
cursor: default;
}
.slides-wrapper:active {
cursor: default;
}
/* Grid slides - reset slider properties */
.slide {
flex: none;
min-width: auto;
width: 100%;
height: auto;
min-height: 400px;
cursor: default;
transform: none !important;
opacity: 1 !important;
}
/* Remove hover/dim effects on mobile grid */
.slide.is-hover,
.slide.is-dim {
opacity: 1 !important;
transform: none !important;
}
/* Always show description on mobile grid */
.slide .desc {
max-height: none;
opacity: 1;
font-size: 13px;
line-height: 1.5;
}
/* Always show CTA on mobile grid */
.slide .cta {
opacity: 1;
transform: translateY(0);
}
/* Adjust icon size for mobile grid */
.slide .icon-wrap {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
/* Adjust heading size for mobile grid */
.slide h3 {
font-size: 22px;
margin-bottom: 6px;
}
.slide .subtitle {
font-size: 10px;
margin-bottom: 15px;
}
.slide .desc {
margin-bottom: 18px;
}
}
/* Mobile single column */
@media (max-width: 600px) {
.new-services-section {
padding: 130px 15px 50px;
}
.new-slider-container h1 {
font-size: clamp(20px, 7vw, 32px);
top: -90px;
letter-spacing: 1.5px;
}
.slides-wrapper {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 18px;
}
.slide {
min-height: 380px;
padding: 30px 25px;
}
.slide h3 {
font-size: 24px;
}
.slide .desc {
font-size: 13px;
}
}
/* Small mobile */
@media (max-width: 480px) {
.new-services-section {
--gap: 16px;
padding: 120px 15px 45px;
}
.new-slider-container h1 {
font-size: clamp(18px, 8vw, 28px);
top: -85px;
letter-spacing: 1px;
max-width: 100%;
padding: 0 15px;
}
.slides-wrapper {
gap: 16px;
}
.slide {
min-height: 360px;
padding: 25px 20px;
}
.slide .icon-wrap {
width: 65px;
height: 65px;
margin-bottom: 18px;
}
.slide h3 {
font-size: 22px;
}
.slide .subtitle {
font-size: 9px;
}
.slide .desc {
font-size: 12px;
}
.slide .cta {
padding: 10px 20px;
font-size: 12px;
}
}
/* Extra small screens */
@media (max-width: 360px) {
.new-services-section {
padding: 110px 12px 40px;
}
.new-slider-container h1 {
font-size: clamp(16px, 9vw, 24px);
top: -80px;
}
.slide {
min-height: 340px;
padding: 22px 18px;
}
}
/* ===================== Services Section /END =============== */
/* ================== FAQ ========================= */
.faq-section {
background: linear-gradient(to bottom, rgba(26, 25, 25, 0) 0%, #1a1919 100%);
color: #fff;
padding: 60px 20px;
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; */
}
.faq-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
.faq-header {
max-width: 500px;
}
.faq-badge {
display: inline-block;
background-color: #1a1a1a;
color: #fff;
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
margin-bottom: 24px;
border: 1px solid #333;
}
.faq-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 600;
line-height: 1.2;
margin: 0 0 20px 0;
}
.faq-description {
color: #999;
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
transition: all 0.3s ease;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 28px;
cursor: pointer;
user-select: none;
transition: background-color 0.3s ease;
color: #ffffff;
}
.faq-question:hover {
background-color: #1a1919;
}
.faq-question-text {
font-size: 18px;
font-weight: 500;
margin: 0;
padding-right: 20px;
}
.faq-toggle {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #baff6b 0%, #78ff00 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.faq-toggle::before,
.faq-toggle::after {
content: '';
position: absolute;
width: 14px;
height: 2px;
background-color: #1a1919;
transition: transform 0.3s ease;
}
.faq-toggle::after {
transform: rotate(90deg);
}
.faq-item.active .faq-toggle::after {
transform: rotate(0deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 28px 24px 28px;
}
.faq-answer-text {
color: #ffffff;
font-size: 15px;
line-height: 1.6;
margin: 0;
}
@media (min-width: 768px) {
.faq-section {
padding: 80px 40px;
}
.faq-container {
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
}
@media (min-width: 1024px) {
.faq-section {
padding: 100px 60px;
}
.faq-question-text {
font-size: 19px;
}
}
/* ================== FAQ /END========================= */
/* ============== NoxBloc Process ============== */
.noxblocp-process-section {
background: linear-gradient(180deg, #0c1519 0%, #1a1919 100%);
padding: 80px 20px;
color: #e0e0e0;
position: relative;
overflow: hidden;
}
.noxblocp-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.noxblocp-header {
text-align: center;
margin-bottom: 60px;
}
.noxblocp-header h2 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
margin: 0 0 20px 0;
background: linear-gradient(135deg, #9ff14e 0%, #baff6b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.noxblocp-header p {
font-size: clamp(1rem, 2.5vw, 1.25rem);
color: #b0b0b0;
margin: 0;
line-height: 1.6;
}
.noxblocp-timeline {
position: relative;
padding: 40px 0;
}
.noxblocp-step {
position: relative;
margin-bottom: 60px;
display: flex;
align-items: center;
opacity: 0;
animation: fadeInUp 0.8s forwards;
background: rgba(255, 255, 255, 0.02);
border: 2px dashed rgba(159, 241, 78, 0.4);
border-radius: 30px;
padding: 40px;
transition: all 0.4s ease;
}
.noxblocp-step:hover {
border-color: rgba(186, 255, 107, 0.8);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 20px 60px rgba(186, 255, 107, 0.2);
transform: translateY(-5px);
}
.noxblocp-step:nth-child(1) {
animation-delay: 0.2s;
}
.noxblocp-step:nth-child(2) {
animation-delay: 0.4s;
}
.noxblocp-step:nth-child(3) {
animation-delay: 0.6s;
}
.noxblocp-step:nth-child(4) {
animation-delay: 0.8s;
}
.noxblocp-step-content {
flex: 1;
padding: 0 40px;
}
.noxblocp-step:nth-child(1) .noxblocp-step-content {
text-align: left;
order: 2;
}
.noxblocp-step:nth-child(2) .noxblocp-step-content {
text-align: right;
order: 1;
}
.noxblocp-step:nth-child(3) .noxblocp-step-content {
text-align: left;
order: 2;
}
.noxblocp-step:nth-child(4) .noxblocp-step-content {
text-align: right;
order: 1;
}
.noxblocp-step:nth-child(1) .noxblocp-step-icon {
order: 1;
}
.noxblocp-step:nth-child(2) .noxblocp-step-icon {
order: 2;
}
.noxblocp-step:nth-child(3) .noxblocp-step-icon {
order: 1;
}
.noxblocp-step:nth-child(4) .noxblocp-step-icon {
order: 2;
}
.noxblocp-step-icon {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, #baff6b 0%, #78ff00 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 3;
box-shadow: 0 10px 40px rgba(214, 255, 150, 0.4),
0 0 0 15px rgba(214, 255, 150, 0.1),
0 0 0 30px rgba(214, 255, 150, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0;
}
.noxblocp-step-icon::before {
content: '';
position: absolute;
inset: -20px;
border-radius: 50%;
border: 2px dashed rgba(159, 241, 78, 0.3);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.noxblocp-step:hover .noxblocp-step-icon {
transform: scale(1.1);
box-shadow: 0 15px 50px rgba(186, 255, 107, 0.6),
0 0 0 15px rgba(214, 255, 150, 0.15),
0 0 0 30px rgba(214, 255, 150, 0.08);
}
.noxblocp-step:hover .noxblocp-step-icon::before {
border-color: rgba(186, 255, 107, 0.6);
}
.noxblocp-step-icon svg {
width: 50px;
height: 50px;
stroke: #0c1519;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.noxblocp-step-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
margin: 0 0 15px 0;
color: #ffffff;
position: relative;
display: inline-block;
}
.noxblocp-step:nth-child(1) .noxblocp-step-title::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 60%;
height: 3px;
background: linear-gradient(90deg, #9FF14E, transparent);
}
.noxblocp-step:nth-child(2) .noxblocp-step-title::after {
content: '';
position: absolute;
right: 0;
bottom: -8px;
width: 60%;
height: 3px;
background: linear-gradient(90deg, transparent, #9FF14E);
}
.noxblocp-step:nth-child(3) .noxblocp-step-title::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 60%;
height: 3px;
background: linear-gradient(90deg, #9FF14E, transparent);
}
.noxblocp-step:nth-child(4) .noxblocp-step-title::after {
content: '';
position: absolute;
right: 0;
bottom: -8px;
width: 60%;
height: 3px;
background: linear-gradient(90deg, transparent, #9FF14E);
}
.noxblocp-step-description {
font-size: clamp(0.95rem, 2vw, 1.1rem);
color: #b0b0b0;
line-height: 1.7;
margin: 0;
}
.noxblocp-step-description ul {
list-style: none;
margin: 0.5em 0 0 1.5em;
padding: 0;
}
.noxblocp-step-description ul li {
position: relative;
margin-bottom: 0.7em;
padding-left: 1.8em;
font-size: inherit;
color: inherit;
line-height: inherit;
}
.noxblocp-cta {
text-align: center;
margin-top: 20px;
}
.noxblocp-cta-button {
display: inline-block;
padding: 18px 36px;
background: #9FF14E;
color: #20282D;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 0 25px rgba(159, 241, 78, 0.5);
}
.noxblocp-cta-button:hover {
background-color: #baff6b;
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(159, 241, 78, 0.8);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.noxblocp-process-section {
padding: 60px 15px;
}
.noxblocp-step {
flex-direction: column !important;
margin-bottom: 40px;
padding: 30px 20px;
text-align: center !important;
}
.noxblocp-step-content {
text-align: center !important;
padding: 20px 0 0 0;
order: 2 !important;
}
.noxblocp-step-icon {
width: 90px;
height: 90px;
flex-shrink: 0;
order: 1 !important;
margin-bottom: 20px;
}
.noxblocp-step-icon::before {
inset: -15px;
}
.noxblocp-step-icon svg {
width: 40px;
height: 40px;
}
.noxblocp-header {
margin-bottom: 40px;
}
.noxblocp-cta {
margin-top: 60px;
}
.noxblocp-step-title::after {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
}
}
@media (max-width: 480px) {
.noxblocp-step-icon {
width: 70px;
height: 70px;
}
.noxblocp-step-icon::before {
inset: -12px;
}
.noxblocp-step-icon svg {
width: 32px;
height: 32px;
}
.noxblocp-step {
padding: 25px 15px;
}
}
/* ============== NoxBloc Process /END============== */
/* ===== Latest Projects (Scoped Styles) ===== */
.latest-projects-section {
position: relative;
overflow: hidden;
padding: 160px 90px;
color: #9ff14e;
background-color: #1a1919; /* HARD EDGE COLOR */
}
/* ===== ATMOSPHERIC CENTER BACKGROUND (NO BLUE EDGES) ===== */
.latest-projects-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 45%, #20282d 0%, #1a1919 65%),
radial-gradient(circle at 20% 30%, rgba(32, 40, 45, 0.45), transparent 55%),
radial-gradient(circle at 80% 70%, rgba(32, 40, 45, 0.35), transparent 60%);
z-index: 0;
pointer-events: none;
}
/* ===== EDGE OVERRIDE (KILLS ALL BLUE TINT) ===== */
.latest-projects-section::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
#1a1919 0%,
rgba(26, 25, 25, 0) 22%,
rgba(26, 25, 25, 0) 78%,
#1a1919 100%
);
z-index: 0;
pointer-events: none;
}
.latest-projects-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
margin-bottom: 80px;
margin-top: 80px;
}
.latest-projects-title {
font-size: 3rem;
font-weight: 700;
text-align: center;
color: #ffffff;
margin-bottom: 60px;
}
.latest-project {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 100px;
}
.latest-project:last-child {
margin-bottom: 0;
}
.latest-project.reverse {
direction: rtl;
}
.latest-project.reverse > * {
direction: ltr;
}
.latest-project-image {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 12px;
border: 3px solid #000000;
display: flex;
align-items: center;
justify-content: center;
color: #9ff14e;
font-weight: 600;
overflow: hidden;
}
.latest-project-image video{
width: 100%;
height: 100%;
object-fit: cover;
}
.latest-project-content {
padding: 20px;
}
.latest-project-content h3 {
font-size: 2rem;
color: #ffffff;
margin-bottom: 20px;
}
.latest-project-list {
list-style: none;
padding: 0;
margin: 0;
}
.latest-project-list li {
position: relative;
padding-left: 30px;
margin-bottom: 16px;
font-size: 1.1rem;
color: #d4d4d4;
}
.latest-project-list li::before {
content: '❖';
position: absolute;
left: 0;
color: #9ff14e;
font-size: 1.2rem;
bottom: 1px;
}
/* Responsive */
@media (max-width: 968px) {
.latest-projects-section {
padding: 80px 24px;
}
.latest-projects-title {
font-size: 2rem;
margin-bottom: 40px;
}
.latest-project {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 60px;
}
.latest-project.reverse {
direction: ltr;
}
.latest-project-content {
padding: 0;
}
.latest-project-content h3 {
font-size: 1.5rem;
margin-bottom: 16px;
}
.latest-project-list li {
font-size: 1rem;
padding-left: 26px;
margin-bottom: 12px;
}
.latest-project-list li::before {
font-size: 1rem;
}
}
/* Extra small devices */
@media (max-width: 480px) {
.latest-projects-section {
padding: 60px 16px;
}
.latest-projects-title {
font-size: 1.75rem;
margin-bottom: 32px;
}
.latest-project {
gap: 24px;
margin-bottom: 48px;
}
.latest-project-content h3 {
font-size: 1.35rem;
}
.latest-project-list li {
font-size: 0.95rem;
}
}
/* ====================Latest Projects Section End================ */
/* ================= Latest Project Slider ================= */
.latest-project-slider-container {
width: 100%;
margin-bottom: 40px;
}
/* Slider viewport */
.latest-project-slider {
width: 100%;
height: var(--item-height);
overflow: hidden;
/* smooth fade edges */
mask-image: linear-gradient(
to right,
transparent,
#000 10% 90%,
transparent
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
#000 10% 90%,
transparent
);
border-radius: 12px;
}
/* Track */
.latest-project-slider-list {
display: flex;
width: 100%;
min-width: calc(var(--item-width) * var(--item-count));
position: relative;
}
/* Individual slide */
.latest-project-slider-item {
width: var(--item-width);
height: var(--item-height);
position: absolute;
left: 100%;
animation: latestProjectAutoRun 18s linear infinite;
animation-delay: calc(
(18s / var(--item-count)) * (var(--position) - 1) - 18s
) !important;
transition: filter 0.5s ease;
border-radius: 12px;
overflow: hidden;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
/* 16:9 image fit */
.latest-project-slider-item img {
width: 100%;
height: 100%;
object-fit: cover; /* change to contain if needed */
display: block;
}
/* Animation */
@keyframes latestProjectAutoRun {
from {
left: 100%;
}
to {
left: calc(var(--item-width) * -1);
}
}
/* Hover effects */
/* Pause animation on container hover */
.latest-project-slider:hover .latest-project-slider-item {
animation-play-state: paused !important;
}
/* Turn ALL items grayscale on hover */
.latest-project-slider:hover .latest-project-slider-item {
filter: grayscale(100%);
}
/* Keep hovered item colored */
.latest-project-slider:hover .latest-project-slider-item:hover {
filter: grayscale(0%);
}
/* ================= Responsive ================= */
@media (max-width: 768px) {
.latest-project-slider {
--item-width: 240px;
--item-height: 135px; /* still 16:9 */
}
}
/* ================== CTA section ======================= */
.contain-cta {
background: #1a1919;
padding: 40px 40px;
}
.cta-section {
max-width: 1400px;
margin: 4rem auto 2rem;
padding: 0 1rem;
}
.cta-container {
position: relative;
border-radius: 32px;
overflow: hidden;
border: 1px solid rgba(159, 241, 78, 0.2);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}
.cta-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.cta-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cta-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: ctaWave 20s ease-in-out infinite;
}
@keyframes ctaWave {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.cta-content {
position: relative;
z-index: 2;
text-align: center;
padding: 4rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.cta-title {
font-size: clamp(1.75rem, 5vw, 3rem);
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.2;
max-width: 900px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.cta-description {
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
margin: 0;
max-width: 800px;
}
.cta-link {
text-decoration: none;
display: inline-block;
margin-top: 1rem;
}
.cta-button {
background: transparent;
color: #ffffff;
border: 2px solid #9ff14e;
padding: 1rem 3rem;
border-radius: 50px;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #9ff14e 0%, #baff6b 100%);
transition: left 0.4s ease;
z-index: -1;
}
.cta-button:hover {
color: #0c1519;
border-color: #baff6b;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(159, 241, 78, 0.4);
}
.cta-button:hover::before {
left: 0;
}
.cta-button:active {
transform: translateY(-1px);
}
.cta-link:focus {
outline: 2px solid #9ff14e;
outline-offset: 4px;
border-radius: 50px;
}
@media (max-width: 768px) {
.cta-section {
margin: 3rem auto 1.5rem;
}
.cta-container {
border-radius: 24px;
}
.cta-content {
padding: 3rem 1.5rem;
gap: 1.25rem;
}
.cta-button {
padding: 0.875rem 2.5rem;
font-size: 1rem;
width: 100%;
max-width: 280px;
}
}
@media (max-width: 480px) {
.cta-section {
margin: 2rem auto 1rem;
padding: 0 0.75rem;
}
.cta-container {
border-radius: 20px;
}
.cta-content {
padding: 2.5rem 1.25rem;
gap: 1rem;
}
.cta-link {
width: 100%;
}
.cta-button {
max-width: 100%;
}
}
@media (min-width: 1400px) {
.cta-content {
padding: 5rem 3rem;
}
}
/* ================== CTA section /END ======================= */