@font-face {
          font-family: stapelmedium;
          src: url('font/fonnts.com-stapel-lightitalic');
        }           

        @font-face {
          font-family: proximanova;
          src: url('font/Fontspring-DEMO-proximanova-regular.otf');
        }



        body {
            font-family: 'stapelmedium', sans-serif;
            background-color: #100001; /* Dark background color */
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

       .body_font {
            font-family: 'stapelmedium', sans-serif;
        }

        .header_wrap {
            justify-content: space-between;
            align-items: center;
        }

        a.header_call {
            font-family: 'stapelmedium', sans-serif;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px 24px;
            color: #fff;
            text-decoration: none;
            background: #2C4C3B;
            border-radius: 8px;
            position: relative;
            z-index: 10;
            overflow: hidden;
            transition: color 0.4s ease-out;
            font-size: 14px;
        }

        a.header_call:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            right: 100%;
            background-color: #fff; 
            z-index: -1; 
            transition: all 0.5s;
        }

        a.header_call:hover:before {
            right: 0px;
        }
        a.header_call:hover {
            color: #2f4c3b;
        }


        a.header_call:hover .phone_class {
            stroke:#2f4c3b;
        }


        header {
            height: 15vh;
        }

        .logoImg img {
            width: 90px;
        }

        .contentwrap_section {
            display: flex;
            height: 85vh;
            align-items: center;
            position: relative;
        }

        h1.heading_main {
            font-weight: 300;
        }

        h1.heading_main b {
            font-weight: 600;
            font-style: normal;
        }

        .boxImg {
            position: absolute;
        }

        .boxImg.b4 {
            right: 0;
            top: 0;
        }

        .boxImg.b3 {
            left: 100px;
            bottom: 20px;
        }

        .boxImg.b2 {
            left: 0;
            top: 30px;
        }

        .boxImg.b1 {
                bottom: 20px;
                right: 100px;
                display: flex;
                gap: 10px;
        }

        .b6 {
            bottom: 20px;
            right: 220px;
            background: #f00;
            width: 106px;
            height: 104px;
            border-radius: 10px;
        }

        /* --- 1. Entrance Animation (Fade In & Slide Up) --- */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        .animate-fade-in-up-slow {
            animation: fadeInUp 1.8s ease-out forwards;
        }

        /* --- 2. Text Typing Animation --- */

        /* Define the caret blinking */
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #6366f1; } /* Indigo-500 color */
        }

        /* Define the typing/reveal effect */
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        .animate-typing-text {
            /* Set the font to monospace for typewriter feel (even though we use Montserrat) */
            /* Ensure text is hidden until typed */
            overflow: hidden;
            /*white-space: nowrap;*/
            border-right: 2px solid; /* The "caret" */
            width: 0; /* Start with zero width */
            
            /* Apply typing and blinking animations */
            animation: 
                typing 3.5s steps(40, end), /* 40 steps is roughly 40 characters */
                blink-caret 0.75s step-end infinite;
            animation-fill-mode: forwards;
            animation-delay: 1s; /* Start typing after the main card appears */
        }

        .animated-text-shorthand {
            animation: reveal-text 2s linear 0s forwards;
        }
        
        /* Ensure the content is visible only after animation starts */
        .typing-container {
            opacity: 0;
            animation: fadeIn 0.1s forwards;
            animation-delay: 0.9s;
        }


        @keyframes reveal-text {
            /* 0% (Start): Text is invisible and heavily blurred */
            0% {
                filter: blur(10px);
                opacity: 0;
            }

            /* 100% (End): Text is perfectly clear and fully visible */
            100% {
                filter: blur(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeIn {
            to { opacity: 1; }
        }


        @media(max-width: 767px)
        {
            .boxImg.b4 {
                right: 15px;
                width: 100px;
            }

            .boxImg.b2 {
                left: 15px;
                width: 75px;
                top: 80px;
            }

            .boxImg.b3 {
                left: 15px;
                width: 150px;
                bottom: 160px;
            }

            .boxImg.b1 {
                right: 15px;
            }

            .logoImg img {
                width: 100px;
            }

            .header_wrap {
                padding: 0 15px;
            }

            .contentwrap_section {
                height: auto;
                padding-top: 185px;
                padding-bottom: 245px;
            }
            h1.heading_main br {
                display: none;
            }
            a.header_call {
                font-size: 12px;
                padding: 15px 12px;
            }
        }