/* Reset and Base Styles */
html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.98);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
z-index: 1000;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
gap: 60px;
}
.nav-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex: 1;
}
.nav-right {
display: flex;
align-items: center;
gap: 30px;
}
.nav-logo-left,
.nav-logo-right {
height: 90px;
width: auto;
object-fit: contain;
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
padding: 0;
margin: 0;
image-rendering: crisp-edges;
}
.nav-logo {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 700;
color: #000000;
text-align: center;
position: relative;
}
.nav-logo span {
font-size: 0.7rem;
font-weight: 800;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.1;
text-shadow: none;
border-bottom: none;
padding-bottom: 0;
margin-top: 2px;
}
.nav-separator-line {
width: 65px;
height: 1px;
background-color: #000000;
margin: 2px auto;
display: block;
}
.nav-logo i {
display: none;
}
/* AWS Complete Logo with Curve */
.aws-logo-complete {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1px;
}
.aws-logo-complete i {
display: block !important;
font-size: 1.1rem;
color: #FF9900;
margin-bottom: 1px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2.2rem;
}
.nav-link {
text-decoration: none;
color: #000000;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: #FF9900;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-link:hover {
color: #FF9900;
text-shadow: 0 0 8px rgba(255, 153, 0, 0.6);
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: #000000;
margin: 3px 0;
transition: 0.3s;
}
/* Mobile Responsive Navbar Logo */
@media (max-width: 768px) {
.nav-logo span {
display: block !important;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.3px;
line-height: 1.0;
margin-top: 1px;
}
.nav-separator-line {
width: 50px;
height: 1px;
margin: 1px auto;
}
.aws-logo-complete i {
font-size: 0.9rem;
margin-bottom: 1px;
}
.aws-curve {
width: 22px;
height: 3px;
border-radius: 0 0 12px 12px;
}
.aws-logo-complete {
margin-bottom: 0px;
}
}
@media (max-width: 480px) {
.nav-logo span {
display: block !important;
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.2px;
margin-top: 0px;
}
.nav-separator-line {
width: 40px;
margin: 1px auto;
}
.aws-logo-complete i {
font-size: 0.8rem;
margin-bottom: 0px;
}
.aws-curve {
width: 18px;
height: 2px;
border-radius: 0 0 10px 10px;
}
}
@media (max-width: 320px) {
.nav-logo span {
display: block !important;
font-size: 0.45rem;
line-height: 0.9;
}
.nav-separator-line {
width: 35px;
}
.aws-logo-complete i {
font-size: 0.7rem;
}
.aws-curve {
width: 16px;
height: 2px;
border-radius: 0 0 8px 8px;
}
}
/* Hero Section - Minimalistic & Compact Design */
.hero {
min-height: 85vh;
background: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #718096 100%);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 90px 0 40px 0; /* Adjusted top padding for smaller navbar */
width: 100%;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(255, 153, 0, 0.06) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(255, 153, 0, 0.04) 0%, transparent 50%);
}
.hero-container {
max-width: 1400px;
width: 95%;
margin: 0 auto;
padding: 40px 20px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 2rem;
align-items: center;
justify-items: center;
position: relative;
z-index: 2;
min-height: 70vh;
}
.hero-content {
color: white;
padding: 2rem 0;
max-width: 800px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
/* Hero Side Animations */
.hero-side-animations {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
opacity: 0.9;
overflow: hidden;
}
.hero-side-animations.left {
justify-self: start;
}
.hero-side-animations.right {
justify-self: end;
}
.floating-element {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 153, 0, 0.15), rgba(255, 173, 51, 0.25), rgba(255, 107, 53, 0.2));
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 153, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 153, 0, 0.1);
}
.circle-1 {
width: 80px;
height: 80px;
top: 15%;
left: 5%;
animation: orbitMotion 12s linear infinite;
background: radial-gradient(circle at 30% 30%, rgba(255, 153, 0, 0.3), rgba(255, 173, 51, 0.1));
}
.circle-2 {
width: 50px;
height: 50px;
top: 65%;
left: 40%;
animation: morphShape 8s ease-in-out infinite;
animation-delay: 2s;
background: conic-gradient(from 45deg, rgba(255, 153, 0, 0.2), rgba(255, 173, 51, 0.3), rgba(255, 107, 53, 0.2));
}
.circle-3 {
width: 60px;
height: 60px;
top: 25%;
right: 15%;
animation: elasticBounce 6s ease-in-out infinite;
animation-delay: 1s;
background: linear-gradient(45deg, rgba(255, 153, 0, 0.2), transparent, rgba(255, 173, 51, 0.3));
}
.triangle-1 {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 40px solid rgba(255, 153, 0, 0.4);
border-radius: 0;
background: none;
top: 40%;
left: 25%;
animation: spinAndFloat 15s ease-in-out infinite;
filter: drop-shadow(0 4px 8px rgba(255, 153, 0, 0.2));
}
.square-1 {
width: 55px;
height: 55px;
border-radius: 12px;
top: 45%;
right: 35%;
animation: cubeRotate 10s ease-in-out infinite;
animation-delay: 3s;
background: linear-gradient(45deg, rgba(255, 153, 0, 0.25), rgba(255, 173, 51, 0.15));
border: 1px solid rgba(255, 153, 0, 0.4);
}
.hexagon-1 {
width: 65px;
height: 65px;
border-radius: 0;
background: conic-gradient(from 0deg, rgba(255, 153, 0, 0.3), rgba(255, 173, 51, 0.2), rgba(255, 107, 53, 0.25), rgba(255, 153, 0, 0.3));
clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
top: 75%;
right: 5%;
animation: hexagonPulse 7s ease-in-out infinite;
filter: drop-shadow(0 6px 12px rgba(255, 153, 0, 0.15));
}
.code-snippet {
position: absolute;
top: 85%;
left: 15%;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: rgba(255, 153, 0, 0.8);
display: flex;
flex-direction: column;
gap: 3px;
animation: matrixEffect 10s ease-in-out infinite;
padding: 8px;
background: rgba(0, 0, 0, 0.1);
border-radius: 6px;
border-left: 3px solid rgba(255, 153, 0, 0.5);
}
.code-snippet span {
opacity: 0;
animation: glitchText 10s ease-in-out infinite;
text-shadow: 0 0 5px rgba(255, 153, 0, 0.3);
}
.code-snippet span:nth-child(1) {
animation-delay: 0s;
}
.code-snippet span:nth-child(2) {
animation-delay: 0.8s;
}
.code-snippet span:nth-child(3) {
animation-delay: 1.6s;
}
.tech-icons {
position: absolute;
top: 10%;
right: 25%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
font-size: 1.4rem;
color: rgba(255, 153, 0, 0.7);
}
.tech-icons i {
animation: techIconDance 4s ease-in-out infinite;
transition: all 0.3s ease;
text-shadow: 0 2px 8px rgba(255, 153, 0, 0.2);
}
.tech-icons i:nth-child(1) {
animation-delay: 0s;
}
.tech-icons i:nth-child(2) {
animation-delay: 0.3s;
}
.tech-icons i:nth-child(3) {
animation-delay: 0.6s;
}
.tech-icons i:nth-child(4) {
animation-delay: 0.9s;
}
/* Animation Keyframes */
@keyframes orbitMotion {
0% {
transform: rotate(0deg) translateX(30px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(30px) rotate(-360deg);
}
}
@keyframes morphShape {
0%, 100% {
border-radius: 50%;
transform: scale(1) rotate(0deg);
}
25% {
border-radius: 20%;
transform: scale(1.2) rotate(45deg);
}
50% {
border-radius: 0%;
transform: scale(0.8) rotate(90deg);
}
75% {
border-radius: 30%;
transform: scale(1.1) rotate(135deg);
}
}
@keyframes elasticBounce {
0%, 100% {
transform: translateY(0px) scaleY(1);
}
25% {
transform: translateY(-15px) scaleY(1.3);
}
50% {
transform: translateY(-25px) scaleY(0.8);
}
75% {
transform: translateY(-10px) scaleY(1.1);
}
}
@keyframes spinAndFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
}
25% {
transform: translateY(-10px) rotate(90deg) scale(1.1);
}
50% {
transform: translateY(-20px) rotate(180deg) scale(0.9);
}
75% {
transform: translateY(-10px) rotate(270deg) scale(1.05);
}
}
@keyframes cubeRotate {
0%, 100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
border-radius: 12px;
}
25% {
transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
border-radius: 50%;
}
50% {
transform: rotateX(90deg) rotateY(90deg) rotateZ(45deg);
border-radius: 8px;
}
75% {
transform: rotateX(135deg) rotateY(135deg) rotateZ(90deg);
border-radius: 25%;
}
}
@keyframes hexagonPulse {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.7;
filter: hue-rotate(0deg);
}
50% {
transform: scale(1.3) rotate(180deg);
opacity: 1;
filter: hue-rotate(30deg);
}
}
@keyframes matrixEffect {
0%, 100% {
transform: translateY(0px);
opacity: 0.8;
}
25% {
transform: translateY(-5px);
opacity: 1;
}
50% {
transform: translateY(-8px);
opacity: 0.9;
}
75% {
transform: translateY(-3px);
opacity: 0.95;
}
}
@keyframes glitchText {
0%, 15% {
opacity: 0;
transform: translateX(0px);
}
20%, 80% {
opacity: 1;
transform: translateX(0px);
}
25% {
transform: translateX(2px);
}
30% {
transform: translateX(-1px);
}
35% {
transform: translateX(1px);
}
40%, 75% {
transform: translateX(0px);
}
85%, 100% {
opacity: 0;
transform: translateX(0px);
}
}
@keyframes techIconDance {
0%, 100% {
transform: translateY(0px) scale(1) rotate(0deg);
}
25% {
transform: translateY(-8px) scale(1.2) rotate(5deg);
}
50% {
transform: translateY(-12px) scale(1.1) rotate(-3deg);
}
75% {
transform: translateY(-6px) scale(1.15) rotate(2deg);
}
}
/* Responsive Design for Hero Animations */
@media (max-width: 1024px) {
.hero-container {
grid-template-columns: 1fr;
gap: 1rem;
text-align: center;
}
.hero-side-animations {
display: none;
}
}
@media (max-width: 768px) {
.hero-side-animations {
display: none;
}
}
.hero-title {
font-size: 2.1rem; /* Reduced from 2.4rem */
font-weight: 700;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem; /* Reduced from 0.6rem */
line-height: 1.1;
text-align: center;
}
.title-main {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.aws-logo-hero {
font-size: 2.2rem; /* Reduced from 2.6rem */
color: #FF9900;
animation: aws-glow 3s ease-in-out infinite alternate;
filter: drop-shadow(0 0 8px rgba(255, 153, 0, 0.3));
margin-right: 2px; /* Added slight spacing */
}
@keyframes aws-glow {
0% {
filter: drop-shadow(0 0 8px rgba(255, 153, 0, 0.3));
transform: scale(1);
}
100% {
filter: drop-shadow(0 0 12px rgba(255, 153, 0, 0.45)); /* Reduced from 15px */
transform: scale(1.02); /* Reduced from 1.03 */
}
}
.highlight {
background: linear-gradient(45deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.1rem; /* Reduced from 2.4rem */
}
.year {
font-size: 2.4rem; /* Reduced from 2.8rem */
font-weight: 800;
opacity: 0.9;
margin-left: 0;
}
.industry-academia {
margin: 1rem 0;
text-align: center;
}
.industry-text {
font-size: 1.2rem;
font-weight: 600;
color: #FF9900;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(45deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(255, 153, 0, 0.3);
}
.hero-subtitle {
font-size: 1.1rem;
margin: 1.5rem auto;
opacity: 0.9;
max-width: 600px;
line-height: 1.6;
font-weight: 400;
text-align: center;
}
.hero-details {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin: 1rem auto;
max-width: 400px;
width: 100%;
align-items: center;
}
.detail-item {
display: flex;
align-items: center;
gap: 0.5rem; /* Reduced from 0.6rem */
font-size: 0.8rem; /* Reduced from 0.9rem */
padding: 3px 0; /* Reduced from 4px 0 */
}
.detail-item i {
color: #FF9900;
width: 16px; /* Reduced from 18px */
font-size: 0.8rem; /* Reduced from 0.9rem */
text-align: center;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1.5rem 0;
justify-content: center;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.9rem;
min-width: 120px;
}
.btn-primary {
background: linear-gradient(45deg, #FF9900, #FFAD33);
color: white;
box-shadow: 0 4px 15px rgba(255, 153, 0, 0.25);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 153, 0, 0.35);
}
.btn-secondary {
background: transparent;
color: white;
border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.5);
}
.btn-full {
width: 100%;
}
/* Hero Image Section - Removed for centered layout */
.hero-image {
display: none;
}
/* Floating Cards - Hidden for centered layout */
.floating-card {
display: none;
}
.floating-card:hover {
transform: scale(1.08) translateY(-5px);
background: rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 30px rgba(255, 165, 0, 0.2);
border-color: rgba(255, 153, 0, 0.4);
}
.floating-card i {
font-size: 1.8rem;
color: #FF9900;
margin-bottom: 0.2rem;
transition: all 0.3s ease;
}
.floating-card:hover i {
transform: scale(1.1);
filter: drop-shadow(0 0 8px rgba(255, 153, 0, 0.4));
}
.floating-card span {
font-weight: 600;
font-size: 0.8rem;
text-align: center;
line-height: 1.2;
}
.card-1 {
top: 25%;
left: 15%;
animation: orbitClockwise 18s ease-in-out infinite;
z-index: 4;
}
.card-2 {
top: 65%;
right: 25%;
animation: orbitCounterClockwise 22s ease-in-out infinite;
z-index: 3;
}
.card-3 {
top: 35%;
right: 35%;
animation: orbitClockwise 26s ease-in-out infinite;
animation-direction: reverse;
z-index: 2;
}
.card-4 {
top: 15%;
right: 10%;
animation: orbitCounterClockwise 16s ease-in-out infinite;
z-index: 1;
}
@keyframes orbitClockwise {
0% {
transform: rotate(0deg) translateX(50px) rotate(0deg) scale(1);
}
25% {
transform: rotate(90deg) translateX(50px) rotate(-90deg) scale(1.05);
}
50% {
transform: rotate(180deg) translateX(50px) rotate(-180deg) scale(1);
}
75% {
transform: rotate(270deg) translateX(50px) rotate(-270deg) scale(1.05);
}
100% {
transform: rotate(360deg) translateX(50px) rotate(-360deg) scale(1);
}
}
@keyframes orbitCounterClockwise {
0% {
transform: rotate(0deg) translateX(40px) rotate(0deg) scale(1);
}
25% {
transform: rotate(-90deg) translateX(40px) rotate(90deg) scale(1.05);
}
50% {
transform: rotate(-180deg) translateX(40px) rotate(180deg) scale(1);
}
75% {
transform: rotate(-270deg) translateX(40px) rotate(270deg) scale(1.05);
}
100% {
transform: rotate(-360deg) translateX(40px) rotate(360deg) scale(1);
}
}
@keyframes floatComplex {
0% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0.8;
}
25% {
transform: translateY(-30px) translateX(10px) rotate(2deg);
opacity: 1;
}
50% {
transform: translateY(-40px) translateX(-5px) rotate(-1deg);
opacity: 0.9;
}
75% {
transform: translateY(-20px) translateX(15px) rotate(1deg);
opacity: 1;
}
100% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0.8;
}
}
.hero-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #FF9900;
border-radius: 50%;
animation: particleFloat 15s linear infinite;
opacity: 0.6;
}
.particle:nth-child(1) {
top: 20%;
left: 20%;
animation-delay: 0s;
animation-duration: 12s;
}
.particle:nth-child(2) {
top: 40%;
left: 80%;
animation-delay: 3s;
animation-duration: 18s;
}
.particle:nth-child(3) {
top: 70%;
left: 10%;
animation-delay: 6s;
animation-duration: 14s;
}
.particle:nth-child(4) {
top: 80%;
left: 70%;
animation-delay: 9s;
animation-duration: 16s;
}
.particle:nth-child(5) {
top: 10%;
left: 60%;
animation-delay: 12s;
animation-duration: 20s;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes particleFloat {
0% {
transform: translateY(0px) translateX(0px);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.6;
}
100% {
transform: translateY(-100px) translateX(50px);
opacity: 0;
}
}
/* Hero Section Responsive Optimization for 1920x1080 @ 125% */
@media (min-width: 1536px) and (max-width: 1920px) {
.hero-container {
max-width: 1480px;
width: 92%;
padding: 60px 30px;
gap: 60px;
min-height: 80vh;
}
.hero-title {
font-size: 2.8rem;
}
.aws-logo-hero {
font-size: 3rem;
}
.highlight {
font-size: 2.8rem;
}
.year {
font-size: 3.4rem;
}
.hero-subtitle {
font-size: 1.2rem;
max-width: 550px;
}
.hero-details {
gap: 1rem;
max-width: 550px;
}
.detail-item {
font-size: 1rem;
}
.btn {
padding: 12px 24px;
font-size: 1rem;
min-width: 140px;
}
.hero-image {
height: 500px;
}
.floating-card {
padding: 1.5rem 1.8rem;
min-width: 120px;
max-width: 140px;
}
.floating-card i {
font-size: 2.2rem;
}
.floating-card span {
font-size: 0.95rem;
}
}
@media (min-width: 1921px) {
.hero-container {
max-width: 1600px;
width: 90%;
padding: 80px 40px;
gap: 80px;
}
.hero-title {
font-size: 3.5rem;
}
.aws-logo-hero {
font-size: 3.8rem;
}
.highlight {
font-size: 3.5rem;
}
.year {
font-size: 4.2rem;
}
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
padding: 1rem 0;
}
.section-header h2 {
font-size: 3rem;
font-weight: 800;
margin: 1.5rem 0 1rem 0;
color: #FF9900;
position: relative;
letter-spacing: -1px;
line-height: 1.2;
}
.section-header p {
font-size: 1.2rem;
color: #555;
max-width: 700px;
margin: 0 auto;
font-weight: 400;
line-height: 1.7;
position: relative;
padding: 0 20px;
}
@keyframes pulse-glow {
0%, 100% {
opacity: 0.3;
transform: translateY(-50%) scale(1);
}
50% {
opacity: 0.7;
transform: translateY(-50%) scale(1.2);
}
}
/* Section Header Responsive */
@media (max-width: 768px) {
.section-header {
margin-bottom: 3rem;
padding: 1.5rem 0;
}
.section-header h2 {
font-size: 2.2rem;
margin: 1rem 0;
color: #FF9900;
}
.section-header p {
font-size: 1rem;
max-width: 90%;
padding: 0 15px;
}
}
@media (max-width: 480px) {
.section-header {
margin-bottom: 2.5rem;
padding: 1rem 0;
}
.section-header h2 {
font-size: 1.8rem;
margin: 0.8rem 0;
letter-spacing: -0.5px;
color: #FF9900;
}
.section-header p {
font-size: 0.95rem;
line-height: 1.6;
padding: 0 10px;
}
}
/* Text Alignment Utilities */
.text-center {
text-align: center !important;
}
/* About Section */
.about {
padding: 5rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 153, 0, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 153, 0, 0.02) 0%, transparent 50%);
z-index: 0;
}
.about .container {
position: relative;
z-index: 1;
}
.about-heading-orange {
color: #FF9900 !important;
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 10px rgba(255, 153, 0, 0.2);
}
.about-content-single {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.about-description {
padding: 0;
}
.about-description p {
font-size: 1.2rem;
line-height: 1.8;
color: #555;
margin-bottom: 2rem;
text-align: justify;
text-align-last: center;
}
.about-description p:last-of-type {
margin-bottom: 3rem;
}
.about-highlights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
margin-top: 4rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.highlight-item {
text-align: center;
padding: 2.5rem 2rem;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
border: 1px solid rgba(255, 153, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.highlight-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #FF9900, #FFAD33);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.highlight-item:hover::before {
transform: scaleX(1);
}
.highlight-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(255, 153, 0, 0.15);
border-color: rgba(255, 153, 0, 0.3);
}
.highlight-item i {
font-size: 3rem;
color: #FF9900;
margin-bottom: 1.5rem;
display: block;
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: iconPulse 2s ease-in-out infinite;
}
.highlight-item span {
font-size: 1.1rem;
font-weight: 600;
color: #333;
display: block;
letter-spacing: 0.5px;
}
@keyframes iconPulse {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 5px rgba(255, 153, 0, 0.3));
}
50% {
transform: scale(1.05);
filter: drop-shadow(0 0 15px rgba(255, 153, 0, 0.5));
}
}
@media (max-width: 768px) {
.about-highlights {
grid-template-columns: 1fr;
gap: 2rem;
}
.highlight-item {
padding: 2rem 1.5rem;
}
.about-description p {
text-align: center;
font-size: 1.1rem;
}
}
/* Previous Event Section */
.previous-event {
padding: 5rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.previous-event::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 153, 0, 0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 153, 0, 0.03) 0%, transparent 50%);
z-index: 0;
}
.previous-event .container {
position: relative;
z-index: 1;
}
.previous-event-heading-orange {
color: #FF9900 !important;
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 10px rgba(255, 153, 0, 0.2);
}
.previous-event-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
margin-bottom: 4rem;
}
.event-introduction p {
font-size: 1.2rem;
line-height: 1.8;
color: #555;
margin-bottom: 2rem;
text-align: justify;
}
.event-achievements {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 3rem;
}
.achievement-item {
display: flex;
align-items: center;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
border-radius: 18px;
border: 2px solid rgba(255, 153, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.05),
0 0 12px rgba(255, 153, 0, 0.03);
min-height: 100px;
}
.achievement-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 153, 0, 0.02) 0%,
rgba(255, 173, 51, 0.01) 50%,
rgba(255, 153, 0, 0.03) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.achievement-item:hover::before {
opacity: 1;
}
.achievement-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 15px 35px rgba(255, 153, 0, 0.15),
0 0 25px rgba(255, 153, 0, 0.08);
border-color: rgba(255, 153, 0, 0.25);
}
.achievement-icon {
width: 50px;
height: 50px;
margin-right: 1.5rem;
background: linear-gradient(135deg, #FF9900, #FFAD33);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.4rem;
box-shadow:
0 5px 15px rgba(255, 153, 0, 0.25),
inset 0 0 12px rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
flex-shrink: 0;
}
.achievement-item:hover .achievement-icon {
transform: scale(1.05) rotateY(180deg);
box-shadow:
0 8px 25px rgba(255, 153, 0, 0.35),
inset 0 0 20px rgba(255, 255, 255, 0.3);
}
.achievement-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.achievement-number {
display: block;
font-size: 1.8rem;
font-weight: 900;
color: #FF9900;
line-height: 1;
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.3rem;
transition: all 0.3s ease;
}
.achievement-label {
font-size: 0.8rem;
color: #666;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.achievement-item:hover .achievement-number {
transform: scale(1.05);
filter: brightness(1.1);
}
/* Previous Event Actions */
.previous-event-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-top: 2rem;
flex-wrap: wrap;
}
.btn-previous-year {
background: linear-gradient(135deg, #FF9900, #FFAD33);
color: white;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
display: inline-flex;
align-items: center;
gap: 0.8rem;
transition: all 0.3s ease;
border: none;
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.3);
position: relative;
overflow: hidden;
}
.btn-previous-year::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-previous-year:hover::before {
left: 100%;
}
.btn-previous-year:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 153, 0, 0.4);
background: linear-gradient(135deg, #FFAD33, #FF9900);
}
.btn-secondary-outline {
background: transparent;
color: #FF9900;
padding: 1rem 2rem;
border: 2px solid #FF9900;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
display: inline-flex;
align-items: center;
gap: 0.8rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-secondary-outline::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: linear-gradient(135deg, #FF9900, #FFAD33);
transition: width 0.3s ease;
z-index: -1;
}
.btn-secondary-outline:hover::before {
width: 100%;
}
.btn-secondary-outline:hover {
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.3);
}
@media (max-width: 768px) {
.previous-event-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.event-achievements {
grid-template-columns: 1fr;
gap: 1rem;
}
.achievement-item {
padding: 1.5rem 2rem;
min-height: 100px;
}
.achievement-icon {
width: 45px;
height: 45px;
margin-right: 1.5rem;
font-size: 1.3rem;
}
.achievement-number {
font-size: 1.8rem;
}
.achievement-label {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.achievement-item {
padding: 1.2rem 1.5rem;
min-height: 90px;
}
.achievement-icon {
width: 40px;
height: 40px;
margin-right: 1.2rem;
font-size: 1.1rem;
}
.achievement-number {
font-size: 1.6rem;
}
.achievement-label {
font-size: 0.75rem;
}
}
.previous-event-actions {
flex-direction: column;
align-items: center;
}
.btn-previous-year,
.btn-secondary-outline {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* Event Gallery */
.event-gallery {
position: relative;
}
.gallery-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.12),
0 0 25px rgba(255, 153, 0, 0.08);
border: 1px solid rgba(255, 153, 0, 0.1);
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
}
.gallery-slide {
display: none;
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
animation: slideOut 0.8s ease-in-out;
}
.gallery-slide.active {
display: block;
animation: slideIn 0.8s ease-in-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100%) scale(1.03);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(-100%) scale(0.97);
}
}
.gallery-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(1.02) contrast(1.05) saturate(1.08);
}
.gallery-slide:hover img {
transform: scale(1.05);
filter: brightness(1.08) contrast(1.1) saturate(1.15);
}
.gallery-slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 153, 0, 0.04) 0%,
rgba(255, 173, 51, 0.02) 30%,
transparent 60%,
rgba(0, 0, 0, 0.03) 100%
);
pointer-events: none;
transition: opacity 0.3s ease;
}
.gallery-slide:hover::after {
opacity: 0.8;
}
/* Auto-slide progress indicator */
.gallery-container::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, #FF9900, #FFAD33);
border-radius: 2px 2px 0 0;
z-index: 10;
animation: progressBar 4s linear infinite;
}
@keyframes progressBar {
0% {
width: 0%;
opacity: 0.7;
}
95% {
opacity: 1;
}
100% {
width: 100%;
opacity: 0.5;
}
}
/* Event Testimonials */
.event-testimonials {
margin-top: 3rem;
text-align: center;
}
.event-testimonials h3 {
font-size: 2.2rem;
font-weight: 700;
color: #232F3E;
margin-bottom: 3rem;
position: relative;
}
.event-testimonials h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, #FF9900, #FFAD33);
border-radius: 2px;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.testimonial-card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 153, 0, 0.1);
transition: all 0.3s ease;
position: relative;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: -10px;
left: 20px;
font-size: 4rem;
color: #FF9900;
opacity: 0.3;
font-family: Georgia, serif;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(255, 153, 0, 0.15);
}
.testimonial-content p {
font-size: 1rem;
line-height: 1.6;
color: #555;
margin-bottom: 1.5rem;
font-style: italic;
}
.testimonial-author {
display: flex;
justify-content: space-between;
align-items: center;
}
.author-info h4 {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 0.3rem;
}
.author-info span {
font-size: 0.9rem;
color: #666;
}
.testimonial-rating {
color: #FF9900;
font-size: 0.9rem;
}
@keyframes trophyGlow {
0%, 100% {
text-shadow: 0 0 10px rgba(255, 153, 0, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(255, 153, 0, 0.6);
}
}
/* Slideshow Styles */
.about-slideshow {
position: relative;
animation: fadeInRight 1s ease-out 0.4s both;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slideshow-container {
position: relative;
max-width: 100%;
margin: auto;
background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(255, 153, 0, 0.1),
0 0 20px rgba(255, 153, 0, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.slideshow-container::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
rgba(255, 153, 0, 0.1) 0%,
rgba(255, 173, 51, 0.1) 25%,
rgba(255, 153, 0, 0.05) 50%,
rgba(255, 173, 51, 0.1) 75%,
rgba(255, 153, 0, 0.1) 100%);
border-radius: 22px;
z-index: -1;
animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.02);
}
}
.slideshow-container:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 30px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 153, 0, 0.2),
0 0 30px rgba(255, 153, 0, 0.1);
}
.slide {
display: none;
position: relative;
overflow: hidden;
}
.slide.active {
display: block;
animation: slideInScale 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInScale {
from {
opacity: 0;
transform: scale(1.1);
}
to {
opacity: 1;
transform: scale(1);
}
}
.slide img {
width: 100%;
height: 380px;
object-fit: cover;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(1.05) contrast(1.1) saturate(1.1);
}
.slide:hover img {
transform: scale(1.08);
filter: brightness(1.1) contrast(1.15) saturate(1.2);
}
.slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 153, 0, 0.08) 0%,
rgba(255, 173, 51, 0.03) 30%,
transparent 60%,
rgba(0, 0, 0, 0.05) 100%
);
pointer-events: none;
transition: opacity 0.3s ease;
}
.slide:hover::after {
opacity: 0.7;
}
.slideshow-nav {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
background: rgba(0, 0, 0, 0.25);
padding: 12px 18px;
border-radius: 30px;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
animation: slideUpNav 0.8s ease-out 1.2s both;
}
@keyframes slideUpNav {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.dot {
cursor: pointer;
height: 14px;
width: 14px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50%;
display: inline-block;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #FF9900;
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translate(-50%, -50%);
}
.dot:hover {
background-color: rgba(255, 255, 255, 0.7);
transform: scale(1.2);
border-color: rgba(255, 153, 0, 0.3);
}
.dot:hover::before {
width: 8px;
height: 8px;
}
.dot.active {
background-color: #FF9900;
border: 2px solid white;
box-shadow:
0 0 15px rgba(255, 153, 0, 0.6),
0 0 5px rgba(255, 153, 0, 0.8);
transform: scale(1.1);
}
.dot.active::before {
width: 6px;
height: 6px;
background: white;
}
.dot:hover,
.dot.active {
background-color: #FF9900;
transform: scale(1.2);
}
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.about-card {
background: white;
padding: 2.5rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.about-card:hover {
transform: translateY(-10px);
}
.card-icon {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #8B5CF6, #A78BFA);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.card-icon i {
font-size: 2rem;
color: white;
}
.about-card h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #232F3E;
}
.about-card p {
color: #666;
line-height: 1.6;
}
/* Countdown Timer Section - Optimized for 1920x1080@125% */
.countdown {
padding: 3.5rem 0; /* Reduced from 6rem */
background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
position: relative;
overflow: hidden;
}
.countdown::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
}
.countdown::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(255, 153, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(255, 153, 0, 0.08) 0%, transparent 50%);
}
.countdown-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
max-width: 1000px; /* Added max-width for better centering */
margin: 0 auto;
padding: 0 20px;
}
.countdown-header {
margin-bottom: 2.5rem; /* Reduced from 4rem */
animation: fadeInUp 0.8s ease-out;
}
.countdown-header h2 {
font-size: 2.8rem; /* Reduced from 3.5rem */
font-weight: 700;
margin-bottom: 0.8rem; /* Reduced from 1rem */
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 10px rgba(255, 153, 0, 0.3);
animation: titleGlow 2s ease-in-out infinite alternate;
}
@keyframes titleGlow {
from {
filter: drop-shadow(0 0 5px rgba(255, 153, 0, 0.3));
}
to {
filter: drop-shadow(0 0 15px rgba(255, 153, 0, 0.6));
}
}
.countdown-header p {
font-size: 1.1rem; /* Reduced from 1.3rem */
opacity: 0.9;
margin-bottom: 1.2rem; /* Reduced from 1.5rem */
font-weight: 500;
}
.event-date {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem; /* Reduced from 0.8rem */
font-size: 0.95rem; /* Reduced from 1.1rem */
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 0.8rem 1.5rem; /* Reduced from 1rem 2rem */
border-radius: 50px;
border: 1px solid rgba(255, 153, 0, 0.3);
max-width: fit-content;
margin: 0 auto;
animation: dateShimmer 3s ease-in-out infinite;
}
@keyframes dateShimmer {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 153, 0, 0.3);
border-color: rgba(255, 153, 0, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(255, 153, 0, 0.6);
border-color: rgba(255, 153, 0, 0.6);
}
}
.event-date i {
color: #FF9900;
font-size: 1rem; /* Reduced from 1.2rem */
}
.timer-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1.2rem; /* Reduced from 2rem */
margin-bottom: 2.5rem; /* Reduced from 4rem */
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.3s both;
}
.timer-box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
animation: timerPulse 2s ease-in-out infinite;
}
.timer-box:hover {
animation: timerHover 0.6s ease-out forwards;
}
@keyframes timerPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
@keyframes timerHover {
0% {
transform: scale(1);
}
100% {
transform: scale(1.05); /* Reduced from 1.1 */
}
}
.timer-circle {
position: relative;
z-index: 3;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 153, 0, 0.4);
border-radius: 50%;
width: 100px; /* Reduced from 120px */
height: 100px; /* Reduced from 120px */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.3), /* Reduced shadow */
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.timer-circle:hover {
border-color: rgba(255, 153, 0, 0.8);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.4), /* Reduced shadow */
0 0 20px rgba(255, 153, 0, 0.4), /* Reduced glow */
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.timer-progress {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.progress-ring {
transform: rotate(-90deg);
width: 100px; /* Adjusted to match timer-circle */
height: 100px;
}
.progress-ring-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 3; /* Reduced from 4 */
}
.progress-ring-fill {
fill: none;
stroke: #FF9900;
stroke-width: 3; /* Reduced from 4 */
stroke-linecap: round;
stroke-dasharray: 282.743; /* Adjusted for smaller radius: 2 * π * 45 */
stroke-dashoffset: 282.743;
transition: stroke-dashoffset 0.5s ease-in-out;
filter: drop-shadow(0 0 6px rgba(255, 153, 0, 0.6)); /* Reduced glow */
}
.timer-number {
font-size: 1.8rem; /* Reduced from 2.2rem */
font-weight: 700;
color: white;
margin-bottom: 0.1rem; /* Reduced from 0.2rem */
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
animation: numberGlow 2s ease-in-out infinite alternate;
}
@keyframes numberGlow {
from {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
to {
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}
}
.timer-label {
font-size: 0.75rem; /* Reduced from 0.9rem */
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.8px; /* Reduced from 1px */
}
.timer-separator {
font-size: 2.2rem; /* Reduced from 3rem */
font-weight: 700;
color: #FF9900;
opacity: 0.8;
animation: separatorBlink 2s ease-in-out infinite;
text-shadow: 0 0 8px rgba(255, 153, 0, 0.6); /* Reduced glow */
}
@keyframes separatorBlink {
0%, 50% {
opacity: 0.8;
}
75%, 100% {
opacity: 0.3;
}
}
.countdown-message {
margin-bottom: 2rem; /* Reduced from 3rem */
animation: fadeInUp 1s ease-out 0.6s both;
}
.countdown-message p {
font-size: 1rem; /* Reduced from 1.2rem */
opacity: 0.9;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 0.8rem 1.5rem; /* Reduced from 1rem 2rem */
border-radius: 25px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: inline-block;
margin: 0;
}
.countdown-actions {
display: flex;
justify-content: center;
gap: 1rem; /* Reduced from 1.5rem */
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.9s both;
}
.countdown-actions .btn {
padding: 10px 20px; /* Reduced from 14px 28px */
font-size: 0.95rem; /* Reduced from 1.1rem */
border-radius: 50px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.countdown-actions .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.countdown-actions .btn:hover::before {
left: 100%;
}
.countdown-actions .btn-primary {
background: linear-gradient(45deg, #FF9900, #FFAD33);
box-shadow: 0 6px 25px rgba(255, 153, 0, 0.4);
}
.countdown-actions .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(255, 153, 0, 0.6);
}
.countdown-actions .btn-secondary {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.countdown-actions .btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 153, 0, 0.6);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.3);
}
/* Event Started/Ended State */
.countdown.event-started .timer-container {
opacity: 0.5;
filter: grayscale(1);
}
.countdown.event-started .countdown-message {
background: linear-gradient(45deg, #28a745, #20c997);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.countdown.event-ended .timer-container {
opacity: 0.3;
filter: grayscale(1);
}
.countdown.event-ended .countdown-message {
background: linear-gradient(45deg, #6c757d, #495057);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Countdown Timer - Tablet Responsive (768px and below) */
@media (max-width: 768px) {
.countdown {
padding: 2.5rem 0;
}
.countdown-content {
padding: 0 15px;
max-width: 100%;
}
.countdown-header {
margin-bottom: 2rem;
}
.countdown-header h2 {
font-size: 2.2rem;
margin-bottom: 0.8rem;
line-height: 1.2;
}
.countdown-header p {
font-size: 1rem;
margin-bottom: 1rem;
line-height: 1.4;
}
.event-date {
font-size: 0.85rem;
padding: 0.7rem 1.2rem;
gap: 0.4rem;
max-width: 90%;
margin: 0 auto;
}
.event-date i {
font-size: 0.9rem;
}
.timer-container {
gap: 1rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
justify-content: center;
padding: 0 10px;
}
.timer-box {
transform: scale(0.85);
margin: 0.1rem;
}
.timer-circle {
width: 85px;
height: 85px;
}
.progress-ring {
width: 85px;
height: 85px;
}
.progress-ring-bg,
.progress-ring-fill {
cx: 42.5;
cy: 42.5;
r: 37.5;
}
.progress-ring-fill {
stroke-dasharray: 235.6; /* 2 * π * 37.5 */
stroke-dashoffset: 235.6;
stroke-width: 2.5;
}
.progress-ring-bg {
stroke-width: 2.5;
}
.timer-number {
font-size: 1.5rem;
margin-bottom: 0.05rem;
}
.timer-label {
font-size: 0.65rem;
letter-spacing: 0.5px;
}
.timer-separator {
font-size: 1.8rem;
margin: 0 0.6rem;
}
.countdown-message {
margin-bottom: 1.8rem;
padding: 0 10px;
}
.countdown-message p {
font-size: 0.9rem;
padding: 0.7rem 1.2rem;
line-height: 1.4;
max-width: 90%;
margin: 0 auto;
}
.countdown-actions {
gap: 0.8rem;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
padding: 0 10px;
}
.countdown-actions .btn {
min-width: 140px;
padding: 10px 18px;
font-size: 0.85rem;
border-radius: 25px;
}
}
/* Countdown Timer - Mobile Responsive (480px and below) */
@media (max-width: 480px) {
.countdown {
padding: 2rem 0;
}
.countdown-content {
padding: 0 10px;
}
.countdown-header {
margin-bottom: 1.5rem;
}
.countdown-header h2 {
font-size: 1.8rem;
margin-bottom: 0.6rem;
line-height: 1.1;
}
.countdown-header p {
font-size: 0.9rem;
margin-bottom: 0.8rem;
line-height: 1.3;
}
.event-date {
font-size: 0.75rem;
padding: 0.6rem 1rem;
gap: 0.3rem;
flex-wrap: wrap;
text-align: center;
line-height: 1.2;
}
.event-date i {
font-size: 0.8rem;
}
.timer-container {
gap: 0.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
padding: 0 5px;
}
.timer-box {
transform: scale(0.75);
margin: 0;
}
.timer-circle {
width: 70px;
height: 70px;
}
.progress-ring {
width: 70px;
height: 70px;
}
.progress-ring-bg,
.progress-ring-fill {
cx: 35;
cy: 35;
r: 30;
}
.progress-ring-fill {
stroke-dasharray: 188.5; /* 2 * π * 30 */
stroke-dashoffset: 188.5;
stroke-width: 2;
}
.progress-ring-bg {
stroke-width: 2;
}
.timer-number {
font-size: 1.2rem;
margin-bottom: 0;
font-weight: 600;
}
.timer-label {
font-size: 0.55rem;
letter-spacing: 0.3px;
}
.timer-separator {
font-size: 1.4rem;
margin: 0 0.3rem;
display: none;
}
.countdown-message {
margin-bottom: 1.5rem;
padding: 0 5px;
}
.countdown-message p {
font-size: 0.8rem;
padding: 0.6rem 1rem;
line-height: 1.3;
max-width: 95%;
margin: 0 auto;
}
.countdown-actions {
gap: 0.6rem;
flex-direction: column;
align-items: center;
padding: 0 5px;
}
.countdown-actions .btn {
min-width: 200px;
width: 100%;
max-width: 280px;
padding: 12px 20px;
font-size: 0.85rem;
border-radius: 25px;
text-align: center;
}
}
/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
.countdown {
padding: 1.5rem 0;
}
.countdown-header h2 {
font-size: 1.6rem;
}
.countdown-header p {
font-size: 0.85rem;
}
.event-date {
font-size: 0.7rem;
padding: 0.5rem 0.8rem;
}
.timer-container {
gap: 0.3rem;
margin-bottom: 1.5rem;
}
.timer-box {
transform: scale(0.65);
}
.timer-circle {
width: 60px;
height: 60px;
}
.progress-ring {
width: 60px;
height: 60px;
}
.progress-ring-bg,
.progress-ring-fill {
cx: 30;
cy: 30;
r: 25;
}
.progress-ring-fill {
stroke-dasharray: 157.1; /* 2 * π * 25 */
stroke-dashoffset: 157.1;
stroke-width: 1.5;
}
.progress-ring-bg {
stroke-width: 1.5;
}
.timer-number {
font-size: 1rem;
font-weight: 700;
}
.timer-label {
font-size: 0.5rem;
}
.countdown-actions .btn {
min-width: 180px;
padding: 10px 16px;
font-size: 0.8rem;
}
}
/* Why Attend Section - Simple & Clean */
.why-attend {
padding: 5rem 0;
background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
position: relative;
}
.why-attend::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Simple Benefits Grid */
.benefits-grid-simple {
display: flex;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 4rem;
position: relative;
z-index: 2;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.benefits-grid-simple {
flex-direction: column;
gap: 1rem;
}
}
.benefit-card-simple {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem 1.5rem;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 153, 0, 0.08);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 0 0 1px rgba(255, 153, 0, 0.05);
position: relative;
overflow: hidden;
flex: 1;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
}
.benefit-card-simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #FF9900, #FFAD33, #FFB84D);
border-radius: 20px 20px 0 0;
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
}
.benefit-card-simple:hover::before {
transform: scaleX(1);
}
.benefit-card-simple:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(255, 153, 0, 0.1);
border-color: rgba(255, 153, 0, 0.15);
}
.benefit-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #FF9900, #FFAD33);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 4px 6px -1px rgba(255, 153, 0, 0.2),
0 2px 4px -1px rgba(255, 153, 0, 0.1);
position: relative;
overflow: hidden;
}
.benefit-icon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.benefit-card-simple:hover .benefit-icon::before {
left: 100%;
}
.benefit-card-simple:hover .benefit-icon {
transform: scale(1.15) rotate(5deg);
box-shadow:
0 8px 15px -3px rgba(255, 153, 0, 0.3),
0 4px 6px -2px rgba(255, 153, 0, 0.2);
}
.benefit-icon i {
font-size: 1.5rem;
color: #ffffff;
z-index: 2;
position: relative;
}
.benefit-card-simple h3 {
font-size: 1.4rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 0.75rem;
transition: color 0.3s ease;
}
.benefit-card-simple:hover h3 {
color: #FF9900;
}
.benefit-card-simple p {
color: #64748B;
font-size: 1rem;
line-height: 1.6;
margin: 0;
font-weight: 500;
transition: color 0.3s ease;
}
.benefit-card-simple:hover p {
color: #4a5568;
}
/* Simple CTA */
.ready-to-join {
text-align: center;
position: relative;
z-index: 2;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
border-radius: 20px;
padding: 3rem 2rem;
margin-top: 2rem;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 153, 0, 0.1);
}
.ready-to-join h3 {
font-size: 2rem;
font-weight: 700;
color: #2D3748;
margin-bottom: 1rem;
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ready-to-join p {
font-size: 1.1rem;
color: #64748B;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.ready-to-join .btn {
font-size: 1.2rem;
padding: 1rem 2.5rem;
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.25);
position: relative;
overflow: hidden;
}
.ready-to-join .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.ready-to-join .btn:hover::before {
left: 100%;
}
.ready-to-join .btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 153, 0, 0.35);
}
.cta-simple {
text-align: center;
position: relative;
z-index: 2;
}
.cta-simple .btn {
font-size: 1.1rem;
padding: 0.8rem 2rem;
box-shadow: 0 6px 20px rgba(255, 153, 0, 0.2);
}
.cta-simple .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.3);
}
/* AOS Animation for Simple Cards */
[data-aos] {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
[data-aos].aos-animate {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 768px) {
.why-attend {
padding: 3rem 0;
}
.benefits-grid-simple {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.benefit-card-simple {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.benefits-grid-simple {
grid-template-columns: 1fr;
gap: 1rem;
}
.benefit-card-simple {
padding: 1.5rem 1rem;
}
}
/* Speakers Section Updates */
.speakers {
padding: 6rem 0;
background: white;
}
.speakers .container {
max-width: 70%;
width: 70%;
padding: 0 40px;
margin: 0 auto;
}
.speakers-stats {
display: flex;
justify-content: center;
gap: 4rem;
margin-top: 60px;
padding: 2rem 0;
border-top: 1px solid #e5e7eb;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 3rem;
font-weight: 700;
color: #8B5CF6;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1rem;
color: #666;
font-weight: 500;
}
/* Sponsors Section */
.sponsors {
padding: 6rem 0;
background: #f8f9fa;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.sponsors .container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
.sponsors-tiers {
margin-bottom: 4rem;
}
.sponsor-tier {
margin-bottom: 3rem;
text-align: center;
}
.sponsor-tier h3 {
font-size: 1.5rem;
font-weight: 600;
color: #232F3E;
margin-bottom: 2rem;
}
.sponsor-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.sponsor-logo {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.sponsor-logo:hover {
transform: translateY(-5px);
}
.sponsor-logo img {
max-width: 100%;
height: auto;
}
.platinum .sponsor-logo {
border: 3px solid #8B5CF6;
}
.gold .sponsor-logo {
border: 3px solid #A78BFA;
}
.silver .sponsor-logo {
border: 3px solid #C4B5FD;
}
.sponsor-cta {
text-align: center;
padding: 3rem 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.sponsor-cta h3 {
font-size: 1.8rem;
font-weight: 600;
color: #232F3E;
margin-bottom: 1rem;
}
.sponsor-cta p {
color: #666;
margin-bottom: 2rem;
}
/* Sponsors Section */
.sponsors {
padding: 100px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
position: relative;
}
.sponsors .section-header h2 {
color: #ff9500;
}
.sponsors .section-header::before,
.sponsors .section-header::after {
display: none;
}
.sponsors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin: 3rem 0;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.sponsors-row {
display: flex;
justify-content: center;
align-items: center;
gap: 4rem;
margin: 3rem 0;
flex-wrap: nowrap;
width: 100%;
}
.sponsor-logo-only {
width: 250px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 1rem;
transition: all 0.3s ease;
}
.sponsor-logo-only:hover {
transform: scale(1.1);
}
.sponsor-logo-only img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: all 0.3s ease;
}
.sponsor-card {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.sponsor-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ff9500, #ffb347);
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: left;
}
.sponsor-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(255, 149, 0, 0.15);
border-color: #ff9500;
}
.sponsor-card:hover::before {
transform: scaleX(1);
}
.sponsor-logo {
width: 120px;
height: 120px;
margin: 0 auto 2rem auto;
border-radius: 50%;
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.sponsor-card:hover .sponsor-logo {
background: linear-gradient(135deg, #fff5e6 0%, #ffeccc 100%);
transform: scale(1.05);
}
.sponsor-logo img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 8px;
transition: all 0.3s ease;
}
.sponsor-info h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.sponsor-info p {
color: #64748b;
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.sponsors-cta {
text-align: center;
margin-top: 4rem;
padding: 3rem 2rem;
background: linear-gradient(135deg, #ff9500 0%, #ffb347 100%);
border-radius: 20px;
color: white;
}
.sponsors-cta p {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: white;
}
.sponsors-cta .btn {
background: white;
color: #ff9500;
border: 2px solid white;
padding: 1rem 2rem;
font-weight: 600;
transition: all 0.3s ease;
}
.sponsors-cta .btn:hover {
background: transparent;
color: white;
border-color: white;
transform: translateY(-2px);
}
/* Responsive Design for Sponsors */
@media (max-width: 768px) {
.sponsors {
padding: 60px 0;
}
.sponsors-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 2rem 0;
}
.sponsors-row {
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
justify-content: center;
}
.sponsor-logo-only {
width: 200px;
height: 120px;
}
.sponsor-card {
padding: 2rem 1.5rem;
}
.sponsor-logo {
width: 100px;
height: 100px;
margin-bottom: 1.5rem;
}
.sponsor-logo img {
width: 60px;
height: 60px;
}
.sponsor-info h3 {
font-size: 1.25rem;
}
.sponsors-cta {
margin-top: 2rem;
padding: 2rem 1.5rem;
}
.sponsors-cta p {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.sponsors-row {
gap: 1.5rem;
flex-direction: column;
}
.sponsor-logo-only {
width: 150px;
height: 100px;
}
.sponsor-card {
padding: 1.5rem;
}
.sponsor-logo {
width: 80px;
height: 80px;
}
.sponsor-logo img {
width: 50px;
height: 50px;
}
.sponsors-cta .btn {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
}
/* Organizers Section */
.organizers {
padding: 100px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.organizers .container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
.organizers-row {
display: flex;
justify-content: space-between;
gap: 2rem;
margin: 4rem 0;
flex-wrap: wrap;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.organizer-card {
background: white;
border-radius: 20px;
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
flex: 1;
min-width: 260px;
max-width: 300px;
position: relative;
border: 2px solid transparent;
}
.organizer-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: #FF9900;
}
.organizer-image {
position: relative;
width: 140px;
height: 140px;
margin: 0 auto 1.5rem;
}
.organizer-image img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 5px solid #FF9900;
transition: all 0.3s ease;
}
.organizer-card:hover .organizer-image img {
border-color: #ffb84d;
transform: scale(1.05);
}
.organizer-badge {
display: none;
}
.organizer-badge i {
color: white;
font-size: 1.2rem;
}
.organizer-info h3 {
color: #232F3E;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.organizer-title {
color: #FF9900;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.organizer-specialization {
color: #666;
font-size: 1rem;
font-style: italic;
margin-bottom: 0.5rem;
}
.organizer-position {
color: #232F3E;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.organizer-institution {
color: #666;
font-size: 0.95rem;
line-height: 1.4;
margin-bottom: 1.5rem;
}
.organizer-social {
display: flex;
justify-content: center;
gap: 1rem;
}
.organizer-social a {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #232F3E 0%, #3c4858 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.organizer-social a:hover {
background: linear-gradient(135deg, #FF9900 0%, #ffb84d 100%);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 153, 0, 0.3);
}
.organizers-message {
text-align: center;
max-width: 1200px;
margin: 5rem auto 0;
padding: 3.5rem 4rem;
background: linear-gradient(135deg, #232F3E 0%, #3c4858 100%);
border-radius: 25px;
color: white;
position: relative;
overflow: hidden;
}
.organizers-message::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #FF9900 0%, #ffb84d 100%);
}
.organizers-message h3 {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #FF9900 0%, #ffb84d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.organizers-message p {
font-size: 1.3rem;
line-height: 1.8;
color: #ccc;
max-width: 900px;
margin: 0 auto;
}
/* Responsive Design for Organizers */
@media (max-width: 1200px) {
.organizers-row {
max-width: 1000px;
gap: 1.5rem;
}
.organizer-card {
min-width: 280px;
max-width: 320px;
padding: 2rem 1.5rem;
}
.organizer-image {
width: 110px;
height: 110px;
}
}
@media (max-width: 968px) {
.organizers-row {
gap: 2rem;
justify-content: center;
}
.organizer-card {
max-width: 300px;
padding: 2rem 1.5rem;
}
.organizers-message {
padding: 3rem 2.5rem;
margin: 4rem auto 0;
}
}
@media (max-width: 768px) {
.organizers {
padding: 60px 0;
}
.organizers-row {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.organizer-card {
max-width: 100%;
width: 100%;
min-width: auto;
}
.organizer-image {
width: 140px;
height: 140px;
}
.organizers-message {
margin: 3rem auto 0;
padding: 2.5rem 2rem;
}
.organizers-message h3 {
font-size: 2rem;
}
.organizers-message p {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.organizer-card {
padding: 2rem 1.5rem;
}
.organizer-image {
width: 120px;
height: 120px;
}
.organizer-info h3 {
font-size: 1.4rem;
}
.organizers-message {
padding: 2rem 1.5rem;
}
.organizers-message h3 {
font-size: 1.8rem;
}
.organizers-message p {
font-size: 1rem;
}
}
/* Speakers Section - Professional First-Class UI */
.speakers {
padding: 120px 0;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
position: relative;
overflow: hidden;
}
/* Animated Background Elements */
.speakers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255, 153, 0, 0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(35, 47, 62, 0.03) 0%, transparent 50%),
linear-gradient(135deg, transparent 0%, rgba(255, 153, 0, 0.01) 50%, transparent 100%);
animation: backgroundShift 20s ease-in-out infinite;
z-index: 1;
}
.speakers::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 153, 0, 0.02) 30%,
rgba(255, 153, 0, 0.04) 50%,
rgba(255, 153, 0, 0.02) 70%,
transparent 100%);
animation: shimmerFlow 15s linear infinite;
z-index: 1;
}
@keyframes backgroundShift {
0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg);
opacity: 1;
}
25% {
transform: translateX(2%) translateY(-1%) rotate(0.5deg);
opacity: 0.8;
}
50% {
transform: translateX(-1%) translateY(2%) rotate(-0.3deg);
opacity: 1;
}
75% {
transform: translateX(1%) translateY(-1%) rotate(0.2deg);
opacity: 0.9;
}
}
@keyframes shimmerFlow {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Floating Orbs Background Animation */
.speakers .container::before {
content: '';
position: absolute;
top: 10%;
left: 10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 153, 0, 0.05) 0%, transparent 70%);
border-radius: 50%;
animation: floatOrb1 25s ease-in-out infinite;
z-index: 1;
}
.speakers .container::after {
content: '';
position: absolute;
top: 60%;
right: 15%;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(35, 47, 62, 0.04) 0%, transparent 70%);
border-radius: 50%;
animation: floatOrb2 20s ease-in-out infinite reverse;
z-index: 1;
}
@keyframes floatOrb1 {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(50px, -30px) scale(1.1); }
50% { transform: translate(-20px, 40px) scale(0.9); }
75% { transform: translate(30px, 20px) scale(1.05); }
}
@keyframes floatOrb2 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-40px, -50px) scale(1.15); }
66% { transform: translate(25px, 30px) scale(0.85); }
}
.speakers .container {
position: relative;
z-index: 2;
max-width: 1400px;
}
.speakers .section-header {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.speakers .section-header h2 {
font-size: 3.5rem;
font-weight: 700;
color: #FF9900;
margin-bottom: 24px;
letter-spacing: -0.02em;
line-height: 1.1;
position: relative;
}
.speakers .section-header p {
font-size: 1.25rem;
color: #64748b;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
font-weight: 400;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Professional Speaker Cards - Optimized for 1920x1080 @ 125% */
.speakers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 40px auto;
justify-content: center;
align-items: start;
max-width: 1340px;
width: 95%;
padding: 0 20px;
}
.speaker-card {
background: transparent;
border-radius: 20px;
overflow: visible;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
will-change: transform, box-shadow, filter;
transform-origin: center center;
transform-style: preserve-3d;
perspective: 1000px;
height: 420px;
width: 100%;
max-width: 320px;
margin: 0 auto;
transform: translateZ(0);
}
.speaker-card.flipped {
transform: rotateY(180deg);
}
.speaker-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.speaker-card.flipped .speaker-card-inner {
transform: rotateY(180deg);
}
.speaker-front, .speaker-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.05),
0 10px 15px rgba(0, 0, 0, 0.08),
0 20px 25px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(226, 232, 240, 0.8);
background: #ffffff;
display: flex;
flex-direction: column;
}
.speaker-front {
z-index: 2;
}
.speaker-back {
transform: rotateY(180deg);
padding: 24px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
}
/* Keynote Speaker Styling - Small badge near speaker name */
.keynote-speaker .speaker-info {
position: relative;
}
.keynote-badge {
position: absolute;
top: -8px;
right: 10px;
background: linear-gradient(135deg, #FF9900, #FFAD33);
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 10;
box-shadow: 0 2px 6px rgba(255, 153, 0, 0.3);
display: flex;
align-items: center;
gap: 3px;
}
.keynote-badge i.fa-crown {
font-size: 0.5rem;
color: #FFD700;
}
.keynote-speaker {
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #FF9900, #FFAD33) border-box;
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.15);
}
.keynote-speaker:hover {
box-shadow: 0 12px 35px rgba(255, 153, 0, 0.25);
}
/* Floating Animation for Perfect Speaker Cards */
@keyframes float {
0%, 100% { transform: translateY(0px) rotateX(0deg); }
50% { transform: translateY(-3px) rotateX(1deg); }
}
@keyframes float-delayed {
0%, 100% { transform: translateY(0px) rotateX(0deg); }
50% { transform: translateY(-2px) rotateX(-0.5deg); }
}
.speaker-card:nth-child(odd) {
animation: float 6s ease-in-out infinite;
animation-delay: 0s;
}
.speaker-card:nth-child(even) {
animation: float-delayed 7s ease-in-out infinite;
animation-delay: 1s;
}
.speaker-card:hover {
animation: none;
transform: translateY(-20px) scale(1.02) rotateX(5deg);
box-shadow:
0 30px 60px rgba(255, 153, 0, 0.15),
0 20px 40px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(255, 153, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
filter: brightness(1.05) contrast(1.02);
}
.speaker-image {
height: 220px;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
flex-shrink: 0;
border-radius: 20px 20px 0 0;
}
.speaker-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: grayscale(15%) contrast(1.1) brightness(0.95);
transform: scale(1) rotate(0deg);
}
.speaker-card:hover .speaker-image img {
transform: scale(1.12) rotate(-1.5deg);
filter: grayscale(0%) contrast(1.2) brightness(1.05) saturate(1.1);
}
.speaker-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg,
transparent 0%,
rgba(26, 32, 44, 0.3) 20%,
rgba(26, 32, 44, 0.7) 60%,
rgba(26, 32, 44, 0.95) 100%);
color: white;
padding: 32px 24px 24px;
transform: translateY(100%);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
z-index: 2;
border-radius: 0 0 24px 24px;
}
.speaker-card:hover .speaker-overlay {
transform: translateY(0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.speaker-bio {
font-size: 0.95rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.95);
font-weight: 400;
margin: 0;
}
.speaker-info {
padding: 18px 16px;
text-align: center;
background: #ffffff;
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 180px;
justify-content: space-between;
border-radius: 0 0 20px 20px;
}
.speaker-info h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 6px;
color: #1a202c;
line-height: 1.3;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
letter-spacing: -0.01em;
position: relative;
overflow: hidden;
}
.speaker-card:hover .speaker-info h3 {
color: #FF9900;
transform: translateY(-3px) scale(1.01);
text-shadow: 0 2px 6px rgba(255, 153, 0, 0.2);
}
.speaker-info h3::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 153, 0, 0.1), transparent);
transition: left 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.speaker-card:hover .speaker-info h3::before {
left: 100%;
}
.speaker-title {
color: #FF9900;
font-weight: 600;
margin-bottom: 5px;
font-size: 0.88rem;
letter-spacing: 0.01em;
}
.speaker-topic {
color: #64748b;
font-size: 0.85rem;
margin-bottom: 16px;
font-weight: 400;
line-height: 1.4;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Perfect alignment for 1920x1080 @ 125% scaling */
@media (min-width: 1536px) and (max-width: 1920px) {
.speakers .container {
max-width: 1440px;
width: 95%;
padding: 0 30px;
}
.speakers-grid {
grid-template-columns: repeat(4, 1fr);
gap: 28px;
max-width: 1380px;
}
.speaker-card {
height: 400px;
max-width: 300px;
}
.speaker-image {
height: 200px;
}
.speaker-info {
min-height: 170px;
padding: 16px 14px;
}
.speaker-info h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.speaker-title {
font-size: 0.82rem;
margin-bottom: 4px;
}
.speaker-topic {
font-size: 0.8rem;
margin-bottom: 14px;
}
.speaker-social {
margin-bottom: 12px;
gap: 8px;
}
.speaker-social a {
width: 32px;
height: 32px;
font-size: 0.85rem;
}
.know-more-btn {
padding: 7px 14px;
font-size: 0.75rem;
min-width: 90px;
}
}
/* Professional Responsive Design */
@media (min-width: 1600px) {
.speakers .container {
max-width: 98%;
width: 98%;
padding: 0 20px;
}
.speakers-grid {
gap: 32px;
max-width: 1600px;
}
.speaker-card {
height: 480px;
}
}
@media (max-width: 1400px) {
.speakers-grid {
grid-template-columns: repeat(4, 1fr);
gap: 26px;
}
}
@media (max-width: 1200px) {
.speakers .container {
max-width: 85%;
width: 85%;
padding: 0 32px;
}
.speakers-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.speakers .section-header h2 {
font-size: 3rem;
}
}
@media (max-width: 992px) {
.speakers {
padding: 100px 0;
}
.speakers .container {
max-width: 90%;
width: 90%;
padding: 0 28px;
}
.speakers-grid {
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.speaker-image {
height: 220px;
}
.speakers .section-header h2 {
font-size: 2.5rem;
}
.speakers-stats {
gap: 32px;
padding: 50px 0;
}
}
@media (max-width: 768px) {
.speakers {
padding: 80px 0;
}
.speakers-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.speaker-image {
height: 200px;
}
.speaker-info {
padding: 20px 18px;
}
.speakers .section-header {
margin-bottom: 60px;
}
.speakers .section-header h2 {
font-size: 2.25rem;
}
.speakers .section-header p {
font-size: 1.1rem;
}
.speakers-stats {
grid-template-columns: 1fr;
gap: 24px;
padding: 40px 0;
}
.stat-item {
padding: 24px 20px;
}
.stat-number {
font-size: 2.5rem;
}
}
@media (max-width: 576px) {
.speakers {
padding: 60px 0;
}
.speakers .container {
max-width: 95%;
width: 95%;
padding: 0 15px;
}
.speakers-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.speaker-card {
border-radius: 20px;
}
.speaker-image {
height: 240px;
}
.speakers .section-header h2 {
font-size: 2rem;
}
.speakers .section-header p {
font-size: 1rem;
}
.speakers-counter span {
font-size: 2rem;
}
.speakers-counter {
font-size: 1.1rem;
}
}
.speaker-image {
height: 300px;
overflow: hidden;
position: relative;
}
.speaker-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
rgba(255, 153, 0, 0.1) 0%,
rgba(35, 47, 62, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.speaker-card:hover .speaker-image::after {
opacity: 1;
}
.speaker-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.speaker-card:hover .speaker-image img {
transform: scale(1.1) rotate(2deg);
filter: brightness(1.1) contrast(1.1);
}
.speaker-info {
padding: 1.5rem;
text-align: center;
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
transition: all 0.3s ease;
}
.speaker-card:hover .speaker-info {
background: linear-gradient(145deg, #ffffff 0%, #f0f4ff 100%);
}
.speaker-info h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #1e293b;
line-height: 1.3;
transition: all 0.3s ease;
position: relative;
}
.speaker-card:hover .speaker-info h3 {
color: #FF9900;
transform: translateY(-2px);
}
.speaker-info h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #FF9900, #FFAD33);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.speaker-card:hover .speaker-info h3::after {
width: 100%;
}
.speaker-title {
color: #FF9900;
font-weight: 500;
margin-bottom: 0.3rem;
font-size: 0.9rem;
}
.speaker-topic {
color: #666;
margin-bottom: 0.8rem;
font-size: 0.85rem;
line-height: 1.3;
}
/* Professional Social Links - Optimized for 1920x1080 @ 125% */
.speaker-social {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: auto;
margin-bottom: 16px;
padding: 0;
}
.speaker-social a {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-size: 0.9rem;
position: relative;
overflow: hidden;
border: 1px solid rgba(226, 232, 240, 0.8);
transform: translateY(0) scale(1) rotateZ(0deg);
}
.speaker-social a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #FF9900, #FFAD33);
border-radius: 9px;
transform: scale(0) rotate(180deg);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1;
}
.speaker-social a:hover::before {
transform: scale(1) rotate(0deg);
}
.speaker-social a i {
position: relative;
z-index: 2;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.speaker-social a:hover {
transform: translateY(-6px) scale(1.1) rotateZ(-3deg);
box-shadow:
0 12px 24px rgba(255, 153, 0, 0.3),
0 6px 12px rgba(0, 0, 0, 0.15),
0 3px 6px rgba(255, 153, 0, 0.2);
border-color: rgba(255, 153, 0, 0.4);
}
.speaker-social a:hover i {
color: white;
transform: scale(1.15) rotateZ(3deg);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
/* Know More Button - Optimized for 1920x1080 @ 125% */
.know-more-btn {
background: linear-gradient(135deg, #FF9900, #FFAD33);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
width: auto;
min-width: 100px;
overflow: hidden;
transform: translateY(0) scale(1);
box-shadow: 0 4px 12px rgba(255, 153, 0, 0.2);
}
.know-more-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.know-more-btn:hover::before {
left: 100%;
}
.know-more-btn:hover {
background: linear-gradient(135deg, #E88800, #FF9900);
transform: translateY(-3px) scale(1.05);
box-shadow:
0 8px 20px rgba(255, 153, 0, 0.4),
0 4px 8px rgba(0, 0, 0, 0.1);
filter: brightness(1.1);
}
.know-more-btn:active {
transform: translateY(-1px) scale(1.02);
transition: all 0.1s ease;
}
.speaker-details {
text-align: center;
width: 100%;
}
.speaker-details h3 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 8px;
color: #2D3748;
}
.speaker-experience {
color: #FF9900;
font-weight: 600;
margin-bottom: 16px;
font-size: 0.9rem;
}
.speaker-description p {
color: #64748B;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 16px;
}
.speaker-expertise {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-bottom: 16px;
}
.expertise-tag {
background: rgba(255, 153, 0, 0.1);
color: #FF9900;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}
.back-btn {
background: linear-gradient(135deg, #6B7280, #9CA3AF);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.back-btn:hover {
background: linear-gradient(135deg, #4B5563, #6B7280);
transform: translateY(-1px);
}
/* Professional Speaker Stats */
.speakers-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 800px;
margin: 0 auto;
padding: 60px 0;
border-top: 1px solid rgba(226, 232, 240, 0.8);
}
.stat-item {
text-align: center;
padding: 32px 24px;
background: #ffffff;
border-radius: 20px;
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.05),
0 10px 15px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(226, 232, 240, 0.6);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #FF9900, #FFAD33);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.stat-item:hover::before {
transform: scaleX(1);
}
.stat-item:hover {
transform: translateY(-8px);
box-shadow:
0 20px 25px rgba(0, 0, 0, 0.1),
0 25px 50px rgba(255, 153, 0, 0.15);
}
.stat-number {
display: block;
font-size: 3rem;
font-weight: 800;
color: #1a202c;
line-height: 1;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.stat-label {
font-size: 1.1rem;
color: #64748b;
font-weight: 500;
letter-spacing: 0.01em;
}
/* Speakers Counter */
.speakers-counter {
text-align: center;
margin: 60px 0;
padding: 32px;
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 20px;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.05),
0 10px 15px rgba(0, 0, 0, 0.08);
}
.speakers-counter span {
font-size: 2.5rem;
font-weight: 800;
color: #FF9900;
margin-right: 12px;
letter-spacing: -0.02em;
}
.speakers-counter {
font-size: 1.25rem;
color: #1a202c;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Enhanced Speaker Cards */
.speaker-image {
position: relative;
height: 300px;
overflow: hidden;
}
.speaker-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(45deg,
rgba(255, 153, 0, 0.95) 0%,
rgba(35, 47, 62, 0.95) 100%);
color: white;
padding: 1.5rem 1rem 1rem;
transform: translateY(100%) rotateX(90deg);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 0 0 20px 20px;
}
.speaker-card:hover .speaker-overlay {
transform: translateY(0) rotateX(0deg);
animation: overlayGlow 2s ease-in-out infinite alternate;
}
@keyframes overlayGlow {
0% { box-shadow: 0 0 10px rgba(255, 153, 0, 0.3); }
100% { box-shadow: 0 0 30px rgba(255, 153, 0, 0.6); }
}
.speaker-bio {
font-size: 0.9rem;
line-height: 1.4;
}
/* Speaker Actions */
.speakers-actions {
text-align: center;
margin-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.speakers-counter {
font-size: 1.1rem;
font-weight: 600;
color: #666;
}
.speakers-counter span {
color: #FF9900;
font-size: 1.3rem;
}
/* Load More Button Styles */
#load-more-speakers {
display: none !important;
}
/* Responsive Design */
@media (max-width: 1400px) {
.speakers .container {
max-width: 1200px;
padding: 0 30px;
}
}
@media (max-width: 1200px) {
.speakers .container {
padding: 0 20px;
}
.speakers-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.speakers-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.speaker-image {
height: 280px;
}
.speaker-info {
padding: 0.8rem;
}
.speaker-overlay {
padding: 1rem 0.75rem 0.75rem;
}
}
@media (max-width: 480px) {
.speakers-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.speaker-image {
height: 250px;
}
.speaker-info {
padding: 0.7rem;
}
.speaker-info h3 {
font-size: 1rem;
}
.speaker-title {
font-size: 0.85rem;
}
.speaker-topic {
font-size: 0.8rem;
}
}
/* ========== Core Members Section ========== */
.core-members {
padding: 60px 0 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.core-members .container {
padding: 0 20px;
max-width: 1500px;
margin: 0 auto;
}
.core-members::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 153, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(35, 47, 62, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.core-members-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem;
max-width: 1500px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0 1rem;
}
.core-member-card {
background: white;
border-radius: 20px;
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
overflow: hidden;
cursor: pointer;
}
.core-member-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 153, 0, 0.1), transparent);
transition: left 0.6s ease;
}
.core-member-card:hover::before {
left: 100%;
}
.core-member-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: #FF9900;
}
.core-member-image {
position: relative;
width: 140px;
height: 140px;
margin: 0 auto 1.5rem;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.2);
transition: all 0.4s ease;
}
.core-member-card:hover .core-member-image {
transform: scale(1.05) rotate(5deg);
box-shadow: 0 12px 35px rgba(255, 153, 0, 0.3);
}
.core-member-image img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 4px solid #FF9900;
transition: all 0.4s ease;
filter: brightness(1.1) contrast(1.1);
}
.core-member-card:hover .core-member-image img {
border-color: #ffb84d;
filter: brightness(1.2) contrast(1.2);
}
.core-member-info {
position: relative;
z-index: 2;
}
.core-member-info h3 {
color: #232F3E;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
transition: all 0.3s ease;
letter-spacing: 0.5px;
}
.core-member-card:hover .core-member-info h3 {
color: #FF9900;
transform: translateY(-2px);
}
/* Add subtle floating animation */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.core-member-card:nth-child(odd) {
animation: float 6s ease-in-out infinite;
}
.core-member-card:nth-child(even) {
animation: float 6s ease-in-out infinite reverse;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.core-members-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.8rem;
max-width: 1300px;
padding: 0 1rem;
}
.core-member-card {
padding: 1.8rem 1.2rem;
}
.core-member-image {
width: 120px;
height: 120px;
margin-bottom: 1.3rem;
}
}
@media (max-width: 768px) {
.core-members-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 100%;
padding: 0 1rem;
}
.core-member-card {
padding: 1.5rem 1rem;
}
.core-member-image {
width: 100px;
height: 100px;
margin-bottom: 1.2rem;
}
.core-member-info h3 {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.core-members-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
padding: 0 0.5rem;
}
.core-member-card {
padding: 1.3rem 0.8rem;
}
.core-member-image {
width: 90px;
height: 90px;
margin-bottom: 1rem;
}
.core-member-info h3 {
font-size: 1rem;
}
}
/* ========== Volunteers Section ========== */
.volunteers {
padding: 60px 0 100px 0;
background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.volunteers .container {
padding: 0 20px;
max-width: 1500px;
margin: 0 auto;
}
.volunteers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 70%, rgba(255, 153, 0, 0.03) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(35, 47, 62, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.volunteers-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
max-width: 1500px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0 1rem;
}
.volunteer-card {
background: white;
border-radius: 15px;
padding: 1.5rem 1rem;
text-align: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
border: 1px solid rgba(255, 153, 0, 0.1);
position: relative;
overflow: hidden;
}
.volunteer-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
border-color: #FF9900;
}
.volunteer-image {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto 1rem;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 15px rgba(255, 153, 0, 0.15);
transition: all 0.3s ease;
}
.volunteer-card:hover .volunteer-image {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 153, 0, 0.25);
}
.volunteer-image img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid #FF9900;
transition: all 0.3s ease;
}
.volunteer-card:hover .volunteer-image img {
border-color: #ffb84d;
}
.volunteer-info {
position: relative;
z-index: 2;
}
.volunteer-info h3 {
color: #232F3E;
font-size: 1rem;
font-weight: 600;
margin: 0;
transition: all 0.3s ease;
letter-spacing: 0.3px;
}
.volunteer-card:hover .volunteer-info h3 {
color: #FF9900;
}
/* Mobile Responsiveness for Volunteers */
@media (max-width: 1024px) {
.volunteers-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.3rem;
max-width: 1200px;
}
.volunteer-card {
padding: 1.3rem 0.8rem;
}
.volunteer-image {
width: 90px;
height: 90px;
}
}
@media (max-width: 768px) {
.volunteers-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: 100%;
}
.volunteer-card {
padding: 1rem 0.6rem;
}
.volunteer-image {
width: 80px;
height: 80px;
margin-bottom: 0.8rem;
}
.volunteer-info h3 {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.volunteers-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
padding: 0 0.5rem;
}
.volunteer-card {
padding: 0.8rem 0.5rem;
}
.volunteer-image {
width: 70px;
height: 70px;
margin-bottom: 0.6rem;
}
.volunteer-info h3 {
font-size: 0.85rem;
}
}
/* ========== Schedule Section ========== */
.schedule {
padding: 80px 0 100px 0;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%);
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.schedule .container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.schedule::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(255, 153, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(35, 47, 62, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.schedule .container {
position: relative;
z-index: 1;
}
.schedule .section-header {
text-align: center;
margin-bottom: 4rem;
}
.schedule .section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #FF9900;
margin-bottom: 1rem;
position: relative;
}
.schedule .section-header p {
font-size: 1.1rem;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}
/* Schedule Sections */
.schedule-section {
margin-bottom: 4rem;
}
.schedule-section-title {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 1.8rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 2.5rem;
text-align: center;
}
.schedule-section-title i {
color: #FF9900;
font-size: 1.5rem;
}
/* Common Agenda Styles */
.common-agenda {
max-width: 900px;
margin: 0 auto;
display: grid;
gap: 1.5rem;
}
.agenda-item {
display: flex;
align-items: center;
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 153, 0, 0.1);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.agenda-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, #FF9900, #FFAD33);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.4s ease;
}
.agenda-item:hover::before {
transform: scaleY(1);
}
.agenda-item:hover {
transform: translateX(10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
border-color: #FF9900;
}
.agenda-time {
min-width: 140px;
font-size: 1.1rem;
font-weight: 700;
color: #FF9900;
background: rgba(255, 153, 0, 0.1);
padding: 0.8rem 1.2rem;
border-radius: 10px;
text-align: center;
margin-right: 2rem;
position: relative;
}
.agenda-time::after {
content: '';
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 15px solid rgba(255, 153, 0, 0.1);
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.agenda-content {
flex: 1;
}
.agenda-content h4 {
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.agenda-item:hover .agenda-content h4 {
color: #FF9900;
}
.agenda-content p {
color: #64748b;
font-size: 1rem;
line-height: 1.5;
margin: 0;
}
/* Tracks Container */
.tracks-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Individual Track Styles */
.track {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.track::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #FF9900, #FFAD33);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.track:hover::before {
transform: scaleX(1);
}
.track:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 153, 0, 0.3);
}
/* Track Headers */
.track-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f1f5f9;
}
.track-header h4 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.track-badge {
background: linear-gradient(135deg, #FF9900, #FFAD33);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Track Sessions */
.track-sessions {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.session-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.2rem;
background: #f8fafc;
border-radius: 10px;
border-left: 4px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
}
.session-item:hover {
background: #f1f5f9;
border-left-color: #FF9900;
transform: translateX(5px);
}
.session-item.break {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-left-color: #f59e0b;
}
.session-item.break:hover {
background: linear-gradient(135deg, #fde68a, #fcd34d);
}
.session-time {
font-size: 0.9rem;
font-weight: 600;
color: #64748b;
min-width: 120px;
}
.session-item.break .session-time {
color: #92400e;
}
.session-title {
font-weight: 600;
color: #1e293b;
flex: 1;
text-align: right;
}
.session-item.break .session-title {
color: #92400e;
}
/* Schedule Footer */
.schedule-footer {
text-align: center;
margin-top: 4rem;
padding: 2rem;
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 20px;
border: 2px solid rgba(255, 153, 0, 0.1);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.footer-note {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
}
.footer-note i {
color: #FF9900;
font-size: 1.5rem;
}
/* Animation Classes */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design for Schedule */
@media (max-width: 1200px) {
.tracks-container {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 800px;
}
.track {
margin-bottom: 1rem;
}
}
@media (max-width: 768px) {
.schedule {
padding: 60px 0 80px 0;
}
.schedule .section-header h2 {
font-size: 2rem;
}
.schedule-section-title {
font-size: 1.5rem;
flex-direction: column;
gap: 0.5rem;
}
.agenda-item {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}
.agenda-time {
margin-right: 0;
margin-bottom: 1rem;
min-width: auto;
}
.agenda-time::after {
display: none;
}
.tracks-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.track {
padding: 1.5rem;
}
.track-header {
flex-direction: column;
gap: 0.8rem;
text-align: center;
}
.session-item {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.session-time {
min-width: auto;
}
.session-title {
text-align: center;
}
}
@media (max-width: 480px) {
.schedule .section-header h2 {
font-size: 1.8rem;
}
.agenda-item {
padding: 1.2rem;
}
.agenda-content h4 {
font-size: 1.1rem;
}
.track {
padding: 1.2rem;
}
.track-header h4 {
font-size: 1.3rem;
}
.session-item {
padding: 0.8rem 1rem;
}
}
/* ========== FAQ Section ========== */
.faq {
padding: 60px 0 70px 0;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.faq .container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.faq::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 153, 0, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(35, 47, 62, 0.03) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 153, 0, 0.02) 0%, transparent 30%);
pointer-events: none;
}
.faq .container {
position: relative;
z-index: 1;
}
.faq .section-header {
text-align: center;
margin-bottom: 2.5rem;
}
.faq .section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #FF9900;
margin-bottom: 1rem;
position: relative;
}
.faq .section-header p {
font-size: 1.1rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* FAQ Container */
.faq-container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* FAQ Items */
.faq-item {
background: white;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 153, 0, 0.1);
overflow: hidden;
transition: all 0.4s ease;
position: relative;
}
.faq-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #FF9900, #FFAD33);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.4s ease;
}
.faq-item:hover::before {
transform: scaleY(1);
}
.faq-item:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
border-color: rgba(255, 153, 0, 0.3);
}
.faq-item.active {
border-color: #FF9900;
box-shadow: 0 12px 35px rgba(255, 153, 0, 0.15);
}
.faq-item.active::before {
transform: scaleY(1);
}
/* FAQ Question */
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
cursor: pointer;
background: white;
transition: all 0.3s ease;
position: relative;
}
.faq-question:hover {
background: #f8fafc;
}
.faq-item.active .faq-question {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.faq-question h4 {
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
margin: 0;
flex: 1;
line-height: 1.4;
transition: color 0.3s ease;
}
.faq-item:hover .faq-question h4,
.faq-item.active .faq-question h4 {
color: #FF9900;
}
.faq-question i {
color: #64748b;
font-size: 1.2rem;
transition: all 0.3s ease;
margin-left: 1rem;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
color: #FF9900;
}
/* FAQ Answer */
.faq-answer {
padding: 0 2rem;
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
background: white;
}
.faq-item.active .faq-answer {
max-height: 200px;
padding: 0 2rem 1.5rem 2rem;
}
.faq-answer p {
color: #64748b;
font-size: 1rem;
line-height: 1.6;
margin: 0;
padding-top: 0.5rem;
}
/* FAQ Contact Section */
.faq-contact {
margin-top: 2.5rem;
text-align: center;
}
.contact-card {
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 20px;
padding: 2rem 1.5rem;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(255, 153, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 153, 0, 0.05) 0%, transparent 70%);
animation: rotate 20s linear infinite;
pointer-events: none;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.contact-card h3 {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.contact-card p {
font-size: 1.1rem;
color: #64748b;
margin-bottom: 2rem;
line-height: 1.6;
position: relative;
z-index: 1;
}
.contact-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.contact-buttons .btn {
padding: 1rem 2rem;
font-weight: 600;
text-decoration: none;
border-radius: 10px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 160px;
justify-content: center;
}
.contact-buttons .btn-primary {
background: linear-gradient(135deg, #FF9900, #FFAD33);
color: white;
border: none;
box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
}
.contact-buttons .btn-primary:hover {
background: linear-gradient(135deg, #E88800, #FF9900);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.4);
}
.contact-buttons .btn-secondary {
background: white;
color: #1e293b;
border: 2px solid #e2e8f0;
}
.contact-buttons .btn-secondary:hover {
background: #f8fafc;
border-color: #FF9900;
color: #FF9900;
transform: translateY(-2px);
}
/* Animation Classes for FAQ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive Design for FAQ */
@media (max-width: 768px) {
.faq {
padding: 60px 0 80px 0;
}
.faq .section-header h2 {
font-size: 2rem;
}
.faq .section-header p {
font-size: 1rem;
padding: 0 1rem;
}
.faq-container {
padding: 0 1rem;
}
.faq-question {
padding: 1.5rem 1.5rem;
}
.faq-question h4 {
font-size: 1.1rem;
}
.faq-item.active .faq-answer {
padding: 0 1.5rem 1.5rem 1.5rem;
}
.contact-card {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.contact-card h3 {
font-size: 1.5rem;
}
.contact-buttons {
flex-direction: column;
align-items: center;
}
.contact-buttons .btn {
min-width: 200px;
}
}
@media (max-width: 480px) {
.faq .section-header h2 {
font-size: 1.8rem;
}
.faq-question {
padding: 1.2rem 1rem;
}
.faq-question h4 {
font-size: 1rem;
}
.faq-item.active .faq-answer {
padding: 0 1rem 1.2rem 1rem;
}
.faq-answer p {
font-size: 0.9rem;
}
.contact-card {
padding: 1.5rem 1rem;
}
.contact-card h3 {
font-size: 1.3rem;
}
.contact-card p {
font-size: 1rem;
}
}
/* Register Section */
.register {
padding: 6rem 0;
background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
color: white;
}
.register-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.register-info h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.register-info p {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.register-benefits {
display: flex;
flex-direction: column;
gap: 1rem;
}
.benefit {
display: flex;
align-items: center;
gap: 0.8rem;
}
.benefit i {
color: #A78BFA;
font-size: 1.2rem;
}
.register-form {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 2rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.register-form h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
text-align: center;
}
.form-group {
margin-bottom: 1rem;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #A78BFA;
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
}
.form-group select option {
background: #1e293b;
color: white;
}
/* Footer */
.footer {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
color: white;
padding: 1.5rem 0 0;
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none;
}
.footer .container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #FF9900, transparent);
}
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
/* Contact Section */
.contact-section {
padding-right: 2rem;
}
.footer-logo {
display: flex;
align-items: center;
font-weight: 700;
font-size: 1.3rem;
margin-bottom: 1.5rem;
}
.footer-logo i {
font-size: 1.8rem;
margin-right: 12px;
color: #FF9900;
}
/* Footer Circular Logos */
.footer-circular-logos {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
justify-content: flex-start;
}
.circular-logo {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background: white;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.circular-logo:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.circular-logo img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
.contact-section h3 {
color: #FF9900;
margin-bottom: 1.5rem;
font-size: 1.2rem;
font-weight: 600;
}
.contact-info {
margin-bottom: 2rem;
}
.contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border-left: 3px solid #FF9900;
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(5px);
}
.contact-item i {
font-size: 1.2rem;
color: #FF9900;
margin-right: 1rem;
margin-top: 2px;
width: 20px;
}
.contact-item div strong {
display: block;
color: #FF9900;
font-weight: 600;
margin-bottom: 0.3rem;
}
.contact-item div p {
margin: 0;
opacity: 0.9;
line-height: 1.4;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #FF9900, #FFB84D);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.social-links a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.social-links a:hover::before {
left: 100%;
}
.social-links a:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.4);
}
/* YouTube Section */
.youtube-section {
padding: 0 1rem;
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.youtube-section h3 {
color: #FF4444;
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.youtube-section h3 i {
font-size: 1.4rem;
}
.youtube-section p {
margin-bottom: 1.5rem;
opacity: 0.9;
line-height: 1.5;
}
/* Social links in YouTube section */
.youtube-section .social-links {
margin-bottom: 1.5rem;
justify-content: flex-start;
}
.youtube-section .social-links a {
background: linear-gradient(135deg, #FF0000, #CC0000);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.youtube-section .social-links a:hover {
background: linear-gradient(135deg, #CC0000, #AA0000);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}
.youtube-embed {
position: relative;
margin-bottom: 1.5rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.youtube-embed iframe {
width: 100%;
height: 180px;
border: none;
}
.youtube-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
.youtube-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #FF4444, #FF6B6B);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.youtube-btn:hover {
background: linear-gradient(135deg, #FF6B6B, #FF4444);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 68, 68, 0.4);
}
.subscriber-count {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.subscriber-count i {
color: #FF9900;
}
/* Map Section */
.map-section {
padding-left: 2rem;
}
.map-section h3 {
color: #10B981;
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.map-section h3 i {
font-size: 1.4rem;
}
.map-section p {
margin-bottom: 1.5rem;
opacity: 0.9;
}
.map-container {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.venue-map {
border-radius: 10px;
overflow: hidden;
margin-bottom: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.venue-map iframe {
width: 100%;
height: 200px;
border: none;
}
.location-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.location-details {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.location-item {
display: flex;
align-items: center;
gap: 0.8rem;
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
}
.location-item i {
color: #10B981;
width: 16px;
}
.map-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #10B981, #34D399);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
align-self: flex-start;
}
.map-btn:hover {
background: linear-gradient(135deg, #34D399, #10B981);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
padding-bottom: 1rem;
margin-bottom: 0;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
}
.footer-links a:hover {
color: #FF9900;
}
.footer-bottom p {
margin: 0;
opacity: 0.8;
font-size: 0.9rem;
}
/* Responsive Footer */
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.map-section {
grid-column: 1 / -1;
padding-left: 0;
margin-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
}
.youtube-section {
border-right: none;
}
}
@media (max-width: 768px) {
.footer {
padding: 1.2rem 0 0.5rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-section,
.youtube-section,
.map-section {
padding: 0;
border: none;
}
.youtube-section,
.map-section {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.footer-links {
order: 2;
}
/* Responsive circular logos */
.footer-circular-logos {
justify-content: center;
gap: 0.8rem;
}
.circular-logo {
width: 60px;
height: 60px;
padding: 8px;
}
.youtube-embed iframe {
height: 200px;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-left,
.nav-right {
gap: 10px;
}
.nav-logo-left,
.nav-logo-right {
height: 60px;
}
.nav-logo span {
display: block !important; /* Show text on mobile */
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.3px;
line-height: 1.0;
margin-top: 1px;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.98);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(255, 153, 0, 0.1);
padding: 2rem 0;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.nav-menu.active {
left: 0;
}
.nav-menu li {
margin: 1rem 0;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.hero-container {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.hero-title {
font-size: 2.5rem;
}
.year {
font-size: 3rem;
}
.hero-details {
align-items: center;
}
.hero-buttons {
justify-content: center;
}
.floating-card {
padding: 1.2rem 1.4rem;
min-width: 100px;
max-width: 120px;
}
.floating-card i {
font-size: 1.8rem;
}
.floating-card span {
font-size: 0.85rem;
}
.card-1, .card-2, .card-3, .card-4 {
animation-duration: 12s;
}
.about-content {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.about-highlights {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.slide img {
height: 250px;
}
.slideshow-container {
border-radius: 15px;
}
.slideshow-nav {
bottom: 15px;
padding: 8px 12px;
}
.dot {
height: 12px;
width: 12px;
}
/* Countdown Timer Responsive */
.countdown-header h2 {
font-size: 2.8rem;
}
.timer-container {
gap: 1rem;
}
.timer-box {
transform: scale(0.9);
}
.timer-circle {
width: 100px;
height: 100px;
}
.progress-ring {
width: 100px;
height: 100px;
}
.progress-ring-bg,
.progress-ring-fill {
r: 44;
}
.progress-ring-fill {
stroke-dasharray: 276.46; /* 2 * π * 44 */
stroke-dashoffset: 276.46;
}
.timer-number {
font-size: 1.8rem;
}
.timer-label {
font-size: 0.8rem;
}
.timer-separator {
font-size: 2.5rem;
}
.countdown-actions {
flex-direction: column;
align-items: center;
}
.countdown-actions .btn {
width: 250px;
}
.register-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.timeline-item {
flex-direction: column;
}
.timeline-time {
margin-bottom: 0.5rem;
}
.timeline-content {
margin-left: 0;
margin-top: 1rem;
}
.schedule-timeline::before {
left: 20px;
}
.timeline-item::before {
left: 14px;
}
.speakers-stats {
gap: 2rem;
flex-direction: column;
}
.organizers-stats {
gap: 2rem;
flex-direction: column;
}
.sponsor-logos {
gap: 1rem;
}
/* Why Attend Responsive */
.featured-benefit {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2.5rem;
text-align: center;
}
.featured-content h3 {
font-size: 2rem;
}
.featured-stats {
justify-content: center;
}
.featured-visual {
height: 300px;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.why-attend-cta {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2.5rem;
text-align: center;
}
.cta-content h3 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.nav-container {
padding: 0 15px;
}
.nav-logo-left,
.nav-logo-right {
height: 50px;
}
.nav-left,
.nav-right {
gap: 12px;
}
.hero-title {
font-size: 2rem;
}
.year {
font-size: 2.5rem;
}
.section-header h2 {
font-size: 2.2rem;
}
.section-header p {
font-size: 1.1rem;
}
.btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.floating-card {
padding: 1rem 1.2rem;
min-width: 85px;
max-width: 105px;
}
.floating-card i {
font-size: 1.6rem;
}
.floating-card span {
font-size: 0.8rem;
}
.card-1, .card-2, .card-3, .card-4 {
animation-duration: 10s;
}
@keyframes orbitClockwise {
0% {
transform: rotate(0deg) translateX(30px) rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) translateX(30px) rotate(-180deg) scale(1.05);
}
100% {
transform: rotate(360deg) translateX(30px) rotate(-360deg) scale(1);
}
}
@keyframes orbitCounterClockwise {
0% {
transform: rotate(0deg) translateX(25px) rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) translateX(25px) rotate(180deg) scale(1.05);
}
100% {
transform: rotate(-360deg) translateX(25px) rotate(360deg) scale(1);
}
}
/* Countdown Timer Mobile - Enhanced Responsiveness */
.countdown {
padding: 2.5rem 0;
}
.countdown-content {
padding: 0 15px;
}
.countdown-header {
margin-bottom: 2rem;
}
.countdown-header h2 {
font-size: 2.2rem;
margin-bottom: 0.8rem;
}
.countdown-header p {
font-size: 1rem;
margin-bottom: 1rem;
}
.event-date {
font-size: 0.85rem;
padding: 0.7rem 1.2rem;
flex-direction: column;
gap: 0.3rem;
text-align: center;
}
.event-date i {
font-size: 0.9rem;
}
.timer-container {
gap: 1rem;
margin-bottom: 2rem;
padding: 0 10px;
flex-wrap: wrap;
justify-content: center;
}
.timer-box {
transform: scale(0.85);
margin: 0.3rem;
}
.timer-circle {
width: 85px;
height: 85px;
}
.progress-ring {
width: 85px;
height: 85px;
}
.progress-ring-bg,
.progress-ring-fill {
cx: 42.5;
cy: 42.5;
r: 37;
}
.progress-ring-fill {
stroke-dasharray: 232.48; /* 2 * π * 37 */
stroke-dashoffset: 232.48;
stroke-width: 2.5;
}
.progress-ring-bg {
stroke-width: 2.5;
}
.timer-number {
font-size: 1.5rem;
margin-bottom: 0.1rem;
}
.timer-label {
font-size: 0.65rem;
letter-spacing: 0.5px;
}
.timer-separator {
font-size: 1.8rem;
margin: 0 0.5rem;
opacity: 0.7;
}
.countdown-message {
margin-bottom: 1.5rem;
}
.countdown-message p {
font-size: 0.9rem;
padding: 0.7rem 1.2rem;
line-height: 1.4;
}
.countdown-actions {
gap: 0.8rem;
flex-direction: column;
align-items: center;
}
.countdown-actions .btn {
width: 180px;
padding: 10px 20px;
font-size: 0.85rem;
border-radius: 25px;
}
/* Extra small phones - stacked layout */
@media (max-width: 320px) {
.countdown {
padding: 2rem 0;
}
.countdown-header h2 {
font-size: 1.8rem;
}
.timer-container {
gap: 0.8rem;
flex-direction: column;
align-items: center;
}
.timer-box {
transform: scale(0.8);
}
.timer-circle {
width: 75px;
height: 75px;
}
.progress-ring {
width: 75px;
height: 75px;
}
.progress-ring-bg,
.progress-ring-fill {
cx: 37.5;
cy: 37.5;
r: 32;
}
.progress-ring-fill {
stroke-dasharray: 201.06; /* 2 * π * 32 */
stroke-dashoffset: 201.06;
stroke-width: 2;
}
.progress-ring-bg {
stroke-width: 2;
}
.timer-number {
font-size: 1.3rem;
}
.timer-label {
font-size: 0.6rem;
}
.timer-separator {
display: none;
}
.countdown-actions {
flex-direction: column;
align-items: center;
}
.countdown-actions .btn {
width: 160px;
font-size: 0.8rem;
}
}
.about-card,
.register-form {
padding: 1.5rem;
}
.speakers-stats {
gap: 1.5rem;
}
.stat-number,
.org-number {
font-size: 2.5rem;
}
.organizers-stats {
gap: 1.5rem;
}
.core-members-grid {
grid-template-columns: 1fr;
}
.sponsor-logos {
flex-direction: column;
gap: 1rem;
}
/* Why Attend Mobile */
.why-attend {
padding: 4rem 0;
}
.featured-benefit {
padding: 2rem;
margin-bottom: 3rem;
}
.featured-content h3 {
font-size: 1.8rem;
}
.featured-content p {
font-size: 1rem;
}
.featured-stats {
flex-direction: column;
gap: 1rem;
}
.stat-number {
font-size: 2rem;
}
.featured-visual {
height: 250px;
}
.floating-element {
width: 45px;
height: 45px;
}
.floating-element i {
font-size: 1.2rem;
}
.central-orb {
width: 80px;
height: 80px;
}
.orb-core {
width: 40px;
height: 40px;
}
.orb-core i {
font-size: 1.2rem;
}
.benefit-card {
padding: 2rem;
}
.benefit-card h3 {
font-size: 1.2rem;
}
.why-attend-cta {
padding: 2rem;
}
.cta-content h3 {
font-size: 1.6rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 200px;
}
.success-meter .meter-track {
width: 120px;
height: 120px;
}
.success-meter .meter-fill {
width: 100px;
height: 100px;
}
.meter-percentage {
font-size: 1.5rem;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Loading States */
.loading {
opacity: 0.6;
pointer-events: none;
}
/* Success Message */
.success-message {
background: #28a745;
color: white;
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
text-align: center;
display: none;
}
/* Call for Speakers Section */
.call-for-speakers {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.call-for-speakers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.call-speakers-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
position: relative;
z-index: 1;
}
.call-speakers-text h2 {
font-size: 3rem;
font-weight: 700;
color: #232F3E;
margin-bottom: 1rem;
background: linear-gradient(135deg, #232F3E 0%, #FF9900 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.call-speakers-subtitle {
font-size: 1.25rem;
color: #FF9900;
font-weight: 600;
margin-bottom: 1.5rem;
}
.call-speakers-description {
font-size: 1.1rem;
color: #666;
line-height: 1.8;
margin-bottom: 2.5rem;
}
.call-speakers-benefits {
margin-bottom: 2.5rem;
}
.benefit-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: rgba(255, 153, 0, 0.05);
border-radius: 8px;
transition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(255, 153, 0, 0.1);
transform: translateX(5px);
}
.benefit-item i {
color: #FF9900;
font-size: 1.2rem;
margin-right: 1rem;
width: 20px;
text-align: center;
}
.benefit-item span {
color: #333;
font-weight: 500;
}
.call-speakers-topics h3 {
color: #232F3E;
font-size: 1.3rem;
margin-bottom: 1rem;
font-weight: 600;
}
.topics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
}
.topic-tag {
background: linear-gradient(135deg, #FF9900 0%, #ff8c00 100%);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(255, 153, 0, 0.2);
}
.topic-tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(255, 153, 0, 0.3);
}
.call-speakers-form {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 153, 0, 0.1);
position: relative;
overflow: hidden;
}
.call-speakers-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #FF9900 0%, #ff8c00 100%);
}
.form-container h3 {
color: #232F3E;
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
text-align: center;
}
.call-to-action-text {
color: #666;
font-size: 1.1rem;
line-height: 1.6;
text-align: center;
margin-bottom: 2rem;
}
.speaker-requirements {
margin-bottom: 2.5rem;
}
.requirement-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 1rem;
background: rgba(255, 153, 0, 0.05);
border-radius: 8px;
transition: all 0.3s ease;
}
.requirement-item:hover {
background: rgba(255, 153, 0, 0.1);
transform: translateX(5px);
}
.requirement-item i {
color: #FF9900;
font-size: 1.2rem;
margin-right: 1rem;
width: 20px;
text-align: center;
}
.requirement-item span {
color: #333;
font-weight: 500;
}
.apply-speaker-btn {
background: linear-gradient(135deg, #FF9900 0%, #ff8c00 100%);
color: white;
border: none;
padding: 1.25rem 3rem;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin: 0 auto 1.5rem;
box-shadow: 0 6px 25px rgba(255, 153, 0, 0.3);
text-decoration: none;
width: fit-content;
}
.apply-speaker-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(255, 153, 0, 0.4);
color: white;
}
.apply-speaker-btn:active {
transform: translateY(-1px);
}
.note-text {
text-align: center;
color: #888;
font-size: 0.9rem;
font-style: italic;
}
/* Responsive Design for Call for Speakers */
@media (max-width: 968px) {
.call-speakers-content {
grid-template-columns: 1fr;
gap: 40px;
}
.call-speakers-text h2 {
font-size: 2.5rem;
}
.topics-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
@media (max-width: 768px) {
.call-for-speakers {
padding: 60px 0;
}
.call-speakers-text h2 {
font-size: 2rem;
}
.call-speakers-form {
padding: 1.5rem;
}
.topics-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.call-speakers-text h2 {
font-size: 1.75rem;
}
.topics-grid {
grid-template-columns: 1fr;
}
.call-speakers-form {
padding: 1rem;
}
}
/* Call for Sponsors Section */
.call-for-sponsors {
padding: 80px 0;
background: linear-gradient(135deg, #232F3E 0%, #1a252f 100%);
color: white;
text-align: center;
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.call-for-sponsors .container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
.call-for-sponsors::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.call-sponsors-content {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.call-sponsors-text h2 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #FF9900 0%, #ffb84d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.call-sponsors-subtitle {
font-size: 1.25rem;
color: #FF9900;
font-weight: 600;
margin-bottom: 1.5rem;
}
.call-sponsors-description {
font-size: 1.1rem;
color: #ccc;
line-height: 1.8;
margin-bottom: 3rem;
}
.call-sponsors-cta {
margin-top: 2rem;
}
.become-sponsor-btn {
background: linear-gradient(135deg, #FF9900 0%, #ffb84d 100%);
color: white;
border: none;
padding: 1.25rem 3rem;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1rem;
box-shadow: 0 6px 25px rgba(255, 153, 0, 0.3);
text-decoration: none;
}
.become-sponsor-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(255, 153, 0, 0.4);
color: white;
}
.become-sponsor-btn:active {
transform: translateY(-1px);
}
.call-sponsors-cta .note-text {
color: #999;
font-size: 0.9rem;
font-style: italic;
}
/* Responsive Design for Call for Sponsors */
@media (max-width: 768px) {
.call-for-sponsors {
padding: 60px 0;
}
.call-sponsors-text h2 {
font-size: 2.5rem;
}
.become-sponsor-btn {
padding: 1rem 2rem;
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.call-sponsors-text h2 {
font-size: 2rem;
}
.become-sponsor-btn {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
}
/* Previous Event Section Responsive */
@media (max-width: 1024px) {
.previous-event-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.event-achievements {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.gallery-slide {
height: 350px;
}
}
@media (max-width: 768px) {
.previous-event-section {
padding: 2rem 1.5rem;
margin: 2rem 0;
}
.previous-event-header h3 {
font-size: 1.6rem;
flex-direction: column;
gap: 0.5rem;
}
.previous-event-header h3 i {
font-size: 1.4rem;
}
.event-achievements {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.achievement-item {
padding: 1rem;
}
.achievement-number {
font-size: 2rem;
}
.achievement-label {
font-size: 0.8rem;
}
.gallery-slide {
height: 300px;
}
.gallery-prev, .gallery-next {
width: 40px;
height: 40px;
font-size: 1rem;
}
.slide-caption {
font-size: 1rem;
padding: 1.5rem 1rem 1rem 1rem;
}
}
@media (max-width: 480px) {
.previous-event-section {
padding: 1.5rem 1rem;
border-radius: 15px;
}
.previous-event-header h3 {
font-size: 1.4rem;
}
.previous-event-header p {
font-size: 1rem;
}
.event-story p {
font-size: 1rem;
text-align: left;
}
.event-achievements {
grid-template-columns: 1fr;
gap: 1rem;
}
.achievement-item {
padding: 1.2rem;
}
.achievement-number {
font-size: 2.2rem;
}
.gallery-slide {
height: 250px;
}
.gallery-navigation {
padding: 0 0.5rem;
}
.slide-caption {
font-size: 0.9rem;
padding: 1rem 0.8rem 0.8rem 0.8rem;
}
}
/* Simple Coming Soon Section */
.simple-coming-soon {
text-align: center;
padding: 4rem 2rem;
max-width: 600px;
margin: 0 auto;
}
.simple-coming-soon .coming-soon-icon {
margin-bottom: 2rem;
}
.simple-coming-soon .coming-soon-icon i {
font-size: 4rem;
color: #FF9900;
opacity: 0.8;
}
.simple-coming-soon h3 {
font-size: 2.5rem;
font-weight: 700;
color: #FF9900;
margin-bottom: 1rem;
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.simple-coming-soon p {
font-size: 1.2rem;
color: #666;
margin-bottom: 0;
line-height: 1.6;
}
/* Mobile Responsive for Simple Coming Soon */
@media (max-width: 768px) {
.simple-coming-soon {
padding: 3rem 1.5rem;
}
.simple-coming-soon h3 {
font-size: 2rem;
}
.simple-coming-soon .coming-soon-icon i {
font-size: 3rem;
}
.simple-coming-soon p {
font-size: 1rem;
}
}
/* Aggressive white space removal for footer */
.footer:last-child,
.footer:last-of-type {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body::after,
html::after {
display: none;
}
/* Force page to end at footer */
body {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
html {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Remove any potential white space from page bottom */
body > *:last-child {
margin-bottom: 0 !important;
}
/* Specific footer bottom fix */
.footer .footer-bottom:last-child {
margin-bottom: 0 !important;
padding-bottom: 1rem !important;
}
/* Registration Section */
.registration {
padding: 5rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.registration::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 153, 0, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 153, 0, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.registration-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.registration-card {
background: white;
border-radius: 20px;
padding: 2rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
border: 2px solid transparent;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 300px;
}
.registration-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #FF9900, #FFAD33);
border-radius: 20px 20px 0 0;
}
.registration-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(255, 153, 0, 0.2);
border-color: rgba(255, 153, 0, 0.3);
}
.team-card {
position: relative;
}
.team-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
z-index: 3;
}
.card-header {
margin-bottom: 1.5rem;
flex-grow: 0;
}
.card-header h3 {
font-size: 1.3rem;
font-weight: 700;
color: #333;
margin-bottom: 0.5rem;
}
.card-subtitle {
font-size: 0.9rem;
color: #666;
font-weight: 500;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 153, 0, 0.1), rgba(255, 153, 0, 0.05));
border-radius: 50%;
margin: 0 auto;
}
.card-icon i {
font-size: 1.5rem;
color: #FF9900;
}
.card-pricing {
margin-bottom: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.original-price {
color: #999;
text-decoration: line-through;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.discounted-price {
font-size: 2.5rem;
font-weight: 700;
color: #FF9900;
background: linear-gradient(135deg, #FF9900, #FFAD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.team-info {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.5rem;
font-weight: 500;
}
.savings {
font-size: 0.9rem;
color: #28a745;
font-weight: 600;
margin-top: 0.5rem;
}
.register-btn {
width: 100%;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #FF9900, #FFAD33);
color: white;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: auto;
flex-shrink: 0;
}
.register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.4);
}
.register-btn:active {
transform: translateY(0);
}
.team-btn {
background: linear-gradient(135deg, #28a745, #20c997);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.team-btn:hover {
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}
/* Responsive Design */
@media (max-width: 1400px) {
.registration-grid {
max-width: 1200px;
gap: 1.2rem;
}
.registration-card {
padding: 1.8rem;
min-height: 280px;
}
}
@media (max-width: 1200px) {
.registration-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
max-width: 1000px;
}
.registration-card {
padding: 1.5rem;
min-height: 260px;
}
.card-header h3 {
font-size: 1.2rem;
}
.card-icon {
width: 45px;
height: 45px;
}
.card-icon i {
font-size: 1.3rem;
}
.discounted-price {
font-size: 2rem;
}
}
@media (max-width: 900px) {
.registration-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 600px;
}
.registration-card {
min-height: 300px;
}
}
@media (max-width: 768px) {
.registration {
padding: 3rem 0;
}
.registration-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
padding: 0 1rem;
max-width: 500px;
}
.registration-card {
padding: 1.5rem;
min-height: 280px;
}
.card-header h3 {
font-size: 1.1rem;
}
.discounted-price {
font-size: 1.8rem;
}
.original-price {
font-size: 1rem;
}
.register-btn {
padding: 0.9rem 1.2rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.registration-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 0.5rem;
max-width: 300px;
}
.registration-card {
padding: 1.2rem;
border-radius: 15px;
min-height: 260px;
}
.team-badge {
padding: 0.4rem 0.8rem;
font-size: 0.7rem;
top: -8px;
right: -8px;
}
.discounted-price {
font-size: 1.6rem;
}
.register-btn {
padding: 0.8rem 1rem;
font-size: 0.85rem;
}
}
/* Animation enhancements */
@media (prefers-reduced-motion: no-preference) {
.registration-card {
animation: cardEntrance 0.6s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.registration-card:nth-child(1) { animation-delay: 0.1s; }
.registration-card:nth-child(2) { animation-delay: 0.2s; }
.registration-card:nth-child(3) { animation-delay: 0.3s; }
.registration-card:nth-child(4) { animation-delay: 0.4s; }
}
@keyframes cardEntrance {
to {
opacity: 1;
transform: translateY(0);
}
}