@font-face {
            font-family: mori;
            src: url(fonts/PPMori-Regular.otf);
        }
        @font-face {
            font-family: mori-italic;
            src: url(fonts/PPMori-Extralight.otf);
        }

        body{
            background-color: #0E100F;
        }
         
       

        *{
            font-family: mori;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-weight: 400;
            letter-spacing: 0.5px;
        }
        .anouncement-bar{
            justify-content: center;
            width: 100%;
            background-color: #0EE549;
            padding: 0.5rem 0 0.5rem 0;
        }
        .anouncement-bar-contact{
        }
        .anouncement-bar p {
            letter-spacing: 1px;
            color: #0E100F;
        }
        .anouncement-bar a {
            text-align: center;
            letter-spacing: 1px;
            color: #0E100F;
        }
        .hero{
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding-top: 5vh;
            gap: 2vw;
            color: #FFFCE1;
            max-height: fit-content;
        }
        
        .top-icons{

            color: #FFFCE1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding-top: 3vh;
            padding-left: 7vw;
            padding-right: 7vw;
        }
        .ep-logo{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1rem;
            border-radius: 30px;
            letter-spacing:1px;

        }
        @keyframes scroll-x {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* Scrolls the width of the duplicated content */
        }

        /* Apply the animation to the inner content wrapper */
        .marquee-content {
            /* 30s duration, linear speed, infinite loop */
            animation: scroll-x 30s linear infinite;
            /* Crucial: Content width must be greater than the container width to allow scrolling. */
            /* We duplicate the content inside, so 200% works well for seamless looping. */
            width: 200%;
        }

        @media all and (max-width: 768px){
            .marquee-content {
            /* 15 secs duration, linear speed, infinite loop for mobile*/
            animation: scroll-x 10s linear infinite;
        }
        }
         @media all and (min-width: 768px) and (max-width: 1280px){
            .marquee-content {
            /* 15 secs duration, linear speed, infinite loop for mobile*/
            animation: scroll-x 15s linear infinite;
        }
        }

        /* Set Inter as the default font */
        body {
            font-family: 'Inter', sans-serif;
        }
        .top-gradient-laptop{
            display: block;
            margin-bottom: 1rem;
          
        }
        .top-gradient-laptop svg{
            width: 80px;
            height: 80px;
        }
      
        .ai-website-text{
            display: inline-block; 
            opacity: 0;
            animation: bounceIn 1s ease-out forwards;
            transform-origin: center;
        }
        .ai-website-text span{
            background: linear-gradient(90deg,#2a7b9b 0%, #57c785 50%, rgba(237, 221, 83, 1) 100%);
            -webkit-background-clip: text;  /* for Chrome/Safari */
            background-clip: text;          /* standard */
            color: transparent;             /* hide normal text color */
            background-size: 300% 300%;
            display: inline-block;
            animation: hero-text-animation 4s linear infinite 0s, flipx 6s infinite 6s;
        }
        .rotate{
            display: inline-block;
        }
        .online-store-website-text{
            background: linear-gradient(90deg, rgba(232, 88, 5, 1) 0%, rgba(87, 199, 115, 1) 50%, rgba(207, 161, 35, 1) 100%);
            -webkit-background-clip: text;  /* for Chrome/Safari */
            background-clip: text;          /* standard */
            background-size: 300% 300%;
            color: transparent;             /* hide normal text color */
            animation: bounceIn 1.5s ease-out forwards, hero-text-animation  3s linear infinite 5s;
            opacity: 0;
            display: inline-block;
        }
        .ai-optimized-text{
                    /* hide normal text color */
            animation: bounceInLeft 1.5s ease-out forwards, hero-text-animation  3s linear infinite 3s;
            opacity: 0;
            display: inline-block;
        }

        .text-ai{
            color: #808080;
        }
        @keyframes bounceIn {
            0%   { transform: translateY(-200px); opacity: 0; }
            60%  { transform: translateY(20px); opacity: 1; }
            80%  { transform: translateY(-10px); opacity: 1; }
            100% { transform: translateY(0); opacity: 1;}
        }
        @keyframes bounceInLeft {
            0%   { transform: translateX(-600px); opacity: 0; }
            60%  { transform: translateX(-20px); opacity: 1; }
            80%  { transform: translateX(-30px); opacity: 1; }
            100% { transform: translateX(0); opacity: 1;}
        }
        @keyframes bounceInRight {
            0%   { transform: translateX(600px); opacity: 0; }
            60%  { transform: translateX(20px); opacity: 1; }
            80%  { transform: translateX(30px); opacity: 1; }
            100% { transform: translateX(0); opacity: 1;}
        }

        @keyframes bounceInUp {
            0%   { transform: translateY(300px); opacity: 0; }
            60%  { transform: translateY(10px); opacity: 1; }
            80%  { transform: translateY(15px); opacity: 1; }
            100% { transform: translateY(0); opacity: 1;}
        }
        @keyframes hero-text-animation {
            to { background-position: 200% center; }

        }
       
        @keyframes flipx {
            0%   { transform: rotateX(0deg); }
            15%  { transform: rotateX(360deg); }
            100% { transform: rotateX(360deg); }

        }
        
        .top-gradient-laptop #laptop-svg{
            margin-left: 100vw;
             position: relative;
            animation: slideBounceRotate 1.5s ease-in-out forwards;
        }
         @keyframes slideBounceRotate {
            0% {
                margin-left: -100vw;
                transform: rotate(0deg);
            }

            /* Step 2: slide to the right */
   
            /* Step 3: bounce down */
            70% {
                margin-left:0vw;
                top: 0px;
                transform: rotate(0deg);
            }       

            /* Step 4: bounce up */
            85% {
                margin-left:0vw;
                top: 40px;
                transform: rotate(0deg);
            }

            /* Step 5: finish with rotation */
             100% {
                margin-left:0vw;
                top: 0px;
                transform: rotate(360deg);
            }
        }
     
        .hero h1{
        }
        .hero .hero-sub-text{
            margin-top: 1.5rem;
            font-weight: 100;
            line-height: 150%;
            max-width: 550px;
        }
        .main-hero-container{
            gap: 3rem;
         
        }
        .hero-contact-form{
            display: flex;
            flex-direction: row;
            justify-content: center;
            min-width: 40%;     
            height: 100%;   
            animation: bounceInRight 1.5s ease-out forwards;
            
        }
        .slide-right-contactform{
        }
        @keyframes bounceInRight {
            0%   { transform: translateX(600px);  display:none;}
            60%  { transform: translateX(20px);  display:flex;}
            80%  { transform: translateX(30px); display:flex; }
            100% { transform: translateX(0); display:flex;}
        }
       

        @keyframes moveUpDown {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
        @keyframes moveUpDownRIght {
            0% {
                transform: translateX(-50%);
            }
            100% {
                transform: translateX(0%);
            }
        } 
         .website-display-img{
            display: block;
            width: 200px;
            height: 200px;
            
           
        }
        .website-display-img img{
            width: 100%;
            border-radius:2px;
            height: 100%;
           
        }
        .hero-copy{
        }
        :root{
            --online-color: #0EE549;
            --core: 10px;
            --ring: 10px;
            --speed: 1.8s;
        }

        .ring-online{
            position: relative;
            width: var(--ring);
            height: var(--ring);
            display: inline-grid;
            place-items: center;
            pointer-events: none;
        }

        .ring-core{
            width: var(--core);
            height: var(--core);
            background: var(--online-color);
            border-radius: 50%;
            box-shadow: 0 0 12px rgba(6,182,212,0.45);
            position: relative;
            z-index: 2;
        }

        .ring-online::after{
            content: "";
            position: absolute;
            width: var(--core);
            height: var(--core);
            background: var(--online-color);
            border-radius: 50%;
            z-index: 1;
            box-shadow: 0 0 8px rgba(6,182,212,0.4);
            animation: ringPulse var(--speed) linear infinite;
            opacity: 0.85;
        }

        @keyframes ringPulse{
            0%   { transform: scale(1); opacity: 0.85; filter: blur(0px); }
            60%  { transform: scale(4.5); opacity: 0.35; filter: blur(1.2px); }
            100% { transform: scale(6.5); opacity: 0; filter: blur(2px); }
        }

        @media (prefers-reduced-motion: reduce){
            .ring-online::after{ animation: none; opacity: 0.4; transform: scale(2.2); }
        }
        .hero-bottom-ctas{
           text-align: right;
           display: flex;
           flex-direction: row;
           align-items: center;
    
        }
        .cta-contact{
            border: 4px solid #0EE549;
            padding-top: clamp(1rem,2vw, 1rem) ;
            padding-bottom: clamp(1rem,2vw, 1rem) ;
            padding-left: clamp(1rem, 3vw, 2rem);
            padding-right:clamp(1rem, 3vw, 2rem) ;
            border-radius: 30px;
            font-size: clamp(1rem, 3vw, 2rem);
            cursor: pointer;
            letter-spacing: 1px;
        }
        .cta-contact-form{
            padding: 1rem 4rem !important;
        }
        .contact-text{
            display: inline-block;
            margin-left: 0.4rem;
            font-size: clamp(0.7rem, 3vw, 2rem);
        }
        .cta-learn-more{
            border: 4px solid #0EE549;
            padding: 1rem 3rem;
            border-radius: 30px;
            cursor: pointer;
        }
        .flow-description{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 6vh;   
            letter-spacing: 1px;
            font-size: 1.1rem;
            
        }
        .flow-text{
            font-size: 1rem;
            font-weight: 400;
            font-family: mori-italic;
        }
        .Millions-of-people{
            display: flex;
            border: 2px solid #0EE549;
            padding: 1rem;
            border-radius: 30px;
          
            
        }
        .Millions-of-people img {
            max-width: 40px;
            max-height: 40px;
            margin-left: auto;
            margin-right: auto;
        }
        .text-your-website-com{
            padding: 1rem 3rem;
            border-radius: 30px;
            background-color: #FF8709;
            color: white;
            font-weight: 400;
            font-size: clamp(0.5rem, 1vw, 1rem);
            letter-spacing: 2px;
            box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
            -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
            
        }
        .flow-line {
            display: block;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: linear-gradient(
                to right,
                #34d399 0%,
                #FF5F1F 100%
            );
            background-size: 200% 100%; /* wider so it can slide */
            background-position: 0% 0;
            animation: flow 2s linear infinite 2s;
            box-shadow: 0 0 12px #3b82f6;
        }

        .flow-line-second{
            display: block;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: linear-gradient(
                to right,
                #34d399 0%,
                #FF5F1F 100%
            );
            background-size: 200% 100%; /* wider so it can slide */
            background-position: 0% 0;
            animation: flow 2s linear infinite 3.5s;
            box-shadow: 0 0 12px #3b82f6;
        }
        @keyframes flow {
            from { background-position: 0% 0; }
            to   { background-position: -200% 0; } /* slide rightward */
        }

        .recent-project{
            height: 100vh;
            width: 100%;
            background-color:white;
            box-sizing: content-box;
        }
        .recent-project-container{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
            
            
        }

        .recent-project-container h3{
            color: #808080;
            text-align: center;
            letter-spacing: 1.7px;
            font-size: 3rem;
            
        }
        .recent-project-img{
            width: 1000px;
            height: 1000px;
            animation: scroll-In 3s linear;
            animation-timeline: view();
            animation-range: entry 0 cover 40%;
            
        }
           
        
        .recent-project-img img{
            width: 100%;
            height: 100%;
            transition: scale 0.2s ease-out;
            
        }
        @keyframes scroll-In{
                from{
                   margin-left: -100vw;
                }

                to{
                   margin-left: 0px;
                }
        }
        .recent-project-img img:hover{
            scale: 1.1;
        }

        .contact{

            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: center;
            background-color: #0E100F;

        }
        .contact-wrapper{
            margin-top: 10vh;
            margin-bottom: 10vh;
            display: flex;
            flex-direction: column;
            align-items: center;

        }
        .mobile-number-wrapper{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.8rem; 
            justify-content: center;
        }
        .mobile-number img{
            width: 20px;
            height: 30px;
        }
        
        .contact-form{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 7px;
        }
        
        .contact-form .online{
            margin-top: 2vh;
            letter-spacing: 2px;
        }
        .text-callemail{
            box-sizing: content-box;
            border: 4px solid #0EE549;
            display: inline-block;
            font-size: 3rem;
            border-radius: 30px;
            margin-top: 2vh;
            cursor: pointer;
        }

        .text-call-phone-number{
            display: inline-block;
            padding: 1rem;
          
        }
        .text-call-email{
            display: inline-block;
            padding: 1rem;
        }
        .text-call-btn{
            display: inline-block;
            background-color: #FF8709;
            border-radius: 0px 24px 24px 0px;
           padding: 1rem;
        }