html{
overflow-x: hidden;
}
body{
margin: auto;
overflow-x: hidden;
font-family: "Plus Jakarta Sans", sans-serif !important;
}
/*shrinks*/
body.modal-open {
padding-right: 0 !important;
}
a{
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
text-decoration: none;
}
@media (min-width: 1400px) {
.container {
max-width: 1228px;
}
}
a:hover{
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
}
.logo-wrapper img {
width: 30px !important;
height: auto;
margin: 0 auto;
display: block;
}
.header {
width: 100%;
float: left;
position: absolute;
z-index: 11;
padding-top: 35px;
display: flex;
align-items: center;
padding-bottom: 16px;
}
.main-hdr{
width: auto;
float: right;
padding-left: 0px;
position: relative;
border: 1px solid #cccccc69;
border-radius: 50px;
background-color: white;
padding: 17px 0px;
}
.logo{
width: auto;
float: left;
}
.logo img{
width: 100%;
float: left;
max-width: 264px;
}
.head-menu{
width: 100%;
float: left;
}
.main-banner {
width: 100%;
float: left;
position: relative;
height: 100vh;
padding-top: 219px;
overflow: hidden;
background: #ffffff;
perspective: 1000px; /* Enables 3D space depth for premium hover states */
}
.stable{
color: #ddd !important;
}
/* Map background layer - completely static now */
.main-banner .container {
position: relative;
z-index: 2;
}
/* --- Text Mask Reveal Animation --- */
.main-banner {
width: 100%;
float: left;
position: relative;
height: 100vh;
padding-top: 219px;
overflow: hidden;
background: #ffffff;
perspective: 1000px;
}
/* Map background layer */
.banner-map-bg {
position: absolute;
top: 67px;
left: 0;
width: 100%;
height: 100%;
background-image: url("../images/bg-map-banner.webp");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 84%;
z-index: 1;
}
.main-banner .container {
position: relative;
z-index: 2;
}
/* --- Text Mask Container --- */
.reveal-text-container {
overflow: hidden;
display: block;
width: 100%;
margin-bottom: 28px;
position: relative;
clear: both;
}
/* --- Fixed H2 Element Styles --- */
.main-banner h2.reveal-text {
width: 100%;
text-align: center;
font-size: 110px;
color: #000000 !important;
font-weight: 800;
letter-spacing: -1.5px;
line-height: 90%;
margin-bottom: 0;
margin-top: 0;
display: block;
transform: translateY(115%);
}
/* Trigger reveal animation only when .loaded is added */
.main-banner.loaded h2.reveal-text {
animation: revealUpText 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards !important;
}
/* Secondary Elements Initial State */
.main-banner h6,
.main-banner p,
.btn-1 {
opacity: 0;
}
/* Trigger Fade In Up only when .loaded is added */
.main-banner.loaded .fade-in-up {
animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.main-banner.loaded .delay-1 { animation-delay: 0.6s; }
.main-banner.loaded .delay-2 { animation-delay: 0.8s; }
.main-banner h6 {
float: left;
width: 100%;
text-align: center;
font-size: 16px;
color: #000;
font-weight: 400;
letter-spacing: 2.5px;
margin-bottom: 31px;
line-height: 100%;
}
.main-banner p {
float: left;
width: 100%;
text-align: center;
font-size: 16px;
color: #000;
font-weight: 300;
margin-bottom: 21px;
line-height: 180%;
}
.btn-1 {
float: none;
margin: auto;
display: table;
text-align: center;
background-color: #FFCB05;
border-radius: 40px;
border: 2px solid #000;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
line-height: 100%;
padding: 20px 30px;
color: #000;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
}
.btn-1:hover {
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
background-color: #fff;
box-shadow: 0 6px 0 #000000;
}
.btn-1:active {
box-shadow: 0 2px 0 #000000;
}
/* --- Packet Setup --- */
.bnr-packet {
position: absolute;
width: 89px;
z-index: 3;
opacity: 0;
}
.bnr-img1 { right: 14%; top: 33%; }
.bnr-img2 { left: 25%; top: 75%; }
.bnr-img3 { left: 15%; top: 37%; }
.bnr-img4 { right: 22%; top: 79%; }
/* Trigger Packets Animations on .loaded */
.main-banner.loaded .bnr-img1 {
animation: burstImg1 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards, floatImg1 5s ease-in-out 1.8s infinite alternate;
}
.main-banner.loaded .bnr-img2 {
animation: burstImg2 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards, floatImg2 5s ease-in-out 1.9s infinite alternate;
}
.main-banner.loaded .bnr-img3 {
animation: burstImg3 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards, floatImg3 5s ease-in-out 1.7s infinite alternate;
}
.main-banner.loaded .bnr-img4 {
animation: burstImg4 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards, floatImg4 5s ease-in-out 2.0s infinite alternate;
}
/* --- Keyframes --- */
@keyframes revealUpText {
0% { transform: translateY(115%); }
100% { transform: translateY(0%); }
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(25px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes burstImg1 {
0% { opacity: 0; top: 50%; right: 50%; transform: translate(50%, -50%) scale(0.1) rotate(0deg); }
100% { opacity: 1; top: 33%; right: 14%; transform: translate(0, 0) scale(1) rotate(-14deg); }
}
@keyframes floatImg1 {
0% { transform: translateY(0) rotate(-14deg); }
100% { transform: translateY(-10px) rotate(-10deg); }
}
@keyframes burstImg2 {
0% { opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.1) rotate(0deg); }
100% { opacity: 1; top: 75%; left: 25%; transform: translate(0, 0) scale(1) rotate(11deg); }
}
@keyframes floatImg2 {
0% { transform: translateY(0) rotate(11deg); }
100% { transform: translateY(-10px) rotate(15deg); }
}
@keyframes burstImg3 {
0% { opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.1) rotate(0deg); }
100% { opacity: 1; top: 37%; left: 15%; transform: translate(0, 0) scale(1) rotate(-15deg); }
}
@keyframes floatImg3 {
0% { transform: translateY(0) rotate(-15deg); }
100% { transform: translateY(-10px) rotate(-11deg); }
}
@keyframes burstImg4 {
0% { opacity: 0; top: 50%; right: 50%; transform: translate(50%, -50%) scale(0.1) rotate(0deg); }
100% { opacity: 1; top: 79%; right: 22%; transform: translate(0, 0) scale(1) rotate(-9deg); }
}
@keyframes floatImg4 {
0% { transform: translateY(0) rotate(-9deg); }
100% { transform: translateY(-10px) rotate(-5deg); }
}
/* --- Banner Base Styling --- */
.stats-banner {
background-color: #FFCB05; /* True premium yellow matching your brand button */
width: 100%;
padding: 22px 0px;
box-sizing: border-box;
float: left;
width: 100%;
display: flex;
justify-content: space-between;
}
.full-counter{
float: left;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 5px;
}
.stats-intro {
display: flex;
align-items: center;
gap: 25px;
/* flex: 1; */
float: left;
width: 38%;
}
.stats-logo {
height: auto;
width: 28px;
animation: luxurySway 4s ease-in-out infinite alternate;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}
/* --- High-End Continuous Keyframe Motion --- */
@keyframes luxurySway {
0% {
transform: translateY(2px) rotate(-4deg) scale(0.96);
filter: brightness(0.98) contrast(0.98);
}
35% {
transform: translateY(-1px) rotate(-1deg) scale(1);
}
70% {
transform: translateY(1px) rotate(2deg) scale(0.98);
}
100% {
/* Lifts up gracefully, tilts right, and catches a subtle sun gleam */
transform: translateY(-4px) rotate(4deg) scale(1.03);
filter: brightness(1.08) contrast(1.02);
}
}
.text-wave{
perspective:1000px;
}
.text-curtain{
overflow:hidden;
}
.stats-text {
font-size: 16px;
line-height: 160%;
color: #000;
margin: 0;
font-weight: 300;
}
.facts-counters {
display: flex;
gap: 40px;
align-items: center;
}
.counter-item {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 7px;
}
.counter-label {
color: #000;
font-size: 16px;
font-weight: 300;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
/*odometer*/
.counterup-section {
float: left;
width: 100%;
align-items: start;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
font-family: 'Plus Jakarta Sans' !important;
}
.counterup-container {
display: flex;
float: left;
}
.odometer-wrapper {
display: inline-flex;
align-items: baseline;
justify-content: start;
float: left;
width: 100%;
}
.plus {
/* margin-left: 5px; */
position: relative;
top: 0px;
font-weight: 800;
font-size: 57px;
}
.counter-box {
float: left;
}
.odometer {
/*font-size: 60px;*/
font-size: 47px;
font-weight: 800;
line-height: 90% !important;
letter-spacing: 1px;
}
.section3{
float: left;
width: 100%;
padding: 76px 0;
}
.s3-1{
float: left;
width: 76.5%;
display: flex;
gap: 28px;
justify-content: space-evenly;
padding-left: 10px;
/* padding-right: 3px; */
}
.s3-2{
float: left;
width: 23.5%;
padding-left: 34px;
padding-right: 0;
display: flex;
align-items: center;
}
/* Feature Cards */
.feature-card {
background: #ffffff;
border: 1px solid #adaaaa80;
border-radius: 40px;
padding: 40px 41px;
position: relative;
/* width: 26%; */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
cursor: pointer;
/* height: 100%; */
display: flex;
flex-direction: column;
justify-content: space-between;
float: left;
}
.feature-card:hover {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
border-color: #e0e0e0;
}
/* Card Header containing the badge and number */
.card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 42px;
}
/* --- The Wow Icon Badge Design --- */
.icon-badge-wrapper {
position: relative;
width: 66px;
height: 66px;
}
/* The offset background circle */
.icon-circle-bg {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #000000;
bottom: -8px;
right: -9px;
z-index: 1;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* The main foreground circle holding the icon */
.icon-circle-main {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #000000;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.icon-circle-main img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Color variations matching your mockup */
.yellow .icon-circle-main {background-color: #FFCB05;}
.yellow .icon-circle-bg {background-color: #FFCB05;}
.green .icon-circle-main { background-color: #A6CE39; }
.green .icon-circle-bg { background-color: #A6CE39; }
.red .icon-circle-main { background-color: #FF212A; }
.red .icon-circle-bg { background-color: #FF212A; /* Using a contrasting color layer like the original */ }
.red-variant .icon-circle-bg { background-color: #FF212A; } /* Alternative close-shade red */
/* Hover effect: The background circle pops out dramatically */
.feature-card:hover .icon-circle-bg {
transform: translate(2px, 2px) scale(1.05);
}
/* Card Numbering */
.card-number {
font-size: 25px;
font-weight: 800;
color: #D9D9D9;
line-height: 1;
user-select: none;
}
/* Card Content */
.card-title {
font-size: 25px;
font-weight: 800;
color: #000000;
line-height: 100%;
margin-bottom: 18px;
}
.card-desc {
font-size: 16px;
color: #000;
line-height: 1.6;
font-weight: 300;
margin-bottom: 6px;
}
/* Right side Call to Action Text Block */
.cta-block {
padding-left: 0;
}
.cta-heading {
font-size: 39px;
font-weight: 800;
color: #000000;
margin-bottom: 16px;
line-height: 1.1;
}
.cta-text {
font-size: 16px;
color: #000;
line-height: 1.6;
margin-bottom: 21px;
font-weight: 400;
padding-right: 27px;
}
.cta-button {
display: inline-block;
background-color: #ffcc00;
color: #000000;
text-decoration: none;
font-weight: 600;
font-size: 16px;
display: flex;
border-radius: 50px;
border: 2px solid #000000;
transition: all 0.2s ease;
width: 171px;
height: 60px;
align-items: center;
justify-content: center;
}
.cta-button:hover {
background-color: #fff;
box-shadow: 0 6px 0 #000000;
}
.cta-button:active {
box-shadow: 0 2px 0 #000000;
}
/* Responsive adjustments */
@media (max-width: 992px) {
.section-container {
grid-template-columns: repeat(2, 1fr);
}
.cta-block {
grid-column: span 2;
padding-left: 0;
margin-top: 20px;
}
}
@media (max-width: 600px) {
.section-container {
grid-template-columns: 1fr;
}
.cta-block {
grid-column: span 1;
}
}
/* Wrapper that handles locking the track on screen */
/* WEB SECTIONS RUNWAY DECORATION */
/* ===========================
Wrapper
=========================== */
.kn-carousel-wrapper{
z-index: 9;
position:relative;
float: left;
width: 100%;
}
.kn-carousel-section{
position:sticky;
top:0;
height:100vh;
overflow:hidden;
}
/* ===========================
Slides
=========================== */
.kn-slide{
position:absolute;
inset:0;
display:flex;
justify-content: flex-start;
align-items: flex-start;
background-size:cover;
background-position:center;
padding-top: 120px;
padding-left: 80px;
}
.kn-slide:nth-child(1){
z-index: 2;
}
.kn-slide:nth-child(2){
z-index: 3;
}
.kn-slide:nth-child(3){
z-index: 4;
}
.kn-slide:nth-child(4){
z-index: 5;
}
/* ===========================
Overlay
=========================== */
.kn-slide::before{
content:"";
position:absolute;
inset:0;
/* background:rgba(0,0,0,.45); */
}
.kn-content {
position: relative;
z-index: 100;
max-width: 800px;
width: 100%;
padding: 0 24px;
text-align: left;
/* Change these to prepare for the GSAP entry effect */
opacity: 0;
transform: translateY(40px);
transition: none; /* Let GSAP handle the transitions completely */
}
/* ===========================
Typography
=========================== */
.sub-kn-title{
margin:0 0 15px;
color: #fff;
font-size: 16px;
font-weight: 400;
letter-spacing: 2px;
text-transform:uppercase;
}
.kn-title{
margin:0 0 20px;
color:#fff;
font-size: 120px;
font-weight: 800;
line-height: 90%;
}
.kn-desc{
color:#f5f5f5;
font-size: 16px;
line-height: 160%;
font-weight: 300;
max-width: 455px;
}
/* ==========================================
Category Card Base Styling
========================================== */
.category-section{float: left;width: 100%;
padding: 70px 122px 90px 0px;
background: linear-gradient(175deg,rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 81%);
}
.product-carousel{
float: left;
width: 71.5%;
}
.category-card {
position: relative;
background-color: #f3f3f3;
border-radius: 30px;
padding: 52px 22px 48px 22px;
text-align: center;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
height: 100%;
cursor: pointer;
float: left;
width: 100%;
border: 1px solid #e6e6e6;
}
.card-content {
position: relative;
z-index: 2;
}
/* Main Foreground Image Icon */
.icon-wrapper img {
width: 85px !important;
height: auto;
margin: 0 auto;
display: block;
}
.card-title-product {
font-weight: 800;
text-transform: uppercase;
margin-top: 28px;
margin-bottom: 26px;
color: #000;
font-size: 25px;
}
.card-text-product {
font-size: 16px;
color: #000;
margin-bottom: 0;
line-height: 160%;
font-weight: 300;
}
/* Light Watermark Background Image Effect */
.watermark-icon {
position: absolute;
top: 0;
/* right: -15%; */
pointer-events: none;
z-index: 1;
}
.watermark-icon img {
width: 100%;
height: auto;
object-fit: contain;
opacity: 0.01;
transition: transform 0.4s ease, opacity 0.4s ease;
}
/* ==========================================
Hover & Active Center Card Effects
========================================== */
.content-box{
float: left;
width: 28.5%;
padding-left: 62px;
}
.category-card:hover
{
background-color: #FFCB05;
transform: translateY(-4px);
}
.category-card:hover .watermark-icon img {
opacity: 0.01;
transform: scale(1.1) rotate(-8deg);
}
/* ==========================================
Right Content Typography
========================================== */
.subtitle-product {
/* padding-top: 24px; */
text-transform: uppercase;
color: #000;
font-weight: 400;
font-size: 16px;
letter-spacing: 2px;
display: block;
}
.main-title-product {
font-size: 60px;
font-weight: 800;
color: #000;
margin-top: 6px;
margin-bottom: 19px;
line-height: 100%;
}
.description-product {
color: #000;
font-size: 16px;
line-height: 1.6;
font-weight: 300;
margin-bottom: 30px;
}
/* ==========================================
Right Side Navigation Controls
========================================== */
.nav-controls {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.nav-btn {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
cursor: pointer;
padding: 0;
outline: none;
border:none;
background: none;
}
.nav-btn img {
width: 60px !important;
object-fit: contain;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.nav-btn:hover img {
transform: scale(1.1) ;
}
.product-carousel .owl-stage-outer{
padding-top: 30px;
}
.product-carousel .owl-nav{
display: none !important;
}
.cta-mob-bg {
height: 50vh;
width: 100%;
float: left;
background-color: #fecb00;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left;
background-image: url("../images/jackf-full.webp");
padding: 65px 0 91px 0;
}
.cta-wrap-mob{
/* background-color: #ffcb04; */
float: left;
width: 100%;
padding: 57px 0;
text-align: center;
}
.cta-section {
width: 100%;
float: left;
background-color: #fecb00;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left center;
background-image: url("../images/jackf-full.webp");
padding: 65px 0;
}
/* Content Styling */
.cta-content-wrapper {
float: left;
width: 100%;
color: #000000;
}
.cta-title {
font-size:60px;
font-weight: 800;
line-height: 100%;
margin-bottom: 16px;
color: #000;
width: 100%;
float: left;
}
.cta-description {
font-size: 16px;
line-height: 1.6;
color: #000;
margin-bottom: 24px;
width: 100%;
float: left;
font-weight: 300;
}
/* Button Styling */
.cta-btn-details {
width: 171px;
height: 60px;
border: 2px solid #000000;
border-radius: 50px;
color: #000000;
text-decoration: none;
font-size:16px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
}
.cta-btn-details:hover {
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
box-shadow: 0 6px 0 #000000;
}
.cta-btn-details:active {
box-shadow: 0 2px 0 #000000;
}
.certifications-section {
width: 100%;
padding: 80px 0 80px 0;
float: left;
background-color: #f3f3f3;
width: 100%;
}
/* Typography Styles */
.certifications-subtitle {
display: block;
font-size: 16px;
font-weight: 400;
letter-spacing: 2.2px;
color: #000;
margin-bottom: 8px;
text-transform: uppercase;
}
.certifications-title {
font-size: 60px;
font-weight: 800;
color: #000000;
line-height: 100%;
margin-bottom: 23px;
}
.certifications-description {
font-size: 16px;
color: #000;
font-weight: 300;
max-width: 100%;
line-height: 1.6;
margin: 0;
}
/* Logos Flex Box */
.certifications-logos-wrapper {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
height: 100%;
}
.logo-item {
justify-content: center;
cursor: pointer;
position: relative;
}
/* Vertical line right to first 3 logos */
.logo-item.has-divider::after {
content: "";
position: absolute;
right: -14px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%; /* Adjust height of the vertical line */
background-color: #e0e0e0;
}
.logo-item img {
max-height: 100px;
width: auto;
max-width: 100%;
object-fit: cover;
/* Hover Effect Transitions */
transition: transform 0.3s ease, filter 0.3s ease;
filter: opacity(0.8) grayscale(20%);
}
/* Hover Interaction */
.logo-item:hover img {
transform: translateY(-6px) scale(1.05);
filter: opacity(1) grayscale(0%);
cursor: auto;
}
.cert {
/* display: flex; */
/*padding-left: 59px;*/
}
.events-section {
float: left;
width: 100%;
padding: 87px 0;
background-color: #ffffff;
}
/* --- Header Layout --- */
.event-content-header {
display: flex;
/* justify-content: space-between; */
align-items: flex-end;
margin-bottom: 70px;
float: left;
width: 100%;
}
.event-left-col {
width: 69%;
float: left;
}
.event-subheading {
display: block;
font-size: 16px;
font-weight: 400;
letter-spacing: 2.2px;
color: #000;
text-transform: uppercase;
margin-bottom: 18px;
}
.event-heading {
margin-bottom: 0;
font-size: 60px;
font-weight: 800;
color: #000000;
line-height: 100%;
/* letter-spacing: -1px; */
}
.event-right-col {
width: 31%;
padding-bottom: 8px;
float: left;
}
.event-description {
font-size: 16px;
line-height: 1.6;
color: #000;
font-weight: 300;
margin-bottom: 0;
}
/* --- Logos Row Layout --- */
/* --- Logos Row Layout --- */
.event-logos-grid {
display: flex;
align-items: center;
justify-content: space-between;
float: left;
width: 100%;
}
.event-logo-item {
/* flex: 1; */
/* display: flex; */
justify-content: center;
/* align-items: center; */
/* padding: 10px 20px; */
/* height: 90px; */
position: relative; /* Required for dividers */
/* Initial hidden state */
}
/* --- Triggered Animation Class (Added via JS on scroll) --- */
.event-logo-item.is-visible {
animation: revealLeftToRight 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Staggered Delay: Animates sequentially left-to-right once visible */
.event-logo-item.is-visible:nth-child(1) { animation-delay: 0.1s; }
.event-logo-item.is-visible:nth-child(2) { animation-delay: 0.25s; }
.event-logo-item.is-visible:nth-child(3) { animation-delay: 0.4s; }
.event-logo-item.is-visible:nth-child(4) { animation-delay: 0.55s; }
.event-logo-item.is-visible:nth-child(5) { animation-delay: 0.7s; }
/* Vertical Dividers between logos */
.event-logo-item:not(:last-child)::after {
content: "";
position: absolute;
right: -73px;
top: -11%;
height: 66px;
width: 1px;
background-color: #e2e2e2;
}
/* Logo Image Styling & Hover Transitions */
.event-logo-item img {
max-height: 68px;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
/*.event-logo-item:hover img {*/
/* transform: scale(1.08) translateY(-3px);*/
/*}*/
/* Left-to-Right Reveal Keyframes */
@keyframes revealLeftToRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.Connects-carousel .owl-nav{
display: none;
}
/* --- Main Fourth Section --- */
.split-section {
float: left;
width: 100%;
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #ffffff;
/* CRITICAL: Allows balloon to float above this section boundary */
/* overflow: visible !important; */
overflow: hidden;
}
/* --- TOP HALF (Clean White Background) --- */
.top-section {
position: relative;
width: 100%;
/* height: 67vh; */
background-color: #ffffff;
display: flex;
align-items: center;
padding: 108px 0 119px 0;
z-index: 1;
}
.top-heading {
width: 54%;
}
.top-heading h1 {
font-size:40px;
font-weight: 800;
color: #000000;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: -0.5px;
}
/* --- BOTTOM HALF (City Background) --- */
.bottom-section {
position: relative;
width: 100%;
/* height: 50vh; */
background: url('../images/city.webp') no-repeat center bottom / cover;
display: flex;
align-items: center;
padding: 80px 0px 101px 106px;
z-index: 1;
}
/* Soft gradient overlay for subtle background blending */
.bottom-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); */
z-index: 1;
}
.bottom-content {
position: relative;
z-index: 2;
/* max-width: 480px; */
display: flex;
flex-direction: column;
gap: 20px;
}
.ftr-logo {
width: 553px;
height: auto;
}
.bottom-content p {
font-size: 16px;
color: #000;
line-height: 1.6;
font-weight: 300;
width: 56%;
margin-bottom: 11px;
}
/* ========================================================
--- OVERLAPPING BALLOON (EXTENDS TO ABOVE SECTION) ---
======================================================== */
.balloon-overlay {
position: absolute;
right: 5%;
/* Adjust this negative top value to pull the balloon higher into the section above */
top: -174px;
z-index: 999; /* High z-index keeps it on top of all sections */
pointer-events: none;
}
.flying-wrapper {
position: relative;
/* Floating animation */
animation: ultimateBalloonFloat 12s ease-in-out infinite;
transform-origin: center center;
}
.single-balloon-img {
width: 600px; /* Adjust scale as needed */
height: auto;
display: block;
/* filter: drop-shadow(15px 25px 20px rgba(0, 0, 0, 0.22)); */
}
/* --- FLOATING ANIMATION KEYFRAMES --- */
@keyframes ultimateBalloonFloat {
0% {
transform: translateY(0px) rotateZ(0deg) rotateY(0deg);
}
25% {
transform: translateY(-20px) rotateZ(1.5deg) rotateY(3deg);
}
50% {
transform: translateY(-5px) rotateZ(-1deg) rotateY(-2deg);
}
75% {
transform: translateY(-28px) rotateZ(-1.8deg) rotateY(2deg);
}
100% {
transform: translateY(0px) rotateZ(0deg) rotateY(0deg);
}
}
.ball-btn-details {
width: 171px;
height: 60px;
border: 2px solid #000000;
border-radius: 50px;
color: #000000;
text-decoration: none;
font-size:16px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFCB05;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
}
.ball-btn-details:hover {
background-color: #fff;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
box-shadow: 0 6px 0 #000000;
}
.ball-btn-details:active {
box-shadow: 0 2px 0 #000000;
}
/* --- Gallery Section Styles --- */
.gallery-section {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.gallery-carousel .owl-dots {
display: none !important;
}
.gallery-carousel .item {
position: relative;
overflow: hidden;
height: 392px;
}
.gallery-carousel .owl-nav {
display: none !important;
}
/* --- Item Styling & Zoom --- */
.gallery-item-wrapper {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.gallery-item-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.gallery-item-wrapper:hover img {
transform: scale(1.05);
}
.gallery-item-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
transition: background-color 0.3s ease;
pointer-events: none;
}
.gallery-item-wrapper:hover::after {
background-color: rgba(0, 0, 0, 0.1);
}
/* --- 3-Section Segmented Progress Bar --- */
.progress-bar-wrapper {
width: 100%;
height: 10px;
background-color: #F9F9F9; /* Rail background */
position: absolute;
bottom: 0;
left: 0;
z-index: 20;
}
.yellow-progress-bar {
width: 0%;
height: 100%;
background-color: #FFCB05; /* Yellow progress fill */
}
/* Section Dividers */
.progress-divider {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background-color: #ffffff;
z-index: 25;
}
/* --- Features Section Layout --- */
.features-section {
width: 100%;
padding: 80px 0px 66px 0px;
background-color: #ffffff;
float: left;
}
/* --- Section Header --- */
.features-header {
text-align: center;
margin-bottom: 45px;
}
.feature-sub-title {
font-size: 16px;
font-weight: 400;
letter-spacing: 2px;
color: #000;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
.feature-main-title {
font-size: 60px;
font-weight: 800;
color: #000;
margin-bottom: 11px;
}
.feature-description {
font-size: 16px;
color: #000;
max-width: 600px;
font-weight: 300;
line-height: 1.6;
margin: 0 auto;
}
/* --- Grid Layout --- */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
/* --- Feature Card Base --- */
.sp-feature-card {
position: relative;
padding: 128px 48px 0 48px;
border-radius: 40px;
background: #ffffff;
border: 1px solid #e2e2e7;
margin-bottom: 14px;
overflow: hidden;
height: 315px;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
cursor: pointer;
/* Smooth transition engine for the WOW effect */
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- Background Image / Watermark Layer --- */
.card-watermark {
position: absolute;
top: -10px;
right: -10px;
width: 214px;
height: 201px;
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
opacity: 1; /* Subtle default watermark */
pointer-events: none;
/* Transitions for hover zoom/rotate */
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Individual Placeholder SVGs (Replace URLs with your actual image paths) */
.watermark-card {
background-image: url('../images/oi1.webp');
}
.watermark-check {
background-image: url('../images/oi2.webp');
}
.watermark-globe {
background-image: url('../images/oi3.webp');
}
.watermark-box {
background-image: url('../images/oi4.webp');
}
/* --- Card Typography Content --- */
.fcard-content {
position: relative;
z-index: 2;
transition: transform 0.4s ease;
}
.fcard-title {
font-size: 35px;
font-weight: 800;
color: #09090b;
line-height: 110%;
margin-bottom: 12px;
transition: color 0.3s ease;
}
.fcard-desc {
font-size: 16px;
color: #000;
line-height: 1.6;
font-weight: 300;
margin-bottom: 0;
}
.sp-feature-card:hover {
transform: translateY(-10px);
border-color: rgba(9, 9, 11, 0.15);
box-shadow:
0 20px 40px -15px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(9, 9, 11, 0.05);
cursor: auto;
}
.sp-feature-card:hover .card-watermark {
opacity: 0.35;
filter: invert(1);
transform: scale(1.15) rotate(-4deg) translate(-5px, 5px); /* Zoom + tilt effect */
}
.sp-feature-card:hover .fcard-content {
transform: translateY(-2px);
}
@media (max-width: 992px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.features-grid {
grid-template-columns: 1fr;
}
.features-header .main-title {
font-size: 28px;
}
}
/*next section*/
.section-partner{
float: left;
width: 100%;
background-image: url("../images/cta-bg.webp");
background-repeat: no-repeat;
background-size: cover;
padding: 150px 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.section-partner h2{
float: left;
width: 100%;
font-size: 60px;
font-weight: 800;
color: #fff;
line-height: 110%;
letter-spacing: -1px;
margin-bottom: 25px;
}
.section-partner p{
float: left;
width: 100%;
max-width: 346px;
color: #fff;
font-weight: 300;
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
}
.section-partner a{
float: none;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #FFCB05;
border-radius: 40px;
border: 2px solid #000;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
line-height: 100%;
color: #000;
width: 222px;
height: 60px;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
}
.section-partner a:hover {
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
background-color: #fff;
box-shadow: 0 6px 0 #000000;
}
.section-partner a:active {
box-shadow: 0 2px 0 #000000;
}
/* --- Owl Carousel Item Overrides --- */
.testimonial-carousel .owl-stage-outer {
padding-top: 30px;
padding-bottom: 20px;
}
/* --- Testimonial Card Styling --- */
.testimonial-card {
position: relative;
background-color: #f7f7f8; /* Soft light gray card background */
border-radius: 40px;
padding: 50px 36px 48px 71px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #e0e0e0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}
/* --- Floating Yellow Quote Icon --- */
.quote-icon {
position: absolute;
top: -28px;
left: 67px;
width: 60px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
}
.quote-icon img {
width: 100%;
height: 100%;
}
/* --- Content Typography --- */
.testimonial-carousel{
float: left;
width: 100%;
padding-left: 120px;
}
.testimonial-carousel .owl-nav{
display: none !important;
}
.testimonial-text {
font-size: 16px;
line-height: 1.8;
color: #000;
font-weight: 400;
margin-bottom: 21px;
display: -webkit-box;
overflow: hidden;
}
/* --- Author Details Layout --- */
.author-info {
display: flex;
align-items: center;
gap: 10px;
}
.author-name {
font-size: 24px;
line-height: 32px;
font-weight: 700;
color: #000;
}
.author-location {
font-size: 16px;
font-weight: 400;
color: #000;
line-height: 1.6;
}
/* --- Section Container --- */
.global-reach-section {
width: 100%;
background-color: #000000;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 80px 0 88px 0;
float: left;
border-bottom: 1px solid #383838;
}
.global-container {
position: relative;
width: 100%;
margin: 0 auto;
display: block;
}
/* --- Left Content Column --- */
.content-col {
position: relative;
z-index: 5; /* Keeps text above the background map */
max-width: 520px;
}
.global-sub-heading {
font-size: 16px;
font-weight: 400;
letter-spacing: 2px;
color: #fff;
text-transform: uppercase;
display: block;
margin-bottom: 16px;
}
.global-main-heading {
font-size: 60px;
font-weight: 800;
line-height: 90%;
color: #ffffff;
margin-bottom: 19px;
letter-spacing: -1px;
}
.global-description {
font-size: 16px;
line-height: 1.6;
color: #fff;
font-weight: 300;
margin-bottom: 40px;
max-width: 393px;
}
/* --- Region Pills Structured Grid (2 -> 3 -> 1) --- */
.tags-container {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.tag-row {
display: flex;
flex-wrap: nowrap;
gap: 14px;
align-items: center;
}
/* --- Interactive WOW Hover Pills --- */
.region-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 46px;
border-radius: 50px;
background: rgba(20, 20, 22, 0.6);
border: 1px solid rgba(255, 255, 255, 0.12);
text-decoration: none;
overflow: hidden;
cursor: pointer;
white-space: nowrap;
/* Smooth Motion Transition */
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pill-text {
font-size: 16px;
font-weight: 400;
color: #d4d4d8;
z-index: 2;
transition: color 0.3s ease, transform 0.3s ease;
line-height: 1.4;
}
/* Glass Shimmer Sweep Effect */
.region-pill::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
transition: left 0.6s ease;
z-index: 1;
}
/* Outer Dynamic Glow Effect */
.region-pill::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 50px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent, rgba(255,255,255,0.2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}
/* --- Pill Hover States --- */
.region-pill:hover {
transform: translateY(-4px) scale(1.03);
background: rgba(40, 40, 45, 0.9);
border-color: rgba(255, 255, 255, 0.4);
box-shadow:
0 10px 25px -5px rgba(255, 255, 255, 0.08),
0 0 15px rgba(255, 255, 255, 0.1);
}
.region-pill:hover .pill-text {
color: #ffffff;
}
.region-pill:hover::before {
left: 100%;
}
.region-pill:hover::after {
opacity: 1;
}
/* --- Background Map Layout --- */
.map-col {
position: absolute;
top: -90px;
right: -124px;
/* transform: translateY(-50%); */
width: 90%;
/* max-width: 900px; */
z-index: 1; /* Sits behind text content */
pointer-events: none;
}
.map-wrapper {
width: 100%;
}
/* Convert white map background to transparent dark line art */
.animated-map {
width: 100%;
height: auto;
display: block;
object-fit: contain;
/* Inverts white image background to blend seamlessly into dark mode */
filter: invert(1) brightness(0.85) contrast(1.2);
mix-blend-mode: screen;
opacity: 0.55;
/* Keyframe floating animation trigger */
animation: mapPulseFloat 10s ease-in-out infinite alternate;
}
/* --- Keyframe Animations --- */
@keyframes mapPulseFloat {
0% {
transform: translateY(0px) scale(1);
opacity: 0.5;
filter: invert(1) brightness(0.8) contrast(1.2);
}
50% {
transform: translateY(-12px) scale(1.02);
opacity: 0.75;
filter: invert(1) brightness(1.1) contrast(1.3);
}
100% {
transform: translateY(6px) scale(1.005);
opacity: 0.55;
filter: invert(1) brightness(0.9) contrast(1.2);
}
}
/* --- Main Footer Container --- */
.site-footer {
width: 100%;
background-color: #000000;
color: #ffffff;
float: left;
padding-top: 53px;
}
.footer-logo {
max-width: 383px;
height: auto;
display: block;
}
/* Links Grid */
.footer-nav-grid {
/* display: flex; */
/* justify-content: space-between; */
padding-bottom: 30px;
padding-left: 38px;
padding-top: 9px;
}
.footer-col1{
float: left;
width: 36%;
}
.footer-col2{
float: left;
width: 34%;
}
.footer-col3{
float: left;
width: 30%;
}
.footer-heading {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin-bottom: 31px;
}
.footer-links {
list-style: none;
padding-left: 0;
}
.footer-links li {
margin-bottom: 0px;
}
.footer-links a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
font-weight: 400;
transition: opacity 0.2s ease, color 0.2s ease;
line-height: 200%;
}
.footer-links a:hover {
color: #FFCB05;
}
/* --- Middle Copyright & Social Bar --- */
.footer-middle {
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding: 24px 0;
display: flex;
align-items: center;
justify-content: center;
}
.middle-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright-text {
font-size: 16px;
color: #ffffff;
font-weight: 400;
margin: 0;
}
.social-links {
display: flex;
align-items: center;
gap: 20px;
}
.social-links a img{
color: #ffffff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 22px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-links a:hover {
opacity: 0.7;
transform: translateY(-2px);
}
/* --- Bottom Designer Credit Bar --- */
.footer-bottom {
background-color: #ffffff;
color: #000000;
text-align: center;
padding: 26px 0px;
}
.designer-text {
font-size: 16px;
font-weight: 400;
color: #000;
margin: 0;
}
/* --- Responsive Layout --- */
@media (max-width: 992px) {
.footer-top .footer-container {
flex-direction: column;
gap: 40px;
}
.footer-nav-grid {
/* width: 100%; */
/* flex-wrap: wrap; */
/* gap: 30px; */
}
.middle-flex {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
@media (max-width: 576px) {
.footer-nav-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}
}
/*next section*/
.chips-fly-section {
position: relative;
width: 100%;
min-height: 68vh;
background: url('../images/chips-bg.webp') no-repeat center bottom / cover;
display: flex;
align-items: center;
justify-content: space-between;
/*overflow: hidden;*/
/* padding: 111px 0px; */
float: left;
}
/* 1. LEFT CONTAINER: Positioned over the pile in background */
.chips-burst-wrapper {
position: absolute;
left: 6%;
bottom: 8%;
width: 335px;
height: auto;
pointer-events: none;
z-index: 2;
}
.chips-floating-img {
width: 100%;
height: auto;
display: block;
opacity: 0; /* Hidden initially */
transform-origin: center bottom;
}
/* 2. RIGHT CONTAINER: Packets Image */
.chips-packets-wrapper {
position: absolute;
right: 0;
bottom: 0;
/*transform: translateY(-50%);*/
width: 42%;
max-width: 543px;
z-index: 2;
pointer-events: none;
animation: tiltLoop 4s ease-in-out infinite alternate;
transform-origin: center center;
}
.chips-packets-wrapper img {
width: 100%;
height: auto;
display: block;
}
/* 3. CENTER CONTENT */
.chips-fly {
position: relative;
z-index: 3;
/* max-width: 480px; */
/* margin-left: 32%; */
float: left;
width: 100%;
text-align: center;
padding: 50px 0;
}
.chips-fly h2 {
width: 100%;
font-size: 50px;
font-weight: 800;
color: #fff;
line-height: 100%;
letter-spacing: -1px;
margin-bottom: 19px;
margin-top: 101px;
}
.chips-fly p {
width: 100%;
color: #fff;
font-weight: 300;
font-size: 16px;
line-height: 1.6;
margin-bottom: 24px;
}
.chips-fly a {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #FFCB05;
border-radius: 40px;
border: 2px solid #000;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
color: #000;
width: 171px;
height: 60px;
text-decoration: none;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
}
.chips-fly a:hover {
background-color: #fff;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
box-shadow: 0 6px 0 #000000;
}
.chips-fly a:active {
box-shadow: 0 2px 0 #000000;
}
/* ===================================================
SINGLE-SEQUENCE ANIMATION (PREVENTS DISAPPEARING)
=================================================== */
.chips-fly-section.in-view .chips-floating-img {
animation:
burstUp 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
upDownLoop 2.5s ease-in-out 1.2s infinite alternate; }
/* Step 1: Rapid burst up out of the pile */
@keyframes burstUp {
0% {
opacity: 0;
transform: translateY(120px) scale(0.2);
}
100% {
opacity: 1;
transform: translateY(-110px) scale(1);
}
}
.event-carousel .item img{
height: 59px;
object-fit: contain;
width: 108px! IMPORTANT;
}
.event-carousel .item{
margin:auto;
display: flex;
align-items: center;
justify-content: center;
background-color: #f7f7f7;
padding: 20px;
border-radius: 20px;
}
/* --- Full Screen Black Preloader --- */
/* Update #page-loader to handle hardware-accelerated transforms */
#page-loader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 999999;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
will-change: transform;
}
/* Ensure path fill renders smoothly */
.wave-path {
fill: #ffffff;
}
/* Background element behind content */
#page-loader::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1;
}
.loader-content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* --- Yellow Brand Box --- */
.loader-card {
width: 59px;
height: 68px;
background: #ffcb05;
border: 4px solid #a6ce39;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6),
0 0 25px rgba(255, 203, 5, 0.15); */
animation: cardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.logo-wrapper {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.banana-logo {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
animation:
logoPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
logoFloatInside 2.2s ease-in-out infinite 0.8s;
}
.loader-text {
margin-top: 11px;
letter-spacing: 8px;
color: #000;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
opacity: 0;
animation: textFadeIn 0.8s ease forwards 0.4s;
}
/* --- SVG Wave Element --- */
.loader-wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 180px;
z-index: 2;
pointer-events: none;
}
.wave-path {
fill: #fff;
transition: d 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
#page-loader.start-wave .loader-content {
opacity: 1;
transform: translateY(-40px);
}
#page-loader.start-wave .wave-path {
d: path("M0,0 L1440,0 L1440,120 Q720,320 0,120 Z");
}
/* Keyframes */
@keyframes cardEntrance {
0% { opacity: 0; transform: scale(0.7) translateY(20px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes logoPopIn {
0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes logoFloatInside {
0%, 100% {
transform: rotate(-8deg) scale(0.98);
transform-origin: bottom center;
}
50% {
transform: rotate(8deg) scale(1.02);
transform-origin: bottom center;
}
}
@keyframes textFadeIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Hero Section */
/*==========================
INNER BANNER
==========================*/
.inner-banner {
position: relative;
padding: 202px 0 86px;
overflow: hidden;
background: linear-gradient(116deg,rgba(255, 255, 255, 1) 0%, rgba(245, 234, 223, 1) 65%);
float: left;
width: 100%;
}
.banner-content{
position:relative;
z-index:5;
max-width:620px;
}
.banner-content h1{font-size: 60px;font-weight: 800;line-height:1;letter-spacing: -0.7px;margin-bottom:25px;}
.breadcrumb-custom{
padding:0;
margin:0;
list-style:none;
display:flex;
align-items:center;
gap:20px;
}
.breadcrumb-custom li{font-weight: 500;position:relative;}
.breadcrumb-custom li:not(:last-child)::after{content:"";position:absolute;right: -13px;top: 11px;width:5px;height:5px;background: #a6ce39;border-radius:50%;}
.breadcrumb-custom a{
color:#000;
text-decoration:none;
}
.brand-strip{
float: left;
width:100%;
background:#FDBD11;
overflow:hidden;
position:relative;
padding: 12px 0;
border-top:1px solid rgba(0,0,0,.08);
border-bottom:1px solid rgba(0,0,0,.08);
}
.brand-strip-track{
display:flex;
width:max-content;
animation:brandMarquee 28s linear infinite;
}
.brand-strip:hover .brand-strip-track{
animation-play-state:paused;
}
.brand-item{
display:flex;
align-items:center;
margin-right:70px;
white-space:nowrap;
font-size: 14px;
font-weight: 600;
color: #000;
letter-spacing: 1px;
}
.divider-icon{
width: 12px;
height:auto;
margin-right:16px;
flex-shrink:0;
animation:iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-3px);
}
}
@keyframes brandMarquee{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
.brand-strip::before,
.brand-strip::after{
content:"";
position:absolute;
top:0;
width:120px;
height:100%;
z-index:5;
pointer-events:none;
}
.brand-strip::before{
left:0;
background:linear-gradient(to right,#FDBD11,transparent);
}
.brand-strip::after{
right:0;
background:linear-gradient(to left,#FDBD11,transparent);
}
.brand-story{float:left;width:100%;padding: 90px 0;background: #f6f6f6;position:relative;overflow:hidden;}
/* RIGHT */
.story-image-side{
position:relative;
width:100%;
height:760px;
}
.text-curtain strong{
font-weight: 600 !important;
}
.portrait-card{float: left;/* position:absolute; */top:0;right:60px;width: 92%;height: auto;background:#fff;/* padding:12px; */border-radius: 0 40px;background-color: transparent;}
.portrait-card img{width:100%;border-radius: 0 40px;display:block;height: 100%;object-fit: cover;padding: 3px;}
.main-photo{height: auto;margin-top: -10%;float: right;width: 80%;border-radius: 40px 0px;overflow:hidden;background-color: transparent;margin-bottom: 28px;}
.main-photo img{height: 100%;width: 100%;float: right;display:block;object-fit: cover;border-radius: 40px 0px;padding: 4px;}
.heritage-card{/* position:absolute; */float: left;left: 0;width: 100%;padding: 40px 35px;margin-top: 38px;background:#FDBD11;border-radius:30px;color:#111;/* box-shadow:0 25px 60px rgba(253,189,17,.35); */}
.heritage-card span{font-size: 16px;letter-spacing:2px;text-transform:uppercase;/* opacity:.8; */}
.heritage-card h3{font-size: 60px;margin:8px 0;font-weight:800;line-height:1;}
.heritage-card p{
font-size:16px;
line-height:28px;
margin:0;
}
/* Base styles to prevent Flash of Unstyled Content (FOUC) */
[data-anim="text"],
.anim-split-text,
.anim-fade-up {
visibility: hidden;
will-change: transform, opacity;
}
/* Container mask for character slide-up animations */
.anim-split-text {
overflow: hidden;
}
/* Individual character styles generated by SplitType */
.anim-split-text .char {
display: inline-block;
transform: translateY(100%);
opacity: 0;
will-change: transform, opacity;
}
/* General fade & slide up utility class */
.anim-fade-up {
transform: translateY(20px);
opacity: 0;
}
.brand-story p{
line-height: 201% !important;
margin-bottom: 0px;
}
.founder-quote-card{
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
float:left;
width:100%;
background:#fff;
padding: 17px 30px;
border-radius:30px;
margin-top: 6px;
border:1px solid #f1f1f1;
/* box-shadow:0 20px 55px rgba(0,0,0,.06); */
position:relative;
overflow:hidden;
transition:.4s;
}
.founder-quote-card:hover{
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
box-shadow:0 35px 70px rgba(0,0,0,.12);
}
.quote-icon-ab{margin-bottom: 15px;}
.quote-text{font-size: 16px;line-height:1.8;color: #000;font-weight: 500;font-style:italic;margin-bottom: 26px;}
.quote-divider{
width:90px;
height:3px;
background:#FDBD11;
border-radius:10px;
margin-bottom:25px;
}
.founder-quote-card h5{font-size:24px;font-weight: 800;margin-bottom:6px;color:#111;}
.founder-quote-card span{font-size: 14px;letter-spacing: 2px;text-transform:uppercase;color: #000;font-weight: 400;}
.about-story-section {
width: 100%;
position: relative;
float: left;
background: #fff;
padding: 90px 0 70px 0;
overflow: hidden;
}
.story-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Sub-header & Header */
.story-header {
text-align: center;
margin-bottom: 35px;
}
.story-subtitle {
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 3px;
color: #d97706;
font-weight: 600;
margin-bottom: 12px;
display: block;
}
.story-title {
font-size: 2.75rem;
color: #ffffff;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.5px;
}
.story-title span {
color: #f59e0b;
}
/* Story Narrative Content */
.story-paragraph {
font-size: 16px;
color: #000;
margin-bottom: 32px;
line-height: 200%;
font-weight: 300;
text-align: center;
}
.story-paragraph strong {
/* color: #ffffff; */
font-weight: 600;
}
/* Highlight Lead Paragraph */
.story-lead {
font-size: 20px;
line-height: 1.5;
color: #000;
border-left: 3px solid #ffcb05;
padding-left: 24px;
margin-bottom: 35px;
font-weight: 300;
}
.leadership-section {
padding: 100px 0px;
background: #fff;
position: relative;
float: left;
width: 100%;
}
.leadership-header {
margin-bottom: 56px;
}
.leadership-subtitle {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 3px;
color: #000;
font-weight: 400;
margin-bottom: 12px;
display: block;
text-align: center;
}
.leadership-title {
font-size: 60px;
color: #000;
font-weight: 800;
line-height: 1.1;
text-align: center;
}
/* Main Split Grid */
.editorial-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 20px;
align-items: start;
padding-top: 40px;
justify-content: center;
align-items: center;
}
/* Left Narrative Flow */
.narrative-list {
display: flex;
flex-direction: column;
gap: 40px;
}
.narrative-card {
margin-bottom: 20px;
position: relative;
padding: 40px 30px;
border: 1px solid #d4cece;
transition: all 0.4s ease;
cursor: pointer;
border-radius: 40px;
}
.narrative-card:hover,
.narrative-card.active {
border-left-color: #fdbd11;
}
.leader-num {
font-size: 0.8125rem;
font-weight: 700;
color: #f59e0b;
letter-spacing: 2px;
margin-bottom: 6px;
display: block;
}
.leader-role {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
color: #000;
font-weight: 400;
}
.leader-name {
font-size: 30px;
color: #000;
font-weight: 800;
margin: 4px 0 16px 0;
transition: color 0.3s ease;
}
.narrative-card:hover .leader-name {
color: #fdbd11;
}
.leader-text {
font-size: 16px;
line-height: 1.8;
margin-bottom: 12px;
transition: color 0.3s ease;
font-weight: 300;
}
.leader-text:last-child {
margin-bottom: 0;
}
/* Right Sticky Photo Frame */
.sticky-frame {
position: sticky;
top: 60px;
border-radius: 40px;
overflow: hidden;
background-color: #121620;
margin-bottom: 20px;
}
.image-viewport {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.image-viewport img {
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
display: block;
}
/* Framing Overlay Badge */
.frame-badge {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px;
background: linear-gradient(0deg, #0a0b0d 0%, rgba(10, 11, 13, 0) 100%);
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.badge-label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fdbd11;
font-weight: 400;
}
.badge-title {
font-size: 23px;
color: #ffffff;
margin-top: 2px;
font-weight: 800;
}
/* Page Toggling */
.page {
float: left;
display: block;
float: left;
width: 100%;
padding: 100px 0px;
}
.page-title {
font-size: 2rem;
margin-bottom: 24px;
}
/* 4-Column Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 992px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.product-grid {
grid-template-columns: 1fr;
}
}
/* Product Card */
.product-card {
/* background: #ffcb05; */
border-radius: 12px;
border: 1px solid #e5e7eb;
/* padding: 16px; */
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-img-wrapper {
width: 100%;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 13px;
overflow: hidden;
/* margin-bottom: 16px; */
}
.product-img-wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product-info {
display: flex;
flex-direction: column;
gap: 14px;
text-align: center;
background-color: #f6f6f6;
padding: 20px;
border-radius: 12px;
}
.product-name {
font-size: 20px;
font-weight: 800;
margin: 0;
}
.product-sku {
font-size: 16px;
color: #000;
font-weight: 400;
}
.btn-product {
float: none;
margin: auto;
display: table;
text-align: center;
background-color: #ffffff;
border-radius: 40px;
border: 2px solid #000;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
line-height: 100%;
width: 150px;
padding: 11px 27px;
color: #000;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.btn-product:hover {
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
box-shadow: 0 6px 0 #000000;
}
.btn-product:active {
box-shadow: 0 2px 0 #000000;
}
.product-detail-wrapper {
/* background: #ffcb05; */
border-radius: 12px;
border: 1px solid #e5e7eb;
/* padding: 40px; */
display: grid;
grid-template-columns: 1fr 1fr;
/* gap: 40px; */
}
.detail-image-container {
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 12px 0 0 12px;
padding: 20px;
}
.detail-image-container img {
max-width: 100%;
max-height: 350px;
object-fit: contain;
}
.detail-title {
font-size: 40px;
margin-bottom: 8px;
font-weight: 800;
}
.detail-sku {
color: #000;
font-weight: 500;
margin-bottom: 20px;
font-size: 24px;
}
.detail-description {
font-size: 16px;
color: #000;
margin-bottom: 30px;
font-weight: 300;
}
/* Modal Styling */
/* =========================================================
GLASSMORPHISM MODAL STYLES
========================================================= */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
visibility: hidden;
opacity: 0;
pointer-events: none; /* Prevents blocking clicks when hidden */
transition: opacity 0.3s ease, visibility 0.3s ease;
padding: 20px;
box-sizing: border-box;
}
.modal-overlay.is-visible {
visibility: visible;
opacity: 1;
pointer-events: auto; /* Restores clicks when visible */
}
.modal-content {
background: #;
padding: 40px;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
width: 95%;
max-width: 800px;
position: relative;
overflow: hidden;
background-color: #fff;
}
.close-button {
position: absolute;
top: -5px;
right: 20px;
font-size: 2.5rem;
color: #000;
cursor: pointer;
transition: color 0.2s;
}
.close-button:hover {
color: #333;
}
.modal-header-form {
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #FFCB05;
}
.modal-header-form h2 {
font-size: 40px;
font-weight: 800;
line-height: 125%;
margin-bottom: 16px;
color: #00;
letter-spacing: -0.5px;
}
.modal-header-form p {
color: #000;
font-size: 16px;
font-weight: 300;
}
.join-form {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.join-form .form-group {
flex: 1 1 calc(50% - 10px);
margin-bottom: 0;
}
.join-form label {
display: block;
font-weight: 500;
margin-bottom: 8px;
font-size: 16px;
}
.join-form label i {
margin-right: 8px;
color: #FFCB05;
}
.join-form input[type="text"],
.join-form input[type="email"],
.join-form input[type="password"],
.join-form input[type="tel"] {
width: 100%;
padding: 14px 15px;
border: none;
border-radius: 11px;
font-size: 15px;
background-color: rgb(241 241 241);
transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
box-sizing: border-box;
font-weight: 400;
}
.iti { width: 100%; }
.iti__country-list { z-index: 2001; }
.join-form input:focus {
box-shadow: 0 0 8px rgba(0, 128, 0, 0.1);
background-color: #fff;
}
/* Submit Button Style */
.join-form button {
text-align: center;
float: left;
margin:auto;
display: block;
background-color: #ffcb05;
border-radius: 40px;
border: 2px solid #000 !important;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
line-height: 100%;
width: 203px;
padding: 20px 34px;
color: #000;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.join-form button:hover {
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
box-shadow: 0 6px 0 #000;
}
.join-form button:active {
box-shadow: 0 2px 0 #000;
}
/* Mobile Responsiveness */
@media (max-width: 600px) {
.join-form .form-group {
flex: 1 1 100%;
}
.modal-content {
padding: 25px 15px;
width: 100%;
max-width: 100%;
}
.modal-header-form h2 {
font-size: 26px;
}
}
.detail-content {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.enquire-btn {
text-align: center;
float: left;
display: block;
background-color: #ffcb05;
border-radius: 40px;
border: 2px solid #000;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
line-height: 100%;
width: 203px;
padding: 20px 34px;
color: #000;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.enquire-btn:hover {
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
background-color: #fff;
box-shadow: 0 6px 0 #000000;
}
.enquire-btn:active {
box-shadow: 0 2px 0 #000000;
}
/* Ensure wrapper clips overflow properly */
.photo-container {
overflow: hidden;
width: 100%;
height: 100%;
}
/* Base image must fill the frame fully */
#groupPhoto {
width: 100%;
height: 100%;
object-fit: cover; /* Essential: fills container without distortion */
transition: transform 0.4s ease-in-out, transform-origin 0.4s ease-in-out;
}
/*blog*/
.blog-grid {
width: 100%;
float: left;
padding: 100px 0px;
}
.card-frame {
float: left;
width: 100%;
background-color: #ffffff;
padding: 16px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.blog-card {
border-radius: 15px;
background-color: #f6f6f6;
display: flex;
padding: 20px;
height: 380px;
position: relative;
gap: 20px;
/* Smooth transition for margin expansion */
transition: transform 0.35s ease, background-color 0.35s ease;
}
.card-image-wrapper {
width: 48%;
height: 100%;
flex-shrink: 0;
overflow: hidden;
border-radius: 15px;
}
.card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
/* --- HOVER STATES --- */
/* Inner card expands onto outer frame */
.card-frame:hover .blog-card {
background-color: #ffcb0529; /* Deepens the cream background */
}
.card-frame:hover .card-image-wrapper img {
transform: scale(1.05);
overflow: hidden;
}
.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-date {
align-self: flex-end;
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #000;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
position: relative;
}
.card-date::after {
content: '';
position: absolute;
bottom: -4px;
right: 0;
width: 0%;
height: 2px;
background-color: #1a232e;
transition: width 0.3s ease;
}
.card-frame:hover .card-date::after {
width: 100%;
}
.card-date i {
font-size: 12px;
}
.card-title-blog {
font-size: 20px;
font-weight: 600;
color: #000;
line-height: 1.2;
margin-bottom: 8px;
}
/* Responsive adjustment for small screens */
@media (max-width: 768px) {
.blog-grid {
flex-direction: column;
}
}
.blog-detail{
float: left;
width: 100%;
padding: 100px 0px;
}
/* Outer Layout Container */
.blog-section {
float: left;
margin: 0 auto;
width: 100%;
display: flex;
gap: 32px;
}
/* LEFT MAIN FEATURED POST */
.featured-article-column {
flex: 2.5;
display: flex;
flex-direction: column;
}
.featured-media-box {
width: 100%;
aspect-ratio: 4 / 3; /* Matches thumbnail ratio */
border-radius: 29px;
overflow: hidden;
margin-bottom: 24px;
}
.featured-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.featured-meta-info {
display: flex;
gap: 12px;
font-size: 16px;
font-weight: 300;
letter-spacing: 2px;
color: #000;
margin-bottom: 16px;
}
.featured-category-tag {
color: #000;
text-transform: uppercase;
}
.featured-publish-date {
color: #000;
text-transform: uppercase;
font-weight: 500;
}
.featured-title-head {
font-size: 45px;
font-weight: 800;
line-height: 110%;
margin-bottom: 24px;
}
.featured-title-italic {
/* font-style: italic; */
/* color: #c09653; */
/* font-weight: 600; */
}
.featured-excerpt-text {
color: #000;
font-size: 16px;
line-height: 1.6;
font-weight: 300;
}
/* RIGHT SIDEBAR WIDGET (UNIFIED WIDGET CLASSES) */
.sidebar-widget-container {
flex: 1;
/* background-color: #2b2d31; */
padding: 28px 24px;
border-radius: 12px;
height: fit-content;
float: left;
width: 100%;
border: 1px solid #dad0d0;
}
.widget-main-heading {
font-size: 24px;
font-weight: 800;
color: #000;
padding-bottom: 16px;
border-bottom: 1px solid #dad0d0;
margin-bottom: 20px;
}
.widget-posts-list {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Shared item container for all widget posts */
.widget-item-box {
display: flex;
gap: 14px;
align-items: center;
}
/* Shared thumbnail container - locked to 4/3 ratio */
.widget-thumb-wrapper {
width: 90px;
aspect-ratio: 4 / 3; /* Matches main image aspect ratio */
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}
.widget-img-element {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.widget-details-area {
display: flex;
flex-direction: column;
gap: 4px;
}
.widget-title-text {
font-size: 16px;
font-weight: 500;
line-height: 1.6;
color: #000;
text-transform: capitalize;
text-decoration: none;
}
.widget-date-badge {
font-size: 11px;
color: #000000;
font-weight: 300;
text-decoration: none;
}
/* RESPONSIVE DESIGN FOR MOBILE & TABLETS */
@media (max-width: 900px) {
.blog-section-container {
flex-direction: column;
}
.featured-media-box {
aspect-ratio: 4 / 3;
}
.widget-thumb-wrapper {
width: 80px;
aspect-ratio: 4 / 3; /* Retains exact aspect ratio on mobile */
}
}
.global-presence{
float: left;
width: 100%;
padding: 90px 0px;
}
.global-presence h2{
float: left;
width: 100%;
text-align: center;
font-weight: 800;
font-size: 60px;
line-height: 90%;
padding-bottom: 50px;
}
.country-box {
width: 100%;
height: 120px;
margin-bottom: 20px;
display: flex;
align-items: stretch;
border: 1px solid #cac6c6;
overflow: hidden;
box-sizing: border-box;
}
/* FLAG */
.country-box img {
width: 49%;
height: 100%;
display: block;
flex-shrink: 0;
object-fit: cover;
object-position: center;
}
/* COUNTRY NAME */
.country-box h4 {
width: 51%;
height: 100%;
margin: 0;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 600;
font-size: 16px;
line-height: 1.3;
text-transform: uppercase;
box-sizing: border-box;
}
/*==================================================
PROCESS SECTION
==================================================*/
.process-section{
float:left;
width:100%;
padding-top:100px ;
background:#fff;
float: left;
}
.process-heading{
/* max-width:850px; */
margin:0 auto 90px;
text-align:center;
}
.process-heading .sub-title-pro{
display:inline-block;
font-size:16px;
font-weight:400;
letter-spacing:3px;
color:#000;
text-transform:uppercase;
margin-bottom:15px;
}
.process-heading h2{
font-size:60px;
line-height: 100%;
font-weight:800;
margin-bottom:25px;
color:#000;
}
.process-heading p{
font-size:16px;
line-height:1.6;
color:#000;
width: 80%;
margin:auto;
font-weight: 300;
}
/*==================================================
PROCESS ROW
==================================================*/
.process-row{
float:left;
width:100%;
display:flex;
align-items:center;
gap:70px;
margin-bottom:90px;
}
.process-row.reverse{
flex-direction:row-reverse;
}
.process-image{
width:58%;
}
.process-image img{
width:100%;
display:block;
border-radius:18px;
}
.process-content{
width:42%;
}
.process-no{
display:block;
font-size:80px;
font-weight:800;
color: #ffcb05;
line-height:1;
margin-bottom:18px;
}
.process-content h3{
font-size:42px;
line-height: 1.1;
color:#000;
margin-bottom:20px;
font-weight:800;
}
.process-content p{
font-size:16px;
line-height: 1.6;
color:#111;
font-weight: 300;
}
/*==================================================
IMAGE HOVER
==================================================*/
.process-image{
border-radius:18px;
}
.process-image img{
transition:.45s;
}
.process-image:hover img{
transform:scale(1.04);
}
/* ===== BASE ===== */
/*====================================*/
.contact-section{float:left;width:100%;/* padding:100px 0; */background:#fff;}
.contact-heading{
max-width:760px;
margin:auto;
text-align:center;
margin-bottom:70px;
}
.contact-heading .sub-title{
display:inline-block;
font-size:16px;
font-weight:400;
letter-spacing:3px;
color:#000;
text-transform:uppercase;
margin-bottom:15px;
}
.contact-heading h2{
font-size:60px;
line-height: 100%;
font-weight:800;
margin-bottom:25px;
color:#000;
}
.contact-heading p{
font-size:16px;
line-height:1.6;
color:#000;
width: 91%;
margin:auto;
font-weight: 300;
}
/*====================================*/
.contact-wrapper{float:left;width:100%;display:grid;grid-template-columns:360px 1fr;column-gap:70px;align-items: center;height: 100%;}
/*====================================*/
.contact-left{/* border-right:1px solid #ececec; */padding-right:60px;background-color: #f5f5f5;padding: 51px 30px;/* border-radius: 40px; */height: 100%;display: flex;flex-direction: column;justify-content: center;}
.contact-item{display:flex;align-items:flex-start;gap:20px;padding: 59px 0;border-bottom:1px solid #ececec;}
.contact-item:last-child{
border-bottom:none;
}
.icon-box{width: 54px;height: 54px;background: #ffcb05;border-radius:50%;display:flex;align-items:center;justify-content:center;color: #000;font-size: 18px;flex-shrink:0;}
.contact-text h4{font-size: 18px;text-transform: uppercase;margin-bottom:10px;color: #000;font-weight: 700;}
.contact-text p{font-size:16px;line-height: 1.8;color: #000;margin:0;font-weight: 300;}
/*====================================*/
/* =========================================
CONTACT FORM
========================================= */
.contact-right{
padding-left: 0;
position:relative;
padding-top: 150px;
padding-bottom: 150px;
}
/* =========================================
FORM HEADER
========================================= */
.form-top{
display:flex;
align-items:flex-start;
gap:22px;
padding-bottom:35px;
/* margin-bottom:15px; */
/* border-bottom:1px solid #dedede; */
}
.form-number{
font-size:13px;
font-weight:700;
color:#1a4b2b;
letter-spacing:2px;
padding-top:8px;
}
.form-label{
display:block;
font-size: 15px;
font-weight: 400;
letter-spacing:3px;
color: #000;
margin-bottom:7px;
}
.form-top h3{
margin:0;
/* font-family:"Cormorant Garamond",serif; */
font-size: 50px;
line-height:1.1;
font-weight: 800;
color: #000;
}
/* =========================================
FIELD
========================================= */
.contact-field{
position:relative;
width:100%;
min-height: 78px;
border-bottom:1px solid #d9d9d9;
transition:all .4s ease;
}
.contact-field input,
.contact-field textarea{width:100%;height:78px;border:none;outline:none;background:transparent;padding: 25px 45px 8px 0px;font-size: 16px;font-weight: 400;color:#111;border-radius:0;box-shadow:none;margin:0;}
.contact-field textarea{
height:125px;
padding-top:35px;
resize:none;
}
/* =========================================
NUMBER
========================================= */
.field-number{
position:absolute;
left:0;
top:30px;
font-size:11px;
font-weight:700;
color:#a1a1a1;
letter-spacing:1px;
transition:all .35s ease;
}
/* =========================================
LABEL
========================================= */
.contact-field label{position:absolute;left: 0;top:31px;font-size:16px;color: #646464;pointer-events:none;transition:all .35s ease;font-weight: 600;}
/* =========================================
FLOATING LABEL
========================================= */
.contact-field input:focus + label,
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:focus + label,
.contact-field textarea:not(:placeholder-shown) + label{top:10px;font-size:11px;font-weight: 400;letter-spacing:1.5px;color: #000000;}
.contact-field:focus-within{
border-bottom-color:#1a4b2b;
}
.contact-field:focus-within .field-number{
color:#e5b51b;
transform:translateX(3px);
}
.contact-field:after{
content:"";
position:absolute;
bottom:-1px;
left:0;
width:0;
height:2px;
background:#e5b51b;
transition:width .5s cubic-bezier(.77,0,.18,1);
}
.contact-field:focus-within:after{
width:100%;
}
/* =========================================
PHONE FIELD FLOATING LABEL FIX
========================================= */
/* 1. Ensure plugin wrapper spans full width */
.contact-field .iti {
width: 100%;
display: block;
}
/* 2. Position the Flag Icon at the left */
.contact-field .iti__selected-flag {
padding-left: 0 !important;
background: transparent !important;
top: 18px;
}
.contact-field input[type="tel"] {
}
/* 3. DEFAULT RESTING STATE: Label stays down next to flag */
.contact-field label[for="contact-phone"] {
top: 31px !important;
left: 49px !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #646464 !important;
transition: all .35s ease !important;
}
/* 4. ACTIVE STATE: Move label UP only on click/focus or when user types */
.contact-field:focus-within label[for="contact-phone"],
.contact-field:has(input[type="tel"]:not(:placeholder-shown)) label[for="contact-phone"] {
top: 10px !important;
left: 40px !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 1.5px !important;
color: #000000 !important;
}
.form-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding-top:35px;
}
.contact-btn{
width: 171px;
height: 60px;
border: 2px solid #000000;
border-radius: 50px;
color: #000000;
text-decoration: none;
font-size:16px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFCB05;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
}
.contact-btn:hover {
background-color: #fff;
-o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;
box-shadow: 0 6px 0 #000000;
}
.contact-btn:active {
box-shadow: 0 2px 0 #000000;
}
.contact-map{float:left;width:100%;/* margin-top:100px; */}
.contact-map iframe{
width:100%;
height:420px;
border:0;
display:block;
filter:grayscale(100%);
}
.subtitle-about {
/* padding-top: 24px; */
text-transform: uppercase;
color: #000;
font-weight: 400;
font-size: 16px;
letter-spacing: 2px;
display: block;
}
.main-title-about {
font-size: 60px;
font-weight: 800;
color: #000;
margin-top: 6px;
margin-bottom: 19px;
line-height: 100%;
}
.footer-bottom a:hover{
color: #FFCB05 !important;
}
.hidden-input-field {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
.submit-btn {
position: relative;
}
.submit-btn .form-loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.subcategory-filter {
max-width: 300px;
margin: 30px auto;
}
.subcategory-filter select {
width: 100%;
height: 45px;
padding: 0 15px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
font-size: 15px;
color: #333;
outline: none;
cursor: pointer;
}
.subcategory-filter select:focus {
border-color: #999;
}
/* Main dropdown */
.nav-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
padding: 0;
margin: 0;
list-style: none;
background: #fff;
z-index: 9999;
}
/* Dropdown items */
.nav-dropdown > li {
position: relative;
}
.nav-dropdown > li > a {
display: block;
padding: 12px 18px;
white-space: nowrap;
}
/* Third-level submenu */
.nav-dropdown .sub-category {
position: absolute;
top: 0;
left: 100%;
min-width: 220px;
margin: 0;
padding: 0;
list-style: none;
background: #fff;
visibility: hidden;
opacity: 0;
transform: translateX(10px);
transition: all 0.25s ease;
z-index: 10000;
}
/* Show third-level submenu on hover */
.nav-dropdown > li:hover > .sub-category {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
/* Third-level links */
.nav-dropdown .sub-category li a {
color: #333333 !important; /* Dark text for readability */
padding: 11px 16px !important;
/* border-radius: 13px !important; */
font-size: 16px !important;
font-weight: 400 !important;
display: block !important;
border: none !important;
background: transparent !important;
text-align: left !important;
transition: background 0.2s ease, color 0.2s ease !important;
}
.nav-dropdown .sub-category li a:hover {
background: #ffcb05 !important; /* Theme Green (from image) */
color: #000 !important; /* White text on green hover */
/* --- ADD SUBTLE LOGO YELLOW ACCENT (Matches kozhikoden's logo yellow) --- */
box-shadow: inset 3px 0 0 #a6ce39 !important; /* Subtle yellow bar on the far left of item */
}
/* Products dropdown */
.nav-menu > li {
position: relative;
}
.nav-menu > li > .nav-dropdown {
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: all 0.25s ease;
}
/* Show Products dropdown */
.nav-menu > li:hover > .nav-dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
@media(max-width:575px){
.cta-description{
padding:0 10px;
} .feature-main-title {
font-size: 35px !important;
}
}
.event-logos-grid1 {
width: 100%;
float: left;
}
.Connects-carousel .item {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.event-logo-item1 {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.event-logo-item1 img {
max-height: 68px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
transition: transform 0.3s ease;
}