@font-face {
            font-family: neu;
            src: url(./NeueHaasDisplayMediu.ttf); 
        }

        @font-face {
            font-family: neu;
            font-weight: 100;
            src: url(./NeueHaasDisplayLight.ttf); 
        }

        @font-face {
            font-family: neu;
            font-weight: 200;
            src: url(./NeueHaasDisplayRoman.ttf); 
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: neu, sans-serif; 
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        #main {
            position: relative;
            z-index: 10;
        }

        #page1 {
            min-height: 100vh;
            width: 100%;
            background-color: #EFEAE3;
            position: relative;
            padding: 0 2vw;
        }

        nav {
            padding: 2vw 0vw;
            width: 100%;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 100;
            justify-content: space-between;
        }

        nav img {
            height: 10vh;
        }

        #nav-part2 {
            display: flex;
            align-items: center;
            gap: 1vw;
        }

        #nav-part2 h4 {
            padding: 10px 20px;
            border: 1px solid #0000003c;
            border-radius: 50px;
            font-weight: 500;
            color: #000000bb;
            transition: all ease 0.4s;
            position: relative;
            font-size: 18px;
            overflow: hidden;
        }

        #nav-part2 h4::after {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: black;
            left: 0;
            bottom: -100%;
            border-radius: 50%;
            transition: all ease 0.4s;
        }

        #nav-part2 h4:hover::after {
            bottom: 0;
            border-radius: 0;
        }

        #nav-part2 h4 a {
            color: #000000bb;
            text-decoration: none;
            position: relative;
            z-index: 9;
        }

        #nav-part2 h4:hover a {
            color: #fff;
        }

        nav h3 {
            display: none;
        }

        #center {
            height: 58vh;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            border-bottom: 1px solid #0000003c;
            padding-bottom: 5vw;
        }

        #left h3 {
            width: 25vw;
            font-size: 1.8vw;
            line-height: 2vw;
        }

        #center h1 {
            font-size: 8vw;
            text-align: right;
            line-height: 8vw;
        }

        #page1 video {
            position: relative;
            border-radius: 30px;
            margin-top: 4vw;
            width: 100%;
            object-fit: cover;
            cursor: pointer; /* Indicate it's interactive */
        }

        #hero-shape {
            position: absolute;
            width: 46vw;
            height: 36vw;
            right: 0;
            top: 65vh;
        }

        #hero-1 { 
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, #A387DC, #6C63FF);
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
            filter: blur(80px);
            opacity: 0.4;
        }

        #hero-2 {
            position: absolute;
            width: 50vw;
            height: 50vw;
            background: radial-gradient(circle at 60% 60%, #C29BFF, #7B5AD9);
            border-radius: 70%;
            filter: blur(60px);
            opacity: 0.7;
            animation: floatBlob1 8s ease-in-out infinite alternate;
        }

        #hero-3 {
            position: absolute;
            width: 50vw;
            height: 50vw;
            background: radial-gradient(circle at 80% 80%, #B490FF, #8D64FF);
            border-radius: 70%;
            filter: blur(70px);
            opacity: 0.6;
            animation: floatBlob2 10s ease-in-out infinite alternate;
        }

        @keyframes floatBlob1 {
            0% {
                transform: translate(10%, -10%) scale(1);
                opacity: 0.7;
            }
            50% {
                transform: translate(-15%, 15%) scale(1.2) rotate(10deg);
                opacity: 0.9;
            }
            100% {
                transform: translate(20%, 25%) scale(1);
                opacity: 0.7;
            }
        }

        @keyframes floatBlob2 {
            0% {
                transform: translate(-10%, 5%) scale(1.1);
                opacity: 0.6;
            }
            50% {
                transform: translate(15%, -10%) scale(1.25) rotate(-15deg);
                opacity: 0.8;
            }
            100% {
                transform: translate(-20%, 20%) scale(1.05);
                opacity: 0.6;
            }
        }

        #page2 {
            min-height: 100vh;
            width: 100%;
            background-color: #EFEAE3;
            padding: 8vw 0;
            position: relative;
        }

        #moving-text {
            overflow-x: auto;
            white-space: nowrap;
        }

        #moving-text::-webkit-scrollbar {
            display: none;
        }

        .con {
            white-space: nowrap;
            display: inline-block;
            animation-name: move;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        #moving-text h1 {
            font-size: 9vw;
            display: inline-block;
        }

        #gola {
            height: 70px;
            width: 70px;
            border-radius: 50%;
            display: inline-block;
            background-color: #FB713C;
            margin: 1vw 2vw;
        }

        @keyframes move {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }

        #page2-bottom {
            height: 80vh;
            width: 100%;
            padding: 4.5vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 9;
        }

        #page2-bottom h1 {
            font-size: 4vw;
            width: 60%;
            line-height: 4vw;
        }

        #bottom-part2 {
            width: 50%;
        }

        #bottom-part2 img {
            width: 100%;
            border-radius: 15px;
        }

        #bottom-part2 p {
            font-weight: 200;
            margin-top: 2vw;
            font-size: 1vw;
        }
        
        #page2 #gooey {
            position: absolute;
            top: 45%;
            left: 20%;
            width: 60vw;
            height: 60vw;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #FB7494, #A387DC, #7B5AD9);
            filter: blur(100px);
            opacity: 0.9;
            transform-origin: center;
            animation: gooeyMajestic 18s cubic-bezier(0.77, 0, 0.175, 1) infinite;
            z-index: 0;
        }

        @keyframes gooeyMajestic {
            0% {
                transform: translate(0%, 0%) scale(1) rotate(0deg) skew(0deg, 0deg);
                filter: blur(90px);
            }
            20% {
                transform: translate(10%, -10%) scale(1.25, 0.9) rotate(8deg) skew(-6deg, 4deg);
                filter: blur(110px);
            }
            40% {
                transform: translate(-15%, 15%) scale(1.15, 1.2) rotate(-10deg) skew(5deg, -8deg);
                filter: blur(120px);
            }
            60% {
                transform: translate(20%, 10%) scale(1.3, 0.85) rotate(15deg) skew(-10deg, 10deg);
                filter: blur(100px);
            }
            80% {
                transform: translate(-10%, -20%) scale(1.1, 1.15) rotate(-12deg) skew(6deg, -5deg);
                filter: blur(90px);
            }
            100% {
                transform: translate(0%, 0%) scale(1) rotate(0deg) skew(0deg, 0deg);
                filter: blur(100px);
            }
        }


        #page3 {
            min-height: 100vh;
            width: 100%;
            background-color: #EFEAE3;
            padding: 4vw 0;
        }

        .elem {
            height: 150px;
            width: 100%;
            position: relative;
            border-bottom: 1px solid #38383864;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 0 2vw;
            cursor: pointer;
        }

        .elem h2 {
            font-size: 3vw;
            position: relative;
            z-index: 9;
        }

        .elem .overlay {
            height: 100%;
            width: 100%;
            background-color: #ffb2f0;
            position: absolute;
            left: 0;
            top: -100%;
            transition: all ease 0.25s;
        }

        .elem:hover .overlay {
            top: 0;
        }

        #fixed-image {
            height: 30vw;
            width: 24vw;
            border-radius: 15px;
            position: fixed;
            z-index: 99;
            left: 50%;
            top: 25%;
            display: none;
            background-size: cover;
            background-position: center;
        }

       
        #page4 {
            min-height: 80vh;                
            width: 100%;
            background-color: #EFEAE3;
            padding: 3vw 4vw;                 
            display: flex;
            flex-direction: column;
            justify-content: center;
}

        .swiper {
            width: 100%;
            height: auto;                     
            padding-bottom: 3vw;             
}

        .swiper-slide {
            width: 25%;                       
            border-left: 1px solid #aeadad;
            padding: 2vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #FB7494,#EFEAE3;        
            border-radius: 15px;
            transition: all 0.3s ease;
}

        .swiper-slide:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


        #page5 {
            height: 100vh;
            width: 100%;
        }

        #footer {
            position: fixed;
            height: 105vh;
            width: 100%;
            background-color: #000;
            color: #fff;
            z-index: 9;
            bottom: 0;
            display: flex;
            justify-content: flex-end;
            flex-direction: column;
            padding: 1vw 3vw;
        }

        #footer h1 {
            font-size: 23vw;
        }

        #footer-div {
            height: 20vh;
            width: 100%;
            background-color: transparent; 
        }

        #footer-bottom {
            border-top: 1px solid #dadada;
            height: 10vh;
            width: 100%;
        }

        #full-scr {
            height: 100vh;
            width: 100%;
            background-color: #00000070;
            position: fixed;
            z-index: 99;
            top: -100%;
            transition: all ease 0.5s;
        }

        #full-div1 {
            height: 50%;
            width: 100%;
            background-color: #EFEAE3;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;

        }

        #loader{
            height: 100%;
            width: 100%;
            background-color: #000;
            position: fixed;
            z-index: 999;
            top: 0;
            transition: all ease 0.7s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #loader h1{
            font-size: 4vw;
            color: transparent;
            background: linear-gradient(to right,#FB7494,#A387DC);
            -webkit-background-clip: text;
            position: absolute;
            opacity: 0;
            animation-name: load;
            animation-duration: 1s;
            animation-delay: 1s;
            animation-timing-function: linear;
        }

        #loader h1:nth-child(2){
            animation-delay: 2s;
        }

        #loader h1:nth-child(3){
            animation-delay: 3s;
        }

        #social-links {
            position: absolute;
            top: 70px;
            right: 220px;
            display: flex;
            gap: 15px;
        }

        #social-links a {
            color: #EFEAE3; 
            font-size: 40px;
            transition: 0.3s;
        }

        #social-links a:hover {
            color: #A387DC;
        }

        @keyframes load {
            0%{
                opacity: 0;
            }
            10%{
                opacity: 1;
            }
            90%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }

        @media (max-width:600px) {
            #page1 {
                min-height: 100vh;
                width: 100vw;
                padding: 0 0vw;
            }

            nav {
                padding: 8vw 5vw;
                background-color: #EFEAE3;
            }

            nav img {
                transition: all ease 0.2s;
                height: 9vh;
            }

            #nav-part2 {
                display: none;
            }

            nav h3 {
                display: block;
                padding: 3vw 5vw;
                border: 1px solid #ababab;
                border-radius: 50px;
                font-size: 4vw;
                font-weight: 200;
                padding-left: 10vw;
            }

            #center {
                height: 62vh;
                width: 100%;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                border-bottom: 1px solid #0000003c;
                padding: 7vw 5vw;
                padding-bottom: 10vw;
                flex-direction: column-reverse;
                position: relative;
                z-index: 9;
            }

            #left h3 {
                width: 80%;
                font-size: 5.5vw;
                line-height: 6vw;
            }

            #center h1 {
                font-size: 17vw;
                text-align: right;
                line-height: 15vw;
            }

            #page1 video {
                position: relative;
                border-radius: 15px;
                margin-top: 4vw;
                height: 70vh;
                object-fit: cover;
                object-position: center;
                width: 92%;
                margin-left: 4%;
            }

            #page2 {
                min-height: 100vh;
                width: 100%;
                background-color: #EFEAE3;
                padding: 8vw 0;
                position: relative;
            }

            #moving-text {
                overflow-x: auto;
                white-space: nowrap;
            }

            #moving-text::-webkit-scrollbar {
                display: none;
            }

            .con {
                white-space: nowrap;
                display: inline-block;
                animation-name: move;
                animation-duration: 10s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }

            #moving-text h1 {
                font-size: 15vw;
                display: inline-block;
            }

            #gola {
                height: 25px;
                width: 25px;
                border-radius: 50%;
                display: inline-block;
                background-color: #FB713C;
                margin: 2vw 2vw;
            }

            #page2-bottom {
                height: 90vh;
                width: 100%;
                padding: 10vw 4vw;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                position: relative;
                flex-direction: column;
                z-index: 9;
            }

            #page2-bottom h1 {
                font-size: 8.2vw;
                width: 100%;
                line-height: 9vw;
            }

            #bottom-part2 {
                width: 90%; 
                margin-top: 5vw;
            }

            #bottom-part2 img {
                width: 100%;
                border-radius: 10px;
            }

            #bottom-part2 p {
                font-weight: 200;
                margin-top: 4vw; 
                font-size: 4vw; 
            }

            #page2 #gooey {
                height: 62vw;
                width: 62vw;
                position: absolute;
                border-radius: 50%;
                background: linear-gradient(to top right, #FB7494, #A387DC);
                top: 58%;
                left: 25%;
                filter: blur(20px);
                animation-name: gooey;
                animation-duration: 6s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-timing-function: ease-in-out;
            }

            @keyframes gooey {
                0% { transform: scale(1) translate(0, 0); }
                50% { transform: scale(1.1) translate(10px, -10px); }
                100% { transform: scale(0.9) translate(-10px, 10px); }
            }

            #loader h1{
                font-size: 9vw;
            }
        }
        
        .chat-container {
            width: 100%;
            max-width: 400px;
            height: 60vh;
            max-height: 500px;
            display: flex;
            flex-direction: column;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            background-color: white;
            position: fixed;
            bottom: 60px;
            right: 20px;
            z-index: 1000;
            transform: scale(0);
            transform-origin: bottom right;
            transition: all 0.3s ease-in-out;
        }
        .chat-container.active {
            transform: scale(1);
        }
        #chat-messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 1rem;
            scroll-behavior: smooth;
            background-color: #f8fafc;
        }
        .message-box {
            max-width: 85%;
            margin-bottom: 0.75rem;
            padding: 0.75rem 1rem;
            border-radius: 1.25rem;
            line-height: 1.5;
        }
        .user-message {
            background-color: #FB7494;
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 0.25rem;
        }
        .bot-message {
            background-color: #A387DC;
            color: #1f2937;
            margin-right: auto;
            border-bottom-left-radius: 0.25rem;
        }
        .citation {
            font-size: 0.7rem;
            color: #6b7280;
            margin-top: 0.5rem;
            display: block;
        }
        #chat-loading-indicator {
            display: none;
            text-align: center;
            padding: 0.5rem;
            color: #3c02b1;
            font-size: 0.875rem;
        }
        #chat-toggle-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 56px;
            height: 56px;
            background-color: #a7017b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            z-index: 1001;
            transition: transform 0.2s, background-color 0.2s;
        }
        #chat-toggle-button:hover {
            background-color: #FB7494;
            transform: scale(1.05);
        }