/* Reset basic styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Custom font */
        @font-face {
            font-family: 'myFont';
            src: url('sysui.otf');
        }

        @font-face {
            font-family: 'headerFont';
            src: url('SFMono-Bold.otf');
        }

        /* Body Styling: Add an elegant gradient background with subtle animations */
        /* Body Styling: Add an elegant gradient background with subtle animations */
body {
    font-family: 'myFont', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 20px;
    min-height: 100vh;
    overflow: auto; /* Allow scrolling if needed */
}

/* Image Styling */
        .img {
            display: block;
            margin: 20px auto;
            max-width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .img:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
        }


/* DEMO-SPECIFIC STYLES */
.title {
  color: #fff;
  font-family: headerFont;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typewriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(17, end) 1s forwards, /* 1s delay before cursor starts blinking */
    blink-caret .5s step-end infinite; /* Cursor blinking continues infinitely */
 font-size: 5rem;
            font-weight: bold;
            letter-spacing: 3px;
            margin-bottom: 20px;
            color: #ffffff;
            text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* The typing effect */
@keyframes typing {
  from { width: 0; }
  to { width: 17ch; }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: orange; }
}


/* Gradient background animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


        /* Centered content container */
        .section1, .section2 {
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 80px 60px; /* Increased padding */
    border-radius: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    width: 95%; /* Increased width */
    max-width: 1250px; /* Increased max-width */
    backdrop-filter: blur(10px); /* Adds a frosted glass effect */
    animation: fadeIn 2s ease-out;
    margin-bottom: 75px;
}

.section3 {
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 80px 60px; /* Increased padding */
    border-radius: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    width: 95%; /* Increased width */
    max-width: 1250px; /* Increased max-width */
    backdrop-filter: blur(10px); /* Adds a frosted glass effect */
    animation: fadeIn 2s ease-out;
    margin-bottom: 10px;
}

        /* Fade-in animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Description styling */
        .description {
            font-size: 1.4rem;
            margin-bottom: 40px;
            line-height: 1.8;
            color: #dcdcdc;
        }

        /* Button styling with vibrant hover effects */
        .btn {
            background: linear-gradient(to right, #1A2980 0%, #26D0CE 100%);
            color: white;
            padding: 15px 40px;
            margin: 10px;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease;
            background-size: 200% auto;
            display: inline-block;
        }

        .btn:hover {
            background-position: right center;
            color: #fff;
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
        }


        /* Media Queries for responsiveness */
        @media (max-width: 768px) {
            .title {
                font-size: 2.5rem;
            }

            .description {
                font-size: 1.2rem;
            }

            .container {
                padding: 40px 20px;
            }

            .btn {
                padding: 10px 30px;
                font-size: 1rem;
            }
        }