/* ======================================== ABOUT US PAGE STYLES Modern 2025 Design System Implementation Based on Oxygen Digital Shop Design ======================================== */ /* ======================================== MAIN LAYOUT ======================================== */ .about-main { padding-top: 70px; /* Header height offset */ min-height: 100vh; } /* ======================================== HERO SECTION ======================================== */ .section-hero { background: var(--color-bg-base); padding: var(--spacing-xxl) 0; text-align: center; } .hero-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 182px; line-height: 190px; letter-spacing: -4.7%; color: var(--color-hero); text-align: center; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 200px; } @media screen and (max-width: 768px) { .section-hero { padding: var(--spacing-sm) 0; } } /* ======================================== POWERING SECTION - MAIN INTRO ======================================== */ .powering-section { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); } /* Main Grid - Headlines & Description */ .powering-main-grid { display: grid; grid-template-columns: 392px 760px; /* Fixed widths as per design */ gap: var(--spacing-xxl); max-width: 1200px; margin: 0 auto var(--spacing-xxl); align-items: start; } /* Headlines Column .powering-headlines { Left column with headlines } */ .powering-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 42px; line-height: 50px; letter-spacing: -0.9996px; color: var(--color-primary); margin-bottom: var(--spacing-xs); } /* .powering-subtitle { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 27px; line-height: 30px; letter-spacing: -0.3348px; color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .powering-year { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 36px; line-height: 44px; letter-spacing: -0.72px; color: var(--color-primary); } */ /* Description Column .powering-description-wrapper { /* Right column with description text }*/ .powering-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 24px; letter-spacing: 0; color: var(--color-text-primary); margin: 0; } @media screen and (max-width: 768px) { .powering-description { font-size: 16px; line-height: 24px; text-align: justify; margin-bottom: var(--spacing-xl); } } /* Video Container - Full Width */ .powering-video-container { max-width: 1200px; margin: 0 auto; transform-origin: center center; /* Ensure scaling happens from center */ } .video-thumbnail { position: relative; width: 100%; max-width: 1152px; /* Design specified width */ margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; cursor: pointer; aspect-ratio: 1152 / 700; /* Maintain proportion */ } .video-thumbnail:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Video Play Button Overlay */ .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; } .video-thumbnail:hover .video-overlay { opacity: 1; } .video-play-btn { background: none; border: none; cursor: pointer; transition: transform 0.3s ease; padding: 0; display: flex; align-items: center; justify-content: center; } .video-play-btn:hover { transform: scale(1.1); } .video-play-btn .icon { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } /* ======================================== LEGACY SECTION - COMPANY HISTORY WITH CAROUSEL ======================================== */ .legacy-section { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); text-align: center; } .legacy-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 42px; line-height: 50px; letter-spacing: -0.9996px; color: var(--color-primary); margin-bottom: var(--spacing-md); } .legacy-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 28px; letter-spacing: 0; color: #667085; margin-bottom: var(--spacing-lg); /* max-width: 800px;*/ /* margin-left: auto; margin-right: auto;*/ text-align: left; } /* Core Values Display */ .legacy-values { display: flex; justify-content: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-xxl); flex-wrap: wrap; } .legacy-value { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 18px; line-height: 24px; letter-spacing: -0.36px; color: var(--color-primary); } /* Timeline Carousel Container */ .timeline-carousel-container { position: relative; max-width: 1200px; margin: 0 auto var(--spacing-xl); overflow: hidden; } /* Carousel Wrapper */ .timeline-carousel-wrapper { overflow: hidden; border-radius: 12px; } /* Timeline Carousel */ .timeline-carousel { display: flex; gap: var(--spacing-xl); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); padding: var(--spacing-xl) 0; } /* Timeline Items with Zigzag Positioning */ .timeline-item { flex: 0 0 280px; /* Fixed width for consistent spacing */ position: relative; } /* Zigzag positioning - Top items */ .timeline-item-top { align-self: flex-start; margin-top: 0; } /* Zigzag positioning - Bottom items */ .timeline-item-bottom { align-self: flex-end; margin-top: var(--spacing-xxl); } /* Timeline Card Container */ .timeline-card { position: relative; width: 250px; height: 320px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-low); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; margin: 0 auto; } .timeline-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-medium); } /* Timeline Image */ .timeline-image { width: 100%; height: 100%; position: relative; overflow: hidden; } .timeline-image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Timeline Overlay - Hidden by default */ .timeline-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%); color: white; padding: var(--spacing-lg); transform: translateY(100%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; } /* Hover Effect - Show overlay and reduce image */ .timeline-card:hover .timeline-overlay { transform: translateY(0); opacity: 1; } .timeline-card:hover .timeline-image img { transform: scale(0.95); border-radius: 8px; filter: brightness(0.7); } .timeline-year { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 18px; line-height: 24px; letter-spacing: -0.36px; color: var(--color-primary); margin-bottom: var(--spacing-xs); } .timeline-description { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0; color: rgba(255, 255, 255, 0.9); margin: 0; } /* Carousel Controls - Single Horizontal Line */ .carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); margin-bottom: var(--spacing-xxl); padding: var(--spacing-md) 0; } /* Carousel Navigation Arrows */ .carousel-nav { background: var(--color-bg-base); border: 2px solid #e5e7eb; cursor: pointer; padding: var(--spacing-sm); border-radius: 50%; transition: all 0.3s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-shadow: var(--shadow-low); } .carousel-nav:hover { border-color: var(--color-primary); background: var(--color-primary); transform: scale(1.05); box-shadow: var(--shadow-medium); } .carousel-nav:hover .icon { filter: brightness(0) saturate(100%) invert(100%); } .carousel-nav:disabled { opacity: 0.4; cursor: not-allowed; transform: none; border-color: #e5e7eb; background: #f9fafb; } .carousel-nav:disabled:hover { border-color: #e5e7eb; background: #f9fafb; } .carousel-nav:disabled .icon { filter: none; opacity: 0.5; } /* Carousel Pagination Dots */ .carousel-pagination { display: flex; justify-content: center; gap: var(--spacing-sm); align-items: center; } .pagination-dot { width: 12px; height: 4px; border-radius: 2px; border: none; background: #d1d5db; cursor: pointer; transition: all 0.3s ease; position: relative; } .pagination-dot:hover { background: #9ca3af; } .pagination-dot.active { background: var(--color-primary); width: 32px; } /* Legacy Footer */ .legacy-footer { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 28px; letter-spacing: 0; color: #667085; /*max-width: 600px;*/ text-align: left; margin: 0 auto; } /* ======================================== REACH SECTION - STATISTICS & MAP ======================================== */ .reach-section { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); } .reach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xxl); max-width: 1200px; margin: 0 auto; align-items: start; /* Changed from center to start */ } .reach-content { padding-right: var(--spacing-lg); } .reach-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 42px; line-height: 50px; letter-spacing: -0.9996px; color: var(--color-primary); margin-bottom: var(--spacing-md); } .reach-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 28px; letter-spacing: 0; color: #667085; text-align: justify; margin-bottom: var(--spacing-xxl); } @media screen and (max-width: 768px) { .reach-description { font-size: 16px; line-height: 24px; text-align: justify; margin-bottom: var(--spacing-xl); } } /* Statistics Grid */ .reach-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } .stat-item { text-align: center; transition: transform 0.3s ease; } .stat-item:hover { transform: translateY(-3px); } .stat-number { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 48px; line-height: 56px; letter-spacing: -2.736px; color: var(--color-primary); margin-bottom: var(--spacing-xs); display: block; } .stat-label { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 16px; line-height: 24px; letter-spacing: 0; color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .stat-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 14px; line-height: 20px; letter-spacing: 0; color: #667085; } /* Kerala Map with Store Locations */ .reach-map { display: flex; justify-content: center; align-items: flex-start; /* Changed from center to flex-start */ position: relative; } /* ======================================== MAP PLACEHOLDER ======================================== */ .map-placeholder { position: relative; width: 100%; max-width: 400px; /* Increased from 400px */ height: auto; display: flex; align-items: flex-start; justify-content: center; } /* ======================================== KERALA STATE MAP ======================================== */ .kerala-map { position: relative; width: 100%; height: auto; z-index: 1; } .kerala-map img { width: 100%; height: auto; object-fit: contain; display: block; } /* ======================================== LOCATION PINS ======================================== position: absolute; z-index: 10; cursor: pointer; transition: transform 0.3s ease; opacity: 0; transform: translateY(-50px); } .pin-container:hover { transform: scale(1.2) translateY(0); z-index: 20; } .pin-icon { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } .pin-malappuram { top: 30%; left: 42%; animation-delay: 3.2s; } .pin-palakkad { top: 38%; left: 60%; animation-delay: 3.2s; } .pin-thrissur { top: 44%; left: 46%; animation-delay: 2.8s; } .pin-ernakulam { top: 53%; left: 52%; animation-delay: 2.4s; } .pin-idukki { top: 55.29%; left: 74.45%; animation-delay: 2s; } .pin-kottayam { top: 60.29%; left: 66.53%; animation-delay: 1.6s; } .pin-alappuzha { top: 65%; left: 57.06%; animation-delay: 1.2s; } .pin-pathanamthitta { top: 68.29%; left: 77.28%; animation-delay: 0.8s; } .pin-kollam { top: 73%; left: 68.71%; animation-delay: 0.4s; } .pin-thiruvananthapuram { top: 76.86%; left: 75.39%; animation-delay: 0s; } .pin-container::after { content: attr(data-location); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: white; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 400; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .pin-container:hover::after { opacity: 1; } @media screen and (min-width: 481px) and (max-width: 810px) { .pin-malappuram { top: 32%; left: 42%; animation-delay: 3.2s; } .pin-palakkad { top: 39%; left: 58%; animation-delay: 3.2s; } .pin-thrissur { top: 48%; left: 50%; animation-delay: 2.8s; } .pin-ernakulam { top: 58%; left: 55%; animation-delay: 2.4s; } .pin-idukki { top: 58%; left: 76%; animation-delay: 2s; } .pin-kottayam { top: 67%; left: 63%; animation-delay: 1.6s; } .pin-alappuzha { top: 71%; left: 56%; animation-delay: 1.2s; } .pin-pathanamthitta { top: 74%; left: 75%; animation-delay: 0.8s; } .pin-kollam { top: 80%; left: 71%; animation-delay: 0.4s; } .pin-thiruvananthapuram { top: 88%; left: 76%; animation-delay: 0s; } } @media screen and (max-width: 480px) { .pin-malappuram { top: 38%; left: 38%; animation-delay: 3.2s; } .pin-palakkad { top: 48%; left: 59%; animation-delay: 3.2s; } .pin-thrissur { top: 62%; left: 48%; animation-delay: 2.8s; } .pin-ernakulam { top: 75%; left: 54%; animation-delay: 2.4s; } .pin-idukki { top: 78%; left: 76%; animation-delay: 2s; } .pin-kottayam { top: 86%; left: 61%; animation-delay: 1.6s; } .pin-alappuzha { top: 93%; left: 55%; animation-delay: 1.2s; } .pin-pathanamthitta { top: 100%; left: 75%; animation-delay: 0.8s; } .pin-kollam { top: 106%; left: 71%; animation-delay: 0.4s; } .pin-thiruvananthapuram { top: 115%; left: 75%; animation-delay: 0s; } } /* ======================================== ANIMATIONS ======================================== @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } }*/ /* Responsive Design - Reach Section Specific */ @media screen and (max-width: 1023px) { .reach-section .reach-grid { grid-template-columns: 1fr; gap: 0 !important; /* Override the combined rule */ display: flex; flex-direction: column; } .reach-section .reach-content { padding-right: 0; display: contents; /* This allows direct children to participate in parent flex */ } /* Order: Title -> Map -> Description -> Stats */ .reach-section .reach-title { order: 1; text-align: left; margin-bottom: var(--spacing-lg); font-size: 32px; /* Match legacy and team titles */ line-height: 38px; /* Match legacy and team titles */ letter-spacing: -0.7616px; /* Match legacy and team titles */ } .reach-section .reach-map { order: 2; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xxl); /* Increased bottom margin to prevent overlap */ } .reach-section .reach-description { order: 3; text-align: justify; /* Match powering-description */ font-size: 16px; /* Match powering-description mobile size */ line-height: 24px; /* Match powering-description mobile size */ margin-bottom: var(--spacing-xl); margin-top: 0; /* Ensure no extra top margin */ } .reach-section .reach-stats { order: 4; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-top: 0; /* Remove extra top margin */ justify-items: center; /* Center items within grid cells */ width: 100%; /* Full width */ } .reach-section .stat-item { text-align: center; /* Center text within stat items */ } .reach-section .map-placeholder { max-width: 350px; margin: 0 auto; } .reach-section .pin-icon { width: 20px; height: 20px; } } /* Tablet specific fix for 912px breakpoint and below */ @media screen and (max-width: 912px) { .reach-section { overflow-x: hidden; /* Prevent horizontal scroll */ } .reach-section .reach-grid { gap: 0 !important; /* Override combined rule */ } .reach-section .reach-title { margin-bottom: var(--spacing-lg); font-size: 32px; /* Match legacy and team titles */ line-height: 38px; /* Match legacy and team titles */ letter-spacing: -0.7616px; /* Match legacy and team titles */ } .reach-section .reach-map { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xxl); /* Increased spacing to prevent overlap */ /* Ensure map doesn't overflow */ width: 100%; max-width: 100%; padding: 0 var(--spacing-md); } .reach-section .reach-description { font-size: 16px; /* Match powering-description */ line-height: 24px; /* Match powering-description */ text-align: justify; /* Match powering-description */ margin-bottom: var(--spacing-xl); margin-top: 0; /* Remove any top margin */ } .reach-section .reach-stats { margin-top: 0; /* Remove extra top margin */ justify-items: center; /* Center items within grid cells */ width: 100%; /* Full width */ } .reach-section .stat-item { text-align: center; /* Center text within stat items */ } .reach-section .map-placeholder { max-width: 320px; margin: 0 auto; /* Prevent map from being cut off */ width: 100%; } .reach-section .kerala-map { width: 100%; max-width: 100%; } } @media screen and (max-width: 768px) { .reach-section .reach-grid { gap: 0 !important; /* Override combined rule */ } .reach-section .reach-content { display: contents; } /* Order: Title -> Map -> Description -> Stats */ .reach-section .reach-title { order: 1; text-align: left; font-size: 28px; /* Match mobile title sizing */ line-height: 34px; /* Match mobile title sizing */ letter-spacing: -0.4px; /* Match mobile title sizing */ margin-bottom: var(--spacing-lg); } .reach-section .reach-map { order: 2; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xxl); /* Increased bottom margin */ padding: 0; } .reach-section .reach-description { order: 3; text-align: justify; margin-bottom: var(--spacing-xl); margin-top: 0; } .reach-section .reach-stats { order: 4; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-top: 0; justify-items: center; /* Center items within grid */ width: 100%; /* Full width */ } .reach-section .stat-item { text-align: center; /* Center text within stat items */ padding: var(--spacing-md); } .reach-section .map-placeholder { max-width: 280px; margin: 0 auto; } .reach-section .pin-icon { width: 18px; height: 18px; } .reach-section .stat-number { font-size: 36px; line-height: 42px; } } @media screen and (max-width: 480px) { /* Ensure proper order is maintained on very small screens */ .reach-section .reach-grid { gap: 0 !important; /* Override combined rule */ } /* Title */ .reach-section .reach-title { order: 1; font-size: 24px; line-height: 30px; text-align: left; margin-bottom: var(--spacing-md); } /* Map comes second */ .reach-section .reach-map { order: 2; margin-top: var(--spacing-md); margin-bottom: 102px; /* Increased bottom margin for spacing */ } .reach-section .map-placeholder { max-width: 250px; margin: 0 auto; } .reach-section .pin-icon { width: 16px; height: 16px; } /* Description comes third */ .reach-section .reach-description { order: 3; font-size: 14px; line-height: 22px; text-align: justify; margin-bottom: var(--spacing-md); } /* Stats come last */ .reach-section .reach-stats { order: 4; gap: var(--spacing-md); justify-items: center; /* Center items within grid */ width: 100%; /* Full width */ } .reach-section .stat-item { text-align: center; /* Center text within stat items */ } .reach-section .stat-number { font-size: 32px; line-height: 38px; } .reach-section .stat-label { font-size: 14px; } .reach-section .stat-description { font-size: 12px; line-height: 18px; } } /* ======================================== TRUST SECTION - WHY PEOPLE TRUST US ======================================== */ .trust-section { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); } .trust-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 42px; line-height: 50px; letter-spacing: -0.9996px; color: var(--color-primary); margin-bottom: var(--spacing-xxl); text-align: center; } .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xxl); max-width: 1200px; margin: 0 auto; align-items: center; } /* Trust Hero Image with Overlay */ .trust-hero-image { width: 100%; border-radius: 12px; overflow: hidden; /*box-shadow: var(--shadow-medium);*/ position: relative; } .trust-hero-image img { width: 100%; height: 400px; object-fit: cover; transition: transform 0.3s ease; } .trust-hero-image:hover img { transform: scale(1.05); filter: brightness(0.7); } .trust-overlay { position: absolute; bottom: 0; left: 0; width: 100%; /* Make it span the full width */ color: white; /* 👇 This is the key part. It creates the fade effect. */ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); /* Adjust padding to position the text nicely inside the gradient */ padding: 60px var(--spacing-lg) var(--spacing-md); /* The properties below are no longer needed for a gradient style */ /* background: rgba(0, 0, 0, 0.7); */ /* border-radius: 8px; */ /* backdrop-filter: blur(10px); */ } .trust-overlay-text { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 28px; line-height: 32px; letter-spacing: -0.36px; } /* Trust Features Grid */ .trust-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } .trust-feature { background: var(--color-bg-base); padding: var(--spacing-lg); border-radius: 12px; box-shadow: var(--shadow-low); text-align: center; transition: all 0.3s ease; border: 1px solid #f1f3f4; } .trust-feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); /*border-color: var(--gradient-secondary);*/ border: var(--gradient-primary) 2px solid; } .trust-feature-icon { color: var(--gradient-primary); margin-bottom: var(--spacing-md); transition: transform 0.3s ease; } .trust-feature:hover .trust-feature-icon { transform: scale(1.1); } .trust-feature-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 16px; line-height: 24px; letter-spacing: 0; color: var(--color-text-primary); margin: 0; } /* ======================================== TEAM SECTION - CEO & TEAM MEMBERS ======================================== */ .team-section { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); } .team-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 42px; line-height: 50px; letter-spacing: -0.9996px; color: var(--color-primary); margin-bottom: var(--spacing-xxl); text-align: left; } /* CEO Section */ .ceo-section { /* max-width: 1200px; margin: 0 auto var(--spacing-xxl); display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-xxl); align-items: center; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px; padding: var(--spacing-xxl); box-shadow: var(--shadow-low);*/ max-width: 1200px; margin: 0 auto var(--spacing-xxl); display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-xxl); align-items: center; position: relative; border-radius: 12px; padding: var(--spacing-xxl); box-shadow: var(--shadow-low); overflow: hidden; } /* Background image container */ .ceo-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .ceo-background img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Dark overlay mask */ .ceo-background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); /* 80% black mask - adjust as needed */ z-index: 1; } /* Ensure content stays above the background */ .ceo-image, .ceo-content { position: relative; z-index: 1; } .ceo-image { width: 200px; height: 200px; border-radius: 50%; /* Changed from 12px to 50% for circle */ overflow: hidden; /*box-shadow: var(--shadow-medium);*/ } .ceo-image img { width: 100%; height: 100%; object-fit: cover; } .ceo-content { padding-left: var(--spacing-lg); } /* Quote wrapper to position icons */ .quote-wrapper { position: relative; margin-bottom: var(--spacing-xl); } /* Quote icons styling */ .quote-icon { width: 40px; height: 40px; opacity: 0.8; } /* Opening quote icon */ .quote-open { position: absolute; left: -15px; top: -15px; z-index: 1; } /* Closing quote icon */ .quote-close { position: absolute; right: 0; bottom: -15px; /*transform: rotate(180deg); /* Flip the closing quote */ z-index: 1; } .ceo-quote { font-family: Poppins, sans-serif; font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: 0; color: rgba(255, 255, 255, 0.9); ; margin-bottom: var(--spacing-xl); /*font-style: italic;*/ position: relative; padding-left: var(--spacing-lg); opacity: 0; /* Hidden initially for animation */ } /* SplitText line wrapper for masking animation */ .ceo-quote .line { overflow: hidden; display: block; } /* Opening quote mark .ceo-quote::before { content: '"'; position: absolute; left: 0; top: -15px; font-size: 60px; color: var(--color-primary); font-family: serif; line-height: 1; }*/ /* Closing quote mark .ceo-quote::after { content: '"'; position: absolute; right: 0; bottom: -15px; font-size: 60px; color: var(--color-primary); font-family: serif; line-height: 1; }*/ .ceo-name { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 22px; line-height: 24px; letter-spacing: -0.36px; color: white; margin-bottom: var(--spacing-xs); opacity: 0; /* Hidden initially */ } .ceo-title-text { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 16px; line-height: 20px; letter-spacing: 0; color: white; opacity: 0; /* Hidden initially */ } /* Tablet Styles (768px - 1023px) */ @media screen and (max-width: 1023px) { /* ... existing tablet styles ... */ /* CEO Section */ .ceo-section { grid-template-columns: 1fr; text-align: center; gap: var(--spacing-lg); } .ceo-image { margin: 0 auto; /* Center the image */ order: -1; /* Move to top */ } .ceo-content { padding-left: 0; order: 1; } .quote-icon { width: 35px; height: 35px; } .ceo-quote { text-align: left; /* Keep quote text left-aligned for readability */ font-size: 18px; line-height: 28px; } } /* Mobile Styles (320px - 767px) */ @media screen and (max-width: 767px) { /* ... existing mobile styles ... */ /* CEO Section */ .ceo-section { padding: var(--spacing-lg); grid-template-columns: 1fr; text-align: center; gap: var(--spacing-md); } .ceo-image { width: 150px; /* Slightly smaller on mobile */ height: 150px; margin: 0 auto; /* Center the image */ order: -1; /* Move to top */ } .ceo-content { padding-left: 0; order: 1; } .quote-icon { width: 30px; height: 30px; } .quote-open { top: -5px; } .quote-close { bottom: -5px; } .ceo-quote { text-align: left; /* Keep quote text left-aligned */ font-size: 16px; line-height: 24px; padding-left: var(--spacing-lg); } /* .ceo-quote::before { font-size: 48px; top: -10px; }*/ .ceo-name { font-size: 18px; } .ceo-title-text { font-size: 14px; } } /* Team Members Section */ .team-members { max-width: 1200px; margin: 0 auto; } .team-members-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-semibold); font-size: 32px; line-height: 34px; letter-spacing: -0.4px; color: var(--color-primary); margin-bottom: var(--spacing-md); text-align: center; } .team-members-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 28px; letter-spacing: 0; color: #667085; margin-bottom: var(--spacing-xxl); text-align: center; /*max-width: 600px;*/ margin-left: auto; margin-right: auto; } @media screen and (max-width: 768px) { .team-members-description { font-size: 16px; line-height: 24px; text-align: justify; margin-bottom: var(--spacing-xl); } } /* Team Grid */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); } .team-member { text-align: center; background: var(--color-bg-base); padding: var(--spacing-lg); border-radius: 12px; box-shadow: var(--shadow-low); transition: all 0.3s ease; border: 1px solid #f1f3f4; } .team-member:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); /*border-color: var(--color-primary);*/ } .member-avatar { width: 132px; height: 145px; border-radius: 5%; overflow: hidden; margin: 0 auto var(--spacing-md); box-shadow: var(--shadow-low); transition: transform 0.3s ease; } .team-member:hover .member-avatar { transform: scale(1.1); } .member-avatar img { width: 100%; height: 100%; object-fit: cover; } .member-name { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 18px; line-height: 24px; letter-spacing: -0.36px; color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .member-role { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--color-primary); margin-bottom: var(--spacing-sm); } .member-description { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0; color: #667085; margin-bottom: var(--spacing-md); } .member-social { display: flex; justify-content: center; gap: var(--spacing-sm); } .member-social a { color: #667085; font-size: 16px; transition: all 0.3s ease; width: 36px; /* Set a fixed width */ height: 36px; /* Set an equal fixed height */ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; /* This removes the underline */ border-radius: 50%; } .member-social a:hover { color: var(--color-primary); background: rgba(227, 0, 27, 0.1); transform: translateY(-2px); } /* ======================================== JOIN SECTION - CAREER OPPORTUNITIES ======================================== */ .join-section { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); text-align: center; position: relative; overflow: hidden; min-height: 600px; } /* Floating Avatar Background .join-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .floating-avatar { position: absolute; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-medium); animation: float 6s ease-in-out infinite; opacity: 0.8; } .floating-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Floating Avatar Positions .floating-avatar:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; } .floating-avatar:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; } .floating-avatar:nth-child(3) { top: 50%; left: 5%; animation-delay: 2s; } .floating-avatar:nth-child(4) { bottom: 30%; right: 10%; animation-delay: 3s; } .floating-avatar:nth-child(5) { bottom: 10%; left: 20%; animation-delay: 4s; } .floating-avatar:nth-child(6) { top: 70%; right: 25%; animation-delay: 5s; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } } /* 3D Canvas Background */ .join-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } */ .join-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .join-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-semibold); font-size: 42px; line-height: 50px; letter-spacing: -0.9996px; color: var(--color-primary); margin-bottom: var(--spacing-md); } .join-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 28px; letter-spacing: 0; color: #667085; margin-bottom: var(--spacing-xxl); } @media screen and (max-width: 768px) { .join-description { font-size: 16px; line-height: 24px; text-align: justify; margin-bottom: var(--spacing-xl); } } .join-actions { display: flex; justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; } /* ======================================== BACK TO TOP BUTTON ======================================== .scroll-top-btn { position: fixed; bottom: 120px; right: 20px; width: 50px; height: 50px; background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.8); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; } .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .scroll-top-btn:hover { background: var(--color-primary); color: var(--color-text-white); transform: translateY(-3px) scale(1.1); box-shadow: 0 8px 25px rgba(227, 0, 27, 0.3); } */ /* ======================================== RESPONSIVE DESIGN ======================================== */ /* Tablet Styles (768px - 1023px) */ @media screen and (max-width: 1023px) { /* Hero Section */ .hero-title { font-size: 120px; line-height: 128px; min-height: 150px; } /* Powering Section */ .powering-main-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); text-align: center; } .video-thumbnail { max-width: 100%; aspect-ratio: 16 / 10; /* Adjusted for tablet */ } /* Legacy Section - Carousel - KEEP DESKTOP BEHAVIOR ON TABLET */ .timeline-carousel-container { max-width: 1200px; /* Keep container constraint on tablet */ margin: 0 auto var(--spacing-xl); /* Keep centered layout */ width: auto; /* Don't break out of container on tablet */ margin-left: auto; /* Reset breakout margins */ margin-right: auto; /* Reset breakout margins */ } .timeline-carousel-wrapper { overflow: hidden; /* Keep hidden overflow on tablet */ border-radius: 12px; /* Keep border radius on tablet */ } .timeline-item { flex: 0 0 220px; } .timeline-card { width: 200px; height: 260px; margin: 0 auto; /* Center cards on tablet */ } .carousel-nav { width: 38px; height: 38px; } .legacy-values { gap: var(--spacing-sm); } .legacy-value { font-size: 16px; } .carousel-controls { gap: var(--spacing-md); display: flex; /* Show controls on tablet */ } /* Other Grid Sections */ .reach-grid, .trust-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } .reach-content { padding-right: 0; order: 2; text-align: center; } .reach-map { order: 1; } /* Team Section */ .ceo-section { grid-template-columns: 1fr; text-align: center; } .ceo-content { padding-left: 0; } .team-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); } /* Trust Section */ .trust-features { grid-template-columns: 1fr; gap: var(--spacing-lg); } /* Typography */ .powering-title, .legacy-title, .reach-title, .trust-title, .team-title, .join-title { font-size: 32px; line-height: 38px; letter-spacing: -0.7616px; } } /* Mobile Styles (320px - 767px) - UPDATED FOR SINGLE CARD */ @media screen and (max-width: 767px) { /* Main Layout */ .about-main { padding-top: 60px; } /* Hero Section */ .hero-title { font-size: 64px; line-height: 70px; min-height: 100px; } /* Section Spacing */ .powering-section, .legacy-section, .reach-section, .trust-section, .team-section, .join-section { padding: 0 0 24px 0; } /* Powering Section */ .powering-main-grid { grid-template-columns: 1fr; gap: var(--spacing-md); text-align: center; margin-bottom: var(--spacing-lg); } .powering-title { font-size: 28px; line-height: 34px; letter-spacing: -0.4px; text-align: left; } .powering-subtitle { font-size: 20px; line-height: 24px; letter-spacing: -0.4px; } .powering-year { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; } .video-thumbnail { aspect-ratio: 16 / 9; /* Mobile friendly ratio */ border-radius: 8px; } /* Legacy Section - Mobile Single Card */ .carousel-controls { display: none; /* Hide carousel controls on mobile */ } .timeline-carousel-container { margin-bottom: var(--spacing-lg); padding: 0; /* Remove container padding for full width */ width: 100vw; /* Full viewport width - ONLY ON MOBILE */ margin-left: calc(-50vw + 50%); /* Break out of container - ONLY ON MOBILE */ margin-right: calc(-50vw + 50%); /* Break out of container - ONLY ON MOBILE */ max-width: none; /* Remove max-width constraint on mobile */ } .timeline-carousel-wrapper { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ padding: 0; /* Remove all padding */ border-radius: 0; /* Remove border radius for full width feel */ padding-bottom: var(--spacing-xs); /* Add small bottom padding for touch area */ } .timeline-carousel-wrapper::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .timeline-carousel { display: flex; width: max-content; padding: var(--spacing-lg) var(--spacing-md); /* Add horizontal padding to carousel itself */ gap: var(--spacing-md); /* Reduce gap for tighter spacing */ scroll-snap-type: x mandatory; /* Enable snap scrolling */ scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .timeline-item { flex: 0 0 calc(100vw - 48px); /* Full viewport width minus safe margins */ scroll-snap-align: center; /* Center each card when scrolling */ display: flex; justify-content: center; /* Center the card within the item */ padding: 0; /* Remove any item padding */ } /* Remove zigzag on mobile - align all items */ .timeline-item-top, .timeline-item-bottom { align-self: center; margin-top: 0; } .timeline-card { width: calc(100vw - 48px); /* Maximum width with minimal safe margins */ max-width: 400px; /* Increased maximum for better utilization */ height: 480px; /* Increased height for better proportion */ margin: 0; /* Remove all margins */ border-radius: 16px; /* Slightly larger border radius */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Enhanced shadow */ transition: transform 0.2s ease; /* Smooth touch feedback */ } .timeline-card:active { transform: scale(0.98); /* Subtle press feedback */ } .timeline-card:focus { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 16px; } /* Enhanced overlay for better readability */ .timeline-overlay { transform: translateY(0); opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.2) 80%, transparent 100%); padding: var(--spacing-xl) var(--spacing-lg); /* Increased padding */ } .timeline-image { width: 100%; height: 100%; position: relative; overflow: hidden; } .timeline-image img { width: 100%; height: 100%; object-fit: cover; /* Ensure image covers entire container */ object-position: center; /* Center the image */ transform: scale(1); /* Remove scaling for cleaner look */ filter: brightness(0.85); /* Subtle darkening for better overlay contrast */ display: block; /* Remove any inline spacing */ } .timeline-year { font-size: 24px; /* Larger font for better visibility */ line-height: 28px; margin-bottom: var(--spacing-md); /* More space below year */ font-weight: var(--font-weight-bold); } .timeline-description { font-size: 16px; /* Larger font for better readability */ line-height: 22px; color: rgba(255, 255, 255, 0.95); /* Slightly more opaque */ } /* Add scroll indicator for mobile */ .timeline-carousel-container::after { content: 'Swipe to explore our journey →'; display: block; text-align: center; font-family: var(--font-family-primary); font-size: 14px; color: #667085; margin-top: var(--spacing-md); font-style: italic; } /* Responsive Core Values - Stack vertically */ .legacy-values { flex-direction: column; gap: var(--spacing-xs); align-items: center; margin-bottom: var(--spacing-xl); /* Reduce bottom margin */ } .legacy-value { font-size: 16px; /* Larger font for mobile */ line-height: 20px; text-align: center; } /* Adjust section description for mobile */ .legacy-description { font-size: 16px; line-height: 24px; /*padding: 0 var(--spacing-md); /* Add horizontal padding */ margin-bottom: var(--spacing-xl); } /* Legacy footer adjustment */ .legacy-footer { font-size: 16px; line-height: 24px; /*padding: 0 var(--spacing-md);*/ margin-top: var(--spacing-xl); } /* Reach Section */ .reach-stats { grid-template-columns: 1fr; gap: var(--spacing-lg); } .reach-map { min-height: 300px; } .map-placeholder { width: 250px; height: 320px; } /* Trust Section */ .trust-features { grid-template-columns: 1fr; gap: var(--spacing-md); } /* Team Section */ .ceo-section { padding: var(--spacing-lg); } .team-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } /* Join Section */ .join-actions { flex-direction: column; align-items: center; gap: var(--spacing-md); } .floating-avatar { width: 40px; height: 40px; } /* Typography - Other Sections */ .legacy-title, .reach-title, .trust-title, .team-title, .join-title { font-size: 28px; line-height: 34px; letter-spacing: -0.4px; } .stat-number { font-size: 32px; line-height: 38px; letter-spacing: -1.824px; } /* UI Elements .scroll-top-btn { bottom: 90px; width: 40px; height: 40px; font-size: 14px; right: 15px; }*/ } /* ======================================== SMOOTH SCROLLING ENHANCEMENTS ======================================== */ .timeline-carousel { scroll-behavior: smooth; } /* ======================================== UTILITY CLASSES ======================================== */ .desktop-only { display: block; } .mobile-only { display: none; } @media screen and (max-width: 767px) { .desktop-only { display: none; } .mobile-only { display: block; } } /* ======================================== ACCESSIBILITY IMPROVEMENTS ======================================== */ /* Focus states for better accessibility */ .team-member:focus-within, .trust-feature:focus-within, .timeline-item:focus-within, .video-thumbnail:focus-within, .carousel-nav:focus, .pagination-dot:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } .timeline-card:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 14px; } /* Reduced motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .floating-avatar, .map-pin { animation: none; } .video-thumbnail img, .trust-hero-image img, .team-member, .trust-feature, .timeline-item, .video-thumbnail, .timeline-carousel, .timeline-card, .timeline-image img, .timeline-overlay, .pagination-dot, .carousel-nav { transition: none; } .timeline-carousel { scroll-behavior: auto; } .timeline-card:hover .timeline-image img { transform: none; filter: none; } } /* Reduced motion support for mobile */ @media (prefers-reduced-motion: reduce) and (max-width: 767px) { .timeline-carousel { scroll-behavior: auto; } .timeline-card { transition: none; } .timeline-card:active { transform: none; } } /* High contrast mode support */ @media (prefers-contrast: high) { .trust-feature, .team-member, .video-thumbnail { border: 2px solid var(--color-text-primary); } .floating-avatar { opacity: 1; } .video-overlay { background: rgba(0, 0, 0, 0.8); } .timeline-card { border: 2px solid var(--color-text-primary); } .timeline-overlay { background: rgba(0, 0, 0, 0.95); } .carousel-nav { border: 2px solid var(--color-text-primary); } } /* ======================================== DEPARTMENTS SECTION - TEAM SHOWCASE ======================================== */ .departments-section { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); } .departments-title { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: 42px; line-height: 50px; letter-spacing: -0.9996px; color: var(--color-primary); margin-bottom: var(--spacing-md); text-align: center; } .departments-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: 18px; line-height: 28px; letter-spacing: 0; color: #667085; margin-bottom: var(--spacing-xxl); text-align: center; /*max-width: 800px;*/ margin-left: auto; margin-right: auto; } /* Team Members Grid */ .departments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); max-width: 1200px; margin: 0 auto; align-items: end; } .dept-member-item { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); transition: transform 0.3s ease; } .dept-member-item:hover { transform: translateY(-8px); } .dept-member-avatar { width: 140px; height: 140px; border-radius: 5%; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .dept-member-item:hover .dept-member-avatar { box-shadow: 0 8px 24px rgba(227, 0, 27, 0.2); transform: scale(1.05); } .dept-member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .dept-member-name { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: 16px; line-height: 20px; letter-spacing: 0; color: #667085; text-align: center; transition: color 0.3s ease; } /* Highlighted member (4th item - center) .dept-highlight .dept-member-name { color: var(--color-primary); font-weight: var(--font-weight-bold); font-size: 16px; }*/ .dept-highlight .dept-member-avatar { box-shadow: 0 8px 20px rgba(227, 0, 27, 0.15); } .dept-member-item:hover .dept-member-name { color: var(--color-primary); } /* Tablet Responsive */ @media screen and (max-width: 1023px) { .departments-title { font-size: 32px; line-height: 38px; letter-spacing: -0.7616px; } .departments-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } .dept-member-avatar { width: 120px; height: 120px; } } /* Mobile Responsive */ @media screen and (max-width: 767px) { .departments-title { font-size: 28px; line-height: 34px; letter-spacing: -0.4px; } .departments-description { font-size: 16px; line-height: 24px; margin-bottom: var(--spacing-xl); text-align: justify; } .departments-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .dept-member-avatar { width: 100px; height: 100px; } .dept-member-name { font-size: 13px; line-height: 18px; } .dept-highlight .dept-member-name { font-size: 14px; } } @media screen and (max-width: 480px) { .departments-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } .dept-member-avatar { width: 85px; height: 85px; } .dept-member-name { font-size: 12px; line-height: 16px; } .dept-highlight .dept-member-name { font-size: 13px; } } /* ======================================== HOMEPAGE STYLES - OXYGEN 25 YEARS Uses existing design system variables from style.css ======================================== */ /* ======================================== CRITICAL FIX: PREVENT HORIZONTAL SCROLLBAR Add this at the TOP of your home.css file ======================================== */ /* 1. Force body/html to hide horizontal overflow */ html { overflow-x: hidden !important; width: 100%; max-width: 100vw; } body { overflow-x: hidden !important; width: 100%; max-width: 100vw; position: relative; } /* 2. Ensure ALL sections don't overflow horizontally */ section { overflow-x: hidden !important; max-width: 100%; } /* 3. Fix the History section specifically */ .history { overflow-x: hidden !important; overflow-y: visible !important; max-width: 100%; } /* 4. Container should never overflow */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); overflow-x: visible; /* Allow content to be visible but not scrollable */ } /* 5. CRITICAL: Panel container must be contained */ .panel-container-history { width: 100%; max-width: 100vw; height: 100vh; display: flex; flex-wrap: nowrap; overflow-x: hidden !important; /* Changed from visible to hidden */ overflow-y: hidden !important; position: relative; } /* 6. Individual panels should not overflow */ .panel-history { width: 100%; min-width: 100%; max-width: 100%; height: 100vh; flex-shrink: 0; overflow: hidden; } /* 7. Fix any absolute positioned elements that might overflow */ .history-hero-year-bg, .timeline-year-bg { max-width: 100vw; overflow: hidden; } /* 8. Ensure grid items don't cause overflow */ .history-timeline-grid { max-width: 100%; overflow: hidden; } /* 9. Fix video slider and hero section */ .hero, .video-slider, .video-slide { width: 100%; max-width: 100vw; overflow-x: hidden; } /* 10. About section should not overflow */ .about { max-width: 100%; overflow: hidden; } .about-content { max-width: 100%; } .about-map-static { max-width: 100%; } /* 11. All other sections */ .divisions, .awards, .news, .blogs { width: 100%; max-width: 100vw; overflow-x: hidden; } /* 12. Fix any text elements that might be too wide */ * { word-wrap: break-word; overflow-wrap: break-word; } /* 13. Ensure box-sizing is consistent */ *, *::before, *::after { box-sizing: border-box; } /* 14. MOBILE SPECIFIC: Absolutely no horizontal scroll */ @media screen and (max-width: 480px) { html, body { overflow-x: hidden !important; width: 100vw !important; max-width: 100vw !important; } .panel-container-history { display: block !important; overflow: visible !important; width: 100% !important; } section { width: 100vw !important; max-width: 100vw !important; overflow-x: hidden !important; } .container { padding: 0 20px; width: 100%; max-width: 100%; } } /* 15. Desktop: Keep History scrollable but contained */ @media screen and (min-width: 481px) { /* History section gets its own scroll container */ .history { position: relative; overflow: hidden; /* Hide the overflow from the page */ } /* The scroll happens INSIDE the panel container, not the page */ .panel-container-history { overflow-x: hidden; /* Initially hidden, GSAP will control scroll */ overflow-y: hidden; } } /* ======================================== RESET AND BASE ======================================== */ /* * { margin: 0; padding: 0; box-sizing: border-box; } */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } /* ======================================== ABOUT SECTION - STATIC MAP VERSION ======================================== */ /* About Section Wave Background */ .about { position: relative; overflow: hidden; } .about-waves-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } #aboutWavesCanvas { display: block; width: 100%; height: 100%; } .about-content { position: relative; z-index: 1; } /* .about { padding: var(--spacing-xxl) 0; background: var(--color-bg-base); position: relative; min-height: 100vh; }*/ .about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: radial-gradient(circle at 50% 0%, rgba(220, 0, 50, 0.03) 0%, transparent 70%); } .about-content { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: var(--spacing-xl); align-items: start; width: 100%; } /* Left Side: Text Content */ .about-text { z-index: 2; grid-column: 1; margin-top: 40% } /* Higher specificity to override style.css h2 */ .about h2.section-title, h2.section-title { font-family: var(--font-family-primary) !important; font-weight: 600 !important; font-size: clamp(48px, 8vw, 86px) !important; color: var(--color-primary) !important; line-height: 0.95 !important; letter-spacing: -2px !important; margin-bottom: var(--spacing-lg) !important; } .about-description { font-family: var(--font-family-primary); font-weight: var(--font-weight-regular); font-size: clamp(16px, 2.5vw, 24px); color: var(--color-text-primary); line-height: 1.5; margin-bottom: var(--spacing-lg); } /* ======================================== STORE SELECTOR - UPDATED STYLING ======================================== */ /* Force store selector to stay inside text column */ .about-text .store-selector { margin-top: var(--spacing-lg); } .selector-label { font-family: var(--font-family-primary); font-size: 14px; font-weight: 600; color: var(--color-primary); display: block; margin-bottom: 10px; } .store-selector { display: flex; gap: 8px; align-items: center; max-width: 400px; /* Adjust this value to your preferred width */ } .select-wrapper { position: relative; flex: 1; } /* Dropdown styling - matches design */ .select-wrapper select { width: 100%; padding: 18px 45px 18px 20px; font-size: 1rem; font-family: var(--font-family-primary); font-weight: 400; color: #666; /* Gray text color */ border: 1px solid #e0e0e0; /* Light gray border */ border-radius: 8px; background: white; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle shadow */ } /* Placeholder styling - "Select District" */ .select-wrapper select:invalid, .select-wrapper select[value=""] { color: #999; /* Lighter gray for placeholder */ } /* When an option is selected */ .select-wrapper select:valid { color: #333; /* Darker text when selected */ } /* Focus state */ .select-wrapper select:focus { outline: none; border-color: #c0c0c0; /* Slightly darker gray on focus */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } /* Hover state */ .select-wrapper select:hover { border-color: #b0b0b0; } /* Dropdown arrow */ .dropdown-arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform 0.3s ease, color 0.3s ease; pointer-events: none; color: #999; /* Light gray arrow */ width: 20px; height: 20px; } /* When dropdown is focused/open */ .select-wrapper select:focus~.dropdown-arrow, .select-wrapper.open .dropdown-arrow { transform: translateY(-50%) rotate(180deg); color: #666; } /* Submit button styling - matches design */ .store-selector button, .store-selector .submit-btn { padding: 16px 28px; background: var(--color-primary, #e31e24); color: white; border: none; border-radius: 8px; font-family: var(--font-family-primary); font-size: 16px; line-height: 24px; font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(227, 30, 36, 0.2); } .store-selector button:hover, .store-selector .submit-btn:hover { background: #c11a1f; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(227, 30, 36, 0.3); } .store-selector button:active, .store-selector .submit-btn:active { transform: translateY(0); } /* ======================================== FIXED RESPONSIVE DESIGN ======================================== */ @media (max-width: 768px) { .store-selector { flex-direction: column; gap: 15px; /* Increased gap for better touch targets */ width: 100%; max-width: 100%; /* Allow it to fill the container */ align-items: center; /* This centers the button relative to the dropdown */ } .select-wrapper { width: 100%; /* Make wrapper full width */ flex: none; } .select-wrapper select { width: 100%; /* Ensure select fills the wrapper */ padding: 14px 18px; font-size: 16px; /* 16px prevents iOS zoom on focus */ text-align: left; } .store-selector .submit-btn { width: auto; /* Remove full width */ min-width: 140px; /* Gives it a solid base size */ max-width: 80%; /* Ensures it stays smaller than the dropdown */ padding: 12px 30px; /* Slightly tighter padding */ font-size: 15px; margin: 0 auto; /* Centers the button */ border-radius: 25px; } /* Adjust arrow position for mobile */ .dropdown-arrow { right: 15px; } } @media (max-width: 480px) { .store-selector { align-items: center; /* Keeps button centered and narrow */ gap: 12px; } .select-wrapper select { padding: 12px 36px 12px 16px; /* Slightly tighter padding for small screens */ font-size: 16px; /* Keeps font readable to prevent auto-zoom */ } .store-selector .submit-btn { width: auto; min-width: 120px; /* Slightly smaller minimum for tiny screens */ max-width: 70%; /* Ensures it is clearly smaller than the bar */ padding: 10px 20px; font-size: 14px; } } /* ======================================== ABOUT MAP SECTION - FIXED FOR ALL DEVICES ======================================== */ .about-map-static { position: relative; width: 100%; height: auto; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 20px; } /* Wrapper to maintain aspect ratio */ .reach-map { position: relative; width: 100%; max-width: 650px; margin: 0 auto; } .map-placeholder { position: relative; width: 100%; padding-bottom: 133.33%; /* Aspect ratio for Kerala map */ } .kerala-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .kerala-map-image { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } /* Waves Background for About Section */ .about-waves-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; } .about-waves-background canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; opacity: 0.3; pointer-events: auto; } .about .container-about { position: relative; z-index: 1; pointer-events: auto; } /* ======================================== LOCATION PINS - RESPONSIVE POSITIONING ======================================== */ .pin-container { position: absolute; cursor: pointer; z-index: 10; transition: transform 0.3s ease; transform: translate(-50%, -100%); pointer-events: auto; } .pin-container:hover { transform: translate(-50%, -100%) scale(1.2); z-index: 1000; /* Bring hovered pin above all others */ } .pin-icon { width: 30px; height: 35px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); display: block; } /* ======================================== DUPLICATE PIN POSITIONS - Commented out on 2026-04-23 These were overriding the correct pin positions defined around line 1094. Kept for reference only. /* ======================================== DISTRICT PIN POSITIONS ======================================== */ /* District Pin Positions */ .pin-malappuram { top: 30%; left: 42%; animation-delay: 3.2s; } .pin-palakkad { top: 38%; left: 60%; animation-delay: 3.2s; } .pin-thrissur { top: 44%; left: 46%; animation-delay: 2.8s; } .pin-ernakulam { top: 53%; left: 52%; animation-delay: 2.4s; } .pin-idukki { top: 55.29%; left: 74.45%; animation-delay: 2s; } .pin-kottayam { top: 60.29%; left: 66.53%; animation-delay: 1.6s; } .pin-alappuzha { top: 65%; left: 57.06%; animation-delay: 1.2s; } .pin-pathanamthitta { top: 68.29%; left: 77.28%; animation-delay: 0.8s; } .pin-kollam { top: 73%; left: 68.71%; animation-delay: 0.4s; } .pin-thiruvananthapuram { top: 76.86%; left: 75.39%; animation-delay: 0s; } @media screen and (max-width: 480px) { .pin-malappuram { top: 38%; left: 42%; } .pin-palakkad { top:43%; left: 58%; } .pin-thrissur { top: 53%; left: 50%; } .pin-ernakulam { top: 65%; left: 53%; } .pin-idukki { top: 66.29%; left: 76.45%; } .pin-kottayam { top: 73.29%; left: 64.53%; } .pin-alappuzha { top: 81%; left: 55.06%; } .pin-pathanamthitta { top: 84.29%; left: 79.28%; } .pin-kollam { top: 92%; left: 66.71%; } .pin-thiruvananthapuram { top: 103.86%; left: 76.39%; } } @media screen and (min-width: 481px) and (max-width: 810px) { .pin-malappuram { top: 49%; left: 47%; } .pin-palakkad { top:57%; left: 62%; } .pin-thrissur { top: 62%; left: 50%; } .pin-ernakulam { top: 72%; left: 53%; } .pin-idukki { top: 75.29%; left: 76.45%; } .pin-kottayam { top: 82.29%; left: 64.53%; } .pin-alappuzha { top: 92%; left: 55.06%; } .pin-pathanamthitta { top: 93.29%; left: 79.28%; } .pin-kollam { top: 104%; left: 66.71%; } .pin-thiruvananthapuram { top: 111.86%; left: 75.39%; } } /* ======================================== PIN TOOLTIP ======================================== */ .pin-container::after { content: attr(data-location); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(227, 0, 27, 0.95); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; margin-bottom: 5px; z-index: 1; /* Tooltip stays relative to its pin */ } .pin-container:hover::after { opacity: 1; } /* ======================================== RESPONSIVE - TABLET ======================================== */ @media screen and (max-width: 1023px) { .about-content { gap: var(--spacing-xl); } /* Show dropdown on tablet */ .about-district-selector { display: block; } .selector-wrapper { max-width: 400px; } .store-dropdown { padding: 14px 40px 14px 18px; font-size: 16px; } .about-map-static { padding: 15px; } .reach-map { max-width: 500px; } .pin-icon { width: 26px; height: 31px; } .pin-container::after { font-size: 11px; padding: 5px 10px; } } /* Mobile Large (768px) */ @media screen and (max-width: 768px) { .about-map-static { padding: 10px; width: 100%; max-width: 100%; box-sizing: border-box; } .reach-map { max-width: 100%; width: 100%; } .pin-icon { width: 24px; height: 28px; } } /* ======================================== RESPONSIVE - MOBILE Order: TEXT → DROPDOWN → MAP ======================================== */ @media screen and (max-width: 767px) { .about { padding: 30px 0 60px; overflow: hidden; } .about-content { grid-template-columns: 1fr; gap: 24px; display: flex; flex-direction: column; width: 100%; max-width: 100%; /*overflow: hidden;*/ } /* ORDER 1: Text content appears first */ .about-text { order: 1; width: 100%; } /* Show mobile instruction */ .mobile-tap-instruction { display: block; } /* ORDER 2: Dropdown appears second (inside about-text) */ .about-district-selector { display: block !important; order: 2; margin-bottom: var(--spacing-lg); } .selector-wrapper { width: 100%; max-width: 100%; } .selector-label { font-size: 13px; margin-bottom: 8px; } .store-dropdown { width: 100%; padding: 14px 40px 14px 18px; font-size: 16px; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .dropdown-icon { right: 14px; } /* ORDER 3: Static Map appears last */ .about-map-static { order: 3; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 16px 30px; min-height: 380px; } .reach-map { width: 100%; max-width: 260px; margin: 0 auto; } .map-placeholder { padding-bottom: 140%; } .kerala-map-image { border-radius: 16px; } .section-title { font-size: clamp(36px, 10vw, 60px); margin-bottom: var(--spacing-md); } .about-description { font-size: 16px; margin-bottom: var(--spacing-md); } /* Ensure pins don't interfere with dropdown on mobile */ .pin-container { pointer-events: auto; } } /* ======================================== RESPONSIVE - SMALL MOBILE ======================================== */ @media screen and (max-width: 480px) { .about-description { font-size: 15px; } .mobile-tap-instruction { font-size: 13px; padding: 10px 14px; } .selector-wrapper { width: 100%; } .selector-label { font-size: 12px; } .store-dropdown { padding: 12px 36px 12px 16px; font-size: 15px; border-radius: 10px; } .dropdown-icon { right: 12px; width: 20px; height: 20px; } .about-map-static { padding: 0 12px 48px; min-height: 320px; } .reach-map { max-width: 220px; width: 100%; } .map-placeholder { padding-bottom: 140%; } .pin-icon { width: 22px; height: 26px; } .pin-container::after { font-size: 10px; padding: 4px 8px; } } /* Mobile Small (below 390px) */ @media screen and (max-width: 390px) { .reach-map { max-width: 300px; } .pin-icon { width: 20px; height: 24px; } } /* ======================================== LANDSCAPE MOBILE OPTIMIZATION ======================================== */ @media screen and (max-width: 768px) and (orientation: landscape) { .mobile-tap-instruction { padding: 8px 12px; font-size: 12px; } } .store-selector .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; background: #999; } /* ======================================== HISTORY SECTION - CONSOLIDATED & FINAL Remove BOTH old History sections and replace with this ======================================== */ /* ======================================== BASE SETUP - DESKTOP HORIZONTAL SCROLL ======================================== */ .history { padding: 0; background: transparent; position: relative; } .history::before { display: none; } .history .container { display: none; } /* Panel Container for Horizontal Scroll */ .panel-container-history { width: 100%; height: 100vh; display: flex; flex-wrap: nowrap; overflow-x: hidden; } .panel-history { width: 100%; height: 100vh; flex-shrink: 0; } /* ======================================== HISTORY HERO PANEL (1999) ======================================== */ .history-hero { position: relative; width: 100%; height: 100vh; min-height: 700px; overflow: hidden; background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%); } .history-hero-year-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30vw; font-weight: 900; background: linear-gradient(to right, rgba(217, 217, 217, 1) 0%, rgba(230, 226, 226, 0.2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; z-index: 1; user-select: none; pointer-events: none; } .history-hero-content { position: relative; font-family: var(--font-family-primary); width: 100%; height: 100%; max-width: 1400px; margin: 0 auto; padding: 40px; z-index: 2; } .history-hero-title { position: absolute; top: 80px; left: 80px; font-size: 80px; font-weight: 600; color: var(--color-primary); line-height: 1.1; letter-spacing: -2px; z-index: 3; } .history-timeline-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; padding: 80px; } .history-grid-item { position: relative; display: flex; align-items: center; justify-content: center; } .history-timeline-item-1 { grid-column: 6 / 7; grid-row: 1 / 2; } .history-content-block { grid-column: 3 / 5; grid-row: 2 / 3; display: flex; align-items: center; padding: 0 20px; justify-content: center; } .history-timeline-item-2 { grid-column: 5 / 6; grid-row: 3 / 4; position: relative; top: -30px; left: -20px; } .timeline-item-3 { grid-column: 1 / 2; grid-row: 2 / 4; } /* History Images */ .history-item-image-1 { width: 232px; height: 284px; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; display: block; } .history-item-image-2 { width: 210px; height: 224px; object-fit: cover; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; display: block; } .item-image-3 { width: 184px; height: 214px; object-fit: cover; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; display: block; } .item-description { font-size: 15px; line-height: 1.7; color: var(--color-text-primary); text-align: left; /* CRITICAL: Prevent text blur during GPU transforms */ -webkit-font-smoothing: subpixel-antialiased !important; -moz-osx-font-smoothing: auto !important; text-rendering: geometricPrecision !important; transform: none !important; will-change: auto !important; backface-visibility: visible !important; transform-style: flat !important; } /* ======================================== TIMELINE SECTIONS (2005, 2010, etc.) ======================================== */ .timeline-section { position: relative; width: 100%; height: 100vh; min-height: 700px; overflow: hidden; background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%); } .timeline-year-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30vw; font-weight: 900; background: linear-gradient(to right, rgba(217, 217, 217, 1) 0%, rgba(230, 226, 226, 0.2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; z-index: 1; user-select: none; pointer-events: none; } .timeline-content { position: relative; width: 100%; height: 100%; max-width: 1400px; margin: 0 auto; padding: 80px 80px 120px; z-index: 2; } .timeline-layout { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto 1fr auto; gap: 10px; align-items: start; } /* Timeline Line */ .timeline-line { position: absolute; left: 100px; right: 100px; top: calc(50% - 100px); transform: translateY(-50%); height: 2px; background-color: #e0e0e0; z-index: 1; } .timeline-progress-line { box-shadow: 0 0 10px rgba(220, 0, 50, 0.5); } /* Timeline Content Elements */ .timeline-date { position: absolute; left: 80px; top: calc(50% + 20px); margin: 0; z-index: 3; } .timeline-date h2 { font-size: 28px; font-weight: 700; color: var(--color-primary); line-height: 36px; margin-bottom: 12px; margin-top: 0; letter-spacing: 0.1px; opacity: 1 !important; transform: none !important; } .timeline-date p { font-size: 16px; line-height: 24px; color: var(--color-text-primary); max-width: 240px; margin: 0; opacity: 1 !important; transform: none !important; } .timeline-center-image { position: absolute; top: calc(50% - 100px); left: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; } .center-image-container { width: 240px; height: 240px; border-radius: 50%; overflow: visible; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; z-index: 3; pointer-events: auto; margin: 0; } .center-image-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .center-image-label { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); padding: 16px 32px; border-radius: 50px; text-align: center; min-width: 280px; white-space: nowrap; } .center-image-label p { font-size: 16px; font-weight: 600; color: var(--color-primary); line-height: 1.4; margin: 0; opacity: 1 !important; transform: none !important; } .center-image-label span { font-size: 14px; color: var(--color-text-light); opacity: 1 !important; transform: none !important; } /* Timeline Cards */ .timeline-card-top { grid-column: 2 / 6; grid-row: 1 / 2; display: flex; align-items: flex-start; gap: 10px; } .timeline-card-bottom { grid-column: 9 / 13; grid-row: 3 / 4; display: flex; align-items: flex-start; gap: 20px; align-self: center; } .card-content { flex: 1; max-width: 180px; } .card-image-top, .card-image-bottom { width: 120px; height: 160px; border-bottom-right-radius: 3vw; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); flex-shrink: 0; } .card-image-top img, .card-image-bottom img { width: 100%; height: 100%; object-fit: cover; } .card-dot { width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-primary); margin-bottom: 8px; flex-shrink: 0; } .card-content h3 { font-size: 24px; font-weight: 700; color: var(--color-primary); line-height: 1.3; margin-bottom: 12px; opacity: 1 !important; transform: none !important; } .card-content p { font-size: 13px; line-height: 1.6; color: var(--color-text-light); margin: 0; opacity: 1 !important; transform: none !important; } /* ======================================== RESPONSIVE - TABLET (1024px and below) ======================================== */ @media screen and (max-width: 1024px) { .history-hero { min-height: 100vh; height: auto; } .history-hero-year-bg { font-size: 26vw; } .history-hero-content { padding: 30px; } .history-hero-title { font-size: 56px; left: 40px; top: 250px; } .history-timeline-grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto auto auto; gap: 15px; padding: 280px 40px 120px; } .history-timeline-item-1 { grid-column: 5 / 7; grid-row: 1 / 2; } .history-item-image-1 { width: 180px; height: 220px; } .history-content-block { grid-column: 2 / 6; grid-row: 3 / 4; padding: 0 20px; } .item-description { font-size: 14px; line-height: 1.6; text-align: center; } .timeline-item-3 { grid-column: 1 / 2; grid-row: 4 / 5; } .item-image-3 { width: 140px; height: 180px; } .history-timeline-item-2 { grid-column: 6 / 7; grid-row: 4 / 5; top: -20px; left: -15px; } .history-item-image-2 { width: 160px; height: 210px; } .timeline-section { min-height: 650px; } .timeline-year-bg { font-size: 26vw; } .timeline-content { padding: 60px 50px 100px; } .timeline-line, .timeline-progress-line { left: 70px !important; right: 70px !important; } .timeline-date { left: 50px; } .timeline-date h2 { font-size: 28px; margin-bottom: 10px; } .timeline-date p { font-size: 13px; line-height: 20px; max-width: 180px; } .center-image-container { width: 190px; height: 190px; } .center-image-label { bottom: -65px; min-width: 200px; padding: 10px 20px; } .center-image-label p { font-size: 13px; } .center-image-label span { font-size: 11px; } .card-content { max-width: 140px; } .card-image-top, .card-image-bottom { width: 95px; height: 125px; border-bottom-right-radius: 4vw; } .card-dot { width: 13px; height: 13px; margin-bottom: 6px; } .card-content h3 { font-size: 19px; margin-bottom: 10px; } .card-content p { font-size: 11px; line-height: 1.5; } } /* ======================================== RESPONSIVE - MOBILE (480px and below) ======================================== */ @media screen and (max-width: 480px) { /* CRITICAL: Disable horizontal scroll on mobile */ .panel-container-history { display: block !important; width: 100% !important; height: auto !important; overflow: visible !important; } .panel-history { width: 100% !important; height: auto !important; min-height: auto !important; transform: none !important; } .panel-history+.panel-history { margin-top: 60px !important; padding-top: 20px !important; } /* History Hero */ .history-hero { min-height: 100vh; height: 100vh; padding: 20px 15px 70px; display: flex; flex-direction: column; } .history-hero-year-bg { font-size: 32vw; } .history-hero-content { padding: 15px; height: 100%; display: flex; flex-direction: column; } .history-hero-title { position: relative; font-size: 34px; left: 0; top: 0; margin-bottom: 20px; flex-shrink: 0; } .history-timeline-grid { position: relative; display: flex; flex-direction: column; gap: 15px; padding: 0; align-items: center; flex: 1; } .history-timeline-item-1 { order: 1; width: 100%; max-width: 250px; } .history-item-image-1 { width: 100%; height: auto; aspect-ratio: 4/3; } .history-content-block { order: 2; width: 100%; padding: 0 5px; } .item-description { font-size: 13px; line-height: 1.5; text-align: left; } .timeline-item-3 { order: 3; width: 100%; max-width: 140px; align-self: flex-start; margin-left: 10px; } .item-image-3 { width: 100%; height: auto; aspect-ratio: 3/4; } .history-timeline-item-2 { order: 4; width: 100%; max-width: 180px; align-self: flex-end; position: relative; top: 0; left: 0; margin-top: -90px; margin-right: 10px; } .history-item-image-2 { width: 100%; height: auto; aspect-ratio: 4/5; } /* Timeline Sections */ .timeline-section { min-height: 100vh; height: auto; padding-bottom: 100px; } .timeline-year-bg { font-size: 32vw; top: 60%; } .timeline-content { padding: 30px 20px 80px; } .timeline-layout { display: flex; flex-direction: column; gap: 30px; align-items: center; } .timeline-line, .timeline-progress-line { left: 20px !important; right: 20px !important; top: 48% !important; transform: translateY(-50%) !important; height: 2px !important; } .timeline-progress-line { height: 3px !important; z-index: 2 !important; } .timeline-section .timeline-date { position: relative; left: 0; top: 0; margin: 0 0 10px 0; text-align: left; width: 100%; order: 1; } .timeline-date h2 { font-size: 30px; margin-bottom: 8px; } .timeline-date p { font-size: 14px; line-height: 22px; max-width: 100%; } .timeline-card-top { position: relative; display: flex; flex-direction: row; align-items: center; gap: 15px; width: 100%; order: 2; text-align: left; } .timeline-card-top .card-dot { width: 14px; height: 14px; margin: 5px 0 0 0; align-self: flex-start; } .timeline-card-top .card-image-top { width: 80px; height: 100px; border-bottom-right-radius: 15px; order: 1; } .timeline-card-top .card-content { max-width: none; flex: 1; order: 2; } .timeline-card-top .card-content h3 { font-size: 17px; margin-bottom: 5px; } .timeline-card-top .card-content p { font-size: 12px; } .timeline-section .timeline-center-image { position: relative; top: 0; left: 0; transform: none; margin: 20px 0; order: 3; } .center-image-container { width: 260px; height: 260px; } .center-image-label { bottom: -55px; padding: 8px 20px; min-width: 220px; } .center-image-label p { font-size: 13px; } .center-image-label span { font-size: 11px; } .timeline-card-bottom { position: relative; display: flex; flex-direction: row; align-items: center; gap: 15px; width: 100%; order: 4; text-align: left; margin-top: 25px; } .timeline-card-bottom .card-dot { width: 14px; height: 14px; margin: 5px 0 0 0; align-self: flex-start; order: 3; } .timeline-card-bottom .card-image-bottom { width: 80px; height: 100px; border-bottom-right-radius: 15px; order: 1; } .timeline-card-bottom .card-content { max-width: none; flex: 1; order: 2; } .timeline-card-bottom .card-content h3 { font-size: 17px; margin-bottom: 5px; } .timeline-card-bottom .card-content p { font-size: 12px; } /* Force visibility on mobile */ .timeline-date h2, .timeline-date p, .center-image-label p, .center-image-label span, .timeline-card-top h3, .timeline-card-top p, .timeline-card-bottom h3, .timeline-card-bottom p { opacity: 1 !important; visibility: visible !important; } } /* ======================================== ANIMATIONS ======================================== */ /* @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.8s ease-out; } */ /* Waves Background for About Section */ /* Waves Background for About Section */ .about { position: relative; overflow: hidden; } .about-waves-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; /* Allow clicks to pass through */ } .about-waves-background canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; /* pure white */ opacity: 0.3; pointer-events: auto; /* But enable mouse events on canvas */ } /* Ensure content is above waves */ .about .container { position: relative; z-index: 1; pointer-events: auto; /* Ensure content is clickable */ } /* Ensure split lines don't get clipped */ .split-line { overflow: visible !important; display: block; line-height: inherit !important; padding-bottom: 0.1em; /* Extra space for descenders */ } /* Ensure parent containers don't clip */ .history, section { overflow: visible !important; } /* Specific fix for your section titles .history .section-title { overflow: visible !important; line-height: 1.1 !important; padding-bottom: 0.2em; }*/ /* ======================================== HORIZONTAL SCROLLBAR FIX Add this to your home.css file ======================================== */ /* 1. Prevent body/html from creating horizontal scroll */ html { overflow-x: hidden; width: 100%; } body { overflow-x: hidden; width: 100%; position: relative; } /* 2. Ensure all major sections don't overflow */ section { overflow-x: hidden; max-width: 100%; } /* 3. Fix container widths */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); overflow-x: visible; /* Allow content to be visible */ } /* 4. EXCEPTION: Allow horizontal scroll ONLY for History section .history { overflow-x: visible !important; */ /* Allow horizontal scroll for this section */ /* overflow-y: hidden; }*/ /* .panel-container-history { overflow-x: visible !important; overflow-y: hidden; }*/ history { overflow-x: hidden } /* 5. Fix potential overflow culprits */ /* About section */ .about { width: 100%; overflow: hidden; } .about-content { max-width: 100%; } /* 8. Fix absolute positioned elements */ .slide-content { max-width: 90%; } /* 9. Ensure 3D map container doesn't overflow */ .about-map-3d, #kerala-3d-container { max-width: 100%; overflow: hidden; } /* 10. MOBILE SPECIFIC: Disable horizontal scroll completely except History */ @media screen and (max-width: 480px) { /* For mobile, History should be vertical scroll (no horizontal) */ .panel-container-history { overflow-x: hidden !important; } /* Ensure all sections fit within viewport */ section:not(.history) { width: 100vw; overflow-x: hidden; } /* Fix container padding on mobile */ .container { padding: 0 20px; width: 100%; } /* Ensure images don't overflow */ img { max-width: 100%; height: auto; } } /* 11. DESKTOP: Preserve horizontal scroll for History only */ @media screen and (min-width: 481px) { /* All sections except History should have no horizontal scroll */ body>section:not(.history) { overflow-x: hidden; } /* 12. Fix any potential transform issues */ .history-hero-year-bg, .timeline-year-bg, .best-wrap h1 { transform-origin: center center; will-change: auto; /* Reset will-change if it causes issues */ } /* 14. Fix for elements with fixed positioning */ [style*="position: fixed"], [style*="position: absolute"] { max-width: 100vw; } /* 15. Prevent text from causing overflow */ * { word-wrap: break-word; overflow-wrap: break-word; } /* 16. Reset box-sizing for all elements */ *, *::before, *::after { box-sizing: border-box; } } /* ======================================== WAVES BACKGROUND - MOBILE RESPONSIVE POSITIONING ======================================== */ /* Tablet - Slight adjustment */ @media screen and (max-width: 1023px) { .about-waves-background { top: 20%; } } /* Mobile - Push waves down significantly */ @media screen and (max-width: 767px) { .about-waves-background { top: 35%; /* Push down to match your blue circle area */ height: 70%; /* Limit height so it doesn't overflow */ } .about-waves-background canvas { opacity: 0.25; /* More subtle on mobile */ } } /* Small Mobile - Extra push down */ @media screen and (max-width: 480px) { .about-waves-background { top: 40%; /* Push down even more */ height: 65%; } .about-waves-background canvas { opacity: 0.22; /* Very subtle */ } } /* Landscape Mobile - Keep it higher */ @media screen and (max-width: 768px) and (orientation: landscape) { .about-waves-background { top: 25%; height: 75%; } }