/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Roboto:wght@300;400;700;900&display=swap');
/* Hero Section Base Styles - All prefixed with dw- to avoid conflicts */
.dw-hero-section {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
background-color: #f1f1f1;
/* Using brand color for background */
overflow: hidden;
perspective: 1000px;
}
/* Depth Gradient */
.dw-depth-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #f1f1f1 0%, #82b7dc 100%);
opacity: 0.5;
z-index: 0;
pointer-events: none;
}
/* Bubble Background */
.dw-bubble-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: 100px 100px;
opacity: 0.6;
}
/* Water Droplets Container */
.dw-water-droplets {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Bottom Wave - Enhanced with brand colors and raised for bottle interaction */
.dw-bottom-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 230px;
/* Increased height for higher waves that reach the bottle */
background: url('data:image/svg+xml;utf8,');
background-size: 200% 100%;
opacity: 0.85;
z-index: 1;
animation: waveAnimation 15s infinite linear;
}
/* Second wave with offset for more dynamic effect */
.dw-bottom-wave-2 {
height: 200px;
bottom: 0;
opacity: 0.7;
background-size: 150% 100%;
background: url('data:image/svg+xml;utf8,');
animation: waveAnimation2 12s infinite linear;
z-index: 0;
}
/* Third wave for more depth */
.dw-bottom-wave-3 {
height: 170px;
bottom: 0;
opacity: 0.5;
background-size: 180% 100%;
background: url('data:image/svg+xml;utf8,');
animation: waveAnimation3 18s infinite linear;
z-index: 0;
}
/* Wave Animations */
@keyframes waveAnimation {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 200%;
}
}
@keyframes waveAnimation2 {
0% {
background-position-x: 100%;
}
100% {
background-position-x: -100%;
}
}
@keyframes waveAnimation3 {
0% {
background-position-x: -50%;
}
100% {
background-position-x: 230%;
}
}
/* Container */
.dw-container {
position: relative;
width: 100%;
height: 100%;
max-width: 1920px;
margin: 0 auto;
}
/* WATER Text Background */
.dw-water-text {
position: absolute;
font-size: clamp(80px, 22vw, 300px);
font-weight: 900;
font-family: 'Playfair Display', serif;
color: #f1f1f1;
/* Light brand color */
white-space: nowrap;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skewX(-5deg);
z-index: 1;
letter-spacing: 0.01em;
user-select: none;
/* Blue border/outline */
-webkit-text-stroke: 2px rgba(17, 64, 132, 0.8);
/* Using darkest brand blue */
/* Enhanced blurry glow effect */
text-shadow:
0 0 10px rgba(52, 102, 170, 0.7),
0 0 20px rgba(52, 102, 170, 0.7),
0 0 40px rgba(52, 102, 170, 0.6),
0 0 60px rgba(52, 102, 170, 0.5),
0 0 80px rgba(52, 102, 170, 0.4);
/* Enhanced animation for the glow */
animation: waterTextGlow 4s infinite alternate ease-in-out;
}
/* Enhanced Glow animation keyframes */
@keyframes waterTextGlow {
0% {
text-shadow:
0 0 10px rgba(52, 102, 170, 0.7),
0 0 20px rgba(52, 102, 170, 0.7),
0 0 40px rgba(52, 102, 170, 0.6),
0 0 60px rgba(52, 102, 170, 0.5),
0 0 80px rgba(52, 102, 170, 0.4);
}
100% {
text-shadow:
0 0 15px rgba(52, 102, 170, 0.8),
0 0 30px rgba(52, 102, 170, 0.7),
0 0 50px rgba(52, 102, 170, 0.6),
0 0 80px rgba(52, 102, 170, 0.5),
0 0 100px rgba(52, 102, 170, 0.4);
}
}
/* For browsers that may not support -webkit-text-stroke well */
@supports not (-webkit-text-stroke: 2px rgba(52, 102, 170, 0.8)) {
.dw-water-text {
text-shadow:
-1px -1px 0 rgba(52, 102, 170, 0.8),
1px -1px 0 rgba(52, 102, 170, 0.8),
-1px 1px 0 rgba(52, 102, 170, 0.8),
1px 1px 0 rgba(52, 102, 170, 0.8),
0 0 10px rgba(52, 102, 170, 0.7),
0 0 20px rgba(52, 102, 170, 0.7),
0 0 40px rgba(52, 102, 170, 0.6),
0 0 60px rgba(52, 102, 170, 0.5),
0 0 80px rgba(52, 102, 170, 0.4);
}
}
/* CUSTOM Text */
.dw-custom-text {
position: absolute;
font-size: clamp(40px, 5vw, 80px);
font-weight: 900;
font-family: 'Roboto', sans-serif;
color: #1c1c1c;
/* Dark brand color */
white-space: nowrap;
text-align: center;
width: 100%;
top: clamp(20px, 5%, 50px);
left: 0;
z-index: 2;
opacity: 0;
transform: translateY(-30px);
animation: fadeSlideDown 0.8s forwards 0.2s;
}
/* Solution Text - Adjusted position to avoid overlap with waves */
.dw-solution-text {
position: absolute;
font-size: clamp(32px, 4vw, 64px);
font-weight: 300;
font-family: 'Roboto', sans-serif;
color: #1c1c1c;
/* Dark brand color */
bottom: clamp(220px, 28%, 260px);
/* Raised position further above the waves */
right: clamp(20px, 10%, 100px);
z-index: 3;
opacity: 0;
transform: translateX(30px);
animation: fadeSlideIn 0.8s forwards 0.8s;
}
/* Bottle Image Container - Adjusted to position over waves */
.dw-bottle-container {
position: absolute;
width: auto;
height: 75%;
/* Slightly reduced to ensure it's above the waves */
max-height: 750px;
top: 50%;
/* Moved up a bit */
left: 50%;
transform: translate(-50%, -500px) rotate(0deg);
z-index: 2;
will-change: transform;
transform-style: preserve-3d;
}
.dw-bottle-img {
height: 90%;
width: auto;
object-fit: contain;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
transform-origin: center bottom;
will-change: transform, filter;
}
/* Bottle shadow */
.dw-bottle-shadow {
position: absolute;
bottom: -15px;
left: 50%;
width: 30%;
height: 15px;
background: rgba(0, 0, 0, 0.15);
border-radius: 50%;
transform: translateX(-50%) scaleX(0);
opacity: 0;
filter: blur(5px);
transition: all 0.3s ease;
}
/* Eco Icons - Using brand colors */
.dw-eco-icons {
position: absolute;
display: flex;
flex-direction: column;
gap: 15px;
top: 30%;
right: clamp(15px, 3%, 30px);
z-index: 4;
opacity: 0;
transform: translateX(50px);
animation: fadeSlideIn 0.8s forwards 1.2s;
}
.dw-eco-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(241, 241, 241, 0.9);
/* Light brand color with transparency */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dw-eco-icon:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.dw-eco-img {
width: 70%;
height: 70%;
display: flex;
align-items: center;
justify-content: center;
color: #114084;
/* Dark blue brand color */
}
/* Custom icons using CSS */
.eco-leaf:after {
content: '♻️';
font-size: 24px;
}
.eco-tag:after {
content: '🏷️';
font-size: 24px;
}
.eco-shield:after {
content: '🛡️';
font-size: 24px;
}
.eco-award:after {
content: '🏆';
font-size: 24px;
}
/* Scroll Indicator - Adjusted to appear above waves */
.dw-scroll-indicator {
position: absolute;
bottom: 160px;
/* Positioned higher above the waves */
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
z-index: 5;
opacity: 4;
animation: fadeIn 0.8s forwards 2s;
/* background: white;
border-radius: 9%;
padding: 10px; */
}
.dw-scroll-text {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #1c1c1c;
/* margin-bottom: 10px; */
text-transform: uppercase;
letter-spacing: 2px;
color: white;
}
.dw-scroll-arrow {
width: 15px;
height: 15px;
border-right: 2px solid #f1f1f1;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
animation: scrollArrow 2s infinite;
}
@keyframes scrollArrow {
0% {
opacity: 0;
transform: rotate(45deg) translate(-5px, -5px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(5px, 5px);
}
}
/* Enhanced wave interaction with bottle */
.dw-splash-ripple {
position: absolute;
border-radius: 50%;
background: transparent;
border: 2px solid rgba(52, 102, 170, 0.8);
/* Brand blue */
transform: translate(-50%, -50%);
z-index: 4;
/* Increased to appear above the water but below the bottle */
}
.dw-splash-droplet {
position: absolute;
width: 5px;
height: 5px;
background: rgba(52, 102, 170, 0.8);
/* Brand blue */
border-radius: 50%;
z-index: 4;
/* Increased to appear above the water */
}
/* Create water splash interaction styles - Enhanced */
.dw-water-circle {
position: absolute;
border-radius: 50%;
background: rgba(52, 102, 170, 0.4);
/* Brand blue with transparency */
transform: translate(-50%, -50%);
z-index: 1;
/* Added movement effect */
animation: floatingCircle 8s infinite ease-in-out;
}
@keyframes floatingCircle {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -48%) scale(1.05);
}
}
/* Animations */
@keyframes fadeSlideDown {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeSlideIn {
0% {
opacity: 0;
transform: translateX(30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes bottleShake {
0%,
100% {
transform: rotate(0deg);
}
10% {
transform: rotate(-2deg);
}
20% {
transform: rotate(2deg);
}
30% {
transform: rotate(-1deg);
}
40% {
transform: rotate(1deg);
}
50% {
transform: rotate(-0.5deg);
}
60% {
transform: rotate(0.5deg);
}
70%,
100% {
transform: rotate(0deg);
}
}
@keyframes bottleFloat {
0% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-8px) rotate(-1deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
75% {
transform: translateY(8px) rotate(1deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
@keyframes bottleBounce {
0% {
transform: translateY(0) scaleY(1);
}
25% {
transform: translateY(10px) scaleY(0.95);
}
35% {
transform: translateY(-15px) scaleY(1.05);
}
45% {
transform: translateY(5px) scaleY(0.98);
}
55% {
transform: translateY(-3px) scaleY(1.02);
}
65% {
transform: translateY(2px) scaleY(0.99);
}
75% {
transform: translateY(-1px) scaleY(1.01);
}
100% {
transform: translateY(0) scaleY(1);
}
}
@keyframes dropletFall {
0% {
transform: translateY(0) rotate(45deg);
opacity: 0;
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.8;
}
100% {
transform: translateY(calc(100vh + 100px)) rotate(45deg);
opacity: 0;
}
}
@keyframes splashAnimation {
0% {
transform: scale(0) rotate(45deg);
opacity: 0.9;
}
70% {
opacity: 0.7;
}
100% {
transform: scale(5) rotate(var(--random-rotate));
opacity: 0;
}
}
@keyframes waterRipple {
0% {
transform: scale(0);
opacity: 0.8;
}
100% {
transform: scale(3);
opacity: 0;
}
}
@keyframes waterCirclePulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
}
}
/* Camera shake animation */
@keyframes cameraShake {
0% {
transform: translate(0, 0);
}
10% {
transform: translate(-15px, 5px);
}
20% {
transform: translate(15px, -5px);
}
30% {
transform: translate(-10px, 3px);
}
40% {
transform: translate(10px, -3px);
}
50% {
transform: translate(-5px, 2px);
}
60% {
transform: translate(5px, -2px);
}
70% {
transform: translate(-3px, 1px);
}
80% {
transform: translate(3px, -1px);
}
90% {
transform: translate(-1px, 0);
}
100% {
transform: translate(0, 0);
}
}
/* Responsive Adjustments */
@media (max-width: 1199.98px) {
.dw-bottle-container {
height: 65%;
}
.dw-eco-icon {
width: 50px;
height: 50px;
}
.dw-solution-text {
bottom: clamp(210px, 26%, 240px);
}
.dw-bottom-wave {
height: 210px;
}
.dw-bottom-wave-2 {
height: 180px;
}
.dw-bottom-wave-3 {
height: 150px;
}
.dw-scroll-indicator {
bottom: 150px;
}
}
@media (max-width: 991.98px) {
.dw-custom-text {
top: 8%;
}
.dw-solution-text {
right: 5%;
bottom: clamp(180px, 24%, 200px);
}
.dw-bottle-container {
height: 55%;
}
.dw-eco-icons {
right: 2%;
gap: 10px;
}
.dw-eco-icon {
width: 45px;
height: 45px;
}
.dw-bottom-wave {
height: 180px;
}
.dw-bottom-wave-2 {
height: 150px;
}
.dw-bottom-wave-3 {
height: 120px;
}
.dw-scroll-indicator {
bottom: 130px;
}
/* Adjust floating position for this breakpoint */
.dw-bottle-container.floating {
transform: translate(-50%, -36%) rotate(10deg) !important;
}
}
@media (max-width: 767.98px) {
.dw-water-text {
font-size: clamp(60px, 22vw, 200px);
transform: translate(-50%, -50%) skewX(-5deg) scale(0.9);
}
.dw-custom-text {
top: 10%;
}
.dw-solution-text {
font-size: clamp(28px, 14vw, 60px);
right: 5%;
bottom: clamp(160px, 22%, 180px);
}
.dw-bottle-container {
height: 50%;
}
.dw-eco-icons {
flex-direction: row;
right: auto;
top: auto;
bottom: clamp(130px, 20%, 150px);
left: 50%;
transform: translateX(-50%);
gap: 15px;
animation: fadeIn 0.8s forwards 1.2s;
}
.dw-bottom-wave {
height: 160px;
}
.dw-bottom-wave-2 {
height: 130px;
}
.dw-bottom-wave-3 {
height: 100px;
}
.dw-scroll-indicator {
bottom: 110px;
}
/* Adjust floating position for smaller screens */
.dw-bottle-container.floating {
transform: translate(-50%, -33%) rotate(10deg) !important;
}
}
@media (max-width: 575.98px) {
.dw-hero-section {
min-height: 500px;
}
.dw-water-text {
font-size: clamp(50px, 22vw, 150px);
transform: translate(-50%, -50%) skewX(-5deg) scale(0.85);
}
.dw-custom-text {
top: 8%;
}
.dw-solution-text {
bottom: clamp(140px, 20%, 160px);
}
.dw-bottle-container {
height: 45%;
}
.dw-eco-icon {
width: 40px;
height: 40px;
}
.dw-bottom-wave {
height: 130px;
}
.dw-bottom-wave-2 {
height: 110px;
}
.dw-bottom-wave-3 {
height: 90px;
}
.dw-scroll-indicator {
bottom: 95px;
}
/* Adjust floating for mobile */
.dw-bottle-container.floating {
transform: translate(-50%, -30%) rotate(10deg) !important;
}
}
@media (max-width: 374.98px) {
.dw-water-text {
font-size: clamp(40px, 20vw, 120px);
transform: translate(-50%, -50%) skewX(-5deg) scale(0.8);
}
.dw-custom-text {
font-size: 32px;
}
.dw-solution-text {
font-size: 28px;
bottom: clamp(130px, 20%, 140px);
}
.dw-eco-icon {
width: 35px;
height: 35px;
}
.dw-bottom-wave {
height: 110px;
}
.dw-bottom-wave-2 {
height: 90px;
}
.dw-bottom-wave-3 {
height: 70px;
}
.dw-scroll-indicator {
bottom: 80px;
}
/* Adjust floating for smallest screens */
.dw-bottle-container.floating {
transform: translate(-50%, -28%) rotate(10deg) !important;
}
}
/* About Section Styles - First part */
.about-section {
padding: 150px 0 100px;
position: relative;
background-color: #114084;
/* Matches the bottom color of the hero section */
overflow: hidden;
}
/* Depth Gradient - Starting from hero end color and going deeper */
.about-depth-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #4d71b2 0%, #3a5ea0 50%, #2c4c8e 100%);
opacity: 0.95;
z-index: 0;
pointer-events: none;
transition: opacity 0.5s ease, background 0.5s ease;
}
/* Bubble Background */
.about-bubble-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: 100px 100px;
opacity: 0.4;
animation: bubbleMove 30s infinite linear;
}
@keyframes bubbleMove {
0% {
background-position: 0 0;
}
100% {
background-position: 100px 100px;
}
}
/* Top Wave - Connecting to Hero - Updated to match the exact hero bottom color */
.about-top-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml;utf8,");
background-size: cover;
transform: rotate(180deg);
z-index: 1;
transition: transform 0.5s ease;
}
/* Bottom Waves - Deeper blues for depth effect */
.about-bottom-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml;utf8,');
background-size: 200% 100%;
opacity: 0.9;
z-index: 1;
animation: waveAnimation 20s infinite linear;
transition: transform 0.5s ease;
}
.about-bottom-wave-2 {
height: 80px;
opacity: 0.7;
background-size: 150% 100%;
background: url('data:image/svg+xml;utf8,');
animation: waveAnimation2 15s infinite linear;
transition: transform 0.5s ease;
}
/* Water pressure effect for content elements */
.about-section .animate-on-scroll {
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s ease-out;
}
@keyframes waveAnimation {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 200%;
}
}
@keyframes waveAnimation2 {
0% {
background-position-x: 100%;
}
100% {
background-position-x: -100%;
}
}
/* Section Header */
.section-header {
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.section-tag {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px;
color: #ffffff;
display: block;
margin-bottom: 15px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 36px;
font-weight: 700;
color: #fff;
margin-bottom: 20px;
position: relative;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.divider {
width: 60px;
height: 3px;
background-color: #ffffff;
margin-bottom: 30px;
position: relative;
transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.divider::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #ffffff, transparent);
transform-origin: left;
transform: scaleX(0);
transition: transform 1s ease;
}
.divider.mx-auto {
margin-left: auto;
margin-right: auto;
}
.animate-on-scroll.animated[data-animation="width-expand"] .divider::before,
.divider.animated::before {
transform: scaleX(1);
}
/* Content Column */
.about-content-column {
padding: 50px;
position: relative;
z-index: 2;
}
.about-content {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 30px;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.lead-text {
font-size: 20px;
line-height: 1.6;
color: #fff;
font-weight: 500;
margin-bottom: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.body-text {
font-size: 16px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
}
/* Continuation of CSS for About Section */
@media (max-width: 767.98px) {
.cta-container {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
}
}
@media (max-width: 575.98px) {
.about-section {
padding: 80px 0 50px;
margin-top: -50px;
/* Minimal overlap for very small screens */
}
.about-content-column,
.showcase-column {
padding: 15px;
}
.about-content {
padding: 20px 15px;
}
.stats-container {
flex-direction: column;
gap: 10px;
}
.stat-item {
flex: 0 0 100%;
}
.section-title {
font-size: 24px;
}
.bottle-showcase {
min-height: 350px;
}
.bottle {
height: 140px;
padding: 10px;
}
.bottle-inner {
height: 80px;
}
.step-icon {
width: 60px;
height: 60px;
}
.step-icon i {
font-size: 20px;
}
.step-title {
font-size: 16px;
}
}
/* Ultra-small devices */
@media (max-width: 374.98px) {
.about-section {
padding: 70px 0 40px;
margin-top: -40px;
}
.bottle {
height: 130px;
}
.bottle-inner {
height: 70px;
margin-bottom: 10px;
}
.bottle-label {
font-size: 12px;
}
.lead-text {
font-size: 16px;
}
.body-text {
font-size: 14px;
}
}
/* CSS for About Section - Part 3 */
/* Stats Container */
.stats-container {
display: flex;
gap: 30px;
margin-bottom: 40px;
}
.stat-item {
flex: 1;
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.stat-number {
font-size: 32px;
font-weight: 700;
color: #ffffff;
margin-bottom: 5px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.stat-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* CTA Container */
.cta-container {
display: flex;
gap: 15px;
margin-top: 20px;
}
.btn {
padding: 12px 24px;
font-weight: 600;
border-radius: 4px;
transition: all 0.3s ease;
text-decoration: none;
text-align: center;
}
.btn-primary {
background-color: #366cb4;
/* Matches the deeper blue from the image */
color: #fff;
border: 2px solid #366cb4;
}
.btn-outline {
background-color: transparent;
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.btn-primary:hover {
background-color: #245aa0;
/* Darker shade of the matched blue */
border-color: #245aa0;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
/* Bottle Showcase */
.showcase-column {
position: relative;
min-height: 500px;
z-index: 2;
}
.bottle-showcase {
position: relative;
height: 100%;
min-height: 500px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.bottle-display {
position: relative;
height: 100%;
width: 100%;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.bottle-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 100%;
max-width: 600px;
}
.bottle {
position: relative;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.bottle:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.15);
}
.bottle-inner {
position: relative;
height: 140px;
width: 100%;
margin-bottom: 15px;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.bottle-img {
height: 100%;
max-width: 100%;
object-fit: contain;
transition: all 0.3s ease;
filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
}
.bottle:hover .bottle-img {
transform: translateY(-5px);
}
.bottle-shadow {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 10px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 80%);
border-radius: 50%;
transition: all 0.3s ease;
}
.bottle:hover .bottle-shadow {
transform: translateX(-50%) scale(1.2);
opacity: 0.7;
}
.bottle-label {
font-size: 16px;
font-weight: 600;
color: #ffffff;
text-align: center;
width: 100%;
margin-top: auto;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.showcase-badge {
position: absolute;
top: 20px;
right: 20px;
background-color: rgba(44, 76, 142, 0.8);
color: white;
padding: 8px 16px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.showcase-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(44, 76, 142, 0.3) 0%, rgba(58, 94, 160, 0.2) 50%, rgba(77, 113, 178, 0.1) 100%);
pointer-events: none;
z-index: 1;
}
/* Floating Bubbles */
.floating-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
/* Process Section */
.process-section {
margin-top: 80px;
padding-top: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 2;
}
.process-title {
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin-bottom: 40px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.process-step {
text-align: center;
padding: 20px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.05);
height: 100%;
}
.process-step:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.step-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.step-icon i {
font-size: 24px;
color: #ffffff;
transition: all 0.3s ease;
}
.process-step:hover .step-icon {
background-color: rgba(44, 76, 142, 0.9);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.step-title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin-bottom: 10px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.step-description {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
/* Animation Classes */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-on-scroll.animated[data-animation="fade-up"] {
opacity: 1;
transform: translateY(0);
}
.animate-on-scroll[data-animation="fade-right"] {
transform: translateX(-30px);
}
.animate-on-scroll.animated[data-animation="fade-right"] {
opacity: 1;
transform: translateX(0);
}
.animate-on-scroll[data-animation="fade-left"] {
transform: translateX(30px);
}
.animate-on-scroll.animated[data-animation="fade-left"] {
opacity: 1;
transform: translateX(0);
}
/* Animation for shimmer effect */
@keyframes shimmerEffect {
0% {
transform: translateX(-100%) skewX(-30deg);
}
100% {
transform: translateX(200%) skewX(-30deg);
}
}
/* Touch device styles */
.bottle.touch-active {
transform: translateY(-10px) scale(1.05);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.bottle.touch-active .bottle-img {
transform: translateY(-5px);
}
.bottle.touch-active .bottle-shadow {
transform: translateX(-50%) scale(1.2);
opacity: 0.7;
}
/* Import required libraries */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css');
/* CSS Variables for brand colors */
:root {
--primary-color: #f8f9fa;
--secondary-color: #343a40;
--accent-color: #000000;
--deep-blue: #0a2d5c;
/* One shade darker than #114084 */
}
/* Why Choose Us Section Styles with Deep Water Effect */
.why-choose-us-section {
background: linear-gradient(180deg, #114084 0%, #0a2d5c 100%);
position: relative;
overflow: hidden;
padding: 100px 0;
z-index: 1;
}
.btn-primary {
background-color: #000;
color: #fff;
border: 2px solid #000;
}
.btn-outline {
background-color: transparent;
color: white;
border: 2px solid white;
}
/* Deep Water Background Effects */
.deep-water-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
/* Layered Water Effect */
.water-layer {
position: absolute;
width: 120%;
height: 100%;
background: url('data:image/svg+xml;utf8,') repeat-x;
animation: waveFlow 20s linear infinite;
}
.water-layer-1 {
background-size: 300% 100%;
opacity: 0.3;
animation-duration: 25s;
}
.water-layer-2 {
background-size: 250% 100%;
opacity: 0.2;
animation-duration: 30s;
animation-direction: reverse;
transform: translateY(20px);
}
.water-layer-3 {
background-size: 200% 100%;
opacity: 0.15;
animation-duration: 35s;
transform: translateY(40px);
}
@keyframes waveFlow {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 100%;
}
}
/* Water Bubbles Effect */
.water-bubbles {
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') repeat;
background-size: 150px 150px;
opacity: 0.6;
animation: bubbleDrift 40s linear infinite;
}
@keyframes bubbleDrift {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
/* Caustic Light Effect */
.caustic-light {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(173, 216, 230, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(135, 206, 235, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(176, 224, 230, 0.06) 0%, transparent 50%),
radial-gradient(circle at 60% 20%, rgba(135, 206, 235, 0.1) 0%, transparent 50%);
animation: causticShimmer 8s ease-in-out infinite alternate;
}
@keyframes causticShimmer {
0% {
opacity: 0.3;
transform: scale(1) rotate(0deg);
}
100% {
opacity: 0.7;
transform: scale(1.1) rotate(2deg);
}
}
/* Section Title Styles */
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 15px;
position: relative;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.title-underline {
height: 3px;
width: 80px;
background: linear-gradient(to right, #82b7dc, #ffffff);
margin: 0 auto;
position: relative;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(130, 183, 220, 0.5);
}
.title-underline:after {
content: '';
position: absolute;
height: 100%;
width: 30%;
background-color: #ffffff;
right: 0;
top: 0;
border-radius: 2px;
}
/* Features Styling with Glass Effect */
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 40px;
padding: 25px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateZ(0);
will-change: transform;
}
.feature-item:hover {
/* transform: translateY(-15px) scale(1.02); */
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.25);
}
/* Enhanced Underwater Shine Effect */
.feature-item:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s ease;
z-index: -1;
border-radius: 20px;
}
.left-features .feature-item {
flex-direction: row;
text-align: left;
margin-right: -20px;
}
.right-features .feature-item {
flex-direction: row-reverse;
text-align: right;
margin-left: -20px;
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
background: linear-gradient(145deg, rgba(130, 183, 220, 0.8), rgba(52, 102, 170, 0.9));
border-radius: 18px;
margin-right: 25px;
margin-left: 0;
flex-shrink: 0;
color: white;
font-size: 1.8rem;
transition: all 0.4s ease;
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.right-features .feature-icon {
margin-right: 0;
margin-left: 25px;
}
.feature-item:hover .feature-icon {
background: linear-gradient(145deg, rgba(52, 102, 170, 0.9), rgba(17, 64, 132, 1));
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.feature-content {
flex: 1;
}
.feature-content h4 {
margin-bottom: 12px;
font-weight: 600;
color: #ffffff;
font-size: 1.4rem;
position: relative;
display: inline-block;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.feature-content p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-size: 1rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* Enhanced Bottle Styling for Deep Water */
.center-image {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.bottle-container {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
filter: drop-shadow(0 0 20px rgba(173, 216, 230, 0.3));
}
.bottle-img {
height: auto;
max-width: 220px;
position: relative;
z-index: 3;
filter:
drop-shadow(0 15px 25px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 15px rgba(173, 216, 230, 0.4));
transition: all 0.5s ease;
animation: floatBottle 6s ease-in-out infinite;
}
@keyframes floatBottle {
0%,
100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
}
/* Enhanced Water Fill with Deep Water Effect */
.water-fill {
position: absolute;
width: 170px;
height: 70%;
background: linear-gradient(to bottom,
rgba(173, 216, 230, 0),
rgba(130, 183, 220, 0.2),
rgba(52, 102, 170, 0.3),
rgba(17, 64, 132, 0.6));
bottom: 80px;
border-radius: 0 0 80px 80px;
z-index: 2;
opacity: 0.8;
animation: waterFill 6s ease-in-out infinite alternate;
filter: blur(3px);
box-shadow: inset 0 0 20px rgba(17, 64, 132, 0.3);
}
@keyframes waterFill {
0% {
height: 65%;
background-position: 0% 0%;
opacity: 0.7;
}
100% {
height: 75%;
background-position: 100% 100%;
opacity: 0.9;
}
}
/* Enhanced Ripple Effects for Deep Water */
.ripple-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 250px;
height: 250px;
}
.ripple {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid rgba(173, 216, 230, 0.4);
opacity: 0;
box-shadow: 0 0 15px rgba(173, 216, 230, 0.3);
}
.ripple:nth-child(1) {
animation: rippleEffect 5s linear infinite;
}
.ripple:nth-child(2) {
animation: rippleEffect 5s linear infinite 1.6s;
}
.ripple:nth-child(3) {
animation: rippleEffect 5s linear infinite 3.2s;
}
@keyframes rippleEffect {
0% {
width: 0;
height: 0;
opacity: 0.6;
border-width: 3px;
}
50% {
opacity: 0.3;
border-width: 1px;
}
100% {
width: 350px;
height: 350px;
opacity: 0;
border-width: 0;
}
}
/* Enhanced Floating Particles for Deep Water */
.particles-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.particle {
position: absolute;
border-radius: 50%;
filter: blur(1px);
box-shadow: 0 0 8px rgba(173, 216, 230, 0.5);
}
.p1 {
width: 10px;
height: 10px;
background: radial-gradient(circle, rgba(173, 216, 230, 0.6) 0%, rgba(52, 102, 170, 0.3) 100%);
top: 20%;
left: 30%;
animation: floatParticle 12s linear infinite, fadeInOut 12s ease-in-out infinite;
}
.p2 {
width: 6px;
height: 6px;
background: radial-gradient(circle, rgba(135, 206, 235, 0.5) 0%, rgba(17, 64, 132, 0.2) 100%);
top: 40%;
left: 60%;
animation: floatParticle 10s linear infinite, fadeInOut 10s ease-in-out infinite 1s;
}
.p3 {
width: 12px;
height: 12px;
background: radial-gradient(circle, rgba(173, 216, 230, 0.7) 0%, rgba(52, 102, 170, 0.4) 100%);
top: 70%;
left: 40%;
animation: floatParticle 14s linear infinite, fadeInOut 14s ease-in-out infinite 2s;
}
.p4 {
width: 8px;
height: 8px;
background: radial-gradient(circle, rgba(176, 224, 230, 0.5) 0%, rgba(17, 64, 132, 0.3) 100%);
top: 30%;
left: 70%;
animation: floatParticle 11s linear infinite reverse, fadeInOut 11s ease-in-out infinite 3s;
}
.p5 {
width: 9px;
height: 9px;
background: radial-gradient(circle, rgba(173, 216, 230, 0.6) 0%, rgba(52, 102, 170, 0.3) 100%);
top: 60%;
left: 20%;
animation: floatParticle 13s linear infinite, fadeInOut 13s ease-in-out infinite 4s;
}
.p6 {
width: 5px;
height: 5px;
background: radial-gradient(circle, rgba(135, 206, 235, 0.4) 0%, rgba(17, 64, 132, 0.2) 100%);
top: 80%;
left: 50%;
animation: floatParticle 9s linear infinite reverse, fadeInOut 9s ease-in-out infinite 5s;
}
@keyframes floatParticle {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(40px, -40px) rotate(90deg);
}
50% {
transform: translate(0, -80px) rotate(180deg);
}
75% {
transform: translate(-40px, -40px) rotate(270deg);
}
100% {
transform: translate(0, 0) rotate(360deg);
}
}
@keyframes fadeInOut {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* Scroll-triggered Deep Water Effect */
.why-choose-us-section.scrolled {
background: linear-gradient(180deg, #0a2d5c 0%, #051a3a 100%);
}
.why-choose-us-section.scrolled .deep-water-background {
opacity: 1.2;
transform: scale(1.05);
}
.why-choose-us-section.scrolled .caustic-light {
opacity: 0.9;
animation-duration: 6s;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.left-features,
.right-features {
padding: 0 30px;
}
.left-features .feature-item,
.right-features .feature-item {
margin-right: 0;
margin-left: 0;
}
.bottle-img {
max-width: 180px;
}
.water-fill {
width: 140px;
bottom: 70px;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
@media (max-width: 767.98px) {
.why-choose-us-section {
padding: 80px 0;
}
.section-title h2 {
font-size: 2.2rem;
}
/* Reorder columns on mobile */
.row {
flex-direction: column;
}
.center-image {
order: 1;
margin-bottom: 40px;
}
.left-features {
order: 2;
}
.right-features {
order: 3;
}
/* Reset text alignment for mobile */
.left-features .feature-item,
.right-features .feature-item {
flex-direction: row;
text-align: left;
margin-bottom: 25px;
}
.right-features .feature-icon {
margin-right: 20px;
margin-left: 0;
}
.feature-item {
padding: 20px;
margin-bottom: 20px;
}
.feature-icon {
width: 55px;
height: 55px;
font-size: 1.3rem;
margin-right: 20px;
}
.feature-content h4 {
font-size: 1.2rem;
}
.bottle-img {
max-width: 160px;
}
.water-fill {
width: 120px;
bottom: 60px;
}
.ripple-container {
width: 200px;
height: 200px;
}
}
@media (max-width: 575.98px) {
.why-choose-us-section {
padding: 60px 0;
}
.section-title h2 {
font-size: 1.8rem;
}
.feature-item {
padding: 15px;
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 1.1rem;
margin-right: 15px;
}
.feature-content h4 {
font-size: 1.1rem;
}
.feature-content p {
font-size: 0.9rem;
}
.bottle-img {
max-width: 140px;
}
.water-fill {
width: 100px;
bottom: 50px;
}
}
/* QR Marketing Section Styles */
:root {
--primary-color: #f8f9fa;
/* Light gray - 60% */
--secondary-color: #343a40;
/* Dark gray - 30% */
--accent-color: #000000;
/* Black - 10% */
--deep-water-start: #082447;
/* 1 shade darker than #0a2d5c */
--deep-water-end: #04142d;
/* 1 shade darker than #051a3a */
}
.qr-marketing {
position: relative;
background: linear-gradient(180deg, var(--deep-water-start) 0%, var(--deep-water-end) 100%);
overflow: hidden;
padding: 100px 0;
min-height: 100vh;
}
/* Water Background Effects */
.water-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(130, 183, 220, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(52, 102, 170, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(17, 64, 132, 0.06) 0%, transparent 50%);
z-index: 0;
animation: waterMovement 20s ease-in-out infinite;
}
.water-bubbles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.depth-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
/* Background effects */
.qr-marketing:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(8, 36, 71, 0.6) 0%, rgba(4, 20, 45, 0.9) 100%);
z-index: 1;
}
.qr-marketing .container {
position: relative;
z-index: 2;
}
/* Section Title Animation Setup */
.qr-marketing .section-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
color: rgba(255, 255, 255, 0.95);
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.qr-marketing .section-title.in-view {
opacity: 1;
transform: translateY(0);
}
.qr-marketing .section-title .word {
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.qr-marketing .section-subtitle {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 2.5rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.qr-marketing .section-subtitle.in-view {
opacity: 1;
transform: translateY(0);
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 15px;
padding: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transform: translateY(20px);
opacity: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: flex-start;
}
.feature-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.2);
}
.feature-icon {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.feature-icon i {
color: rgba(255, 255, 255, 0.9);
font-size: 1.25rem;
position: relative;
z-index: 2;
}
.feature-icon:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
top: -100%;
left: -100%;
transition: all 0.5s ease;
transform: rotate(45deg);
}
.feature-card:hover .feature-icon:after {
animation: shimmer 1.5s forwards;
}
.feature-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.95);
}
.feature-content p {
font-size: 0.95rem;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.8);
}
/* CTA Button */
.cta-button {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
color: rgba(255, 255, 255, 0.95) !important;
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
transform: translateY(20px);
opacity: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-button i {
margin-left: 0.5rem;
transition: transform 0.3s ease;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
border-color: rgba(255, 255, 255, 0.3);
color: white !important;
}
.cta-button:hover i {
transform: translateX(5px);
}
.cta-button:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateX(-100%);
}
.cta-button:hover:before {
animation: buttonGlow 1.5s infinite;
}
/* Bottle Image Styles */
.bottle-wrapper {
position: relative;
width: 100%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.bottle-container {
position: relative;
width: 300px;
height: 500px;
transform-style: preserve-3d;
animation: floatBottle 6s ease-in-out infinite;
opacity: 0;
transform: translateY(50px) rotateY(-15deg);
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bottle-container.in-view {
opacity: 1;
transform: translateY(0) rotateY(-15deg);
}
.bottle-image {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.bottle-img {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
transition: all 0.5s ease;
}
.bottle-highlight {
position: absolute;
width: 30px;
height: 350px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
transform: translateY(20px) translateX(-60px) rotate(20deg);
transition: all 0.8s ease 0.6s;
pointer-events: none;
z-index: 5;
border-radius: 50%;
}
.bottle-highlight.in-view {
opacity: 1;
transform: translateY(0) translateX(-60px) rotate(20deg);
}
/* QR Code on Bottle */
.qr-code {
position: absolute;
width: 80%;
max-width: 120px;
aspect-ratio: 3/4;
top: 70%;
left: 35%;
transform: translate(-50%, -50%) translateZ(30px);
background: rgba(0, 0, 0, 0.9);
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.8s ease 1s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.qr-code.in-view {
opacity: 1;
}
.qr-scan-text {
color: white;
font-weight: bold;
font-size: clamp(0.8rem, 2vw, 1.2rem);
margin-bottom: 10px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
animation: pulse 2s ease-in-out infinite;
white-space: nowrap;
text-align: center;
}
.qr-code-image {
width: 90%;
aspect-ratio: 1/1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M0 0h23v23H0z'/%3E%3Cpath stroke='%23000000' d='M0 0.5h7m1 0h1m1 0h2m1 0h3m1 0h6M0 1.5h1m5 0h1m1 0h2m2 0h1m1 0h1m2 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h1m3 0h1m1 0h1m1 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m3 0h5m1 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h2m1 0h3m1 0h1M0 5.5h1m5 0h1m3 0h2m1 0h1m1 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M8 7.5h2m1 0h1m3 0h1M0 8.5h1m1 0h7m1 0h2m3 0h2m2 0h1m1 0h1M0 9.5h2m2 0h4m2 0h2m1 0h1m2 0h4M0 10.5h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h4m3 0h2m1 0h1M3 11.5h1m1 0h2m1 0h1m2 0h1m2 0h2m3 0h1M2 12.5h1m1 0h3m2 0h1m1 0h6m1 0h3M0 13.5h1m1 0h2m3 0h1m3 0h1m1 0h1m2 0h1m2 0h2M0 14.5h1m1 0h5m1 0h1m2 0h10M0 15.5h7m2 0h3m1 0h2m1 0h1m1 0h5M8 16.5h1m5 0h2m2 0h3M0 17.5h7m1 0h4m1 0h3m1 0h3M0 18.5h1m5 0h1m1 0h3m2 0h1m1 0h1m1 0h1m1 0h4M0 19.5h1m1 0h3m1 0h1m3 0h1m1 0h2m2 0h2m1 0h1M0 20.5h1m1 0h3m1 0h1m1 0h3m2 0h1m1 0h4m2 0h1M0 21.5h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h3M0 22.5h1m5 0h1m3 0h2m1 0h2m3 0h2m1 0h2'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
}
.scanning-effect {
position: absolute;
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.7);
top: 50%;
left: 0;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
animation: scan 2s ease-in-out infinite;
}
/* Floating Particles */
.floating-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
pointer-events: none;
opacity: 0;
}
.water-bubble {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(130, 183, 220, 0.05) 70%, transparent 100%);
animation: bubbleFloat 15s linear infinite;
pointer-events: none;
}
.depth-particle {
position: absolute;
width: 2px;
height: 2px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: depthFloat 12s linear infinite;
pointer-events: none;
}
/* Animations */
@keyframes waterMovement {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-10px) rotate(1deg);
}
50% {
transform: translateY(5px) rotate(-0.5deg);
}
75% {
transform: translateY(-5px) rotate(0.5deg);
}
}
@keyframes bubbleFloat {
0% {
bottom: -50px;
opacity: 0;
transform: translateX(0) scale(0.5);
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.6;
}
100% {
bottom: 100vh;
opacity: 0;
transform: translateX(100px) scale(1.2);
}
}
@keyframes depthFloat {
0% {
top: -10px;
opacity: 0;
transform: translateX(0) translateY(0);
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.3;
}
100% {
top: 100vh;
opacity: 0;
transform: translateX(50px) translateY(100px);
}
}
@keyframes floatBottle {
0%,
100% {
transform: translateY(0) rotateY(-15deg);
}
50% {
transform: translateY(-20px) rotateY(-10deg);
}
}
@keyframes pulse {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
@keyframes scan {
0%,
100% {
top: 25%;
opacity: 0;
}
25%,
75% {
opacity: 1;
}
50% {
top: 75%;
}
}
@keyframes shimmer {
0% {
top: -100%;
left: -100%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100%;
left: 100%;
opacity: 0;
}
}
@keyframes buttonGlow {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes fadeInBottom {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.qr-marketing {
padding: 80px 0;
}
.qr-marketing .section-title {
font-size: 2.5rem;
}
.bottle-wrapper {
height: 500px;
margin-top: 50px;
}
.bottle-container {
width: 250px;
height: 400px;
}
.qr-code {
max-width: 100px;
top: 73%;
left: 41%;
}
}
@media (max-width: 767.98px) {
.qr-marketing .section-title {
font-size: 2rem;
}
.qr-marketing .section-subtitle {
font-size: 1.1rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.bottle-wrapper {
height: 400px;
}
.bottle-container {
height: 350px;
width: 200px;
}
}
@media (max-width: 575.98px) {
.qr-marketing {
padding: 60px 0;
}
.qr-marketing .section-title {
font-size: 1.8rem;
}
.feature-card {
padding: 1rem;
}
.feature-icon {
width: 40px;
height: 40px;
}
.bottle-container {
width: 180px;
height: 300px;
}
.qr-code {
max-width: 90px;
top: 85%;
left: 45%;
}
}
/* QR Code Engagement Section Styles with Deep Water Effect */
.qr-engagement {
position: relative;
background: linear-gradient(135deg, rgba(3, 25, 56, 0.8) 0%, rgba(1, 12, 30, 0.95) 100%);
overflow: hidden;
padding: 6rem 0;
min-height: 100vh;
}
/* Enhanced Water Depth Gradient */
.qr-engagement::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at center top, rgba(17, 64, 132, 0.3) 0%, transparent 50%),
linear-gradient(180deg, rgba(3, 25, 56, 0.4) 0%, rgba(1, 12, 30, 0.8) 50%, rgba(0, 8, 20, 0.95) 100%);
z-index: 0;
animation: depthShift 20s ease-in-out infinite;
}
/* Water Gradient Overlay for deeper diving effect */
.water-gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg,
transparent 0%,
rgba(17, 64, 132, 0.1) 30%,
rgba(52, 102, 170, 0.2) 60%,
rgba(130, 183, 220, 0.3) 100%);
z-index: 0;
opacity: 0.6;
animation: waterFlow 15s ease-in-out infinite;
}
/* Water Bubbles Effect */
.water-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.water-bubbles::before,
.water-bubbles::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: bubbleFloat 8s ease-in-out infinite;
}
.water-bubbles::before {
width: 20px;
height: 20px;
top: 80%;
left: 15%;
animation-delay: 0s;
animation-duration: 10s;
}
.water-bubbles::after {
width: 15px;
height: 15px;
top: 70%;
right: 20%;
animation-delay: 3s;
animation-duration: 12s;
}
/* Depth Particles */
.depth-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.15), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(130, 183, 220, 0.2), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.1), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(52, 102, 170, 0.15), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.1), transparent);
background-repeat: repeat;
background-size: 200px 100px;
animation: particleDrift 25s linear infinite;
}
.qr-engagement .container {
position: relative;
z-index: 2;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.95);
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
text-shadow: 0 0 20px rgba(130, 183, 220, 0.3);
}
.section-title .highlight {
background: linear-gradient(45deg, rgba(130, 183, 220, 0.9), rgba(255, 255, 255, 0.9));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
filter: drop-shadow(0 0 10px rgba(130, 183, 220, 0.5));
}
.section-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 2rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease 0.2s;
text-shadow: 0 0 15px rgba(52, 102, 170, 0.3);
}
/* QR Steps Styles */
.qr-steps-container {
margin-bottom: 3rem;
}
.qr-step-wrapper {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.qr-step-wrapper[data-step="1"] {
transition-delay: 0.3s;
}
.qr-step-wrapper[data-step="2"] {
transition-delay: 0.5s;
}
.qr-step-wrapper[data-step="3"] {
transition-delay: 0.7s;
}
.qr-step {
background: rgba(255, 255, 255, 0.12);
border-radius: 15px;
padding: 2rem;
height: 100%;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
position: relative;
z-index: 1;
overflow: hidden;
}
.qr-step::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(130, 183, 220, 0.1);
transform: rotate(45deg);
z-index: -1;
opacity: 0;
transition: all 0.8s ease;
}
.qr-step:hover {
transform: translateY(-10px);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 20px rgba(130, 183, 220, 0.3);
background: rgba(255, 255, 255, 0.18);
}
.qr-step:hover::before {
animation: shimmer 1.5s ease;
}
.qr-step-icon {
margin-bottom: 1.5rem;
position: relative;
}
.icon-wrapper {
position: relative;
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(52, 102, 170, 0.9), rgba(17, 64, 132, 0.9));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 0 20px rgba(52, 102, 170, 0.4);
}
.qr-step-icon i {
font-size: 28px;
color: white;
position: relative;
z-index: 2;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}
.pulse-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(130, 183, 220, 0.4);
animation: pulse 2s infinite;
z-index: 1;
}
.qr-step-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 10px rgba(130, 183, 220, 0.3);
}
.qr-step-text {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
text-shadow: 0 0 8px rgba(52, 102, 170, 0.2);
}
/* QR Demo Animation */
.qr-demo-wrapper {
position: relative;
margin: 4rem auto;
height: 250px;
max-width: 600px;
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease 0.9s;
}
.qr-bottle-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
position: relative;
}
.qr-bottle {
width: 100px;
height: 240px;
position: relative;
margin-right: 2rem;
}
.bottle-label {
position: absolute;
top: 55%;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 120px;
/* background: rgba(255, 255, 255, 0.95); */
border-radius: 5px;
/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
}
.bottle-labels {
position: absolute;
top: 55%;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 120px;
background: rgba(255, 255, 255, 0.95);
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
}
.qr-code-display {
width: 60px;
height: 60px;
background: #f8f9fa;
position: relative;
margin-bottom: 10px;
overflow: hidden;
border-radius: 3px;
}
.qr-code-inner {
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, #000 10%, transparent 10%, transparent 20%, #000 20%, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%, transparent 60%, #000 60%, #000 70%, transparent 70%, transparent 80%, #000 80%, #000 90%, transparent 90%),
linear-gradient(to bottom, #000 10%, transparent 10%, transparent 20%, #000 20%, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%, transparent 60%, #000 60%, #000 70%, transparent 70%, transparent 80%, #000 80%, #000 90%, transparent 90%);
background-size: 10% 10%;
background-position: 0 0;
background-repeat: repeat;
}
.scan-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 255, 0, 0.8);
box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
animation: scanLine 2s ease-in-out infinite;
opacity: 0;
}
.logo-placeholder {
font-size: 10px;
font-weight: 700;
color: rgba(17, 64, 132, 0.9);
text-align: center;
}
.phone-mockup {
width: 120px;
height: 240px;
background: rgba(28, 28, 28, 0.9);
border-radius: 20px;
position: relative;
border: 8px solid rgba(28, 28, 28, 0.9);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.phone-screen {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.98);
border-radius: 12px;
overflow: hidden;
position: relative;
}
.screen-content {
padding: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.loading-bar {
height: 3px;
width: 0%;
background: linear-gradient(90deg, rgba(52, 102, 170, 0.9), rgba(17, 64, 132, 0.9));
margin-bottom: 20px;
border-radius: 3px;
transition: width 1.5s ease;
box-shadow: 0 0 10px rgba(52, 102, 170, 0.5);
}
.content-placeholder {
height: 20px;
background: rgba(241, 241, 241, 0.8);
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
animation: pulse-bg 2s infinite;
}
.content-placeholder.small {
width: 70%;
height: 15px;
}
.connection-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.connection-svg {
width: 100%;
height: 100%;
}
.path-line {
fill: none;
stroke: rgba(130, 183, 220, 0.6);
stroke-width: 2;
opacity: 0;
transition: opacity 0.5s ease 1.2s;
}
.animated-dot {
fill: none;
stroke: rgba(255, 255, 255, 0.9);
stroke-width: 6;
stroke-linecap: round;
opacity: 0;
stroke-dasharray: 1, 100;
stroke-dashoffset: 0;
transition: stroke-dasharray 0.1s ease 1.2s, opacity 0.1s ease 1.2s;
filter: drop-shadow(0 0 8px rgba(130, 183, 220, 0.6));
}
/* Benefit Items */
.benefit-item {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.benefit-item[data-benefit="1"] {
transition-delay: 1.1s;
}
.benefit-item[data-benefit="2"] {
transition-delay: 1.3s;
}
.benefit-card {
display: flex;
align-items: flex-start;
background: rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 1.5rem;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 20px rgba(130, 183, 220, 0.3);
background: rgba(255, 255, 255, 0.18);
}
.benefit-icon {
background: linear-gradient(135deg, rgba(52, 102, 170, 0.9), rgba(17, 64, 132, 0.9));
color: white;
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
flex-shrink: 0;
box-shadow: 0 0 15px rgba(52, 102, 170, 0.4);
}
.benefit-icon i {
font-size: 22px;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}
.benefit-content h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 10px rgba(130, 183, 220, 0.3);
}
.benefit-content p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
line-height: 1.5;
text-shadow: 0 0 8px rgba(52, 102, 170, 0.2);
}
.qr-cta-btn {
background: linear-gradient(135deg, rgba(17, 64, 132, 0.9), rgba(52, 102, 170, 0.9));
color: white;
border-radius: 30px;
padding: 0.8rem 2rem;
font-weight: 600;
transition: all 0.3s ease;
border: none;
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
0 0 20px rgba(52, 102, 170, 0.4);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease 1.5s;
}
.qr-cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
}
.qr-cta-btn:hover {
transform: translateY(-5px);
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.4),
0 0 30px rgba(130, 183, 220, 0.6);
background: linear-gradient(135deg, rgba(52, 102, 170, 0.9), rgba(17, 64, 132, 0.9));
color: white;
}
.qr-cta-btn:hover::before {
left: 100%;
}
/* Enhanced Water Animations */
@keyframes depthShift {
0%,
100% {
background-position: 0% 50%;
opacity: 0.8;
}
50% {
background-position: 100% 50%;
opacity: 0.6;
}
}
@keyframes waterFlow {
0% {
transform: translateY(0) translateX(0);
opacity: 0.6;
}
33% {
transform: translateY(-20px) translateX(10px);
opacity: 0.4;
}
66% {
transform: translateY(10px) translateX(-5px);
opacity: 0.7;
}
100% {
transform: translateY(0) translateX(0);
opacity: 0.6;
}
}
@keyframes bubbleFloat {
0% {
transform: translateY(0) scale(1);
opacity: 0.3;
}
50% {
transform: translateY(-100px) scale(1.2);
opacity: 0.6;
}
100% {
transform: translateY(-200px) scale(0.8);
opacity: 0;
}
}
@keyframes particleDrift {
0% {
background-position: 0px 0px;
}
100% {
background-position: 200px 100px;
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes scanLine {
0% {
top: 0%;
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
top: 100%;
opacity: 1;
}
}
@keyframes pulse-bg {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
}
@keyframes shimmer {
0% {
opacity: 0;
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
.qr-engagement.in-view .section-title,
.qr-engagement.in-view .section-subtitle,
.qr-engagement.in-view .qr-step-wrapper,
.qr-engagement.in-view .qr-demo-wrapper,
.qr-engagement.in-view .benefit-item,
.qr-engagement.in-view .qr-cta-btn {
opacity: 1;
transform: translateY(0);
}
.qr-engagement.in-view .scan-line {
opacity: 1;
}
.qr-engagement.in-view .screen-content {
opacity: 1;
transform: translateY(0);
transition-delay: 1.5s;
}
.qr-engagement.in-view .loading-bar {
width: 100%;
transition-delay: 1.7s;
}
.qr-engagement.in-view .path-line {
opacity: 0.6;
}
.qr-engagement.in-view .animated-dot {
opacity: 1;
stroke-dasharray: 5, 5;
animation: moveDot 2s linear infinite 1.8s;
}
@keyframes moveDot {
0% {
stroke-dashoffset: 100;
}
100% {
stroke-dashoffset: 0;
}
}
/* Responsive styles */
@media (max-width: 991.98px) {
.qr-step {
margin-bottom: 2rem;
}
.qr-demo-wrapper {
height: 300px;
}
.qr-bottle-container {
flex-direction: column;
justify-content: center;
}
.qr-bottle {
margin-right: 0;
margin-bottom: 2rem;
}
.connection-lines {
display: none;
}
}
@media (max-width: 767.98px) {
.section-title {
font-size: 2rem;
}
.benefit-card {
margin-bottom: 1rem;
}
}
@media (max-width: 575.98px) {
.qr-engagement {
padding: 4rem 0;
}
.section-title {
font-size: 1.8rem;
}
.section-subtitle {
font-size: 1rem;
}
.qr-step-title {
font-size: 1.2rem;
}
.benefit-content h4 {
font-size: 1rem;
}
}
:root {
--primary-color: #f8f9fa;
--secondary-color: #343a40;
--accent-color: #000000;
--deep-water-dark: rgba(0, 6, 15, 0.95);
--deep-water-medium: rgba(1, 8, 20, 0.8);
--deep-water-light: rgba(10, 40, 80, 0.4);
}
/* Industries Section - Enhanced Deep Water Styling */
.industries-section {
position: relative;
/* Enhanced deeper water gradient - 1 shade darker */
background:
radial-gradient(ellipse at center top, rgba(10, 40, 80, 0.5) 0%, transparent 50%),
linear-gradient(180deg,
rgba(1, 15, 35, 0.6) 0%,
rgba(0, 8, 20, 0.9) 50%,
rgba(0, 4, 12, 0.98) 100%);
padding: 100px 0;
overflow: hidden;
min-height: 100vh;
}
/* Underwater atmosphere overlay */
.industries-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 30% 20%, rgba(52, 102, 170, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(17, 64, 132, 0.08) 0%, transparent 50%);
z-index: 0;
animation: underwaterShimmer 8s infinite ease-in-out;
}
/* Dynamic water caustics effect */
.industries-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 120%;
background:
radial-gradient(ellipse 800px 400px at 20% 30%, rgba(130, 183, 220, 0.03) 0%, transparent 50%),
radial-gradient(ellipse 600px 300px at 80% 70%, rgba(130, 183, 220, 0.04) 0%, transparent 50%);
animation: waterCaustics 12s infinite ease-in-out;
z-index: 0;
}
/* Water Effects Container */
.water-effects-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
/* Enhanced Floating Water Bubbles */
.water-bubbles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.bubble {
position: absolute;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%,
rgba(255, 255, 255, 0.4) 0%,
rgba(130, 183, 220, 0.2) 50%,
rgba(52, 102, 170, 0.1) 100%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: bubbleFloat 8s infinite ease-in-out;
}
.bubble-1 {
width: 20px;
height: 20px;
top: 80%;
left: 10%;
animation-duration: 12s;
animation-delay: 0s;
}
.bubble-2 {
width: 15px;
height: 15px;
top: 70%;
left: 85%;
animation-duration: 10s;
animation-delay: 2s;
}
.bubble-3 {
width: 25px;
height: 25px;
top: 60%;
left: 20%;
animation-duration: 15s;
animation-delay: 1s;
}
.bubble-4 {
width: 12px;
height: 12px;
top: 90%;
left: 70%;
animation-duration: 8s;
animation-delay: 3s;
}
.bubble-5 {
width: 18px;
height: 18px;
top: 75%;
left: 50%;
animation-duration: 11s;
animation-delay: 1.5s;
}
.bubble-6 {
width: 22px;
height: 22px;
top: 85%;
left: 35%;
animation-duration: 13s;
animation-delay: 0.5s;
}
.bubble-7 {
width: 16px;
height: 16px;
top: 65%;
left: 75%;
animation-duration: 9s;
animation-delay: 2.5s;
}
.bubble-8 {
width: 14px;
height: 14px;
top: 95%;
left: 15%;
animation-duration: 14s;
animation-delay: 1.8s;
}
/* Underwater Light Rays */
.light-rays {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.ray {
position: absolute;
width: 2px;
height: 100%;
background: linear-gradient(to bottom,
rgba(130, 183, 220, 0.3) 0%,
rgba(130, 183, 220, 0.1) 30%,
transparent 70%);
transform-origin: top center;
animation: lightRayMove 6s infinite ease-in-out;
}
.ray-1 {
left: 25%;
animation-delay: 0s;
transform: rotate(-5deg);
}
.ray-2 {
left: 50%;
animation-delay: 2s;
transform: rotate(3deg);
}
.ray-3 {
left: 75%;
animation-delay: 4s;
transform: rotate(-2deg);
}
/* Floating Water Particles */
.water-particles {
position: absolute;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
width: 3px;
height: 3px;
background: rgba(130, 183, 220, 0.4);
border-radius: 50%;
animation: particleFloat 20s infinite linear;
}
.particle-1 {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.particle-2 {
top: 40%;
left: 80%;
animation-delay: 4s;
}
.particle-3 {
top: 60%;
left: 30%;
animation-delay: 8s;
}
.particle-4 {
top: 80%;
left: 65%;
animation-delay: 12s;
}
.particle-5 {
top: 90%;
left: 45%;
animation-delay: 16s;
}
/* Enhanced Section Content with Water Theme */
.section-header {
position: relative;
z-index: 2;
margin-bottom: 60px;
}
.section-header h6 {
font-size: 0.9rem;
letter-spacing: 2px;
color: rgba(130, 183, 220, 0.9);
margin-bottom: 15px;
opacity: 0;
text-shadow: 0 0 10px rgba(130, 183, 220, 0.3);
}
.section-header h2 {
font-size: 3.2rem;
color: rgba(241, 241, 241, 0.95);
margin-bottom: 20px;
letter-spacing: -0.5px;
opacity: 0;
text-shadow: 0 0 20px rgba(130, 183, 220, 0.2);
}
.header-line {
width: 80px;
height: 3px;
background: linear-gradient(to right, rgba(130, 183, 220, 0.8), rgba(52, 102, 170, 0.6));
margin: 0 auto;
position: relative;
opacity: 0;
box-shadow: 0 0 15px rgba(130, 183, 220, 0.4);
}
.header-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
background: rgba(255, 255, 255, 0.6);
animation: lineScan 3s infinite ease-in-out;
}
/* Industries Layout with Enhanced Water Effects */
.industries-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
position: relative;
z-index: 2;
}
.industry-box {
position: relative;
overflow: hidden;
border-radius: 12px;
opacity: 0;
transform: translateY(30px);
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.industry-box.animated {
opacity: 1;
transform: translateY(0);
}
.industry-content {
position: relative;
background: rgba(241, 241, 241, 0.15);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
padding: 40px 30px;
text-align: center;
border-radius: 12px;
height: 100%;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
border: 1px solid rgba(130, 183, 220, 0.2);
}
.industry-box:hover .industry-content {
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 30px rgba(130, 183, 220, 0.2);
transform: translateY(-8px);
background: rgba(241, 241, 241, 0.25);
border-color: rgba(130, 183, 220, 0.4);
}
.industry-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg,
rgba(130, 183, 220, 0.3) 0%,
rgba(52, 102, 170, 0.2) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: 1px solid rgba(130, 183, 220, 0.3);
}
.industry-icon i {
font-size: 1.8rem;
color: rgba(241, 241, 241, 0.9);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
text-shadow: 0 0 10px rgba(130, 183, 220, 0.4);
}
.industry-box:hover .industry-icon {
transform: scale(1.1);
background: linear-gradient(135deg,
rgba(130, 183, 220, 0.6) 0%,
rgba(52, 102, 170, 0.5) 100%);
box-shadow:
0 12px 25px rgba(0, 0, 0, 0.2),
0 0 25px rgba(130, 183, 220, 0.4);
}
.industry-box:hover .industry-icon i {
color: white;
text-shadow: 0 0 15px rgba(130, 183, 220, 0.6);
}
.industry-content h3 {
font-size: 1.3rem;
font-weight: 600;
color: rgba(241, 241, 241, 0.9);
margin-bottom: 15px;
transition: all 0.3s ease;
text-shadow: 0 0 8px rgba(130, 183, 220, 0.2);
}
.industry-box:hover h3 {
color: rgba(130, 183, 220, 0.95);
text-shadow: 0 0 12px rgba(130, 183, 220, 0.4);
}
.industry-details {
height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition-delay: 0.1s;
}
.industry-box:hover .industry-details {
height: auto;
opacity: 1;
margin-top: 15px;
}
.industry-details p {
font-size: 0.95rem;
color: white;
line-height: 1.6;
margin-bottom: 0;
text-shadow: 0 0 5px rgba(130, 183, 220, 0.1);
}
/* Enhanced Reveal Borders with Water Effect */
.reveal-border {
position: absolute;
background: linear-gradient(90deg,
rgba(130, 183, 220, 0.8),
rgba(52, 102, 170, 0.6));
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0;
box-shadow: 0 0 10px rgba(130, 183, 220, 0.5);
}
.reveal-border.top,
.reveal-border.bottom {
height: 2px;
width: 0;
}
.reveal-border.left,
.reveal-border.right {
width: 2px;
height: 0;
}
.reveal-border.top {
top: 0;
left: 0;
}
.reveal-border.right {
top: 0;
right: 0;
}
.reveal-border.bottom {
bottom: 0;
right: 0;
}
.reveal-border.left {
bottom: 0;
left: 0;
}
.industry-box:hover .reveal-border.top,
.industry-box:hover .reveal-border.bottom {
width: 100%;
opacity: 1;
}
.industry-box:hover .reveal-border.left,
.industry-box:hover .reveal-border.right {
height: 100%;
opacity: 1;
}
.industry-box:hover .reveal-border.top {
transition-delay: 0s;
}
.industry-box:hover .reveal-border.right {
transition-delay: 0.2s;
}
.industry-box:hover .reveal-border.bottom {
transition-delay: 0.4s;
}
.industry-box:hover .reveal-border.left {
transition-delay: 0.6s;
}
/* Enhanced Floating Water Drops */
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.water-drop {
position: absolute;
border-radius: 0 50% 50% 50%;
transform: rotate(45deg);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.15),
0 0 20px rgba(130, 183, 220, 0.2);
opacity: 0.4;
}
.drop-1 {
width: 60px;
height: 60px;
background: linear-gradient(135deg,
rgba(130, 183, 220, 0.3) 0%,
rgba(52, 102, 170, 0.1) 100%);
top: 20%;
left: 15%;
animation: enhancedFloatAnimation 15s infinite ease-in-out;
}
.drop-2 {
width: 40px;
height: 40px;
background: linear-gradient(135deg,
rgba(130, 183, 220, 0.25) 0%,
rgba(52, 102, 170, 0.08) 100%);
bottom: 30%;
right: 10%;
animation: enhancedFloatAnimation 12s infinite ease-in-out 2s;
}
.drop-3 {
width: 30px;
height: 30px;
background: linear-gradient(135deg,
rgba(130, 183, 220, 0.2) 0%,
rgba(52, 102, 170, 0.06) 100%);
top: 60%;
left: 5%;
animation: enhancedFloatAnimation 10s infinite ease-in-out 1s;
}
/* Enhanced Animation Keyframes */
@keyframes underwaterShimmer {
0%,
100% {
opacity: 0.6;
transform: translateY(0px);
}
50% {
opacity: 0.8;
transform: translateY(-10px);
}
}
@keyframes waterCaustics {
0%,
100% {
transform: translate(0, 0) scale(1);
opacity: 0.3;
}
33% {
transform: translate(-10px, -5px) scale(1.02);
opacity: 0.5;
}
66% {
transform: translate(5px, -8px) scale(0.98);
opacity: 0.4;
}
}
@keyframes bubbleFloat {
0% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-20px) translateX(10px) scale(1.1);
opacity: 0.7;
}
50% {
transform: translateY(-40px) translateX(-5px) scale(0.9);
opacity: 0.5;
}
75% {
transform: translateY(-20px) translateX(-10px) scale(1.05);
opacity: 0.8;
}
100% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0.3;
}
}
@keyframes lightRayMove {
0%,
100% {
opacity: 0.2;
transform: rotate(-5deg) scaleY(1);
}
50% {
opacity: 0.6;
transform: rotate(3deg) scaleY(1.1);
}
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) translateX(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.8;
}
100% {
transform: translateY(-20px) translateX(20px) rotate(360deg);
opacity: 0;
}
}
@keyframes lineScan {
0% {
left: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes enhancedFloatAnimation {
0%,
100% {
transform: rotate(45deg) translate(0, 0) scale(1);
opacity: 0.4;
}
25% {
transform: rotate(45deg) translate(15px, -15px) scale(1.05);
opacity: 0.6;
}
50% {
transform: rotate(45deg) translate(0, -25px) scale(0.95);
opacity: 0.5;
}
75% {
transform: rotate(45deg) translate(-15px, -15px) scale(1.1);
opacity: 0.7;
}
}
/* Parallax Water Effect on Scroll */
.industries-section.scrolled {
background:
radial-gradient(ellipse at center top, rgba(5, 25, 50, 0.7) 0%, transparent 50%),
linear-gradient(180deg,
rgba(0, 10, 25, 0.8) 0%,
rgba(0, 4, 12, 0.95) 50%,
rgba(0, 2, 8, 1) 100%);
}
/* Responsive Adjustments */
@media (max-width: 991.98px) {
.industries-wrapper {
grid-template-columns: repeat(2, 1fr);
}
.section-header h2 {
font-size: 2.8rem;
}
.bubble {
transform: scale(0.8);
}
}
@media (max-width: 767.98px) {
.industries-section {
padding: 70px 0;
}
.section-header h2 {
font-size: 2.4rem;
}
.industry-content {
padding: 30px 20px;
}
.bubble {
transform: scale(0.6);
}
.water-drop {
transform: scale(0.7) rotate(45deg);
}
}
@media (max-width: 575.98px) {
.industries-wrapper {
grid-template-columns: 1fr;
}
.section-header h2 {
font-size: 2rem;
}
.header-line {
width: 60px;
}
.industry-icon {
width: 60px;
height: 60px;
}
.industry-icon i {
font-size: 1.5rem;
}
.bubble {
transform: scale(0.5);
}
}
/* Animation classes */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.animated {
opacity: 1;
transform: translateY(0);
}
/* CTA Section Styles */
.cta-section {
padding: 80px 0;
position: relative;
overflow: hidden;
background: radial-gradient(at center top, rgba(5, 15, 30, 0.92) 0%, transparent 50%),
linear-gradient(rgba(1, 8, 18, 0.95) 0%, rgba(1, 4, 10, 0.99) 50%, rgb(0, 2, 5) 100%);
}
.cta-card {
position: relative;
border-radius: 20px;
overflow: hidden;
padding: 0;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
transform: translateY(0);
transition: transform 0.6s ease;
}
.cta-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(at center top, rgba(3, 10, 20, 0.95) 0%, transparent 50%),
linear-gradient(rgba(0, 5, 12, 0.98) 0%, rgba(0, 2, 6, 0.99) 50%, rgb(0, 1, 3) 100%);
z-index: 1;
overflow: hidden;
}
.cta-background:before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(17, 64, 132, 0.15) 0%, transparent 80%);
opacity: 0;
animation: deepWaterPulse 8s infinite alternate ease-in-out;
}
/* Water Effects */
.water-bubbles {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 10% 20%, rgba(52, 102, 170, 0.3) 0%, transparent 2%),
radial-gradient(circle at 80% 80%, rgba(130, 183, 220, 0.2) 0%, transparent 2%),
radial-gradient(circle at 40% 40%, rgba(17, 64, 132, 0.25) 0%, transparent 2%),
radial-gradient(circle at 70% 10%, rgba(241, 241, 241, 0.1) 0%, transparent 1%),
radial-gradient(circle at 20% 70%, rgba(52, 102, 170, 0.2) 0%, transparent 2%);
background-size: 100px 100px, 150px 150px, 80px 80px, 60px 60px, 120px 120px;
animation: bubbleFloat 20s infinite linear;
opacity: 0.6;
}
.water-ripples {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at center, transparent 20%, rgba(52, 102, 170, 0.1) 25%, transparent 30%),
radial-gradient(ellipse at 30% 70%, transparent 15%, rgba(130, 183, 220, 0.08) 20%, transparent 25%),
radial-gradient(ellipse at 70% 30%, transparent 10%, rgba(17, 64, 132, 0.12) 15%, transparent 20%);
background-size: 300px 300px, 250px 250px, 200px 200px;
animation: rippleWave 15s infinite ease-in-out;
opacity: 0.4;
}
.depth-particles {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 15% 85%, rgba(241, 241, 241, 0.8) 0%, transparent 1%),
radial-gradient(circle at 85% 15%, rgba(130, 183, 220, 0.6) 0%, transparent 1%),
radial-gradient(circle at 45% 25%, rgba(52, 102, 170, 0.7) 0%, transparent 1%),
radial-gradient(circle at 25% 45%, rgba(17, 64, 132, 0.5) 0%, transparent 1%),
radial-gradient(circle at 75% 75%, rgba(241, 241, 241, 0.6) 0%, transparent 1%);
background-size: 200px 200px, 180px 180px, 160px 160px, 140px 140px, 120px 120px;
animation: particleFloat 25s infinite linear;
opacity: 0.8;
}
.cta-content {
position: relative;
z-index: 2;
padding: 60px 40px;
}
.cta-title {
color: #f8f9fa;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
opacity: 0;
transform: translateY(30px);
animation: deepFadeUp 0.8s ease forwards 0.3s;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.cta-description {
color: #e9ecef;
font-size: 1.1rem;
margin-bottom: 25px;
max-width: 90%;
opacity: 0;
transform: translateY(30px);
animation: deepFadeUp 0.8s ease forwards 0.5s;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.cta-features {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: deepFadeUp 0.8s ease forwards 0.7s;
}
.feature {
display: flex;
align-items: center;
margin-right: 30px;
margin-bottom: 15px;
color: #f8f9fa;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.feature:hover {
transform: translateX(5px);
color: #82b7dc;
}
.feature i {
color: #82b7dc;
margin-right: 10px;
font-size: 1.1rem;
filter: drop-shadow(0 0 5px rgba(130, 183, 220, 0.5));
}
.cta-form-wrapper {
display: flex;
justify-content: flex-end;
}
.cta-form {
background: rgba(248, 249, 250, 0.08);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 15px;
padding: 30px;
width: 100%;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(130, 183, 220, 0.2);
opacity: 0;
transform: translateY(30px) scale(0.95);
animation: deepFadeUpScale 0.8s ease forwards 0.9s;
position: relative;
overflow: hidden;
}
.cta-form:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
rgba(130, 183, 220, 0) 0%,
rgba(130, 183, 220, 0.1) 50%,
rgba(130, 183, 220, 0) 100%);
animation: formShimmer 6s infinite;
}
.cta-form h3 {
color: #f8f9fa;
font-size: 1.5rem;
margin-bottom: 25px;
text-align: center;
font-weight: 600;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-control,
.form-select {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(130, 183, 220, 0.3);
color: #f8f9fa;
height: 50px;
border-radius: 10px;
padding: 10px 15px;
transition: all 0.4s ease;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.form-control:focus,
.form-select:focus {
background: rgba(255, 255, 255, 0.12);
border-color: #82b7dc;
box-shadow: 0 0 0 3px rgba(130, 183, 220, 0.2),
0 0 20px rgba(130, 183, 220, 0.3);
color: #f8f9fa;
transform: translateY(-2px);
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.submit-btn {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
color: #343a40;
border: none;
height: 50px;
border-radius: 10px;
padding: 10px 25px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.submit-btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
rgba(130, 183, 220, 0) 0%,
rgba(130, 183, 220, 0.6) 50%,
rgba(130, 183, 220, 0) 100%);
animation: deepShimmerBtn 4s infinite;
}
.submit-btn span {
margin-right: 10px;
position: relative;
z-index: 2;
}
.submit-btn i {
position: relative;
z-index: 2;
transition: transform 0.4s ease;
}
.submit-btn:hover {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3),
0 0 20px rgba(130, 183, 220, 0.4);
}
.submit-btn:hover i {
transform: translateX(8px);
}
/* Enhanced Animations */
@keyframes deepFadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes deepFadeUpScale {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes deepWaterPulse {
0% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.1);
}
100% {
opacity: 0.1;
transform: scale(0.9);
}
}
@keyframes bubbleFloat {
0% {
transform: translateY(0) translateX(0);
}
25% {
transform: translateY(-20px) translateX(10px);
}
50% {
transform: translateY(-10px) translateX(-5px);
}
75% {
transform: translateY(-30px) translateX(15px);
}
100% {
transform: translateY(0) translateX(0);
}
}
@keyframes rippleWave {
0% {
transform: scale(1) rotate(0deg);
opacity: 0.4;
}
50% {
transform: scale(1.1) rotate(180deg);
opacity: 0.6;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 0.4;
}
}
@keyframes particleFloat {
0% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-15px) rotate(120deg);
}
66% {
transform: translateY(-25px) rotate(240deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
@keyframes deepShimmerBtn {
0% {
left: -100%;
}
100% {
left: 200%;
}
}
@keyframes formShimmer {
0% {
left: -100%;
}
100% {
left: 200%;
}
}
/* Scroll-triggered water depth effect */
.cta-section.deep-water {
background: radial-gradient(at center top, rgba(2, 8, 16, 0.98) 0%, transparent 50%),
linear-gradient(rgba(0, 4, 10, 0.99) 0%, rgba(0, 1, 4, 1) 50%, rgb(0, 0, 2) 100%);
}
.cta-section.deep-water .cta-card {
transform: translateY(-20px);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.6);
}
.cta-section.deep-water .water-bubbles {
animation-duration: 15s;
opacity: 0.8;
}
.cta-section.deep-water .water-ripples {
animation-duration: 10s;
opacity: 0.6;
}
.cta-section.deep-water .depth-particles {
animation-duration: 18s;
opacity: 1;
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.cta-form-wrapper {
justify-content: center;
margin-top: 40px;
}
.cta-form {
max-width: 500px;
}
.cta-title {
font-size: 2rem;
}
.cta-content {
padding: 40px 30px;
}
}
@media (max-width: 767.98px) {
.cta-section {
padding: 60px 0;
}
.cta-title {
font-size: 1.8rem;
}
.cta-description {
font-size: 1rem;
}
.cta-content {
padding: 30px 20px;
}
.feature {
margin-right: 15px;
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.cta-features {
flex-direction: column;
}
.feature {
margin-bottom: 10px;
}
.cta-form {
padding: 25px 20px;
}
}