<style>
        html {
            scroll-behavior: smooth;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #f0f4fd 0%, #fcfbff 100%);
            color: #222;
        }
        .main-container {
            max-width: 100%; /* Changed from 1200px to 100% */
            width: 100%;
            margin: 0 auto;
            background: rgba(255,255,255,0.98);
            box-shadow: 0 12px 40px rgba(44,62,80,0.12);
            /* Removed border-radius for full-width edge-to-edge look */
            overflow: hidden;
            position: relative;
        }
        .parallax-hero {
            min-height: 500px;
            background-image: url('../img/about_banner.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .parallax-hero::before {
            content: '';
            position: absolute;
            width: 110%;
            height: 120%;
            top: -10%;
            left: -5%;
            background: radial-gradient(ellipse at center, rgba(44,62,80,0.65) 50%, rgba(52,152,219,0.30) 100%);
            z-index: 1;
            animation: heroGlow 6s ease-in-out infinite alternate;
        }
        @keyframes heroGlow {
            0% { opacity: 0.95; }
            100% { opacity: 0.7; }
        }
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
            padding: 40px 20px; /* Added horizontal padding */
            animation: heroFadeIn 1.5s cubic-bezier(.77,0,.175,1) both;
            max-width: 1200px; /* Keep content readable but background full width */
            margin: 0 auto;
        }
        @keyframes heroFadeIn {
            from { opacity: 0; transform: scale(1.1) translateY(60px);}
            to   { opacity: 1; transform: scale(1) translateY(0);}
        }
        .hero-content h1 {
            font-size: 3.2rem;
            font-weight: 800;
            letter-spacing: 2px;
            margin-bottom: 20px;
            text-shadow: 4px 6px 20px rgba(44,62,80,0.5);
            animation: fadeInUp 1.2s ease both;
        }
        @keyframes fadeInUp {
            0% {transform: translateY(50px); opacity:0}
            100% {transform: translateY(0); opacity:1}
        }
        .hero-content p {
            font-size: 1.4rem;
            max-width: 680px;
            margin: 0 auto;
            opacity: 0.93;
            font-weight: 300;
            letter-spacing: 0.3px;
            animation: fadeInUp 2s 0.5s both;
        }
        /* Floating shapes */
        .floating-shape {
            position: absolute;
            z-index: 1;
            opacity: 0.13;
            pointer-events: none;
        }
        .floating-shape-1 {
            top: 50px; left: 5vw;
            width: 120px;
            height: 120px;
            background: url('https://assets-global.website-files.com/5f5a31d2e0d2ce59c5db9a67/634d4feef7bdd970e93e9b4e_hero-blob-6.svg') no-repeat center/contain;
            animation: floatShape 8s infinite linear alternate, shapeSpin 14s linear infinite;
            animation-delay: 0s, 1s;
        }
        .floating-shape-2 {
            top: 160px; right: 9vw;
            width: 90px;
            height: 90px;
            background: url('https://assets-global.website-files.com/5d849c4206c7a6829cfe8b46/61ccfaab63acf302b9f7a7f6_shape-svg-1.svg') no-repeat center/contain;
            animation: floatShape 8s 2s infinite linear alternate, shapeSpinReverse 17s linear infinite;
            animation-delay: 2s, 2s;
        }
        .floating-shape-3 {
            bottom: 80px; left: 13vw;
            width: 88px;
            height: 88px;
            background: url('https://assets-global.website-files.com/608c1d5310f7254642e7c10d/608ca6e7c201f3b6c39eb60a_blob5.svg') no-repeat center/contain;
            animation: floatShape 8s 1.5s infinite linear alternate, shapePulse 6s ease-in-out infinite;
        }
        @keyframes floatShape {
            0% { transform: translateY(0px) }
            100% { transform: translateY(40px) }
        }
        @keyframes shapeSpin {
            from { transform: rotate(0deg);}
            to { transform: rotate(360deg);}
        }
        @keyframes shapeSpinReverse {
            from { transform: rotate(0deg);}
            to { transform: rotate(-360deg);}
        }
        @keyframes shapePulse {
            0%,100% { opacity: .12; transform: scale(1);}
            50% { opacity: .26; transform: scale(1.05);}
        }
        /* Introduction */
        .section {
            padding: 80px 5%; /* Changed from fixed 40px to percentage for fluid spacing */
            opacity: 0;
            transform: translateY(70px) scale(0.97);
            transition: opacity 1.1s cubic-bezier(.19,1,.22,1),transform 1.2s cubic-bezier(.71,.21,.54,1);
        }
        .section.visible {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
        }
        .split-section {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 40px;
            margin-bottom: 40px;
            max-width: 1400px; /* Optional: keeps content from stretching too wide on 4K monitors */
            margin-left: auto;
            margin-right: auto;
        }
        .split-section-reverse {
            flex-direction: row-reverse;
        }
        .split-content {
            flex: 1 1 45%;
            min-width: 315px;
            z-index: 2;
            position: relative;
            animation: fadeInLeft 1.2s .6s both;
        }
        @keyframes fadeInLeft {
            0% {opacity: 0; transform: translateX(-70px);}
            100% {opacity: 1; transform: translateX(0);}
        }
        .split-image {
            flex: 1 1 45%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeInRight 1.2s .6s both;
        }
        @keyframes fadeInRight {
            0% {opacity: 0; transform: translateX(70px);}
            100% {opacity: 1; transform: translateX(0);}
        }
        .split-image img {
            max-width: 100%;
            border-radius: 18px;
            box-shadow: 0 14px 40px rgba(44,62,80,0.13);
            transform: scale(1);
            transition: transform 0.6s cubic-bezier(.19,1,.22,1), box-shadow .6s cubic-bezier(.19,1,.22,1);
        }
        .split-image img:hover {
            transform: scale(1.07) rotate(-2deg) translateY(-7px);
            box-shadow: 0 34px 80px rgba(44,62,80,0.22);
            cursor: pointer;
            filter: brightness(1.07) contrast(1.08);
        }
        h2.section-title {
            color: #1666b0;
            font-size: 2.3rem;
            margin-bottom: 20px;
            letter-spacing: 1px;
            position: relative;
            animation: fadeInUp 1.2s ease both;
        }
        .section p, .section li {
            color: #444;
            font-size: 1.1rem;
        }
        .tag-list {
            margin: 30px 0 0 0;
            padding: 0;
            animation: fadeInUp 1s 1.4s both;
        }
        .tag-list span {
            display: inline-block;
            background: linear-gradient(90deg, #48c6ef 0%, #6f86d6 100%);
            color: #fff;
            padding: 9px 18px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 1rem;
            margin: 0 10px 10px 0;
            box-shadow: 0 1px 12px rgba(100, 187, 255, 0.13);
            opacity: 0.9;
            transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
            cursor: pointer;
        }
        .tag-list span:hover {
            background: linear-gradient(90deg, #6f86d6 0%, #48c6ef 100%);
            box-shadow: 0 2px 18px #48c6ef70;
            transform: scale(1.12) rotate(-5deg);
        }
        .divider {
            width: 140px;
            height: 4px;
            background: linear-gradient(90deg, #3498db 30%, #34e4db 100%);
            border-radius: 2px;
            margin: 20px auto 30px auto;
            opacity: 0.8;
            animation: dividerGrow 1.2s 1.2s both;
        }
        @keyframes dividerGrow {
            0% {width: 0; opacity: 0;}
            100% {width: 140px; opacity: 0.8;}
        }
        /* Parallax Mission */
        .parallax-mission {
            min-height: 350px;
            background-image: url('../img/parallex.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        .parallax-mission::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0; top: 0;
            background: linear-gradient(to left, rgba(52,152,219,0.89) 30%, rgba(44,62,80,0.4) 100%);
            z-index: 1;
        }
        .mission-content {
            position: relative;
            z-index: 2;
            color: white;
            text-align: center;
            padding: 80px 5%; /* Fluid padding */
            opacity: 0;
            transform: translateY(70px);
            transition: opacity 1s cubic-bezier(.42,0,.58,1),transform 1s cubic-bezier(.42,0,.58,1);
            max-width: 1200px; /* Keep text readable */
            margin: 0 auto;
        }
        .mission-content.visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        .mission-content h2 {
            font-size: 2.1rem;
            margin-bottom: 24px;
            text-shadow: 1px 1px 5px rgba(30,87,153,0.15);
            font-weight: 700;
            letter-spacing: 1px;
            animation: fadeInUp 1.2s .1s both;
        }
        .mission-content p {
            font-style: italic;
            font-size: 1.18rem;
            color:#eaf6ff;
            line-height: 2;
            animation: fadeInUp 1.4s .3s both;
        }
        /* Core Expertise Cards */
        .cards-row {
            display: flex;
            flex-wrap: wrap;
            gap: 36px;
            justify-content: center;
            margin-top: 50px;
            padding: 0 2%; /* Slight padding on sides */
        }
        .card {
            background: linear-gradient(140deg,#fff,#f0f7fa 99%);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(44, 62, 80, 0.14);
            padding: 35px 28px 38px 28px;
            flex: 1 1 270px;
            max-width: 380px; /* Slightly increased for wider screens */
            min-width: 250px;
            transition: transform 0.4s cubic-bezier(.32,1.32,.69,.91), box-shadow 0.6s cubic-bezier(.32,1.32,.69,.91), background 0.5s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateY(60px) scale(.98);
        }
        .card.visible {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
        }
        .card .card-icon {
            width: 62px; height: 62px;
            border-radius: 50%;
            background: linear-gradient(135deg,#48c6ef,#6f86d6);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 19px auto;
            font-size: 2.1rem;
            color: #ffffff;
            box-shadow: 0 2px 12px rgba(80,110,200,0.16);
            animation: floatCard 2.5s infinite ease-in-out alternate, iconPop 1.1s .15s both;
        }
        @keyframes floatCard {
            0% {transform: translateY(0);}
            100% {transform: translateY(-12px);}
        }
        @keyframes iconPop {
            0% {transform: scale(0.5);}
            70% {transform: scale(1.18);}
            100% {transform: scale(1);}
        }
        .card h3 {
            margin: 0 0 13px 0;
            font-size: 1.26rem;
            color: #2471a3;
            animation: fadeInUp 1.3s .34s both;
        }
        .card p {
            font-size: 1.01rem;
            color: #555;
            animation: fadeInUp 1.6s .54s both;
        }
        .card img {
            box-shadow: 0 8px 22px #64bbff22;
            transition: box-shadow 0.32s, transform 0.32s;
        }
        .card:hover {
            transform: translateY(-15px) scale(1.05) rotate(-1.2deg);
            box-shadow: 0 44px 100px rgba(52, 152, 219, 0.25);
            background: linear-gradient(110deg,#e5f9ff 40%,#f5e3e6 100%);
        }
        .card:hover img {
            box-shadow: 0 16px 52px #3498db33;
            transform: scale(1.08) rotate(-2deg);
            filter: brightness(1.11) contrast(1.14) saturate(1.1);
        }
        .card:hover .card-icon {
            background: linear-gradient(135deg,#6f86d6 40%,#48c6ef 100%);
            animation: floatCard 1s infinite alternate, iconPop 1s .18s both;
            box-shadow: 0 4px 16px #6f86d6dd;
        }

        /* Call to Action */
        .cta {
            background: linear-gradient(120deg, #2c3e50 50%, #3498db 100%);
            padding: 65px 5%; /* Fluid padding */
            text-align: center;
            color: white;
            position: relative;
            opacity: 0;
            transform: translateY(80px) scale(0.97);
            transition: opacity 1.1s cubic-bezier(.47,1.32,.69,.91), transform 1.2s cubic-bezier(.22,1.32,.69,.91);
        }
        .cta.visible {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
        }
        .cta h2 {
            margin-bottom: 15px;
            font-size: 1.9rem;
            font-weight: 800;
            animation: fadeInUp 1.1s .22s both;
        }
        .cta p {
            margin-bottom: 30px;
            font-size: 1.07rem;
            color: #d0e8f9;
            animation: fadeInUp 1.4s .38s both;
            max-width: 800px; /* Keep text readable */
            margin-left: auto;
            margin-right: auto;
        }
        .cta a {
            display: inline-block;
            background: linear-gradient(90deg,#e74c3c 65%,#fd8865 100%);
            color: white;
            padding: 17px 42px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 700;
            letter-spacing: 1.1px;
            text-transform: uppercase;
            font-size: 1.1rem;
            box-shadow: 0 4px 18px rgba(231,76,60,0.16);
            transition: background 0.3s,transform 0.2s, box-shadow 0.3s;
            animation: ctaPulse 2.8s 1.4s infinite alternate;
        }
        @keyframes ctaPulse {
            0%,100% { box-shadow: 0 4px 18px #e74c3c44; }
            50% { box-shadow: 0 14px 36px #fd886560; }
        }
        .cta a:hover {
            background: linear-gradient(270deg,#3498db,#e74c3c 80%);
            transform: translateY(-4px) scale(1.08) rotate(-3deg);
            box-shadow: 0 24px 64px #e74c3c44;
        }

        /* Scroll indicator for super visual interest */
        .scroll-indicator {
            width: 50px;
            height: 60px;
            left: 50%;
            margin-left: -25px;
            bottom: 16px;
            position: absolute;
            z-index: 4;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0.77;
            transition: opacity 0.2s;
            animation: fadeInUp 1.6s 2.1s both;
        }
        .mouse {
            width: 27px;
            height: 41px;
            border: 2.4px solid #fff;
            border-radius: 17px;
            box-sizing: border-box;
            margin-bottom: 7px;
            position: relative;
        }
        .mouse .wheel {
            width: 4px; height: 8px;
            background: #fff;
            border-radius: 3px;
            margin: 7px auto 0 auto;
            animation: wheelScroll 2s infinite;
            opacity: 0.92;
        }
        @keyframes wheelScroll {
            0% {transform: translateY(0);}
            80% {transform: translateY(12px);}
            100% {transform: translateY(0);}
        }
        .scroll-arrow {
            color: #fff;
            font-size: 1.4rem;
            animation: arrowBounce 1.6s infinite;
        }
        @keyframes arrowBounce {
            0%,100% { transform: translateY(0); }
            50% { transform: translateY(10px);}
        }
        /* Responsive styles */
        @media (max-width: 900px) {
            .section, .parallax-mission, .cards-row { padding-left: 4%; padding-right: 4%; }
            .split-section { flex-direction: column; align-items: flex-start;}
            .split-section-reverse { flex-direction: column-reverse; }
            .split-content, .split-image { flex: 1 1 100%; min-width: 200px;}
        }
        @media (max-width: 600px) {
            .main-container {border-radius:0;}
            .parallax-hero, .parallax-mission {background-attachment: scroll;}
            .hero-content h1 { font-size: 2rem;}
            h2.section-title {font-size: 1.34rem;}
            .section { padding: 60px 4%; }
        }
        /* Ultra-wide screen optimization */
        @media (min-width: 1600px) {
            .hero-content h1 { font-size: 4rem; }
            .hero-content p { font-size: 1.6rem; }
            .split-content p, .section p { font-size: 1.2rem; line-height: 1.8; }
            .card { max-width: 400px; }
        }
    </style>