html {
            width: fit-content;
        }

        /* Change scroll bar */

        /* width */
        ::-webkit-scrollbar {
            width: 10px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #0C0A08;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #6C7BFF;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #A9B8D2;
        }

        /* Define a custom font using @font-face */
        @font-face {
            font-family: 'ITCAvantGardePro-Bold';
            /* Name of the custom font */
            src: url('./fonts/ITCAvantGardePro-Bold.otf') format('opentype');
            /* Path to the font file */
            font-weight: bold;
            /* Normal weight for the font */
            font-style: normal;
            /* Normal style for the font */
        }

        @font-face {
            font-family: 'ITCAvantGardePro-Md';
            /* Name of the custom font */
            src: url('./fonts/ITCAvantGardePro-Md.otf') format('opentype');
            /* Path to the font file */
            font-weight: normal;
            /* Normal weight for the font */
            font-style: normal;
            /* Normal style for the font */
        }

        /* Styles for the head and body of the page */
        body {
            margin: 0;
            background-color: #0C0A08;
            /* Background color for the page */
            color: #A9B8D2;
            /* Text color for the page */
            font-family: 'ITCAvantGardePro-Md', sans-serif;
            /* Font family */
            cursor: context-menu;
            /* Cursor style */
            overflow-x: hidden;
            padding: 0;
            height: 100%;
            /* This ensures the footer sticks to the bottom if needed */
        }

        /* Circle element for the hover effect */
        .circle {
            width: 50px;
            /* Circle width */
            height: 50px;
            /* Circle height */
            background-color: #6C7BFF;
            /* Circle color */
            border-radius: 50%;
            /* Make it a circle */
            position: fixed;
            /* Fixed position */
            pointer-events: none;
            /* Prevent interactions */
            transform: translate(-50%, -50%) scale(1);
            /* Center the circle */
            transition: transform 0.3s ease;
            /* Smooth scaling transition */
            animation-delay: 0.5ms;
            /* Delay for animation */
            z-index: 999;
        }


        /* Styles for the Navbar */
        #navbar {
            display: flex;
            /* Use flexbox layout */
            justify-content: space-between;
            /* Space items evenly with space between */
            padding: 50px 50px 0px 50px;
            /* Padding around the navbar */
            align-items: center;
            /* Center items vertically */
            text-align: right;
            /* Align text to the right */
            position: sticky;
            /* Make the navbar sticky */
            top: 0;
            /* Stick to the top of the viewport */
            z-index: 1000;
            /* Ensure the navbar stays on top of other content */
        }

        #vertical-navbar {
            display: flex;
            /* Use flexbox layout */
            justify-content: space-between;
            /* Space items evenly with space between */
            margin-top: -90px;
            padding: 0px 10px 0px 90px;
            /* Padding around the navbar */
            text-align: center;
            /* Align text to the center */
            position: sticky;
            /* Make the navbar sticky */
            top: 620px;
            /* Stick to the top of the viewport */
            z-index: 1000;
            /* Ensure the navbar stays on top of other content */
        }

        /* Styles for the navbar links container */
        .navbar-links {
            display: flex;
            /* Use flexbox for layout */
            cursor: pointer;
            /* Change cursor to pointer on hover */
            flex-direction: column;
            /* Arrange links vertically */
            gap: 7px;
            /* Space between links */
        }

        /* Styles for individual links in the navbar */
        .navbar-links a {
            text-decoration: none;
            /* Remove underline from links */
            color: #6E7887;
            /* Main color for active link */
            font-size: 1.2em;
            /* Font size for links */
            transition: color 0.3s ease;
            /* Smooth transition for color change */
        }

        .navbar-links a.active {
            color: #A9B8D2;
            /* Active link color */
        }

        /* Hover effect for navbar links */
        .navbar-links a:hover {
            text-decoration: none;
            /* Maintain no underline on hover */
        }

        .social-media-icons {
            display: flex;
            /* Use flexbox for layout */
            cursor: pointer;
            /* Change cursor to pointer on hover */
            flex-direction: column;
            /* Arrange icons vertically */
            gap: 30px;
            /* Space between icons */
            position: fixed;
            /* Fixed position */
            bottom: 80px;
            /* Position from bottom */
        }

        .social-media-icons a {
            color: #A9B8D2;
            /* Base color for the icons */
            clip-path: none;
            /* Ensure no initial clipping */
            transition: none;
            /* Disable transition effects for immediate change */
        }

        .social-media-icons a img {
            transition: all 0.3s ease;
            /* Smooth transition for the icons */
        }

        /* Hover effect to make icons black */
        .social-media-icons a:hover img {
            filter: brightness(0) invert(0);
            /* Turns the image black */
            transform: scale(1.1);
            /* Slight scale up */
            transition: 0.3s ease-in-out;
            /* Smooth transition */
        }

        #my-name {
            color: #A9B8D2;
            /* Color for the name */
            display: inline-block;
            /* Make the div an inline-block */
            transform: rotate(-90deg);
            /* Rotate the text 90 degrees to the right */
            align-items: right;
            /* Align items to the right */
            font-size: 1.1em;
            /* Font size for name */
            position: fixed;
            /* Fixed position */
            right: 20px;
            /* Position from right */
            bottom: 110px;
            /* Position from bottom */
        }

        .bold-text {
            font-weight: bold;
            /* Bold text */
        }

        .line-show {
            display: block;
            text-align: center;
            width: 100%;
        }

        .hover-text:hover {
            z-index: 10;
        }

        .hidden-text {
            opacity: 0;
        }

        /* About Section */
        .about-section {
            margin-top: 230px;
            /* Space above section */
            font-family: 'ITCAvantGardePro-Md', sans-serif;
            /* Font family */
            border: 1px transparent;
            /* Transparent border */
        }

        /* Section Titles */
        .section-title {
            font-size: 1.5em;
            /* Font size for section title */
            margin-left: 280px;
            /* Left margin */
            font-weight: 400;
            letter-spacing: 5px;
        }

        .section-text {
            font-size: 3.2em !important;
            /* Font size for section text */
            margin: 0 280px !important;
            /* Left margin */
        }

        /* Styles for the main heading in the text-center */
        .text-center h1 {
            margin-top: 100px;
            /* Adjust this value as needed to move it higher */
            background-color: transparent;
            /* Transparent background */
            text-align: center;
            /* Center the heading text */
            font-size: 100pt;
            /* Large font size for heading */
            font-family: 'ITCAvantGardePro-Bold', sans-serif;
            /* Bold font */
        }

        .background-image {
            position: absolute;
            /* Position the image absolutely */
            top: 0;
            /* Align to the top */
            left: 0;
            /* Align to the left */
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            object-fit: cover;
            /* Ensure the image covers the section */
            z-index: -2;
            /* Send the image to the back */
            opacity: 0.2;
        }

        /* Styles for colored text */
        .color-font {
            color: #6C7BFF;
            /* Color for specific text (e.g., 'creative') */
        }

        .secondary-color-text {
            color: #6E7887;
            /* Secondary color text */
        }


        /* Styles for hiding text */
        #hidding-text-div {
            position: relative;
            /* Position relative for child elements */
            overflow: hidden;
            /* Hide overflow */
        }

        /* Apply masking effect */
        #hidding-text-div:after {
            content: '';
            /* Empty content */
            position: absolute;
            /* Absolute positioning */
            top: 0;
            /* Align to the top */
            left: 0;
            /* Align to the left */
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            background: rgba(12, 10, 8, 0.8);
            /* Semi-transparent overlay */
            transition: opacity 0.5s;
            /* Transition for smooth reveal */
            opacity: 0;
            /* Start hidden */
        }

        /* Reveal the mask on hover */
        #hidding-text-div:hover:after {
            opacity: 1;
            /* Reveal on hover */
        }

        .line-hidden {
            margin-top: -514px;
            display: block;
            text-align: center;
            width: 100%;
        }

        .what-i-do {
            display: flex;
            /* Use flexbox for layout */
            flex-direction: column;
            /* Arrange items vertically */
        }

        .what-i-do p {
            font-size: 8em;
            /* Font size for items */
            font-family: 'ITCAvantGardePro-Bold';
            /* Bold font */
            position: relative;
            /* Position relative for pseudo-element */
            display: block;
            /* Ensure it takes up the full block width */
            transition: color 0.3s ease, transform 0.3s ease;
            /* Smooth transitions */
            z-index: 2;
            /* Layering */
            border-top: 1px solid #A9B8D2;
            border-bottom: 1px solid #A9B8D2;
            padding-left: 280px;
            margin: 0;
        }

        /* Create the full-width square effect on hover using the ::before pseudo-element */
        .what-i-do p::before {
            content: '';
            /* Empty content */
            position: absolute;
            /* Position absolutely */
            top: 0;
            /* Align to the top */
            width: 100vw;
            /* Full width of the viewport */
            height: 100%;
            /* Full height */
            z-index: -1;
            /* Place it behind the text */
            opacity: 0;
            /* Initially hidden */
        }

        /* Show the square on hover */
        .what-i-do p:hover::before {
            opacity: 1;
            /* Reveal on hover */
            background-color: transparent;
        }

        /* Change text color on hover */
        .what-i-do p:hover {
            color: #0C0A08;
            /* Change text color */
            background-color: #6C7BFF;
            border-top: none;
            border-bottom: none;
        }

        .text-hidden-sections {
            opacity: 0;
            transition: opacity 0.3s ease;
            /* Smooth transition for showing/hiding */
            margin-top: -160px;
            /* Adjust position */
            text-align: left;
            /* Align text to the left */
            display: flex;
            /* Flex display */
            font-size: 0.25em !important;
            padding-left: 600px;
            /* Padding left */
            padding-right: 250px !important;
        }

        .rows {
            height: 100%;
        }

        .rows-history {
            height: 100%;
        }

        /* Reveal hidden text on hover */
        .text-hidden-sections:hover {
            opacity: 1;
            /* Reveal on hover */
        }

        /* Works Section */
        .works-section {
            position: relative;
            /* Make the section position relative */
            font-family: 'ITCAvantGardePro-Md', sans-serif;
            /* Font family */
            max-width: 100%;
            /* Full width */
            padding-top: 200px;
            /* Padding above */
            padding-bottom: 200px;
            /* Padding below */
            overflow: hidden;
            /* Prevents content overflow */
        }

        /* Pseudo-element for background image */
        .works-section::before {
            content: "";
            /* Required for pseudo-elements */
            position: absolute;
            /* Position it absolutely within the section */
            top: 0;
            /* Align to the top */
            left: 0;
            /* Align to the left */
            right: 0;
            /* Stretch to the right */
            bottom: 0;
            /* Stretch to the bottom */
            background-image: url('./media/me2.jpg');
            /* Set the background image */
            background-size: cover;
            /* Cover the entire section */
            background-position: center;
            /* Center the background image */
            opacity: 0.2;
            /* Set the opacity for the background */
            z-index: 0;
            /* Send it to the back */
        }

        .works-section>* {
            position: relative;
            /* Make child elements relative to keep them above the pseudo-element */
            z-index: 1;
            /* Ensure content is above the background */
        }


        .works-section h3 {
            margin-left: 280px;
            /* Left margin */
        }

        .works-section p {
            margin-left: 280px;
            /* Left margin */
        }

        /* Show the "Design" text when hovering over the entire .rows div */
        .rows-history:hover .text-hidden-sections-smaller {
            opacity: 1;
            /* Make it visible on hover */
        }

        /* Maintain existing styles */
        .history {
            display: flex;
            /* Use flexbox for layout */
            flex-direction: column;
            /* Arrange items vertically */
        }

        .history p {
            font-size: 8em;
            /* Font size for items */
            font-family: 'ITCAvantGardePro-Bold';
            /* Bold font */
            position: relative;
            /* Position relative for pseudo-element */
            display: block;
            /* Ensure it takes up the full block width */
            transition: color 0.3s ease, transform 0.3s ease;
            /* Smooth transitions */
            z-index: 2;
            /* Layering */
            border-top: 1px solid #A9B8D2;
            border-bottom: 1px solid #A9B8D2;
            padding-left: 280px;
            margin: 0;
        }

        /* Create the full-width square effect on hover using the ::before pseudo-element */
        .history p::before {
            content: '';
            /* Empty content */
            position: absolute;
            /* Position absolutely */
            top: 0;
            /* Align to the top */
            width: 100vw;
            /* Full width of the viewport */
            height: 100%;
            /* Full height */
            z-index: -1;
            /* Place it behind the text */
            opacity: 0;
            /* Initially hidden */
        }

        /* Show the square on hover */
        .history p:hover::before {
            opacity: 1;
            /* Reveal on hover */
            background-color: transparent;
        }

        /* Change text color on hover */
        .history p:hover {
            color: #0C0A08;
            /* Change text color */
            background-color: #6C7BFF;
            border-top: none;
            border-bottom: none;
        }

        .text-sections {
            opacity: 1 !important;
            padding-left: 100px;
            /* Ensure this is correct */
        }

        .columns {
            font-size: 0.5em;
        }

        .text-hidden-sections-smaller {
            font-size: 0.5em;
            opacity: 0;
            padding-left: 300px;
            position: relative;
            top: -30px;
        }

        .clients {
            display: flex;
            /* Use flexbox for layout */
            flex-direction: column;
            /* Arrange items vertically */
        }

        .clients p {
            font-size: 8em;
            /* Font size for items */
            font-family: 'ITCAvantGardePro-Bold';
            /* Bold font */
            position: relative;
            /* Position relative for pseudo-element */
            display: block;
            /* Ensure it takes up the full block width */
            transition: color 0.3s ease, transform 0.3s ease;
            /* Smooth transitions */
            z-index: 2;
            /* Layering */
            border-top: 1px solid #A9B8D2;
            border-bottom: 1px solid #A9B8D2;
            padding-left: 280px;
            margin: 0;
        }

        /* Create the full-width square effect on hover using the ::before pseudo-element */
        .clients p::before {
            content: '';
            /* Empty content */
            position: absolute;
            /* Position absolutely */
            top: 0;
            /* Align to the top */
            width: 100vw;
            /* Full width of the viewport */
            height: 100%;
            /* Full height */
            z-index: -1;
            /* Place it behind the text */
            opacity: 0;
            /* Initially hidden */
        }

        /* Show the square on hover */
        .clients p:hover::before {
            opacity: 1;
            /* Reveal on hover */
            background-color: transparent;
        }

        /* Change text color on hover */
        .clients p:hover {
            color: #0C0A08;
            /* Change text color */
            background-color: #6C7BFF;
            border-top: none;
            border-bottom: none;
        }

        #three-dots {
            font-weight: 8em;
            border-top: none;
            border-bottom: none;
        }

        /* Fixed section that holds the images */
        .scroll-section {
            position: relative;
            height: 100vh;
            /* Full viewport height */
            display: flex;
            justify-content: space-around;
            align-items: center;
            overflow: hidden;
            /* Prevent overflow */
            transition: position 0.3s ease;
            /* Smooth transition when unpinning */
            padding: 100px 0;
            border-radius: 25px;
        }

        .scroll-section img {
            border-radius: 25px;
        }

        .fade-up-images-left {
            margin-top: -300px;
            display: inline-flex;
            position: relative;

            /* Ensure the pop-up is positioned relative to this container */
        }

        .fade-up-images-right {
            margin-top: 300px;
            display: inline-flex;
            position: relative;
            /* Ensure the pop-up is positioned relative to this container */
        }

        .pop-up-right {
            opacity: 0;
            border: transparent;
            background-color: #6C7BFF;
            color: #0C0A08;
            padding: 50px;
            transition: transform 0.6s ease, opacity 0.6s ease 0.1s;
            position: absolute;
            left: 350px;
            width: 350px;
            height: 72%;
            align-content: center;
            text-align: left;
            transform: translateX(-50px);
            /* Start off slightly to the right */
            border-radius: 25px;
        }

        .fade-up-images-left a:hover+.pop-up-right {
            opacity: 1;
            transform: translateX(0);
            /* Move the pop-up back into its original position */
        }

        .pop-up-left {
            opacity: 0;
            border: transparent;
            background-color: #6C7BFF;
            color: #0C0A08;
            padding: 50px;
            transition: transform 0.6s ease, opacity 0.6s ease 0.1s;
            position: absolute;
            right: 350px;
            width: 350px;
            height: 72%;
            align-content: center;
            text-align: right;
            transform: translateX(50px);
            /* Start off slightly to the right */
            border-radius: 25px;
        }

        .fade-up-images-right a:hover+.pop-up-left {
            opacity: 1;
            transform: translateX(0);
            /* Move the pop-up back into its original position */
        }

        #less-space {
            margin-top: -200px;
            padding: 0;
        }

        #less-space-2 {
            margin-top: -150px;
            padding-right: 850px;
            margin-bottom: -400px;
        }

        .motto {
            background-color: transparent !important;
            /* Transparent background */
            text-align: center !important;
            /* Center the heading text */
            font-size: 1.2em !important;
            /* Large font size for heading */
            font-family: 'ITCAvantGardePro-Md', sans-serif !important;
            /* Bold font */
        }

        .motto h3 {
            letter-spacing: 5px;
            margin-bottom: -60px;
            font-weight: 400;
        }

        .motto p {
            margin-top: 100px !important;
            /* Adjust this value as needed to move it higher */
            background-color: transparent !important;
            /* Transparent background */
            text-align: center !important;
            /* Center the heading text */
            font-size: 100pt !important;
            /* Large font size for heading */
            font-family: 'ITCAvantGardePro-Bold', sans-serif !important;
            /* Bold font */
        }

        .motto h6 {
            margin-top: -80px;
            letter-spacing: 5px;
        }

        .footer-container {
            padding: 0 300px;
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .footer-container h3 {
            display: flex;
            font-size: 33.5px;
            letter-spacing: 10px;
        }

        .footer-left {
            flex: 1 1;
            padding-right: 120px;
        }

        .first-line {
            display: inline-flex;
            gap: 40px;
            margin-bottom: 20px;
        }

        input {
            background-color: transparent;
            color: #A9B8D2;
            border: 2px solid #A9B8D2;
            padding-top: 5px;
            padding-left: 10px;
            padding-right: 78px;
            padding-bottom: 15px;
            border-radius: 12px;
            font-family: 'ITCAvantGardePro-Md', sans-serif !important;
            /* Bold font */
        }

        textarea {
            background-color: transparent;
            color: #A9B8D2;
            border: 2px solid #A9B8D2;
            padding-top: 5px;
            padding-left: 10px;
            padding-bottom: 55px;
            border-radius: 12px;
            font-family: 'ITCAvantGardePro-Md', sans-serif !important;
            /* Bold font */
        }

        button {
            margin-top: 30px;
            background-color: transparent;
            color: #A9B8D2;
            border: 2px solid #A9B8D2;
            border-radius: 12px;
            padding: 5px 20px;
        }

        button:hover {
            margin-top: 30px;
            background-color: #6C7BFF;
            color: #0C0A08;
            border: 2px solid #6C7BFF;
            border-radius: 12px;
            padding: 5px 20px;
            cursor: pointer;
        }

        .footer-right {
            flex: 1 1;
            padding-top: 120px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .email p {
            padding: 10px;
            margin: 0;
            position: relative;
        }

        .email span {
            font-weight: 400;
            transition: opacity 0.3s ease, color 0.3s ease;
            /* Smooth transition */
        }

        /* Initially hide the alternate text */
        .alternate-text {
            opacity: 0;
            position: absolute;
            top: 10px;
            /* Align to where "Phone" was */
            left: 10px;
            transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
            /* Smooth fade-in effect */
        }

        /* Hide the "Phone" label and show alternate text on hover */
        .email:hover .email-label {
            opacity: 0;
        }

        .email:hover .alternate-text {
            opacity: 1;
            font-family: 'ITCAvantGardePro-Bold', sans-serif !important;
        }

        /* Add hover effect to change background and text color */
        .email:hover {
            background-color: #6C7BFF;
            /* Change background color */
            color: #0C0A08;
            /* Change text color */
        }

        /* Ensure phone number stays visible and unchanged */
        .email {
            opacity: 1;
            /* Ensure phone number is always visible */
            transition: none;
            /* No effect on the phone number */
        }

        .phone p {
            padding: 10px;
            margin: 0;
            position: relative;
        }

        .phone span {
            font-weight: 400;
            transition: opacity 0.3s ease, color 0.3s ease;
            /* Smooth transition */
        }

        /* Hide the "Phone" label and show alternate text on hover */
        .phone:hover .phone-label {
            opacity: 0;
        }

        .phone:hover .alternate-text {
            opacity: 1;
            font-family: 'ITCAvantGardePro-Bold', sans-serif !important;
        }

        /* Add hover effect to change background and text color */
        .phone:hover {
            background-color: #6C7BFF;
            /* Change background color */
            color: #0C0A08;
            /* Change text color */
        }

        /* Ensure phone number stays visible and unchanged */
        .phone-number {
            opacity: 1;
            /* Ensure phone number is always visible */
            transition: none;
            /* No effect on the phone number */
        }

        /* The footer container should be positioned relative to its contents */
        footer {
            position: relative;
            height: auto;
            padding-bottom: 0;
            /* No extra padding at the bottom */
            margin-bottom: 0;
            /* Remove margin */
            overflow: hidden;
            /* To prevent overflow caused by transformed text */
        }

        /* Keep the main container relative to position elements inside */
        .footer-container {
            position: relative;
            z-index: 1;
            /* Ensure content is above the footer-heading */
            margin-bottom: 80px;
        }

        /* Styling for the LET'S COLLABORATE text */
        .footer-heading {
            margin: 0;
            transform: scaleY(7.6);
            /* Stretch the text vertically */
            font-size: 100px;
            /* Adjusted for scaling */
            letter-spacing: 45.2px;
            /* Space between the letters */
            width: 100%;
            /* Full width */
            padding: 0;
            text-align: center;
            /* Center the text */
            opacity: 0.05;
            /* Lower the opacity */
            position: absolute;
            /* Position it absolutely within the footer */
            bottom: 100px;
            /* Adjust this value to move the text higher */
            left: 0;
            /* Align it to the left */
            z-index: 0;
            /* Ensure it's behind the content */
        }

        /* Start of Works Pages */
        /* Start of Works Pages */
        /* Start of Works Pages */


        /* Size for the SVG */
        .work-page-logo svg {
            width: 200px;
        }

        /* Default styling for the logo */
        .work-page-logo .cls-1 {
            fill: #fff;
            /* Default color */
        }

        /* Hover effect to change color */
        .work-page-logo:hover .cls-1 {
            fill: #53449e;
            /* Change to red (you can set any color) */
        }

        .works-header {
            position: relative;
            /* Allows positioning of child elements like the logo */
            max-width: 100vw;
            margin-top: -62px;
            /* Horizontally center the container */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .banner {
            width: 100vw;
            display: flex;
            opacity: 0.5;
        }

        .logo {
            position: absolute;
            /* Position logo on top of the banner */
            z-index: 1;
            /* Ensure the logo is above the banner */
            max-width: 1000px;
            transform: translate(-50%, -50%);
            /* Offset by 50% to truly center it */
            opacity: 0;
            /* Start invisible */
            animation: fadeInUp 0.5s ease-out forwards;
            animation-delay: 1s;
            /* Apply the animation */
        }


        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(100px);
                /* Start 100px from the bottom */
            }

            100% {
                opacity: 1;
                transform: translateY(0);
                /* Move to original position */
            }
        }

        .works-description {
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            gap: -50px;
        }

        .works-description h5 {
            font-size: 2em;
            margin-top: 200px;
        }

        .works-description h1 {
            font-size: 5em;
            text-align: center;
        }

        .works-description h6 {
            font-size: 1em;
            font-weight: 200;
        }

        .works-container {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
        }

        .yt_trailer{
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            max-width: 90%;
        }

        #scrollVideoYT {
            max-width: 90%;
            border-radius: 50px;
        }

        #scrollVideo {
            max-width: 90%;
            margin-top: 150px;
            border-radius: 50px;
        }

        .works-images {
            width: 90%;
            border-radius: 50px;
        }


        .programs-used {
            display: flex;
            /* Flexbox for aligning items inside the container */
            justify-content: center;
            /* Center icons horizontally */
            align-items: center;
            /* Center icons vertically if needed */
            gap: 50px;
            /* Optional: add some space between the icons */
            max-width: 100%;
            /* Let it take full available width */
            margin: 0 auto;
            /* Center the container horizontally */
            margin-bottom: 100px;
        }

        .programs-used img {
            max-width: 100px;
        }

        .programs-used-title h6 {
            margin-top: 100px;
            font-size: 2em;
            text-align: center;
        }


        @keyframes float {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(10px, -10px);
            }

            50% {
                transform: translate(-10px, 10px);
            }

            75% {
                transform: translate(10px, 10px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        .programs-used img {
            max-width: 100px;
            animation: float 4s ease-in-out infinite;
            /* Looping floating effect */
        }

        .programs-used img:nth-child(1) {
            animation: float 5s ease-in-out infinite;
            /* Different duration */
        }

        .programs-used img:nth-child(2) {
            animation: float 4s ease-in-out infinite reverse;
            /* Reversed direction */
        }

        .programs-used img:nth-child(3) {
            animation: float 5s ease-in-out infinite;
            /* Different duration */
        }

        .programs-used img:nth-child(4) {
            animation: float 4s ease-in-out infinite reverse;
            /* Reversed direction */
        }

        .programs-used img:nth-child(5) {
            animation: float 5s ease-in-out infinite;
            /* Different duration */
        }

        .work-page-logo-typo svg {
            width: 200px;
        }

        /* Default styling for the logo */
        .work-page-logo-typo .cls-1 {
            fill: #fff;
            /* Default color */
        }

        /* Hover effect to change color */
        .work-page-logo-typo:hover .cls-1 {
            fill: #f37b00;
            /* Change to red (you can set any color) */
        }


        .work-page-logo-if svg {
            width: 100px;
        }

        /* Default styling for the logo */
        .work-page-logo-if .cls-1 {
            fill: #002a3a;
            /* Default color */
        }

        /* Hover effect to change color */
        .work-page-logo-if:hover .cls-1 {
            fill: #fff;
            /* Change to red (you can set any color) */
        }

        .work-page-logo-clawsified svg {
            width: 300px;
        }

        /* Default styling for the logo */
        .work-page-logo-clawsified .cls-1 {
            fill: #fff;
            /* Default color */
        }

        /* Hover effect to change color */
        .work-page-logo-clawsified:hover .cls-1 {
            fill: #6C7BFF;
            /* Change to red (you can set any color) */
        }