:root {
            /* Tweak these to recolor the waves / background */
            --bg-start: #4f46e5;
            --bg-end: #06b6d4;
            --wave-1: rgb(203 203 203 / 70%);
            --wave-2: rgb(51 77 162);
            --wave-3: rgb(51 77 162 / 46%);
            --wave-4: #a2b5f3;
        }

        /* Waves container */
        .waves {
            position: absolute;
            left: 0;
            bottom: -1px;
            /* hide seam */
            width: 100%;
            height: 16vh;
            /* responsive height */
            min-height: 100px;
            max-height: 160px;
            display: block;
        }


        /* Animate each layer at a different speed for parallax feel */
        .parallax>use {
            animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
        }

        .parallax>use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
        }

        .parallax>use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
        }

        .parallax>use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
        }

        .parallax>use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
        }


        @keyframes move-forever {
            0% {
                transform: translate3d(-90px, 0, 0);
            }

            100% {
                transform: translate3d(85px, 0, 0);
            }
        }




        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .video-info {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }

        .video-info.updating {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.2);
        }

        #currentVideoName {
            font-size: 1.2em;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            transition: all 0.5s ease;
        }



        .button-container {
            text-align: center;
            top: 65%;
            position: absolute;
            left: 0;
            right: 0;
        }

        .button {
            background: linear-gradient(45deg, #334da2, #334da2);
            color: white;
            border: none;
            padding: 10px;
            margin: 0 15px 10px 0;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 4px 15px rgba(238, 90, 82, 0.4);
            position: relative;
            overflow: hidden;
        }

        .button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(238, 90, 82, 0.6);
            background: linear-gradient(45deg, #ff5252, #f44336);
        }

        .button:active {
            transform: translateY(-1px);
        }

        .button.active {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
            box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
        }

        .ripple {
            position: relative;
            overflow: hidden;
        }

        .ripple::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }





        /* Header styling */
        .section-header {
            text-align: center;
            max-width: 800px;
            margin: 0px auto;
            padding: 90px 0 0;
        }

        .section-header h2 {
            color: #333;
            margin-bottom: 20px;
            text-transform: uppercase;
            font-size: 65px;
            line-height: 1;
            font-weight: 600;
            letter-spacing: -2px;
        }

        .section-header p {
            font-size: 1.2rem;
            color: #666;
            line-height: 0.6;
            margin: 0;
        }

        .subtitle {
            display: block;
            color: var(--accent);
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 28px;
        }

        .read-more-btn {
            display: inline-block;
            padding: 10px 25px;
            border: 1px solid #777;
            /* Lighter border for contrast */
            border-radius: 20px;
            text-decoration: none;
            color: #333;
            font-size: 0.8em;
            font-weight: 700;
            text-transform: uppercase;
            transition: background-color 0.3s, color 0.3s;
        }

        .read-more-btn:hover {
            background-color: #555;
            color: #fff;
        }

        .page {
            max-width: 1150px;
            margin: auto
        }

        .top-header {
            text-align: center;
            margin-bottom: 30px
        }

        .top-header h1 {
            font-size: 48px;
            font-weight: 900;
            margin-bottom: 6px
        }

        .top-header p {
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #666
        }

        .three-col {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 25px;
            /*background:#fff;
    padding:25px;*/
            border-radius: 6px;
            position: relative;
            align-items: stretch;
        }

        /* Left big image box */
        .left-block {
            background: url('../images/home-img-1.jpg') center/cover no-repeat;
            border-radius: 4px;
            min-height: 380px;
            transition: background-image 0.6s ease-in-out, opacity 0.4s ease-in-out;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* Center content box */
        .center-card {
            background: #fafcff;
            padding: 25px;
            border-radius: 4px;
            border: 1px solid rgba(10, 10, 10, 0.05);
            /*display:flex;*/
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            min-height: 380px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .center-card h2 {
            /*font-size:20px;
    letter-spacing:1px;
    margin-bottom:15px;
    font-weight:800;
    text-align:center;*/
            transition: opacity 0.3s ease;
        }

        .center-card p {
            /*color:#555;
    font-size:14px;
    text-transform:uppercase;
    text-align:center;*/
            transition: opacity 0.3s ease;
        }

        /* Right column */
        .right-col {
            background: #fafcff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 10px;
            height: 430px;
            position: relative;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* Arrow buttons */
        .arrow-btn1 {
            cursor: pointer;
            background: #334da2;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            padding: 0;
        }

        .arrow-btn1:hover {
            transform: scale(1.1);
            background: #0a63ff;
        }

        .arrow-btn1 svg path {
            stroke: #fff;
        }

        /* Right blue boxes */
        .scroll-wrapper {
            flex: 1;
            /*display:flex;*/
            flex-direction: column;
            align-items: center;
            /*justify-content:center;*/
            height: 430px;
            overflow: hidden;
            margin: 12px 0;
        }

        .scroll-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            transition: transform 0.5s ease;
        }

        .right-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin: 10px 0;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .right-item:hover {
            transform: scale(1.05);
        }

        .small-blue {
            width: 240px;
            height: 150px;
            border-radius: 4px;
            background-size: cover;
            background-position: center;
            margin-bottom: 15px;
        }

        .right-caption {
            font-weight: 800;
            font-size: 16px;
            text-transform: uppercase;
            /*letter-spacing:0.8px;*/
            color: #111;
        }

        @media(max-width:980px) {
            .left-block {
                margin: 15px;
                max-width: 346px;
            }

            .center-card {
                margin: 15px;
                max-width: 346px;
            }

            .three-col {
                grid-template-columns: 1fr
            }

            .right-col {
                height: auto;
                margin: 15px;
                max-width: 346px;
            }

            .scroll-wrapper {
                height: auto;
            }

            /*.scroll-container{flex-direction:row}*/

            

            .flex-min-height-inner {
                min-height: 85vh;
                padding-bottom: 50px;

            }

            .page-head video {
                width: auto;
                left: -820px !important;
            }

            #img1 {
                width: 200px;
            }
        }
        @media (max-width: 780px) {
    .page-head video {
        width: auto;
        left: -580px !important;
    }
}