html{
overflow-x: hidden;
}
body{
margin: 0;
/* background-color: #1c1c1e; */
overflow-x: hidden !important;
scroll-behavior: smooth;
font-family: 'Galano Grotesque' !important;
}
/*shrinks*/
body.modal-open {
padding-right: 0 !important;
}
a{
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
a:hover{
text-decoration: none !important;
}
button{
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
@font-face {
font-family: 'Galano Grotesque';
src: url('../font/GalanoGrotesque-Medium.eot');
src: url('../font/GalanoGrotesque-Medium.eot?#iefix') format('embedded-opentype'),
url('../font/GalanoGrotesque-Medium.woff2') format('woff2'),
url('../font/GalanoGrotesque-Medium.woff') format('woff'),
url('../font/GalanoGrotesque-Medium.ttf') format('truetype'),
url('../font/GalanoGrotesque-Medium.svg#GalanoGrotesque-Medium') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Galano Grotesque';
src: url('../font/GalanoGrotesque-Regular.eot');
src: url('../font/GalanoGrotesque-Regular.eot?#iefix') format('embedded-opentype'),
url('../font/GalanoGrotesque-Regular.woff2') format('woff2'),
url('../font/GalanoGrotesque-Regular.woff') format('woff'),
url('../font/GalanoGrotesque-Regular.ttf') format('truetype'),
url('../font/GalanoGrotesque-Regular.svg#GalanoGrotesque-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Galano Grotesque';
src: url('../font/GalanoGrotesque-SemiBold.eot');
src: url('../font/GalanoGrotesque-SemiBold.eot?#iefix') format('embedded-opentype'),
url('../font/GalanoGrotesque-SemiBold.woff2') format('woff2'),
url('../font/GalanoGrotesque-SemiBold.woff') format('woff'),
url('../font/GalanoGrotesque-SemiBold.ttf') format('truetype'),
url('../font/GalanoGrotesque-SemiBold.svg#GalanoGrotesque-SemiBold') format('svg');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@media (min-width: 1200px) {
.container {
max-width: 1240px;
}
}
/* ---------------- Header ---------------- */
header {
padding-right: 92px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 75px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
background: #ffffff;
/* padding: 0 90px; */
}
.logo-container {
background-color: #000000;
height: 100%;
width: 36%;
display: flex;
padding: 0 40px 0 148px;
align-items: center;
}
.logo-container img {
width: 83%;
}
.nav-menu {
display: flex;
align-items: center;
padding-right: 0;
}
.nav-links {
display: flex;
list-style: none;
gap: 52px;
margin-bottom: 0;
padding-left: 0;
}
.nav-links a {
text-decoration: none;
color: #282927;
font-weight: 400;
font-size: 17px;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #000000;
}
.dropdown {
position: relative;
}
/* Pure CSS Arrow Indicator */
.dropdown-link {
position: relative;
padding-right: 18px;
display: inline-block;
}
.dropdown-link::before {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 6px;
height: 6px;
border-right: 2px solid #333333;
border-bottom: 2px solid #333333;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease;
}
.dropdown:hover .dropdown-link::before {
transform: translateY(-20%) rotate(225deg);
border-color: #000000;
}
/* Sleek Dropdown Menu shifted to the left */
.dropdown-menu {
position: absolute;
top: 127%;
left: 86%; /* Center/Shift Left relative to parent */
transform: translateX(-50%) translateY(15px) scale(0.98);
background: #fff;
/* backdrop-filter: blur(12px); */
list-style: none;
padding: 10px 10px;
width: 480px;
border-radius: 12px;
border: 1px solid #fff;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
pointer-events: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 20px;
margin-top: 20px;
}
.dropdown-menu::before {
content: '';
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 40px;
background: transparent;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
pointer-events: auto;
}
.dropdown-menu li a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
color: #000;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
border-radius: 6px;
background: rgb(184 184 184 / 14%);
transition: color 0.3s ease, padding-left 0.3s ease;
overflow: hidden;
z-index: 1;
}
.dropdown-menu li a::before {
content: '';
position: absolute;
inset: 0;
background: #000000; /* Target background color */
transform: scaleY(0);
transform-origin: bottom; /* Forces animation to start from bottom */
transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: -1; /* Keeps overlay behind link text */
}
.dropdown-menu li a::after {
content: '→';
font-size: 0.9rem;
opacity: 0;
transform: translateX(-8px);
transition: all 0.3s ease;
color: #ffffff;
}
/* Hover State Trigger */
.dropdown-menu li a:hover {
color: #ffffff;
}
.dropdown-menu li a:hover::before {
transform: scaleY(1); /* Expands fill to 100% height */
}
.dropdown-menu li a:hover::after {
opacity: 1;
transform: translateX(0);
}
/* Hamburger Button */
.hamburger-btn {
display: none;
flex-direction: column;
justify-content: space-between;
width: 32px;
height: 20px;
cursor: pointer;
background: transparent;
border: none;
padding: 0;
}
.hamburger-btn span {
width: 100%;
height: 3px;
background-color: #000000;
border-radius: 2px;
transition: all 0.3s ease;
}
/* Fullscreen Creative Mobile Menu Overlay */
.creative-mobile-menu {
backdrop-filter: blur(24px);
position: fixed;
inset: 0;
background: #0d0d0db0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
clip-path: circle(0% at 90% 10%);
transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s ease, visibility 0.6s;
}
.creative-mobile-menu.is-open {
opacity: 1;
visibility: visible;
clip-path: circle(150% at 90% 10%);
}
/* Close Button */
.menu-close-btn {
position: absolute;
top: 25px;
right: 30px;
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;f
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
outline: none;
transition: transform 0.3s ease, background 0.3s ease;
}
button:focus {
outline:none;
}
.menu-close-btn:hover {
transform: rotate(90deg) scale(1.1);
background: rgba(255, 255, 255, 0.2);
}
.menu-close-btn span {
position: absolute;
width: 20px;
height: 2px;
background-color: #ffffff;
}
.menu-close-btn span:nth-child(1) { transform: rotate(45deg); }
.menu-close-btn span:nth-child(2) { transform: rotate(-45deg); }
/* Multi-level Container */
/* Multi-level Container */
.menu-content-wrapper {
width: 100%;
max-width: 500px;
padding: 0;
position: relative;
/* Fade content smoothly before clip-path collapses */
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
}
/* Reveal content ONLY when menu is fully open */
.creative-mobile-menu.is-open .menu-content-wrapper {
opacity: 1;
visibility: visible;
transition-delay: 0.15s; /* Waits for clip-path to expand slightly first */
}
.nav-level {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%) translateX(50px);
opacity: 0;
pointer-events: none;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.nav-level.active {
position: relative;
top: 0;
transform: translateY(0) translateX(0);
opacity: 1;
pointer-events: auto;
}
/* Staggered Link Animations */
.creative-nav-links {
list-style: none;
padding: 0;
margin: 0;
}
.creative-nav-links li {
margin: 20px 0;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.creative-mobile-menu.is-open .nav-level.active .creative-nav-links li {
opacity: 1;
transform: translateY(0);
transition-delay: calc(0.08s * var(--i));
}
.creative-nav-links a {
color: #ffffff;
font-size: 24px;
font-weight: 400;
text-decoration: none;
text-transform: capitalize;
letter-spacing: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
transition: color 0.3s ease, transform 0.3s ease;
}
.creative-nav-links a:hover {
color: #b2b2b2;
/* transform: translateX(10px); */
}
.arrow-icon {
font-size: 20px;
transition: transform 0.3s ease;
}
.creative-nav-links a:hover .arrow-icon {
transform: translateX(8px);
}
/* Submenu Back Button */
.menu-back-btn {
background: transparent;
border: none;
color: #cccccc;
font-size: 17px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 25px;
padding: 0;
transition: transform 0.3s ease;
}
.menu-back-btn:hover {
transform: translateX(-30px);
}
/* Responsive Visibility (Visible at max-width: 990px) */
@media screen and (max-width: 990px) {
.nav-links { display: none; }
.hamburger-btn { display: flex; }
}
/* Custom Thin Dark Scrollbar (WebKit: Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 2px; /* Ultra-thin sleek bar */
height: 4px;
}
::-webkit-scrollbar-track {
background: #fff; /* Dark background matching the page */
}
::-webkit-scrollbar-thumb {
background: #fff; /* High contrast white thumb like the text */
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: #cccccc; /* Subtle grey on hover */
}
/* Firefox Fallback */
* {
scrollbar-width: thin;
scrollbar-color: #000 #fff;
}
/* =========================================================
MAIN BANNER
========================================================= */
.slide {
width: 100%;
margin-top: 75px;
float: left;
height: 741px;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url("../images/bnr.webp");
background-color: #111;
display: flex;
align-items: flex-end;
overflow: hidden;
}
/* =========================================================
COMMON OWL SETTINGS
========================================================= */
.slide .owl-carousel {
position: relative;
}
.slide .owl-stage-outer {
overflow: hidden;
}
.slide .owl-stage {
position: relative;
}
.slide .owl-item {
position: relative;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.slide .owl-item,
.slide .owl-item * {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* =========================================================
TEXT SLIDER
========================================================= */
.slider-ban {
float: left;
width: 46% !important;
position: relative;
z-index: 5;
}
.slider-ban .owl-stage-outer {
overflow: hidden;
}
.slider-ban .owl-stage {
display: flex;
align-items: flex-end;
}
.slider-ban .owl-item {
float: left;
}
/* =========================================================
TEXT SLIDE ITEM
========================================================= */
.slide .slider-ban .item {
width: 100%;
float: left;
position: relative;
}
/* =========================================================
HEADER CONTENT
========================================================= */
.header-content {
float: left;
position: relative;
top: 0;
left: 0;
right: 0;
text-align: center;
width: 100%;
padding-top: 274px;
}
/* =========================================================
TITLE
========================================================= */
.header-content h6 {
margin-top: 0;
margin-bottom: 20px;
font-size: 110px;
line-height: 91%;
color: #fff;
text-transform: uppercase;
font-weight: 600 !important;
text-align: left;
position: relative;
}
/* =========================================================
TITLE WORDS
========================================================= */
.title-3d {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 15px;
perspective: 1200px;
-webkit-perspective: 1200px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
overflow: visible;
}
/* =========================================================
WORD
========================================================= */
.title-3d .word {
display: inline-flex;
white-space: nowrap;
overflow: visible;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
/* =========================================================
CHARACTER INITIAL STATE
========================================================= */
.title-3d .char {
display: inline-block;
opacity: 0;
transform:
translate3d(0, 45px, 0)
rotateX(-55deg);
-webkit-transform:
translate3d(0, 45px, 0)
rotateX(-55deg);
transform-origin: center bottom;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
filter: blur(8px);
-webkit-filter: blur(8px);
will-change:
transform,
opacity,
filter;
}
/* =========================================================
TITLE REVEAL
========================================================= */
@keyframes titleReveal {
0% {
opacity: 0;
transform:
translate3d(0, 45px, 0)
rotateX(-55deg);
filter: blur(8px);
}
55% {
opacity: 1;
transform:
translate3d(0, -4px, 0)
rotateX(4deg);
filter: blur(1px);
}
100% {
opacity: 1;
transform:
translate3d(0, 0, 0)
rotateX(0deg);
filter: blur(0);
}
}
/* =========================================================
CHARACTER STAGGER
========================================================= */
.slider-ban .owl-item.active .char {
animation-name: titleReveal;
animation-duration: 0.85s;
animation-timing-function: cubic-bezier(.22, 1, .36, 1);
animation-fill-mode: forwards;
}
/* FIRST WORD */
.slider-ban .owl-item.active .word:nth-child(1) .char:nth-child(1) {
animation-delay: .02s;
}
.slider-ban .owl-item.active .word:nth-child(1) .char:nth-child(2) {
animation-delay: .06s;
}
.slider-ban .owl-item.active .word:nth-child(1) .char:nth-child(3) {
animation-delay: .10s;
}
/* SECOND WORD */
.slider-ban .owl-item.active .word:nth-child(2) .char:nth-child(1) {
animation-delay: .14s;
}
.slider-ban .owl-item.active .word:nth-child(2) .char:nth-child(2) {
animation-delay: .18s;
}
.slider-ban .owl-item.active .word:nth-child(2) .char:nth-child(3) {
animation-delay: .22s;
}
/* THIRD WORD */
.slider-ban .owl-item.active .word:nth-child(3) .char:nth-child(1) {
animation-delay: .26s;
}
.slider-ban .owl-item.active .word:nth-child(3) .char:nth-child(2) {
animation-delay: .30s;
}
.slider-ban .owl-item.active .word:nth-child(3) .char:nth-child(3) {
animation-delay: .34s;
}
.slider-ban .owl-item.active .word:nth-child(3) .char:nth-child(4) {
animation-delay: .38s;
}
.slider-ban .owl-item.active .word:nth-child(3) .char:nth-child(5) {
animation-delay: .42s;
}
/* =========================================================
PARAGRAPH
========================================================= */
.header-content p {
font-size: 16px;
font-weight: 400;
color: #ffffffcf;
text-align: left;
padding-right: 10%;
line-height: 175%;
margin-top: 0;
margin-bottom: 15px;
opacity: 0;
transform:
translate3d(0, 25px, 0);
-webkit-transform:
translate3d(0, 25px, 0);
filter: blur(7px);
-webkit-filter: blur(7px);
will-change:
transform,
opacity,
filter;
}
/* =========================================================
PARAGRAPH REVEAL
========================================================= */
@keyframes paragraphReveal {
0% {
opacity: 0;
transform:
translate3d(0, 25px, 0);
filter: blur(7px);
}
60% {
opacity: .8;
transform:
translate3d(0, -2px, 0);
filter: blur(1px);
}
100% {
opacity: 1;
transform:
translate3d(0, 0, 0);
filter: blur(0);
}
}
.slider-ban .owl-item.active .fade-slice {
animation:
paragraphReveal
.9s
cubic-bezier(.22, 1, .36, 1)
.42s
forwards;
}
/* =========================================================
BUTTON
========================================================= */
.header-content a {
font-size: 18px;
font-weight: 600;
color: #fff;
text-decoration: underline !important;
text-align: left;
float: left;
text-decoration-color: #ccc !important;
text-underline-offset: 3px;
transition:
letter-spacing .4s ease,
color .4s ease;
position: relative;
opacity: 0;
transform:
translate3d(0, 20px, 0);
-webkit-transform:
translate3d(0, 20px, 0);
will-change:
transform,
opacity;
}
/* =========================================================
BUTTON REVEAL
========================================================= */
@keyframes buttonReveal {
0% {
opacity: 0;
transform:
translate3d(0, 20px, 0);
}
65% {
opacity: 1;
transform:
translate3d(0, -2px, 0);
}
100% {
opacity: 1;
transform:
translate3d(0, 0, 0);
}
}
.slider-ban .owl-item.active .liquid-btn {
animation:
buttonReveal
.8s
cubic-bezier(.22, 1, .36, 1)
.55s
forwards;
}
/* =========================================================
BUTTON HOVER
========================================================= */
.header-content a:hover {
letter-spacing: 2px;
color: #ffffff;
}
/* =========================================================
IMAGE SLIDER
========================================================= */
.ban-slide {
float: left;
width: 54% !important;
position: relative;
bottom: 0;
z-index: 2;
}
/* =========================================================
IMAGE CAROUSEL - 3D FLIP ANIMATION
========================================================= */
.ban-carousel {
width: 100%;
float: left;
position: relative;
}
.ban-carousel .owl-stage-outer {
overflow: hidden;
}
.ban-carousel .owl-stage {
display: flex;
align-items: flex-end;
will-change: transform;
}
.ban-carousel .owl-item {
float: left;
position: relative;
min-height: 1px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.ban-carousel .item {
height: auto;
width: 100%;
float: left;
position: relative;
overflow: visible;
}
.img-frame {
position: relative;
overflow: hidden;
width: 100%;
float: left;
/* 3D Perspective container */
perspective: 1200px;
-webkit-perspective: 1200px;
}
.ban-img {
display: block;
float: none;
object-fit: cover;
width: 96% !important;
height: auto;
position: relative;
bottom: 0;
margin: auto;
opacity: 0;
/* Start flipped -90deg around the Y-axis */
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
transform-origin: center center;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@keyframes bannerImageFlip {
0% {
opacity: 0;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
}
50% {
}
100% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
}
.ban-carousel .owl-item.active .ban-img {
animation:
bannerImageFlip
0.8s
cubic-bezier(0.16, 1, 0.3, 1)
forwards;
}
.ban-carousel .owl-item.cloned .ban-img,
.ban-carousel .owl-item:not(.active) .ban-img {
animation: none;
opacity: 0;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
}
.slider-ban .owl-stage,
.ban-carousel .owl-stage {
transition-timing-function:
cubic-bezier(.22, 1, .36, 1) !important;
}
.slider-ban .owl-item,
.ban-carousel .owl-item {
opacity: 1;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.slider-ban .owl-height,
.ban-carousel .owl-height {
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
.slider-ban .owl-item .char,
.slider-ban .owl-item .fade-slice,
.slider-ban .owl-item .liquid-btn,
.ban-carousel .owl-item .ban-img {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
}
}
/* Container for background text */
.bg-marquee-wrapper {
position: absolute;
top: 21%;
left: 0;
width: 100%;
transform: translateY(-21%);
z-index: 1;
pointer-events: none;
overflow: hidden;
white-space: nowrap;
}
.bg-marquee-track {
display: inline-flex;
gap: 30px;
transform: translateX(-50%);
animation: moveLeftToRight 100s linear infinite;
will-change: transform;
}
.bg-marquee-track span {
font-size: 340px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
color: #1d1c1c7a;
letter-spacing: -24px;
user-select: none;
}
@keyframes moveLeftToRight {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0%);
}
}
@media (max-width: 991px) {
.bg-marquee-track span {
font-size: 160px;
}
}
@media (max-width: 575px) {
.privacy-sec h2 {
font-size: 30px!important;
}
.bg-marquee-track span {
font-size: 100px;
}
}
.banner2 {
width: 100%;
padding-bottom: 37px;
padding-top: 90px;
float: left;
background-color: #fbfbfb;
position: relative;
z-index: 99;
overflow: visible;
}
.eazy-wrap{
float: left;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}
.eazy-wrap h6{
margin-bottom: 27px;
font-size: 20px;
font-weight: 600;
color: #2c2d2a;
text-decoration: underline !important;
float: left;
/* text-decoration-color: #ccc !important; */
text-underline-offset: 3px;
text-align: center;
width: 100%;
text-decoration-thickness: 1px !important;
}
.eazy-wrap h2 {
font-size: 51px;
line-height: 1.2;
color: #fff;
font-weight: 400;
text-align: center;
max-width: 60%;
margin: auto;
margin-bottom: 58px;
}
span.fill-text2 .char2 {
color: #8d8d8d; /* Initial grey */
transition: color 0.3s ease;
}
span.fill-text2 .char2.visible {
color: #000; /* Highlight color */
}
.light2 .char2 {
color: #8d8d8d;
}
.light2 .char2.visible {
color: #000;
}
.inline-img {
height: 49px;
margin: -7px 0px 0px 0px;
vertical-align: middle;
object-fit: cover;
}
/* Container Grid */
.pf-grid-container {
display: flex;
gap: 5px;
width: 100%;
align-items: flex-start;
/* perspective: 1000px; */ /* Enables 3D Space */
padding: 0 3px;
}
/* Base Card Layout */
.pf-card-wrapper {
flex: 1;
min-height: 400px;
padding: 23px 20px;
border-radius: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
cursor: pointer;
z-index: 1;
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.5s ease;
}
/* Staggered Vertical Offset */
.pf-card-wrapper:nth-child(even) {
position: relative;
top: 126px;
overflow: visible;
}
/* Dark Variant Theme */
.pf-variant-dark {
color: #ffffff;
border: 1px solid rgb(255 255 255);
}
.pf-variant-dark .pf-sub-text {
color: #fbfbfb;
}
/* Light Variant Theme */
.pf-variant-light {
color: #18181b;
border: 1px solid rgba(255, 255, 255, 0.5);
min-height: 338px;
/* padding: 23px 20px; */
}
.pf-variant-light .pf-sub-text {
color: #111;
}
/* Typography & Badge Mechanics */
.pf-badge-tag {
position: relative;
overflow: hidden; /* Clips the background sliding up */
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: 5px 26px;
border-radius: 50px;
font-size: 16px;
font-weight: 400;
z-index: 1;
isolation: isolate;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
/* Base fill overlay layer */
.pf-badge-tag::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 50px;
transform: translateY(100%); /* Positioned below badge initially */
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
/* Variant Specific Styles */
.pf-variant-dark .pf-badge-tag {
border: 1px solid rgba(255, 255, 255, 0.8);
color: #ffffff;
background-color: transparent;
}
.pf-variant-dark .pf-badge-tag::before {
background-color: #ffffff; /* Fills up white */
}
.pf-variant-light .pf-badge-tag {
border: 1px solid transparent;
background-color: #ffffff;
color: #18181b;
}
.pf-variant-light .pf-badge-tag::before {
background-color: #18181b; /* Fills up dark */
}
/* Hover States (Triggers bottom-to-top fill) */
.pf-variant-dark:hover .pf-badge-tag {
color: #000000;
border-color: #ffffff;
transform: translateY(-3px) scale(1.03);
}
.pf-variant-light:hover .pf-badge-tag {
color: #ffffff;
transform: translateY(-3px) scale(1.03);
}
.pf-variant-dark:hover .pf-badge-tag::before,
.pf-variant-light:hover .pf-badge-tag::before {
transform: translateY(0%); /* Slides up from bottom to top */
}
.pf-content-group {
display: flex;
flex-direction: column;
gap: 12px;
z-index: 2;
transition: transform 0.4s ease;
}
.pf-title-heading {
font-size: 19px;
font-weight: 500;
line-height: 1.3;
margin: 0;
}
.pf-sub-text {
font-size: 17px;
line-height: 1.4;
/* margin-bottom: 24px; */
}
/* --- PURE CSS HOVER STATES --- */
.pf-card-wrapper:hover {
transform: translateY(-16px) rotateX(4deg) ;
z-index: 10;
}
/* Glows & Shadows */
.pf-variant-dark:hover {
border-color: rgba(255, 255, 255, 0.4);
}
.pf-variant-light:hover {
border-color: rgba(255, 255, 255, 0.9);
}
/* Content Shimmer Lift */
.pf-card-wrapper:hover .pf-content-group {
transform: translateY(-4px);
}
/* Grid Layout */
.category{
float: left;
width: 100%;
padding: 125px 0px 84px 0px;
position: relative;
z-index: 1;
}
.cg-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 33px 24px;
float: left;
width: 100%;
}
/* =========================================
PREMIUM CARD HOVER
========================================= */
.cg-card {
float: left;
width: 100%;
position: relative;
height: 526px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background-color: #e5e5e5;
/* Keep the background image */
background-size: 100% 100%;
background-position: center;
display: flex;
align-items: flex-end;
padding: 35px;
box-sizing: border-box;
/* IMPORTANT:
Do NOT transition transform here because AOS uses transform */
transition: none;
}
/* -----------------------------------------
IMAGE ZOOM
----------------------------------------- */
/* Remove the old background-size hover */
.cg-card:hover {
background-size: 100% 100%;
}
/* -----------------------------------------
SMOOTH IMAGE ZOOM LAYER
----------------------------------------- */
.cg-card::after {
content: "";
position: absolute;
inset: 0;
/*
Your background image is currently directly
on .cg-card, so this layer cannot contain
that image itself.
*/
pointer-events: none;
z-index: 0;
}
/* -----------------------------------------
DARK OVERLAY
----------------------------------------- */
.cg-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.60) 0%,
rgba(0, 0, 0, 0.18) 48%,
rgba(0, 0, 0, 0) 100%
);
z-index: 2;
transition:
background 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cg-card:hover .cg-overlay {
background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.25) 55%,
rgba(0, 0, 0, 0.03) 100%
);
}
/* -----------------------------------------
PREMIUM LIGHT SWEEP
----------------------------------------- */
.cg-card::before {
content: "";
position: absolute;
top: -20%;
left: -80%;
width: 55%;
height: 150%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.16),
transparent
);
transform: skewX(-20deg);
z-index: 3;
pointer-events: none;
transition:
left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.cg-card:hover::before {
left: 130%;
}
/* -----------------------------------------
CONTENT
----------------------------------------- */
.cg-content {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
bottom: 6px;
transition:
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.cg-card:hover .cg-content {
transform: translateY(-8px);
}
/* -----------------------------------------
TITLE
----------------------------------------- */
.cg-title {
color: #ffffff;
font-size: 30px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
line-height: 1.1;
position: relative;
transition:
letter-spacing 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.cg-card:hover .cg-title {
letter-spacing: 1.5px;
transform: translateX(4px);
}
/* -----------------------------------------
BUTTON
----------------------------------------- */
.cg-btn {
position: relative;
display: inline-block;
padding: 13px 26px;
background-color: #29241f;
color: #ffffff;
font-size: 16px;
font-weight: 400;
text-decoration: none;
border-radius: 50px;
overflow: hidden;
z-index: 1;
transition:
color 0.4s ease;
}
.cg-btn::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 25px;
background-color: #ffffff;
z-index: -1;
transform: translateY(100%);
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cg-btn:hover {
color: #29241f;
}
.cg-btn:hover::before {
transform: translateY(0);
}
/* -----------------------------------------
FULL WIDTH CARD
----------------------------------------- */
.cg-card--full {
grid-column: span 2;
height: 526px;
}
.cg-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
transform: scale(1);
transition:
transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.cg-card:hover .cg-bg {
transform: scale(1.08);
}
/* Container & Base Layout */
.custom-split-hero {
float: left;
width: 100%;
border-radius: 16px;
overflow: hidden;
background-color: #000;
color: #fff;
margin-top: 67px;
/* height: 96vh; */
}
.custom-hero-right {
float: left;
width: 48%;
box-sizing: border-box;
}
.custom-hero-left {
float: left;
width: 52%;
box-sizing: border-box;
}
/* Left Section */
.custom-hero-left {
position: relative;
background-image: url("../images/pattren-bg.webp");
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
padding: 117px 80px 117px 64px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.left-title {
font-size: 42px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 20px;
text-transform: uppercase;
width: 81%;
letter-spacing: 1px;
}
.left-description {
font-size: 17px;
color: #fdfdfd;
line-height: 1.6;
max-width: 83%;
}
/* Left Bottom Nav Controls */
.custom-carousel-nav {
display: flex;
gap: 15px;
margin-top: 146px;
}
.nav-btn {
width: 55px;
height: 55px;
border-radius: 50%;
border: 3px solid #d0d0d0;
background: transparent;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-btn:hover {
border-color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
/* Right Section */
.custom-hero-right {
background-color: #000;
padding: 53px 40px 50px 33px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Fixed Upper Section Items */
.custom-thumb-nav {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0 0 15px 0;
margin: 0 0 20px 0;
/* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}
.thumb-item {
display: flex;
flex-direction: column;
color: #666;
font-size: 0.75rem;
cursor: pointer;
transition: color 0.3s ease;
width: 22%;
}
.thumb-num {
font-weight: 600;
margin-bottom: 5px;
font-size: 16px;
}
.thumb-text {
line-height: 1.1;
font-size: 16px;
}
/* Active State for Upper Thumbnails */
.thumb-item.active {
color: #fff;
}
.thumb-item.active .thumb-text {
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
text-decoration-thickness: 1px;
}
/* Carousel Inner Item Display */
.custom-main-display {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 73px;
}
.display-watermark {
font-size: 76px;
font-weight: 500;
color: rgba(255, 255, 255, 0.2);
line-height: 1;
margin-bottom: 10px;
}
.display-subtitle {
font-size: 20px;
letter-spacing: 1px;
font-weight: 500;
margin-bottom: 17px;
color: #fafbe2;
}
.display-title {
font-size: 34px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 15px;
text-transform: uppercase;
}
.display-description {
font-size: 17px;
color: #aaa;
line-height: 1.5;
margin-bottom: 37px;
}
.display-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #1d1a1a; /* Initial dark background */
color: #fff;
padding: 13px 32px;
border-radius: 25px;
text-decoration: none;
font-size: 16px;
font-weight: 400;
overflow: hidden; /* Clips the fill effect within rounded corners */
z-index: 1;
isolation: isolate;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Sliding fill layer */
.display-cta-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff; /* Color that slides up from bottom */
border-radius: 25px;
z-index: -1;
transform: translateY(100%); /* Start hidden below the button */
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
.display-cta-btn:hover {
color: #1d1a1a;
}
.display-cta-btn:hover::before {
transform: translateY(0%);
}
.text-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
float: left;
margin: 0 auto;
width: 100%;
padding-top: 88px;
}
.left-heading {
flex: 1;
font-size: 44px;
font-weight: 500;
line-height: 1.2;
color: #000000;
letter-spacing: -1px;
text-transform: uppercase;
}
.right-paragraph {
flex: 1;
font-size: 17px;
font-weight: 400;
line-height: 1.5;
color: #1a1a1a;
text-align: right;
padding-left: 6%;
}
@media (max-width: 768px) {
.text-banner {
flex-direction: column;
gap: 20px;
}
.right-paragraph {
text-align: left;
}
}
.hero-banner {
position: relative;
width: 100%;
height: 640px;
background-color: #000000;
overflow: hidden;
display: flex;
padding: 112px 0;
}
.watermark-text {
position: absolute;
bottom: -90px;
left: 50%;
transform: translateX(-50%);
font-size: 209px;
font-weight: 900;
color: #3b3a3b;
letter-spacing: -17px;
white-space: nowrap;
z-index: 1;
cursor: pointer;
user-select: none;
transition: color 0.4s ease, text-shadow 0.4s ease;
}
.hero-banner:hover .watermark-text{
color: #c0c0c0;
}
.centered-model {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-height: 100%;
width: auto;
z-index: 2;
pointer-events: none;
object-fit: contain;
}
.content-overlay {
position: relative;
z-index: 3;
width: 100%;
max-width: 1314px;
margin: 0 auto;
padding: 0 40px;
display: flex;
top: 0px;
justify-content: space-between;
pointer-events: none;
}
.text-block {
color: #ffffff;
pointer-events: auto;
transition: transform 0.3s ease;
}
.text-block.right {
float: right;
position: relative;
top: 43%;
/* right: -46px; */
width: 37%;
}
.text-block.left h2 {
font-size: 39px;
font-weight: 500;
margin-bottom: 12px;
transition: color 0.3s ease;
}
.text-block.left p {
width: 49%;
font-size: 17px;
line-height: 1.5;
color: #cccccc;
transition: color 0.3s ease;
}
.text-block.right h2 {
font-size: 38px;
font-weight: 500;
margin-bottom: 12px;
letter-spacing: 1px;
transition: color 0.3s ease;
}
.text-block.right p {
font-size: 17px;
line-height: 1.5;
color: #cccccc;
transition: color 0.3s ease;
}
.cg-img{
height: 564px !important;
border-radius: 0px;
}
.cg-head {
color: #ffffff;
font-size: 36px;
font-weight: 500;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.1;
position: relative;
transition:
letter-spacing 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cg-card:hover .cg-head {
letter-spacing: 1.5px;
transform: translateX(4px);
}
.cg-co2{
bottom: unset;
top: 19px;
height: 100%;
left: 26px;
}
.site-footer {
background-color: #000000;
color: #ffffff;
padding: 73px 0px 20px 0px;
float: left;
width: 100%;
}
/* Columns Layout */
.footer-columns {
float: left;
margin-bottom: 52px;
width: 100%;
}
.footer-column {
}
.footer-column h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 18px;
color: #ffffff;
letter-spacing: 0.3px;
}
.footer-column ul {
list-style: none;
padding-left: 0;
}
.footer-column ul li {
margin-bottom: 9px;
}
.footer-column ul li a {
color: #ffffffe0;
text-decoration: none;
font-size: 16px;
font-weight: 400;
transition: opacity 0.2s ease;
}
.footer-column ul li a:hover {
opacity: 0.7;
}
.column-1{float: left;width: 30%;}
.column-2{float: left;width: 29%;}
.column-3{float: left;width: 28%;}
.column-4{float: left;width: 13%;}
/* Bottom Bar */
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
float: left;
width: 100%;
}
.brand-logo {
width: 435px;
}
.credits {
color: #ffffffe0;
text-decoration: none;
font-size: 16px;
font-weight: 400;
}
.credits a{
color: #ffffffe0;
text-decoration: none;
font-size: 16px;
font-weight: 400;
}
/*about us page */
.abt-banner1 {
padding: 212px 0px 140px 0px;
float: left;
width: 100%;
object-fit: cover;
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover;
background-position: bottom;
z-index: 1;
color: #fff;
background-image: url("../images/cta.webp");
}
/* Ensure text stays above overlay */
.abt-banner1 .container {
position: relative;
z-index: 2;
}
.abt-banner1 h2{
text-align: center;
float: left;
width: 100%;
color: #fff;
font-size: 52px;
/* line-height: 51px; */
text-transform: uppercase;
position: relative;
font-weight: 500;
margin-bottom: 19px;
}
/* Centered container styling */
.custom-nav {
display: flex;
justify-content: center;
width: 100%;
}
.custom-breadcrumb {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
list-style: none;
font-size: 17px;
padding: 0;
margin: 0;
}
/* Base item styling */
.custom-item {
display: flex;
align-items: center;
}
/* Separator styling using slash (/) */
.custom-item + .custom-item::before {
content: "/";
padding: 0 0.5rem;
color: #8c98a4;
}
/* Link styling */
.custom-item a {
color: #c0c0c0;
text-decoration: none;
text-transform: capitalize;
transition: color 0.2s ease;
}
.custom-item a:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* Active current page styling */
.custom-item.custom-active {
color: #fff;
text-transform: capitalize;
font-weight: 500;
}
.a-bus-1{
float: left;
width: 100%;
position: relative;
padding: 70px 0px 70px 0px;
}
.a-bus-1 h2 {
font-size: 50px;
margin-bottom: 27px;
font-weight: 500;
float: left;
width: 100%;
color: #fafafa;
text-align: center;
padding: 0px 19%;
}
.a-bus-1 h2 span {
font-style: italic;
color: #caa55f;
}
.iner-legacy {
background-image:none !important;
}
.in-leg-img {
width: 41%;
height: auto;
float: right;
}
.in-wrapper{
display: block !important;
}
/* Slight right–left movement */
@keyframes floatSide {
0% {
transform: translateY(-50%) translateX(0);
}
100% {
transform: translateY(-50%) translateX(-10px);
}
}
.a-bus1-1 p{
font-size: 16px;
font-weight: 400;
line-height: 1.8;
color: #c4c4c4;
float: left;
width: 100%;
text-align: center;
}
/* Stylish Two-Column Modal for Join Now Form */
.fixed-menu {
position: fixed;
right: 40px;
top: 94%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 12px;
z-index: 1000;
}
[data-aos] {
pointer-events: auto;
}
[data-aos].aos-animate {
pointer-events: auto;
}
/*about us */
html.lenis, body.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
/* SECTION LAYOUT */
.about-section {
padding: 90px 0px;
width: 100%;
margin: 0 auto;
float: left;
overflow: hidden;
}
.about-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: start;
}
/* LEFT COLUMN */
.abmain-heading {
font-size: 50px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 30px;
color: #111111;
text-transform: uppercase;
letter-spacing: -1px;
}
.experience-row {
display: grid;
grid-template-columns: 0.7fr 1fr;
gap: 0;
margin-top: 49px;
/* margin-top: 34px; */
}
/*odometer*/
.counterup-section {
float: left;
width: 100%;
align-items: flex-start;
/* height: 100%; */
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
font-family: 'Galano Grotesque' !important;
}
.counterup-container {
display: flex;
float: left;
}
.odometer-wrapper {
display: inline-flex;
align-items: baseline;
justify-content: center;
font-size: 75px;
font-weight: bold;
float: left;
width: 100%;
}
.suffix {
margin-left: 2px;
position: relative;
top: 1px;
}
.plus {
margin-left: 5px;
position: relative;
top: 0px;
font-size: 91px;
}
.counter-box {
float: left;
padding-left: 85px;
}
.odometer {
font-size: 150px;
font-weight: bold;
margin-bottom: -2px;
line-height: 100% !important;
letter-spacing: 0px;
margin-left: -8px;
}
.counter-title {
font-size: 20px;
color: #111;
font-weight: 400;
line-height: 123%;
text-align: right;
float: left;
/* margin-top: -29px; */
width: 71%;
}
.small-img-wrapper {
width: 100%;
height: 500px;
border-radius: 24px;
overflow: hidden;
position: relative;
/* margin-top: 100px; */
}
.small-img-wrapper img {
width: 100%;
height: 140%;
object-fit: cover;
position: absolute;
top: -20%;
left: 0;
will-change: transform;
}
/* RIGHT COLUMN */
.right-col {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.large-img-wrapper {
width: 100%;
height: 520px;
border-radius: 28px;
overflow: hidden;
position: relative;
}
.large-img-wrapper img {
width: 100%;
height: 140%;
object-fit: cover;
position: absolute;
top: -20%;
left: 0;
will-change: transform;
}
.description-text {
font-size: 17px;
color: #111;
line-height: 1.7;
max-width: 100%;
}
/* BUTTON STYLING */
.btn-wrapper {
margin-top: 0.5rem;
}
.btn-wrapper-ab {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #1d1a1a; /* Initial dark background */
color: #fff;
padding: 13px 32px;
border-radius: 25px;
text-decoration: none;
font-size: 16px;
border: 1px solid #1d1a1a;
font-weight: 400;
overflow: hidden; /* Clips the fill effect within rounded corners */
z-index: 1;
isolation: isolate;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Sliding fill layer */
.btn-wrapper-ab::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff; /* Color that slides up from bottom */
border-radius: 25px;
z-index: -1;
transform: translateY(100%); /* Start hidden below the button */
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
/* Hover state triggers the slide up */
.btn-wrapper-ab:hover {
color: #1d1a1a; /* Text color changes when filled */
}
.btn-wrapper-ab:hover::before {
transform: translateY(0%); /* Slides up to fill button */
}
/* RESPONSIVE */
@media (max-width: 992px) {
.about-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
}
/* SECTION CONTAINER */
/* SECTION CONTAINER */
.tpx-partner-section {
padding:90px 0px;
background-color: #dedede21;
width: 100%;
float: left;
margin: 0 auto;
position: relative;
}
.tpx-partner-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 6rem;
align-items: center;
}
/* LEFT SIDE: CREATIVE COMPOSITION */
.tpx-image-stage {
position: relative;
display: grid;
/* grid-template-columns: repeat(12, 1fr); */
/* grid-template-rows: repeat(12, 1fr); */
/* height: 620px; */
}
/* Main Portrait Mask Wrapper */
.tpx-small-img-wrapper {
float: left;
width: 100%;
/* border-radius: 30px; */
overflow: hidden;
position: relative;
height: 630px;
transform-origin: bottom center;
z-index: 1;
object-fit: cover;
}
.tpx-parallax-img-1 {
width: 100%;
height: 140%;
object-fit: cover;
position: absolute;
top: -20%;
left: 0;
will-change: transform;
}
/* Secondary Loom Image */
.tpx-large-img-wrapper {
grid-column: 7 / 13;
grid-row: 1 / 11;
border-radius: 28px;
overflow: hidden;
position: relative;
/* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); */
z-index: 2;
}
.tpx-parallax-img-2 {
width: 100%;
height: 140%;
object-fit: cover;
position: absolute;
top: -20%;
left: 0;
will-change: transform;
}
/* RIGHT SIDE: CONTENT */
.tpx-content-col {
display: flex;
flex-direction: column;
}
.tpx-section-title {
font-size: 38px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -1px;
color: #0f172a;
margin-bottom: 20px;
text-transform: uppercase;
}
.tpx-section-desc {
font-size: 17px;
color: #111;
line-height: 1.7;
margin-bottom: 20px;
}
/* CREATIVE VALUE CARDS */
.tpx-value-cards-grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.tpx-value-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 1.8rem;
display: flex;
gap: 1.5rem;
align-items: flex-start;
position: relative;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.03);
}
.tpx-value-card:hover {
border-color: #c2c2c2;
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(196, 157, 99, 0.15);
}
.tpx-value-icon-box {
width: 52px;
height: 52px;
border-radius: 14px;
background: rgb(0 0 0);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.3s ease, transform 0.3s ease;
}
.tpx-value-card:hover .tpx-value-icon-box {
background: #959595;
transform: scale(1.05);
}
.tpx-value-icon-box svg {
width: 26px;
height: 26px;
stroke: #fff;
transition: stroke 0.3s ease;
}
.tpx-value-card:hover .tpx-value-icon-box svg {
stroke: #ffffff;
}
.tpx-value-content h3 {
font-size: 20px;
font-weight: 600;
color: #0f172a;
margin-bottom: 0.4rem;
text-transform: uppercase;
}
.tpx-value-content p {
font-size: 17px;
color: #111;
line-height: 1.7;
margin-bottom: 0;
}
/* Container Layout */
.why-choose-us {
float: left;
width: 100%;
padding: 90px 0px;
}
/* Left Content Styling */
.content-left {
display: flex;
flex-direction: column;
gap: 24px;
}
.main-title {
font-size: 41px;
font-weight: 500;
color: #111;
line-height: 1.2;
letter-spacing: -1px;
text-transform: uppercase;
}
.description {
font-size: 17px;
color: #111;
line-height: 1.7;
margin-top: 0;
margin: 0;
}
/* Feature Pills */
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 10px;
}
.stat-card {
padding: 32px 28px;
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
z-index: 1;
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s ease;
}
.stat-card.dark {
background-color: #040404;
color: #ffffff;
}
.stat-card.light {
background-color: #dedede59;
color: #000;
}
.stat-tag {
margin-bottom: 70px;
font-size: 16px;
font-weight: 400;
}
/* Variant Specific Styles */
.dark .stat-tag {
color: #ffffff;
}
.dark .stat-tag::before {
background-color: #ffffff; /* Fills up white */
}
.light .stat-tag {
color: #111;
}
.stat-number {
font-size: 50px;
font-weight: 800;
line-height: 1;
letter-spacing: 2px;
}
.stat-title {
font-size: 17px;
font-weight: 500;
}
.stat-desc {
font-size: 16px;
line-height: 1.6;
color: #fff;
}
.stat-card.light .stat-desc {
color: #000;
}
/* Container */
.why-choose-us-image {
position: relative;
display: flex;
border-radius: 10px;
align-items: center;
justify-content: center;
height: 100%;
}
/* Masked Figure wrapper - keeps side curves intact */
.why-choose-us-image figure {
display: block;
margin: 0;
/* Standard & Webkit Mask properties */
-webkit-mask-image: url('../images/why-choose-us-img-mask.svg');
mask-image: url('../images/why-choose-us-img-mask.svg');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
border-radius: 10px;
overflow: hidden; /* Fixes curve clipping on scale */
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
cursor: pointer;
}
.why-choose-us-image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 0.828;
object-fit: cover;
display: block;
border-radius: 10px;
transform-origin: center center;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
.why-choose-us-image:hover figure {
transform: scale(1.02);
}
.why-choose-us-image:hover img {
transform: scale(1.06);
}
/* FAQ SECTION LAYOUT */
.faq-x-section {
padding: 90px 0;
background-color: #f1f1f1c2;
margin: 0 auto;
position: relative;
float: left;
width: 100%;
overflow: visible !important; /* CRITICAL: Prevents breaking sticky behavior */
}
.faq-x-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 6rem;
align-items: start; /* CRITICAL: Prevents left column height stretching */
}
/* LEFT COLUMN — FIXED/STICKY ON SCROLL */
.faq-x-left-col {
position: -webkit-sticky;
position: sticky;
top: 6rem; /* Pin offset from top of viewport */
display: flex;
flex-direction: column;
align-items: flex-start;
will-change: transform;
}
.faq-x-title {
font-size: 50px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -1px;
color: #000;
margin-bottom: 20px;
text-transform: uppercase;
}
.faq-x-desc {
font-size: 17px;
color: #000;
line-height: 1.7;
margin-bottom: 3.5rem;
max-width: 90%;
}
/* RIGHT COLUMN — SCROLLING ACCORDION CONTENT */
.faq-x-right-col {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-x-item {
border-bottom: 1px solid #e2e8f0;
padding: 30px 0 15px 0;
transition: border-color 0.3s ease;
}
.faq-x-item:first-child {
padding-top: 0;
}
.faq-x-question-btn {
width: 100%;
background: none;
border: none;
outline: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.faq-x-question-text {
font-size: 20px;
font-weight: 500;
color: #000;
line-height: 1.9;
transition: color 0.3s ease;
}
.faq-x-item:hover .faq-x-question-text {
color: #767676;
}
.faq-x-toggle-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #111;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
background-color: #111;
}
.faq-x-toggle-icon svg {
width: 16px;
height: 16px;
stroke: #fff;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-x-item.active .faq-x-toggle-icon {
background-color: #0f172a;
border-color: #0f172a;
}
.faq-x-item.active .faq-x-toggle-icon svg {
stroke: #ffffff;
transform: rotate(45deg);
}
/* ACCORDION ANSWER CONTENT (SMOOTH TRANSITION) */
.faq-x-answer-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
opacity: 0;
}
.faq-x-item.active .faq-x-answer-wrapper {
grid-template-rows: 1fr;
opacity: 1;
}
.faq-x-answer-inner {
overflow: hidden;
padding-top: 1.25rem;
padding-right: 2rem;
font-size: 17px;
color: #000;
line-height: 1.7;
}
/* RESPONSIVE DESIGN */
@media (max-width: 990px) {
.faq-x-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.faq-x-left-col {
position: relative;
top: 0;
}
.faq-x-desc {
max-width: 100%;
margin-bottom: 2rem;
}
}
/*product*/
.brossoc-catalog-section {
padding: 80px 0;
background-color: #ffffff;
float:left;
width: 100%;
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.sub-heading-pro {
font-size: 16px;
letter-spacing: 0;
font-weight: 400;
color: #111;
text-transform: uppercase;
display: block;
margin-bottom: 8px;
}
.main-heading-pro {
font-size: 50px;
font-weight: 500;
color: #111111;
letter-spacing: -1px;
margin: 0;
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
max-width: 1300px;
margin: 0 auto;
}
.one-product-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
gap: 30px;
max-width: 1300px;
margin: 0 auto;
justify-content: center;
}
/* Card Styling */
.product-card {
background: #f9f9f9;
border-radius: 18px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
border: 1px solid #eaeaea;
}
/* Image Wrapper */
.card-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
background-color: #f0f0f0;
}
.product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.product-card:hover .product-img {
transform: scale(1.06);
}
/* Product Code Pill Badge */
.product-code {
position: absolute;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.75);
color: #111;
backdrop-filter: blur(10px);
font-size: 11px;
font-weight: 500;
padding: 6px 12px;
border-radius: 20px;
text-transform: uppercase;
z-index: 2;
}
/* Hover Overlay & Button */
.hover-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0,0,0,0) 60%);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 25px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.product-card:hover .hover-overlay {
opacity: 1;
}
.view-btn {
background-color: #ffffff; /* Base button background */
color: #111111;
text-decoration: none;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
/* letter-spacing: 1.5px; */
padding: 12px 28px;
border-radius: 30px;
transition: color 0.3s ease, transform 0.3s ease;
transform: translateY(15px);
display: flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden; /* Clips the sliding pseudo-element inside the border radius */
z-index: 1;
}
.product-card:hover .view-btn {
transform: translateY(0);
}
.view-btn::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 30px; /* Match the parent border-radius */
background-color: #111111; /* Dark background that slides up */
z-index: -1;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.view-btn:hover {
color: #ffffff; /* Text turns white over dark background */
}
.view-btn:hover::before {
transform: translateY(0);
}
/* Card Bottom Text */
.card-details {
padding: 20px;
text-align: center;
background-color: #ffffff;
}
.product-name {
font-size: 17px;
font-weight: 500;
color: #111111;
margin: 0;
/* letter-spacing: 0.5px; */
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.catalog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.card-details {
padding: 15px 10px;
}
.product-name {
font-size: 14px;
}
.hover-overlay {
opacity: 1;
background: none;
padding-bottom: 15px;
}
.view-btn {
transform: translateY(0);
padding: 8px 16px;
font-size: 10px;
background: rgba(255, 255, 255, 0.9);
}
}
/* Product Page Layout */
.product-detail{
float: left;
width: 100%;
padding: 90px 0px;
}
.pdp-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
/* --- OWL CAROUSEL GALLERY SECTION --- */
.gallery-section {
position: sticky;
top: 40px;
width: 100%;
overflow: hidden;
}
.product-owl-carousel {
width: 100%;
border-radius: 20px;
overflow: hidden;
background-color: #eeeeee;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
position: relative;
}
.product-owl-carousel .owl-stage-outer {
border-radius: 20px;
}
.carousel-item-img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
user-select: none;
}
/* Custom Owl Nav Controls */
.product-owl-carousel .owl-nav {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 15px;
pointer-events: none;
z-index: 10;
}
.product-owl-carousel .owl-nav button.owl-prev,
.product-owl-carousel .owl-nav button.owl-next {
pointer-events: auto;
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(4px);
color: #111111 !important;
width: 44px;
height: 44px;
border-radius: 50% !important;
font-size: 20px !important;
display: flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin: 0 !important;
}
.product-owl-carousel .owl-nav button.owl-prev:hover,
.product-owl-carousel .owl-nav button.owl-next:hover {
background: #111111 !important;
color: #ffffff !important;
}
/* Custom Owl Dots */
.product-owl-carousel .owl-dots {
position: absolute;
bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
gap: 6px;
z-index: 10;
}
.product-owl-carousel .owl-dot span {
width: 10px !important;
height: 10px !important;
margin: 0 !important;
background: #ffffff !important;
opacity: 0.5;
transition: all 0.3s ease !important;
border-radius: 50% !important;
}
.product-owl-carousel .owl-dot.active span {
opacity: 1;
width: 26px !important;
border-radius: 6px !important;
}
/* --- DETAILS SECTION --- */
.details-section {
display: flex;
flex-direction: column;
gap: 24px;
}
.product-badge-group {
display: flex;
align-items: center;
gap: 12px;
}
.code-badge {
background: #111111;
color: #ffffff;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
padding: 5px 20px;
border-radius: 20px;
text-transform: uppercase;
}
.stock-badge {
font-size: 14px;
color: #27ae60;
font-weight: 500;
/* letter-spacing: 0.5px; */
}
.product-title {
font-size: 35px;
font-weight: 500;
letter-spacing: -1px;
line-height: 1.2;
text-transform: uppercase;
margin: 0;
}
.product-description {
font-size: 17px;
color: #202020;
line-height: 1.7;
font-weight: 400;
}
/* Specifications Grid */
.spec-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 20px;
background: #ffffff;
border: 1px solid #eaeaea;
border-radius: 16px;
}
.spec-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.spec-label {
font-size: 12px;
text-transform: uppercase;
/* letter-spacing: 1.5px; */
color: #888888;
font-weight: 500;
}
.spec-value {
font-size: 14px;
font-weight: 500;
color: #111111;
}
/* Size Selector */
.size-selection-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.size-header {
font-size: 15px;
font-weight: 500;
letter-spacing: 0px;
text-transform: uppercase;
}
.size-options {
display: flex;
gap: 10px;
}
.size-btn {
width: 48px;
height: 48px;
border-radius: 12px;
border: 1px solid #dddddd;
background: #ffffff;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.size-btn:hover,
.size-btn.active {
background: #111111;
color: #ffffff;
border-color: #111111;
}
/* Action Button with Slide-Up Hover */
.action-group {
display: flex;
gap: 16px;
margin-top: 10px;
}
.enquire-btn {
flex: 1;
padding: 13px 30px;
background-color: #111111;
color: #ffffff;
border: 1px solid #111111;
border-radius: 35px;
font-size: 17px;
font-weight: 400;
/* letter-spacing: 2px; */
/* text-transform: uppercase; */
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}
.enquire-btn::before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 100%;
border-radius: 35px;
background-color: #ffffff;
z-index: -1;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.enquire-btn:hover {
color: #111111;
}
.enquire-btn:hover::before {
transform: translateY(0);
bottom:0;
}
/* Accordions */
.accordion-section {
border-top: 1px solid #eaeaea;
margin-top: 10px;
}
.accordion-item {
border-bottom: 1px solid #eaeaea;
}
.accordion-header {
width: 100%;
padding: 18px 0;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-weight: 500;
/* letter-spacing: 0.5px; */
cursor: pointer;
text-align: left;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
font-size: 14px;
color: #2b2b2b;
line-height: 1.6;
}
.accordion-content p {
padding-bottom: 18px;
}
/* --- MODAL DIALOG --- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
padding: 20px;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-card {
background: #ffffff;
width: 100%;
max-width: 41%;
border-radius: 24px;
padding: 40px;
position: relative;
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.modal-overlay.active .modal-card {
transform: translateY(0);
}
.close-modal-btn {
position: absolute;
top: 20px;
right: 20px;
background: #f0f0f0;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.close-modal-btn:hover {
background: #e0e0e0;
}
.modal-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
text-transform: uppercase;
}
.modal-subtitle {
font-size: 15px;
color: #2c2c2c;
margin-bottom: 24px;
}
.inquiry-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0px;
}
.form-group label {
font-size: 13px;
font-weight: 500;
/* letter-spacing: 1px; */
text-transform: uppercase;
color: #000000;
}
.form-group input,
.form-group textarea {
padding: 14px 16px;
border: 1px solid #e0e0e0;
border-radius: 12px;
font-size: 14px;
font-family: inherit;
outline: none;
width: 100%;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #111111;
}
.submit-form-btn {
flex: 1;
padding: 13px 30px;
background-color: #111111;
color: #ffffff;
border: 1px solid #111111;
border-radius: 35px;
font-size: 17px;
font-weight: 400;
/* letter-spacing: 2px; */
/* text-transform: uppercase; */
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}
.submit-form-btn::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 35px;
background-color: #ffffff;
z-index: -1;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.submit-form-btn:hover {
color: #111111;
}
.submit-form-btn:hover::before {
transform: translateY(0);
}
/* Responsive Layout */
@media (max-width: 900px) {
.pdp-container {
grid-template-columns: 1fr;
gap: 30px;
margin: 20px auto;
}
.gallery-section {
position: relative;
top: 0;
}
.product-title {
font-size: 28px;
}
}
/* quality */
.section-heading {
font-size: 42px;
font-weight: 500;
letter-spacing: -1px;
color: #111;
text-align: left;
margin-bottom: 0px;
text-transform: uppercase;
}
.pillars-section {
padding-bottom: 90px;
width: 100%;
/* margin: 0 auto; */
float: left;
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
float: left;
margin-top: 80px;
width: 100%;
}
.pillar-card {
position: relative;
height: 480px;
border-radius: 24px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pillar-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.5s ease;
filter: brightness(0.75);
}
.pillar-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 85%);
padding: 40px 30px;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: all 0.4s ease;
}
.pillar-number {
font-size: 16px;
font-weight: 500;
/* letter-spacing: 3px; */
color: #b9b9b9;
margin-bottom: 12px;
display: block;
}
.pillar-title {
font-size: 24px;
font-weight: 500;
margin-bottom: 12px;
letter-spacing: -1px;
text-transform: uppercase;
color: #ffffff;
}
.pillar-text {
font-size: 15px;
color: #cccccc;
line-height: 1.6;
font-weight: 400;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.5s ease;
}
/* Pillar Hover Effects */
.pillar-card:hover {
border-color: rgba(255, 255, 255, 0.4);
}
.pillar-card:hover .pillar-bg-img {
transform: scale(1.1);
filter: brightness(0.9);
}
.pillar-card:hover .pillar-text {
max-height: 120px;
opacity: 1;
margin-top: 8px;
}
/* ==========================================
SECTION 3: SPLIT CRAFTSMANSHIP & STEPS
========================================== */
.split-section {
float: left;
width: 100%;
/* background: #111111; */
padding: 90px 0px;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.split-container {
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: center;
}
.split-image-box {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 5;
/* box-shadow: 0 20px 50px rgba(0,0,0,0.6); */
}
.split-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.split-image-box:hover img {
transform: scale(1.06);
}
.split-text-box {
display: flex;
flex-direction: column;
gap: 24px;
}
.process-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.process-item {
background: #111;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 13px;
padding: 24px 25px;
backdrop-filter: blur(7px);
display: flex;
align-items: self-start;
gap: 20px;
transition: all 0.3s ease;
}
.process-item:hover {
background: #eaeaea;
border-color: rgb(226 226 226);
transform: translateX(10px);
}
.process-item:hover .process-title{
color: #111;
}
.process-item:hover .process-desc{
color: #111;
}
.process-step-num {
font-size: 16px;
font-weight: 800;
color: #111;
background: #fff;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.process-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 6px;
color: #fff;
}
.process-desc {
font-size: 16px;
color: #c1c1c1;
line-height: 1.7;
margin: 0;
}
/* ==========================================
SECTION 4: FULL-WIDTH EDITORIAL STATS BANNER
========================================== */
.banner-stats-section {
float: left;
width: 100%;
position: relative;
padding: 120px 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%),
url('https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?q=80&w=1800&auto=format&fit=crop') center/cover fixed no-repeat;
}
.stats-grid-quality {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.stat-card-quality {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 40px 20px;
border-radius: 20px;
transition: all 0.4s ease;
}
.stat-card-quality:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-8px);
border-color: rgba(255, 255, 255, 0.3);
}
.stat-number-quality {
font-size: 48px;
font-weight: 900;
color: #ffffff;
letter-spacing: -1px;
margin-bottom: 8px;
}
.stat-label-quality {
font-size: 13px;
font-weight: 500;
color: #aaaaaa;
text-transform: uppercase;
}
/* Responsive Design */
@media (max-width: 992px) {
.split-container {
grid-template-columns: 1fr;
}
.stats-grid-quality {
grid-template-columns: repeat(2, 1fr);
}
.hero-title-quality {
font-size: 42px;
}
}
@media (max-width: 600px) {
.stats-grid-quality {
grid-template-columns: 1fr;
}
.hero-title-quality {
font-size: 32px;
}
}
.brs-app-section {
padding: 70px 0px 70px 0;
float: left;
width: 100%;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.brs-app-card {
float: left;
width: 100%;
background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
padding: 60px 50px;
}
.brs-app-badge {
font-size: 11px;
letter-spacing: 4px;
font-weight: 700;
color: #a0a0a0;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
text-align: center;
}
.brs-app-title {
font-size: 32px;
font-weight: 800;
letter-spacing: 1px;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
text-transform: uppercase;
}
.brs-app-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.brs-app-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.brs-app-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.brs-app-label {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
}
.brs-app-input,
.brs-app-select,
.brs-app-textarea {
padding: 16px 18px;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
color: #111;
font-size: 16px;
font-family: inherit;
outline: none;
transition: all 0.3s ease;
width: 100%;
}
.iti__flag-container {
position: absolute;
top: 14px !important;
}
.brs-app-input:focus,
.brs-app-select:focus,
.brs-app-textarea:focus {
border-color: #ffffff;
background: #0f0f0f;
color: #fff;
}
}
/* Custom File Upload Styling */
.brs-app-file-box {
position: relative;
}
.brs-app-file-box input[type="file"] {
display: none;
}
.brs-app-file-label {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 18px;
background: #fff;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-radius: 12px;
color: #878787;
font-size: 16px;
font-weight: 400;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
/* Unique Submit Button */
.career-btn {
float: none;
margin:auto;
padding: 13px 30px;
background-color: #fff;
color: #111;
border: 1px solid #111111;
border-radius: 35px;
font-size: 17px;
font-weight: 400;
width: 250px;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}
.career-btn::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 35px;
background-color: #000;
z-index: -1;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.career-btn:hover {
color: #fff;
}
.career-btn:hover::before {
transform: translateY(0);
}
/* Responsive */
@media (max-width: 768px) {
.brs-app-card {
padding: 40px 24px;
}
.brs-app-grid-2 {
grid-template-columns: 1fr;
}
.brs-app-title {
font-size: 26px;
}
}
/* Outer Wrapper */
.brs-uniq-wrapper {
width: 100%;
margin: 0 auto;
padding-top: 80px;
position: relative;
float: left;
}
/* ============================================================
TOP SECTION: ARCHITECTURAL BANNER HEADER
============================================================ */
.brs-uniq-hero {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-bottom: 50px;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 30px;
}
.brs-uniq-hero-left {
float: left;
width: 50%;
}
.brs-uniq-badge {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 5px;
text-transform: uppercase;
font-weight: 700;
color: #888888;
margin-bottom: 24px;
}
.brs-uniq-badge-dot {
width: 6px;
height: 6px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 0 12px #ffffff;
}
.brs-uniq-title {
font-size: 45px;
font-weight: 500;
letter-spacing: -3px;
line-height: 1.2;
text-transform: uppercase;
color: #111;
}
.brs-uniq-hero-right {
text-align: right;
}
.brs-uniq-time-label {
font-size: 10px;
letter-spacing: 3px;
color: #666;
text-transform: uppercase;
margin-bottom: 6px;
display: block;
}
.brs-uniq-time-value {
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #ffffff;
}
/* ============================================================
MIDDLE SECTION: 3-CARD INTERACTIVE HORIZONTAL DECK
============================================================ */
.brs-uniq-cards-deck {
margin-bottom: 70px;
}
.brs-uniq-info-card {
background: #dedede;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 32px 28px;
position: relative;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 160px;
float: left;
width: 100%;
}
.brs-uniq-info-card:hover {
background: rgb(0 0 0 / 90%);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-8px);
color: #fff;
}
.brs-uniq-card-num {
font-size: 20px;
font-weight: 600;
padding-bottom: 18px;
color: #111;
float: left;
width: 100%;
}
.brs-uniq-card-body {
font-size: 17px;
color: #111;
line-height: 1.7;
font-weight: 400;
float: left;
width: 100%;
margin: 0;
}
.brs-uniq-card-body a{
color: #111;
}
.brs-uniq-info-card:hover .brs-uniq-card-num{
color: #fff;
}
.brs-uniq-info-card:hover .brs-uniq-card-body a{
color: #fff;
}
.brs-uniq-info-card:hover .brs-uniq-card-body {
color: #fff;
}
/* ============================================================
BOTTOM SECTION: MONOLITH FORM WITH GLOW ACCENT
============================================================ */
.brs-uniq-form-wrapper {
background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
border: 1px solid rgba(255, 255, 255, 0.1);
/* border-radius: 32px; */
padding: 80px 0;
position: relative;
overflow: hidden;
float: left;
width: 100%;
}
/* Top Accent Line that highlights on focus inside */
.brs-uniq-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transition: all 0.5s ease;
}
.brs-uniq-form-wrapper:focus-within::before {
left: 0%;
right: 0%;
background: linear-gradient(90deg, transparent, #ffffff, transparent);
}
.brs-uniq-form-header {
margin-bottom: 48px;
text-align: center;
}
.brs-uniq-form-title {
font-size: 40px;
font-weight: 500;
letter-spacing: -1px;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 13px;
}
.brs-uniq-form-sub {
font-size: 16px;
color: #f5f5f5;
font-weight: 400;
margin-bottom: 56px;
}
.brs-uniq-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.brs-uniq-field-full {
grid-column: span 2;
}
.brs-uniq-field-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.brs-uniq-label {
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
}
.brs-uniq-input,
.brs-uniq-select,
.brs-uniq-textarea {
width: 100%;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 18px 20px;
color:#000000;
font-family: inherit;
font-size: 14px;
outline: none;
transition: all 0.3s ease;
}
/*.brs-uniq-input:focus,*/
/*.brs-uniq-select:focus,*/
/*.brs-uniq-textarea:focus {*/
/* border-color: #ffffff;*/
/* background: #0f0f0f;*/
/*}*/
/* Service Choice Pills (Pure CSS Checkbox Matrix) */
.brs-uniq-matrix {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.brs-uniq-matrix-item input[type="radio"] {
display: none;
}
.brs-uniq-matrix-item label {
display: block;
text-align: center;
padding: 14px 10px;
background: #080808;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
font-size: 15px;
font-weight: 500;
color: #777777;
cursor: pointer;
transition: all 0.3s ease;
}
.brs-uniq-matrix-item input[type="radio"]:checked + label {
background: #ffffff;
color: #050505;
border-color: #ffffff;
font-weight: 500;
font-size: 15px;
}
.brs-uniq-matrix-item label:hover {
border-color: rgba(255, 255, 255, 0.4);
color: #ffffff;
}
/* Submit Button Section */
.brs-uniq-submit-wrap {
margin-top: 20px;
grid-column: span 2;
display: flex;
width: 100%;
}
/* Responsive Queries */
@media (max-width: 992px) {
.brs-uniq-cards-deck {
grid-template-columns: 1fr;
}
.brs-uniq-matrix {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.brs-uniq-field-full {
grid-column: span 1;
}
.brs-uniq-matrix {
grid-template-columns: 1fr;
}
.brs-uniq-form-wrapper {
padding: 40px 20px;
}
.brs-uniq-hero-right {
text-align: left;
}
}
.tpx-small-img-wrapper img{
width: 100%;
}
#brossoc-loader{
position:fixed;
inset:0;
z-index:99999;
background:#111;
display:flex;
align-items:center;
justify-content:center;
clip-path:circle(150% at 50% 50%);
font-family: 'Galano Grotesque' !important;
}
#brossoc-loader.is-opening{
animation:brossoc-iris 0.95s 1.35s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes brossoc-iris{
0%{ clip-path:circle(150% at 50% 50%); }
100%{ clip-path:circle(0% at 50% 50%); }
}
.brossoc-loader__mark{
font-weight:800;
font-size:clamp(2.4rem, 7vw, 4rem);
letter-spacing:1.1em;
color:#fff;
text-transform:uppercase;
line-height:1;
white-space:nowrap;
opacity:0;
filter:blur(10px);
/* padding-left offsets the huge starting letter-spacing so the
word stays visually centered as it tightens */
padding-left:0;
animation:brossoc-tighten 1.1s cubic-bezier(.16,.9,.2,1) forwards;
}
@keyframes brossoc-tighten{
0%{ letter-spacing:1.1em; opacity:0; filter:blur(10px); }
60%{ opacity:1; }
100%{ letter-spacing:0.02em; opacity:1; filter:blur(0); }
}
#brossoc-loader.is-opening .brossoc-loader__mark{
animation:brossoc-tighten 1.1s cubic-bezier(.16,.9,.2,1) forwards,
brossoc-mark-fade 0.5s 1.35s ease forwards;
}
@keyframes brossoc-mark-fade{
to{ opacity:0; transform:scale(0.92); }
}
@media (prefers-reduced-motion: reduce){
#brossoc-loader{ animation:none !important; transition:opacity 0.5s ease; }
#brossoc-loader.is-opening{ opacity:0; clip-path:circle(150% at 50% 50%); }
.brossoc-loader__mark{ animation:none !important; opacity:1; filter:none; letter-spacing:0.02em; }
}
/* Safely hide the Google reCAPTCHA badge */
.grecaptcha-badge {
visibility: hidden !important;
}
.hidden-input-field {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
.submit-btn {
position: relative;
min-height: 50px;
min-width: 140px;
}
.submit-btn .btn-text_btn {
display: inline-block;
}
.submit-btn .form-loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
line-height: 1;
}
/* Underline setup */
.nav-links a {
position: relative;
text-decoration: none !important;
}
/* Hidden underline */
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
/* Hover - left to right */
.nav-links a:hover::after {
transform: scaleX(1);
}
/* Active link */
.nav-links a.stable::after {
transform: scaleX(1);
}
.error_msg {
display: none;
color: red !important;
font-size: 13px;
margin-top: 5px;
}
.privacy-sec{
width: 100%;
float: left;
padding: 70px 0;
}
.privacy-sec h2{
font-size: 50px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 10px;
color: #111111;
text-transform: uppercase;
letter-spacing: -1px;
}
.privacy-sec h6{
font-size: 22px;
color: #000000;
line-height: 1.7;
max-width: 100%;
font-weight: 600;
}
.privacy-sec p{
font-size: 17px;
color: #111;
line-height: 1.7;
max-width: 100%;
}
.privacy-sec ul{
padding: 0;
}
.privacy-sec ul li{
position: relative;
width: 100%;
float: left;
list-style: none;
line-height: 180%;
font-size: 17px;
color: #000;
font-weight: 400;
padding-left: 20px;
}
.privacy-sec li:after{
position:absolute;
content:'';
width: 10px;
height: 10px;
background: #000;
left: 0;
top: 10px;
}