/* Reset and Base Styles */
        
        
        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            color: #ffffff;
            line-height: 1.6;
            overflow-x: hidden;
        }
        
       .visuals img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        /* Fade-in Animation Classes */
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .fade-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .fade-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .fade-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .fade-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .fade-in-scale {
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .fade-in-scale.visible {
            opacity: 1;
            transform: scale(1);
        }
   
        /* Large phones and small tablets (up to 767px) */
        
        @media (max-width: 767px) {
            .hero-background {
                background-position: center top;
                background-size: cover;
            }
        }
        /* Small phones (up to 480px) */
        
        @media (max-width: 480px) {
            .hero-background {
                background-position: center top;
                background-size: auto;
            }
        }
        /* Very small screens (up to 360px) */
        
        @media (max-width: 360px) {
            .hero-background {
                background-position: center top;
                background-size: auto;
            }
        }
        
        
        .btn1 {
            background-color: #f9fafb;
            color: #111827;
            border-color: #d1d5db;
        }
        
        .btn1:hover,
        .btn1:focus {
            background-color: #ef7f22;
            color: #ffffff;
            border-color: #ef7f22;
            box-shadow: 0 6px 20px rgba(239, 127, 34, 0.4);
            transform: translateY(-3px);
            outline: none;
        }
        
        .btn1:focus-visible {
            outline: 2px solid #ef7f22;
            outline-offset: 2px;
        }
        /* SUCCESS STORIES SECTION */
        
       
        
        .blue-border-layer {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 50%;
            height: 95%;
            border-radius: 20px;
            background-color: #c7c7c7;
            z-index: 0;
        }
        
       
        
        .top-image-wrapper:hover {
            transform: scale(1.02);
        }
        
        .top-image {
            width: 100%;
            height: auto;
            border-radius: 20px;
        }
        
        
        .bottom-image-wrapper:hover {
            transform: scale(1.05);
        }
        
        .bottom-image {
            width: 100%;
            border-radius: 14px;
        }
        
        
        
        .points li:hover {
            transform: translateX(5px);
        }
        
        .points li::before {
            content: "»";
            position: absolute;
            left: 0;
            color: #040d1a;
        }
        /* CYBERSECURITY SECTION */
        /* Tablets and below: Stack text and visuals vertically */
        
       
        /* Small tablets & large phones */
        
        @media (max-width: 768px) {
            .success-stories-section {
                padding: 3rem 1.5rem;
            }
            .text-block {
                text-align: center;
            }
            .section-badge::after {
                margin: 0 auto;
                display: block;
                margin-top: 0.5rem;
            }
            .points li {
                text-align: left;
                justify-content: center;
            }
        }
        /* Phones */
        
        @media (max-width: 480px) {
            .success-stories-section {
                padding: 2.5rem 1rem;
            }
            .top-image-wrapper,
            .bottom-image-wrapper {
                max-width: 100%;
                width: 100%;
            }
            .bottom-image-wrapper {
                max-width: 100%;
            }
            .points {
                padding-left: 0.5rem;
            }
        }
        /* Extra small devices */
        
        
        
        
        
        @media (max-width: 480px) {
            .hero-section {
                padding: 0 1rem;
                min-height: 90vh;
            }
            .success-stories-section {
                padding: 3rem 1rem;
            }
            .hero-content h6 {
                letter-spacing: 2px;
            }
            .btn {
                padding: 0.6rem 1.2rem;
                font-size: 0.9rem;
            }
            .image-group {
                max-width: 300px;
            }
            .bottom-image-wrapper {
                max-width: 150px;
            }
            .cyber-card {
                padding: 1.5rem;
            }
        }
        
        @media (max-width: 320px) {
            .hero-content h1 {
                font-size: 1.5rem;
            }
            .image-group {
                max-width: 250px;
            }
            .cyber-card {
                padding: 1rem;
            }
        }
        /* Print Styles */
        
        @media print {
            .hero-section {
                background: none;
                color: black;
            }
            .btn {
                border: 1px solid black;
                color: black;
            }
            .cybersecurity-section {
                background: white;
                color: black;
            }
        }
        /* Reduced Motion */
        
        
        /* High Contrast Mode */
        
        @media (prefers-contrast: high) {
            .hero-content p {
                color: #ffffff;
            }
            .section-badge::after {
                background-color: #111827;
            }
        }
        /* Landscape orientation on mobile */
        
        @media (max-height: 500px) and (orientation: landscape) {
            .hero-section {
                min-height: 100vh;
                padding: 2rem 1rem;
            }
            .cybersecurity-section {
                padding: 3rem 1rem;
            }
        }