/* style.css */

    /* CSS Variables */
    :root {
        --primary-color: #1a293c;       /* Deep Blue */
        --secondary-color: #f0f4f8;     /* Lighter Gray/Blue tint */
        --tertiary-color: #ffffff;      /* White */
        --accent-color-1: #0ce4e1;      /* Cyan Accent */
        --accent-color-2: #08fefb;      /* Brighter Cyan */
        --accent-color-3: #02dad8;      /* Darker Cyan */
        --text-color: #333;             /* Dark Gray for text */
        --light-text-color: #555;       /* Lighter gray for less emphasis */
        --dark-section-text: #e0e8f0;   /* Very light gray for dark backgrounds */
        --navbar-height: 60px;          /* Adjust as needed */
        --border-radius: 8px;           /* Consistent border radius */
        --transition-speed: 0.3s;       /* Consistent transition speed */
    }

    /* Base Styles */
    body {
        /* Use a solid fallback background */
        background-color: var(--secondary-color);
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        color: var(--text-color);
        padding-top: var(--navbar-height); /* Prevent content hiding behind fixed navbar */
        overflow-x: hidden; /* Prevent horizontal scroll */
        position: relative;
    }

    div#navbarNav {
        background: #1a293c;
        margin-top: 10px;
        border-radius: var(--border-radius); /* Add rounding */
        padding: 5px 0; /* Add some padding */
    }

    /* Add class when page is loaded to hide preloader */
    body.loaded #preloader {
        opacity: 0;
        visibility: hidden;
    }


    html {
      scroll-behavior: smooth;
    }

    /* Headings */
    h1, h2, h3, h4, h5 {
        /* Default color for light sections */
        color: var(--primary-color);
        font-family: 'Orbitron', sans-serif;
    }

    h1.hero-title {
        /* Default color for light sections */
        color: var(--primary-color);
        font-weight: 700; /* Make hero title bolder */
    }

    h2 { /* Section titles */
        font-weight: 700;
        margin-bottom: 1rem;
    }

    h3.section-subtitle { /* Subtitles within sections */
         /* Default color for light sections */
         color: var(--primary-color);
         font-family: 'Orbitron', sans-serif;
         font-weight: 500;
         margin-bottom: 1rem;
    }

    h4 {
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    h5.card-title {
        font-weight: 500;
    }

    /* Paragraphs */
    p {
        /* Default color for light sections */
        color: var(--light-text-color);
        line-height: 1.7; /* Slightly increased line height */
    }
    p.lead { /* Lead paragraphs like in hero */
         /* Default color for light sections */
         color: var(--primary-color);
         font-size: 1.1rem;
         font-weight: 400;
    }

    /* Links */
    a {
        color: var(--accent-color-1);
        transition: color var(--transition-speed) ease;
    }

    a:hover {
        color: var(--accent-color-2);
        text-decoration: none;
    }

    /* Navigation Bar */
    .navbar {
        background-color: var(--primary-color) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        height: var(--navbar-height);
        transition: background-color var(--transition-speed) ease; /* Smooth transition if needed later */
    }

    .navbar-brand {
        color: var(--tertiary-color) !important;
        font-family: 'Orbitron', sans-serif;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    .nav-logo {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        transition: transform var(--transition-speed) ease;
    }
    .navbar-brand:hover .nav-logo {
        transform: rotate(15deg); /* Slight rotation on hover */
    }

    .navbar-light .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.5);
    }

    .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .nav-link {
        color: var(--tertiary-color) !important;
        margin-left: 10px;
        transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
        padding: 0.5rem 0.8rem;
        border-radius: 4px;
    }

    .nav-link:hover,
    .nav-link.active {
        color: var(--accent-color-1) !important;
        background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight */
    }

    /* Sections */
    section {
        padding: 80px 0;
        position: relative; /* For potential pseudo-elements and foreground elements */
        opacity: 0; /* Initially hidden for scroll animation */
        transform: translateY(30px); /* Start slightly lower */
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        background-color: transparent; /* Sections are transparent */
        overflow: hidden; /* Prevent pseudo-elements spilling */

        /* --- Apply background image and parallax directly to section --- */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */ /* Parallax effect */
    }

    /* Class added by JS when section is in view */
    section.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .section-padding-top {
        padding-top: 80px;
    }

    /* Section Divider */
    .section-divider {
        background: linear-gradient(90deg, transparent, var(--accent-color-1), transparent); /* Gradient divider */
        height: 2px; /* Thinner */
        border: none;
        margin: 15px auto 40px auto; /* Increased bottom margin */
        width: 120px; /* Wider */
    }

    /* Section Backgrounds (Container and Overlay) */
    section > .container {
        position: relative; /* Ensure container content is above overlays */
        z-index: 2;
    }

    section::before { /* Section OVERLAY only */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Behind container content, above section background */
        /* Background color and opacity set per section below */
    }

    /* --- Apply specific background images to SECTIONS and overlays/opacity to ::BEFORE --- */
    #about { /* DARK */
        background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=60&w=1000');
        background-attachment: fixed;
    }
    #about::before {
        background-color: var(--primary-color); /* Dark Blue */
        opacity: 0.85;
    }

    #services { /* LIGHT */
        background-image: url('https://images.unsplash.com/photo-1554147090-e1221a04a025?auto=format&fit=crop&q=60&w=1000');
    }
    #services::before {
        background-color: var(--tertiary-color); /* White */
        opacity: 0.92;
    }

    #portfolio { /* DARK */
        background-image: url('https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?auto=format&fit=crop&q=60&w=1000');
    }
    #portfolio::before {
        background-color: var(--primary-color); /* Dark Blue */
        opacity: 0.85;
    }

    #company-info { /* LIGHT */
        background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=60&w=1000');
    }
    #company-info::before {
        background-color: var(--secondary-color); /* Light Gray/Blue */
        opacity: 0.92;
    }

    #contact { /* DARK */
        background-image: url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?auto=format&fit=crop&q=60&w=1000');
    }
    #contact::before {
        background-color: var(--primary-color); /* Dark Blue */
        opacity: 0.85;
    }

    /* --- Text Color Adjustments for DARK Sections --- */
    #about h1, #about h2, #about h3, #about h4, #about h5,
    #portfolio h1, #portfolio h2, #portfolio h3, #portfolio h4, #portfolio h5,
    #contact h1, #contact h2, #contact h3, #contact h4, #contact h5 {
        color: var(--tertiary-color); /* White headings */
    }

    #about p, #about li,
    #portfolio p, #portfolio li, #portfolio .card-text,
    #contact p, #contact li {
        color: var(--dark-section-text); /* Light gray text */
    }

    /* Adjust lead paragraphs in dark sections */
    #about p.lead {
        color: var(--dark-section-text);
    }

    /* Vertical Centering Utility */
    .v-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100vh - var(--navbar-height)); /* Adjust for navbar */
    }
    .v-center > .container {
        width: 100%;
    }

    /* Hero Section Specific Styles */
    #about {
        position: relative;
        overflow: hidden; /* Keep floating elements contained */
    }

    /* hero-title and hero-subtitle color is handled by the general dark section rules */

    .hero-visual-composition {
        position: relative;
        width: 100%;
        max-width: 500px; /* Max width for the composition */
        aspect-ratio: 1 / 1; /* Maintain a square aspect ratio */
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: float 6s ease-in-out infinite;
    }

    .logo-container.hero-logo {
        position: absolute;
        width: 60%; /* Relative size */
        height: 60%;
        max-width: 300px; /* Max pixel size */
        max-height: 300px;
        z-index: 10; /* Logo on top */
    }

    .hexagon-outer, .hexagon-inner, .logo-center {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hexagon-outer img, .hexagon-inner img, .logo-center img {
        max-width: 100%;
        max-height: 100%;
    }

    .hexagon-outer { animation: spin-clockwise 25s linear infinite; }
    .hexagon-inner { animation: spin-counter-clockwise 25s linear infinite; }

    @keyframes spin-clockwise {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes spin-counter-clockwise {
        0% { transform: rotate(0deg); }
        100% {transform: rotate(-360deg);}
    }

    /* Floating Animation */
    @keyframes float {
        0% { transform: translatey(0px); }
        50% { transform: translatey(-15px); }
        100% { transform: translatey(0px); }
    }


    /* Device Mockups */
    .device-mockup {
        position: absolute;
        background-color: #333; /* Dark frame */
        border-radius: var(--border-radius);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        overflow: hidden;
        z-index: 5; /* Below logo */
        border: 3px solid #222;
        transition: transform 0.5s ease-in-out; /* Add transition for potential future effects */
    }

    .device-screen {
        background-color: var(--tertiary-color); /* White screen */
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Clip image */
    }

    .device-screen img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover the screen area */
    }

    /* Positioning the mockups relative to the composition container */
    .laptop-mockup {
        height: 37%;
        width: 60%;
        bottom: 3%;
        left: 5%;
        transform: rotate(-10deg);
        border-radius: 10px 10px 0 0; /* Laptop shape */
        padding: 10px 10px 0 10px; /* Space for frame */
        border-bottom: none;
        animation: float 7s ease-in-out infinite 0.2s; /* Staggered float */
    }
    .laptop-mockup::after { /* Base of laptop */
        content: '';
        position: absolute;
        bottom: -5px;
        left: -3px;
        right: -3px;
        height: 10px;
        background: #2a2a2a;
        border-radius: 0 0 5px 5px;
        border: 3px solid #222;
        border-top: none;
    }


    .phone-mockup {
        width: 20%;
        height: 35%;
        top: 15%;
        right: 10%;
        transform: rotate(15deg);
        border-radius: 15px; /* Phone shape */
        padding: 12px 6px;
         animation: float 8s ease-in-out infinite 0.4s; /* Staggered float */
    }
    .phone-mockup::before { /* Notch */
        content:'';
        position: absolute;
        top: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 30%;
        height: 5px;
        background: #222;
        border-radius: 0 0 3px 3px;
    }

    .game-mockup { /* Like a Switch Lite */
        width: 35%;
        height: 20%;
        top: 10%;
        left: 15%;
        transform: rotate(5deg);
        border-radius: 10px;
        padding: 8px;
        animation: float 6.5s ease-in-out infinite 0.6s; /* Staggered float */
    }

    /* Services Section (Light Section - Styles remain largely the same) */
    .service-card {
        /* Make cards slightly transparent to hint at background */
        background-color: rgba(255, 255, 255, 0.9);
        padding: 30px;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 15px rgba(0,0,0,0.07); /* Slightly increased shadow */
        transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease;
        height: 100%; /* Equal height */
        border: 1px solid rgba(26, 41, 60, 0.1); /* Subtle border */
    }

    .service-card:hover {
        transform: translateY(-8px) scale(1.02); /* Enhanced hover */
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        background-color: rgba(255, 255, 255, 0.95); /* Slightly less transparent on hover */
    }

    .service-icon i {
        color: var(--accent-color-1);
        transition: transform var(--transition-speed) ease;
    }
    .service-card:hover .service-icon i {
        transform: scale(1.1) rotate(-5deg); /* Animate icon on hover */
    }

    /* Portfolio Section (Dark Section - Adjust card background) */
    .card.portfolio-card {
        border: 1px solid rgba(240, 244, 248, 0.2); /* Lighter border for dark bg */
        border-radius: var(--border-radius);
        /* Darker, slightly transparent background for cards */
        background-color: rgba(26, 41, 60, 0.7);
        transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease;
        cursor: pointer;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Ensure image radius is clipped */
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .card.portfolio-card:hover {
        transform: translateY(-8px) scale(1.02); /* Enhanced hover */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        background-color: rgba(26, 41, 60, 0.8); /* Slightly less transparent on hover */
    }

    .card-img-top.equal-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        transition: transform var(--transition-speed) ease;
        opacity: 0.9; /* Slightly dim image on dark card */
    }
    .card.portfolio-card:hover .card-img-top.equal-image {
        transform: scale(1.05);
        opacity: 1;
    }

    .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 1.25rem;
    }

    /* Card text color is handled by the general dark section rules */
    /* .card-text { ... } */

    /* Adjust outline button in dark portfolio section */
    #portfolio .card .btn-outline-primary {
         border-color: var(--accent-color-1);
         color: var(--accent-color-1);
         margin-top: auto;
         align-self: flex-start;
         transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
         /* Darker subtle background for button on dark card */
         background-color: rgba(240, 244, 248, 0.1);
    }

    #portfolio .card .btn-outline-primary:hover {
        background-color: var(--accent-color-1);
        color: var(--primary-color); /* Keep dark text on hover */
    }

    /* Company Info Section (Light Section - Styles remain largely the same) */
    .core-value {
        margin-bottom: 1rem; /* Reduced spacing */
        align-items: center;
        position: relative;
        display: inline-block;
    }
    .core-value h4 {margin-bottom: 0;margin-right: 10px;width: 100%;float: left;display: inline-block;}

    .core-value p {
        float: left;
        width: 100%;
        display: inline-block;
    }
    .core-value p { margin-bottom: 0; color: var(--light-text-color); }

    .core-value-letter {
        display: inline-flex; /* Use flex for centering */
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        background-color: var(--accent-color-1);
        color: var(--primary-color);
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        line-height: 35px;
        margin-right: 10px;
        border-radius: 4px;
        flex-shrink: 0; /* Prevent shrinking */
        transition: transform var(--transition-speed) ease, box-shadow 0.2s ease;
        box-shadow: 0 2px 4px rgba(12, 228, 225, 0.3);
    }
    .core-value:hover .core-value-letter {
        transform: scale(1.1); /* Scale letter on hover */
        box-shadow: 0 4px 8px rgba(12, 228, 225, 0.4);
    }


    .img-container img {
        border-radius: var(--border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Slightly enhanced shadow */
        transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    }
    .img-container:hover img {
        transform: scale(1.03);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }

    .objectives-list {
        list-style: none;
        padding-left: 0;
    }

    .objectives-list li {
        position: relative;
        padding-left: 25px;
        margin-bottom: 1rem;
    }

    .objectives-list li::before {
        content: '✓';
        position: absolute;
        left: 0;
        top: 0;
        color: var(--accent-color-1);
        font-weight: bold;
        transition: transform var(--transition-speed) ease;
    }
    .objectives-list li:hover::before {
        transform: scale(1.2) translateX(2px); /* Animate checkmark */
    }


    /* Contact Form (Dark Section - Adjust input styles) */
    #contact .form-control {
        background-color: rgba(240, 244, 248, 0.15); /* Darker input background */
        color: var(--tertiary-color); /* Light text */
        border: 1px solid rgba(240, 244, 248, 0.3); /* Lighter border */
        border-radius: 4px;
        padding: 0.75rem 1rem;
        transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease;
    }

    #contact .form-control::placeholder {
        color: rgba(240, 244, 248, 0.5); /* Lighter placeholder */
        opacity: 1;
    }

    #contact .form-control:focus {
        background-color: rgba(240, 244, 248, 0.25); /* Slightly lighter on focus */
        color: var(--tertiary-color);
        border-color: var(--accent-color-1);
        box-shadow: 0 0 0 0.2rem rgba(12, 228, 225, 0.25);
        outline: none;
    }

    /* Buttons (General styles - should work on light/dark, but check specific overrides) */
    .btn {
        border-radius: 25px;
        padding: 10px 25px;
        font-weight: 500;
        transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        letter-spacing: 0.5px; /* Add subtle letter spacing */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    }

    .btn:hover {
         box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
         transform: translateY(-2px); /* Lift button slightly */
    }

    .btn:active {
        transform: scale(0.98) translateY(0); /* Reset lift and shrink */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .btn-lg {
         padding: 12px 30px;
         font-size: 1.1rem;
    }

    .btn-primary {
        background-color: var(--accent-color-1);
        border-color: var(--accent-color-1);
        color: var(--primary-color); /* Primary button text is dark */
    }

    .btn-primary:hover {
        background-color: var(--accent-color-2);
        border-color: var(--accent-color-2);
        color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(12, 228, 225, 0.3); /* Accent glow on hover */
    }

    /* Default outline button for light sections */
    .btn-outline-primary {
        border-color: var(--accent-color-1);
        color: var(--accent-color-1);
        background-color: rgba(255, 255, 255, 0.6); /* Adjusted background for readability */
        box-shadow: none; /* No initial shadow for outline */
    }

    .btn-outline-primary:hover {
        background-color: var(--accent-color-1);
        border-color: var(--accent-color-1);
        color: var(--primary-color); /* Dark text on hover */
        box-shadow: 0 4px 10px rgba(12, 228, 225, 0.2); /* Accent color shadow */
    }

    /* Specific outline button overrides for dark sections are handled within #portfolio rules */


    /* Footer */
    footer {
        background-color: var(--primary-color);
        padding: 20px 0;
        position: relative; /* Needed for z-index */
        z-index: 10; /* Ensure footer is above fixed background */
    }

    footer p {
        margin-bottom: 0;
        color: var(--secondary-color);
    }

    /* Modal Styling */
    .modal.fade .modal-dialog { /* Smooth modal transition */
        transition: transform 0.4s ease-out;
        transform: translateY(-50px);
    }
    .modal.show .modal-dialog {
        transform: translateY(0);
    }

    .modal-content {
        border-radius: var(--border-radius);
        border: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Add shadow */
        background-color: var(--tertiary-color); /* Ensure solid background */
    }
    .modal-header {
        background-color: var(--primary-color);
        color: var(--tertiary-color);
        border-bottom: none;
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }
    .modal-header .close { color: var(--tertiary-color); opacity: 0.8; text-shadow: none; transition: opacity var(--transition-speed) ease; }
    .modal-header .close:hover { opacity: 1; }
    .modal-title { color: var(--tertiary-color); font-family: 'Orbitron', sans-serif; }
    .modal-body img { max-width: 100%; height: auto; border-radius: var(--border-radius); margin-bottom: 1rem; }
    .modal-footer { border-top: 1px solid var(--secondary-color); }
    .modal-footer .btn-secondary { background-color: #6c757d; border-color: #6c757d; }
    .modal-footer .btn-secondary:hover { background-color: #5a6268; border-color: #545b62; }

    /* Preloader Styles */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--primary-color); /* Match navbar */
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255, 255, 255, 0.3); /* Light border */
        border-top-color: var(--accent-color-1); /* Accent color for spinning part */
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }


    /* Reduced Motion Preferences */
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto; /* Disable smooth scrolling */
      }

      /* Keep sections visible if JS relies on transitions */
       section {
          opacity: 1;
          transform: translateY(0);
          /* background-attachment: scroll !important; */ /* Disable parallax for reduced motion */
       }
       /* Reset specific hover effects if needed */
       .btn:hover, .service-card:hover, .card.portfolio-card:hover {
           transform: none;
       }
       .hero-visual-composition, .device-mockup {
           animation: unset; /* Disable floating/spinning */
       }
    }


    /* Responsive Design */

    @media (max-width: 991.98px) {
        .section-padding-top { padding-top: 70px; }
        .v-center { min-height: auto; padding: 60px 0; }
        .hero-visual-composition { max-width: 400px; animation: none; } /* Disable float on smaller screens if desired */
        .device-mockup { animation: none; }
        .logo-container.hero-logo { width: 55%; height: 55%; }
        .navbar-nav .nav-link { padding: 10px 0; }
        #company-info .row { align-items: flex-start; } /* Prevent stretching on smaller screens */
        section {
            background-attachment: scroll !important; /* Disable parallax on tablets and smaller for performance */
        }
    }

    @media (max-width: 767.98px) {
        section { padding: 60px 0; }
        .section-padding-top { padding-top: 60px; }
        h1.display-4 { font-size: 2.5rem; }
        h2 { font-size: 1.8rem; }
        .hero-visual-composition { max-width: 350px; margin-top: 30px; }
        .logo-container.hero-logo { width: 50%; height: 50%; }
        .device-mockup { box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
        .laptop-mockup { width: 50%; height: 35%; bottom: 5%; left: 0%; }
        .phone-mockup { width: 25%; height: 40%; top: 10%; right: 5%; }
        .game-mockup { width: 40%; height: 25%; top: 5%; left: 10%; }
        .core-value { flex-direction: column; align-items: flex-start; }
        .core-value h4 { margin-bottom: 0.5rem; }
        #contact .col-md-6 { text-align: center; }
        #contact form { text-align: left; }
        #contact iframe { height: 250px; }
        .btn-lg { padding: 10px 25px; font-size: 1rem; }
        /* Adjust overlay opacity on smaller screens if needed */
        /* Light sections */
        #services::before { opacity: 0.94; }
        #company-info::before { opacity: 0.94; }
        /* Dark sections */
        #about::before, #portfolio::before, #contact::before { opacity: 0.88; }
    }

    @media (max-width: 575.98px) {
         h1.display-4 { font-size: 2rem; }
         h2 { font-size: 1.6rem; }
         .hero-visual-composition { max-width: 280px; }
         .logo-container.hero-logo { width: 45%; height: 45%; }
         .device-mockup { border-width: 2px; }
         .laptop-mockup { width: 55%; height: 40%; padding: 6px 6px 0 6px; }
         .laptop-mockup::after { height: 6px; bottom: -3px; border-width: 2px; }
         .phone-mockup { width: 30%; height: 45%; border-radius: 10px; padding: 8px 4px; }
         .phone-mockup::before { height: 4px; }
         .game-mockup { width: 45%; height: 30%; border-radius: 8px; padding: 5px; }
         .btn { padding: 8px 20px; font-size: 0.9rem; }
         .card.portfolio-card { margin-bottom: 1.5rem; }
         .core-value h4 { font-size: 1.1rem; }
         div#navbarNav { margin-top: 5px; } /* Reduce space */
         /* Adjust overlay opacity on smaller screens if needed */
         /* Light sections */
         #services::before { opacity: 0.95; }
         #company-info::before { opacity: 0.95; }
         /* Dark sections */
         #about::before, #portfolio::before, #contact::before { opacity: 0.9; }
    }