@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Oswald', cursive;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Starfield Canvas */
.starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5; /* Ensure the canvas is fully opaque */
    background: transparent; /* Ensure the background is not affecting visibility */
}
/* Hero Section */
.hero {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-top: 70px;
    z-index: 1;
}

/* Background Video */
.back-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure it covers the entire screen without distortion */
    z-index: -1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .back-video {
        object-fit: cover; /* Ensures it still covers the screen while maintaining aspect ratio */
    }
}

@media (max-width: 480px) {
    .back-video {
        object-position: center; /* Center the video in smaller screens */
    }
}


/* Navigation Bar */
nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: transparent;
    box-sizing: border-box;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Navbar Glowing Effect */
nav.glowing {
    box-shadow: 0 0 20px 10px var(--navbar-glow-color);
}

/* Position the logo in the top-left corner */
.special-logo-container {
    position: fixed;  /* Fix the logo to the screen */
    top: 12px;        /* Adjust distance from top */
    left: 12px;       /* Adjust distance from left */
    z-index: 1000;    /* Ensure the logo stays on top of other elements */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

/* Style the special logo */
.special-logo {
    width: 120px;  /* Default size of the logo */
    height: auto;  /* Maintain aspect ratio */
    display: block;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    filter: brightness(1.2); /* Slight brightness increase */
    
}

/* Hover effect: glowing neon effect and rising animation */
.special-logo-container:hover .special-logo {
    transform: translateY(-5px); /* Move logo up on hover */
 background-color: #00FFFF; /* Neon Blue color to match logo */
    box-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF;
    
    
}

/* Make the special logo responsive */
@media (max-width: 1024px) {
    .special-logo {
        width: 80px;  /* Smaller logo for tablets */
    }
}

@media (max-width: 768px) {
    .special-logo {
        width: 70px;  /* Smaller logo for smaller screens */
    }
}

@media (max-width: 480px) {
    .special-logo {
        width: 60px;  /* Smaller logo for mobile */
    }
}

/* Container styling to ensure no overlap */
#logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* Ensures controlled positioning */
    margin: 20px auto; /* Centers the container */
	transition: transform 0.5s ease; 
	animation: flicker 8s infinite;
}

/* Logo flickering effect */
.logo {
    max-width: 100px;
    transition: transform 0.5s ease;
   
}

/* Ensure no unintended overlapping */
.logo img {
    display: block;
    width: 100%; /* Ensures logo width respects its container */
    height: auto;
}

/* Keyframes for a more natural flicker effect */
@keyframes flicker {
    0%, 100% {
        opacity: 1;
        filter: brightness(100%);
    }
    2%, 10%, 22%, 36%, 50%, 65% {
        opacity: 0.85;
        filter: brightness(95%);
    }
    8%, 18%, 30%, 45% {
        opacity: 0.75;
        filter: brightness(90%);
    }
    20%, 38%, 58% {
        opacity: 0.6;
        filter: brightness(80%);
    }
    28%, 48%, 70% {
        opacity: 0.7;
        filter: brightness(85%);
    }
}

/* No flicker effect on the text */
#enter-text {
    font-size: 24px;
    color: black;
    margin-top: 10px;
    text-align: center;
}

/* Hamburger Icon */
.hamburger-menu .hamburger-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 25px; /* Smaller height */
    width: 25px; /* Smaller width */
    position: fixed; /* Fixed positioning to keep it in place when scrolling */
    top: 20px; /* Distance from the top */
    right: 55px; /* Distance from the right */
    z-index: 1003; /* Ensure it appears above other content */
    
    /* Apply multiple animations */
    animation: bounce 2s ease-in-out infinite, neonGlow 2s infinite alternate;
}

/* Adjustments for smaller screen sizes */
@media (max-width: 768px) {
    .hamburger-menu .hamburger-icon {
        top: 15px; /* Adjust top position on smaller screens */
        right: 10px; /* Keep it from the right side */
    }
}

@media (max-width: 480px) {
    .hamburger-menu .hamburger-icon {
        top: 10px; /* Adjust top position on very small screens */
        right: 10px; /* Ensure it stays on the right side */
    }
}



.hamburger-menu .line {
    width: 20px; /* Adjusted width */
    height: 3px; /* Adjusted height */
    background-color: white;
    margin: 3px 0;
    transition: transform 0.3s ease-in-out;
	
}

/* Hamburger icon active state */
.hamburger-menu.active .line.top {
    transform: rotate(45deg) translateY(6px);
}

.hamburger-menu.active .line.middle {
    opacity: 0;
}

.hamburger-menu.active .line.bottom {
    transform: rotate(-45deg) translateY(-6px);
}

/* On hover, change line color to neon blue with glow effect */
.hamburger-menu:hover .line {
    background-color: #00FFFF; /* Neon Blue color to match logo */
    box-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF;
}

/* Navigation Links */
.nav-links {
    list-style: none;
    display: flex;
    flex-direction: row; /* Horizontal direction */
    justify-content: center;
    align-items: center; /* Center links vertically */
    position: fixed;
    top: -1%;
    left: 50%; /* Center the nav on the screen */
    transform: translateX(-50%); /* Center it */
    width: 100%;
    height: 0; /* Initially hidden */
    background: rgba(0, 0, 0, 0.9); /* Dark background */
    z-index: 1001;
    padding: 0;
    overflow: hidden; /* Hide by default */
    transition: height 0.5s ease;
}

/* Active State for Nav Links (expand downwards) */
.nav-links.active {
    height: 70px; /* Adjust the height when the menu is expanded */
}

/* Nav Items */
.nav-links li {
    position: relative;
    margin: 0 15px; /* Space between links */
}

.nav-links li a {
    color: white;
    font-size: 18px; /* Smaller font size */
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    border-radius: 5px;
}

/* 3D Hover Effect for Nav Items */
.nav-links li a:hover {
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7);
    transform: translateY(-10px) rotateX(15deg);
    background: rgba(255, 255, 255, 0.1);
    filter: blur(1px);
}

/* Glowing Borders */
.nav-links li a.active {
    color: var(--section-color);
    box-shadow: 0 0 20px 10px var(--section-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Hamburger Menu */
    .hamburger-menu {
        font-size: 20px; /* Even smaller for very small screens */
        top: 15px;
        left: 15px;
    }

    /* Navigation Links */
    .nav-links {
        flex-direction: row; /* Keep horizontal layout */
        justify-content: center;
        height: 0; /* Hidden initially */
        top: 0;
        transform: translateY(-100%); /* Hidden initially */
        background: rgba(0, 0, 0, 0.9); /* Dark background */
    }

    .nav-links.active {
        transform: translateY(0); /* Expand vertically */
        height: 70px; /* Navbar height */
    }

    .nav-links li {
        margin: 0 8px; /* Adjust margin for smaller screens */
    }

    .nav-links li a {
        font-size: 16px; /* Smaller font size for links */
        padding: 12px; /* Adjust padding */
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .hamburger-menu {
        font-size: 18px; /* Even smaller icon */
    }

    .nav-links li a {
        font-size: 14px; /* Smaller font for very small screens */
    }
}

/* Prevent Menu from Expanding on Page Change */
.nav-links {
    pointer-events: none; /* Prevent clicks while not active */
}

.nav-links.active {
    pointer-events: all; /* Enable clicks when active */
}

/* Content Sections */
.content-sections {
    position: fixed;
    top: 70px; /* Position under navbar */
    right: -120%;
    width: calc(100% - 200px); /* Full width minus navbar */
    height: calc(100vh - 70px); /* Full height minus navbar */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    z-index: 1000;
    transition: right 0.5s ease-in-out, background-color 0.5s ease;
    overflow-x: hidden;
    padding: 20px;
}

/* Section Active State */
.content-sections.active {
    right: 0;
    box-shadow: 0 0 20px 10px var(--section-color);
}

/* Section Expansion */
.content-sections section {
    flex: 0 0 100%;
    padding: 20px;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, box-shadow 0.5s ease;
    position: relative;
	z-index: 1000;
}

/* Section Expanded State */
.content-sections section.expanded {
    display: block;
    opacity: 1;
    box-shadow: 0 0 20px 10px var(--section-color);
	z-index: 1000;
	
}

/* Close Icon in Expanded Sections */
.close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: white;
    cursor: pointer;
}

/* Social Icons */
.social-icons {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1003;
}

.social-icon {
    font-size: 24px;
    color: white;
    margin: 0 10px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: gray;
    transform: scale(1.2);
	
}

/* Mute Button */
.mute-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    z-index: 1002;
    transition: background 0.3s ease, transform 0.3s ease;
}

.mute-button:hover {

   background-color: #00FFFF; /* Neon Blue color to match logo */
    box-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF;
}

.mute-button i {
    color: white;
    font-size: 24px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .nav-links.active {
        background: rgba(0, 0, 0, 0.9);
    }

    .nav-links li a {
        font-size: 18px;
        padding: 15px;
    }

    .content-sections {
        width: 100%;
        height: calc(100vh - 70px);
    }
}



/* 3D Shapes for Navbar Sections */
.shape-container {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.shape-container .shape {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform 0.6s ease;
    transform: translate3d(-50%, -50%, 0);
}

.shape-container .shape:hover {
    transform: translate3d(-50%, -50%, 0) rotateY(180deg) scale(1.1);
}

.shape-container .cube {
    transform: rotateY(45deg);
}

.shape-container .cube div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.shape-container .cube .front  { transform: translateZ(50px); }
.shape-container .cube .back   { transform: rotateY(180deg) translateZ(50px); }
.shape-container .cube .right  { transform: rotateY(90deg) translateZ(50px); }
.shape-container .cube .left   { transform: rotateY(-90deg) translateZ(50px); }
.shape-container .cube .top    { transform: rotateX(90deg) translateZ(50px); }
.shape-container .cube .bottom { transform: rotateX(-90deg) translateZ(50px); }

.shape-container .sphere {
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
}

.shape-container .pyramid {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid rgba(255, 255, 255, 0.6);
    transform: translateX(-50%) translateY(-50%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Gallery Section */
#gallery {
    padding: 50px 20px;
    text-align: center;
    background-color: rgba(17, 17, 17, 0.7); /* 70% opacity */
    color: white;
}

#gallery h2 {
    font-size: 36px;
    color:white; /* Yellow */
    margin-bottom: 20px;
}

#gallery p {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 50px;
}

/* Gallery Grid Layout */
.gallery-grid {
  gap: 10px; /* Space between items */
  max-width: 3000px; /* Maximum width of the grid */
  margin: 0 auto; /* Center the grid horizontally within its container */
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* Responsive grid */
  /* Ensure content inside each grid cell is centered */
  justify-items: center; /* Center items horizontally within each grid cell */
  align-items: center; /* Center items vertically within each grid cell */
 
  /* Optional: Center the grid container itself */
  width: 100%; /* Ensure the container takes up the full available width */
  height: auto; /* Height adjusts based on content */
  animation: glowParagraph2 5s infinite; /* Apply the glowing effect */
}

/* Style for individual gallery images */
.gallery-image {
     width: auto;
    max-height: auto;
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition effects */
    object-fit: cover; /* Ensures images cover the cell without distortion */
    
}
/* Basic gallery styling */
.image-container {
    position: relative;
}

/* Style for the navigation buttons */
.arrow {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Positioning for left button */
.arrow.left {
    left: 10px; /* Adjust as needed to move closer to the image */
}

/* Positioning for right button */
.arrow.right {
    right: 10px; /* Adjust as needed to move closer to the image */
}

/* Center the navigation buttons */
.navigation .arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
}

/* Positioning for left button */
.navigation .left {
    left: 14.8%; /* Move it closer to the middle-left side */
}

/* Positioning for right button */
.navigation .right {
    right: 7%; /* Move it closer to the middle-right side */
}

/* Make the navigation buttons responsive */
@media screen and (max-width: 1024px) {
    .arrow {
        font-size: 20px; /* Smaller font size for tablets */
        padding: 8px; /* Adjust padding */
    }

    .navigation .left {
        left: 12%; /* Move closer to the left */
    }

    .navigation .right {
        right: 8%; /* Move closer to the right */
    }
}

@media screen and (max-width: 768px) {
    .arrow {
        font-size: 18px; /* Even smaller font size for smaller screens */
        padding: 6px; /* Smaller padding */
    }

    .navigation .left {
        left: 10%; /* Further move closer to the left */
    }

    .navigation .right {
        right: 10%; /* Further move closer to the right */
    }
}

@media screen and (max-width: 480px) {
    .arrow {
        font-size: 16px; /* Small font size for very small screens */
        padding: 5px; /* Smaller padding */
    }

    .navigation .left {
        left: 8%; /* Further move closer to the left */
    }

    .navigation .right {
        right: 8%; /* Further move closer to the right */
    }
}

/* Styling for Back to Main Gallery button */
#backToGallery {
    position: relative; /* Fix the position so the button stays on the screen */
    top: 1%; /* Center vertically in the viewport */
    left: 50%; /* Center horizontally in the viewport */
    transform: translate(-50%, -50%); /* Adjust for true center alignment */
    padding: 10px 20px;
    font-size: 24px;
    font-family: inherit; /* Use the same font as the rest of the website */
    background: transparent; /* Transparent background */
    color: #fff; /* Adjust text color as needed */
    border: 2px solid #fff; /* White border for visibility */
    cursor: pointer;
    animation: glowEffect 5s infinite; /* Apply a glowing effect */
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1000; /* Ensure it stays on top of other content */
}

/* Make button size responsive */
@media screen and (max-width: 768px) {
    #backToGallery {
        font-size: 16px; /* Adjust font size for medium screens */
        padding: 8px 16px; /* Adjust padding */
    }
}

@media screen and (max-width: 480px) {
    #backToGallery {
        font-size: 14px; /* Further adjust font size for very small screens */
        padding: 6px 12px; /* Further adjust padding */
    }
}


/* Glow effect animation for the button */
@keyframes glowEffect {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 1);
    }
}

/* Hover effect for a more interactive feel */
#backToGallery:hover {
    background: rgba(255, 255, 255, 0.1); /* Slight background on hover */
    color: #fff;
}

/* Lightbox navigation buttons inside the lightbox */
.lightbox .prev,
.lightbox .next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 30px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
    padding: 10px;
}

.lightbox .prev {
    left: 10px;
}

.lightbox .next {
    right: 10px;
}

.lightbox .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}

.lightbox .prev {
    left: 20px;
}

.lightbox .next {
    right: 20px;
}


.lightbox .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}

    @media (max-width: 768px) {
        .arrow {
            font-size: 14px;
            padding: 8px 16px;
        }
    }

    @media (max-width: 480px) {
        .arrow {
            font-size: 12px;
            padding: 6px 12px;
        }

        .gallery-image {
            width: 100%;
            max-width: 300px;
            height: auto;
        }
    }
.main-gallery {
  gap: 10px; /* Space between items */
  max-width: 3000px; /* Maximum width of the grid */
  margin: 0 auto; /* Center the grid horizontally within its container */
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* Responsive grid */
  
  /* Ensure content inside each grid cell is centered */
  justify-items: center; /* Center items horizontally within each grid cell */
  align-items: center; /* Center items vertically within each grid cell */
  
  /* Optional: Center the grid container itself */
  width: 100%; /* Ensure the container takes up the full available width */
  height: auto; /* Height adjusts based on content */
	animation: glowParagraph2 5s infinite; /* Apply the glowing effect */
	
}

.gallery-thumbnail {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
}

.gallery-thumbnail img {
  width: 100%; /* Ensure the container takes up the full available width */
  height: auto; /* Height adjusts based on content */
    object-fit: cover;
    border-radius: 10px;
}

.gallery-thumbnail:hover {
    transform: scale(1.05);
	animation: glowParagraph 5s infinite; /* Apply the glowing effect */
	
}


/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
	
}

.lightbox-content {
    display: block;
    max-width: 80%;
    max-height: 80%;
    margin: auto;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover {
    color:  gray;
}

.prev, .next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: #fff;
    font-weight: bold;
    font-size: 40px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.prev:hover, .next:hover {
    color:  gray;
}
/* Portfolio Section */
#portfolio {
    padding: 50px 20px;
    text-align: center;
    background-color: rgba(17, 17, 17, 0.7); /* 70% opacity */
    color: white;
}

#portfolio h2 {
    font-size: 36px;
    color: white;
    margin-bottom: 20px;
}

#portfolio p {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 50px;
}

/* Portfolio Grid Layout */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	max-width: 2000px;
    gap: 20px;
    margin: 0 auto;
}
.portfolio-thumbnail img {
    position: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container without distortion */
}
.portfolio-thumbnail {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
	animation: glowParagraph2 5s infinite; /* Apply the glowing effect */
}

.portfolio-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
	animation: glowParagraph1 5s infinite; /* Apply the glowing effect */
	
}

/* Lightbox Styles for Video */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    display: block;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    color: white;
    font-size: 40px;
    padding: 10px;
    transform: translateY(-50%);
    user-select: none;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.prev:hover, .next:hover {
    color: gray;; /* Optional: Add a yellow tint on hover */
    color: gray;; /* Optional: Add a yellow tint on hover */
}
@keyframes bounceInAnimation {
    from {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    70% {
        transform: scale(0.95);
    }
    to {
        transform: scale(1);
    }
}

@keyframes bounceOutAnimation {
    from {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(0.85);
        opacity: 1;
    }
    to {
        transform: scale(0.3);
        opacity: 0;
    }
}
.content-sections section {
    display: none; /* Hide sections by default */
}

.content-sections section.expanded {
    display: block; /* Show expanded sections */
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.starfield {
    will-change: transform;
}

.expanded {
    will-change: box-shadow;
}

/* Apply the fade animations */
.content-sections section {
    opacity: 0;
    animation-fill-mode: forwards; /* Keep the final state of the animation */
}

.content-sections section.expanded {
    opacity: 1;
    display: block;
}
#Portfolio {
    padding: 2rem;
    background-color: #f4f4f4;
    color: #333;
}

#Portfolio h2 {
    color: #666;
    font-size: 2rem;
    margin-bottom: 1rem;
}

#Portfolio p {
    color: #444;
    font-size: 1rem;
    margin-bottom: 2rem;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
	  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Increase min-width to 300px for larger images */
}

.portfolio-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
}

.portfolio-item.active {
    transform: scale(1.1);
    z-index: 10;
}

.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Remove border */
}

.portfolio-item p {
    padding: 1rem;
    color: #666;
    font-size: 1rem;
}
#team {
    padding: 50px 20px;
    text-align: center;
    color: white;
}

#team h2 {
    font-size: 36px;
    color: white;
    margin-bottom: 20px;
}

#team p {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 50px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    justify-items: center;
	
}

.team-member {
  
    border-radius: 10px;
    padding: 20px;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
	animation: glowParagraph 5s infinite; /* Apply the glowing effect */

}

.team-member img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 15px;
}

.team-member h3 {
    font-size: 24px;
    color: white;
    margin: 15px 0 5px;
}

.team-member h4 {
    font-size: 18px;
    color: #888;
    margin-bottom: 15px;
}

.team-member p {
    font-size: 16px;
    color: #ccc;
}

@media screen and (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
/* Join Us Section */
#join-us {
    padding: 50px 20px;
    text-align: center;
    color: white;

}

#join-us h2 {
    font-size: 36px;
    color: #ffdd57;
    margin-bottom: 20px;
}

#join-us p {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 50px;
    text-align: center;
	
}

.join-us-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

	
}

.apply-info,
.apply-form,
.apply-extra {

    border-radius: 10px;
    padding: 20px;
    max-width: 600px;
    width: 100%; /* Ensures full width on small screens */
    text-align: center; /* Center the text */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.apply-info h3,
.apply-form h3,
.apply-extra h3 {
    font-size: 24px;
    color: #ffdd57;
    margin-bottom: 15px;
}

.apply-info p,
.apply-extra p {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
}

/* Apply Form Centering */
.apply-form {
    text-align: center; /* Center text and form elements */
}

.apply-form .form-group {
    margin-bottom: 20px;
    text-align: center; /* Center align labels and inputs */
}

.apply-form label {
    display: block;
    font-size: 16px;
    color: #ccc;
    margin-bottom: 5px;
}

.apply-form input,
.apply-form textarea {
    width: 80%; /* Adjusted width for better centering */
    max-width: 500px; /* Ensure inputs do not become too wide */
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #333;
    color: white;
    font-size: 16px;
    margin: 0 auto; /* Center the input fields */
    display: block; /* Ensure inputs behave as block elements for centering */
}

.apply-form button {
    padding: 10px 20px;
    background-color: #ffdd57; /* Yellow color */
    color: #111;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px; /* Added margin to create space around button */
    display: block; /* Ensure button behaves as block element for centering */
    margin-left: auto;
    margin-right: auto; /* Center the button */
}

.apply-form button:hover {
    background-color: gray;
}
@media screen and (min-width: 768px) {
    .join-us-grid {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left; /* Align text to the left on larger screens */
    }

    .apply-extra {
        grid-column: span 3;
        text-align: left;
    }
}

@media screen and (min-width: 1024px) {
    .join-us-grid {
        flex-direction: row;
        justify-content: center;
        gap: 20px; /* Reduced gap between columns */
    }

    .apply-extra {
        grid-column: span 3;
        text-align: left;
    }
}


/* Container to maintain aspect ratio */
.map-container {
    position: relative;
    width: 100%; /* Full width */
    padding-top: 56.25%; /* Default 16:9 aspect ratio (56.25% = 9/16) */
    height: 0; /* Initially set height to 0 */
    overflow: hidden; /* Prevent overflow of content */
}

/* The iframe inside the container */
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    border: 0; /* Optional, to remove iframe border */
}

/* Adjust padding for smaller screens */
@media screen and (max-width: 480px) {
    .map-container {
        padding-top: 75%; /* More height for smaller screens (aspect ratio 4:3) */
    }
}


/* Inquiry Section Styles */
.inquiries-grid {
    display: flex;
    flex-direction: column; /* Stack vertically on small screens */
    align-items: center;
    gap: 40px; /* Large gap between sections */
}

.inquiry-info,
.inquiry-form,
.inquiry-extra {
    border-radius: 10px;
    padding: 20px;
    max-width: 600px; /* Limit max width */
    width: 100%; /* Full width on smaller screens */
    text-align: center; /* Center text */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    animation: glowParagraph2 5s infinite; /* Glowing effect */
}

.inquiry-info h3,
.inquiry-form h3,
.inquiry-extra h3 {
    font-size: 24px;
    color: white; /* White color for headings */
    margin-bottom: 15px;
    text-align: center;
}

.inquiry-info p,
.inquiry-extra p {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
}

/* Form Styling */
.inquiry-form .form-group {
    margin-bottom: 20px;
    text-align: center;
}

.inquiry-form label {
    display: block;
    font-size: 16px;
    color: #ccc;
    margin-bottom: 5px;
}

.inquiry-form input,
.inquiry-form textarea {
    width: 100%; /* Full width input fields on small screens */
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #333;
    color: white;
    font-size: 16px;
    margin: 0 auto; /* Center inputs */
}

.inquiry-form button {
    padding: 10px 20px;
    background-color: white; /* White button */
    color: #111;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.inquiry-form button:hover {
    background-color: gray;
}

/* Media Queries for Responsiveness */

/* For Large Screens and Tablets */
@media screen and (min-width: 1024px) {
    .inquiries-grid {
        flex-direction: row; /* Align items in a row on larger screens */
        justify-content: center;
        gap: 20px; /* Reduced gap between columns */
    }

    .inquiry-info,
    .inquiry-form,
    .inquiry-extra {
        text-align: left; /* Align text to the left for larger screens */
    }
}

/* For Tablets and Small Devices */
@media screen and (max-width: 768px) {
    .inquiries-grid {
        flex-direction: column; /* Stack elements vertically */
        gap: 15px; /* Reduced gap between sections */
    }

    .inquiry-info,
    .inquiry-form,
    .inquiry-extra {
        text-align: center; /* Center text for better readability on small screens */
    }

    .inquiry-info h3,
    .inquiry-form h3,
    .inquiry-extra h3 {
        font-size: 20px; /* Slightly smaller font size for headings */
    }

    .inquiry-info p,
    .inquiry-extra p {
        font-size: 14px; /* Slightly smaller font size for paragraphs */
    }

    .inquiry-form input,
    .inquiry-form textarea {
        width: 90%; /* Slightly reduce width on mobile for better fitting */
    }

    .inquiry-form button {
        font-size: 16px; /* Adjust button font size */
        padding: 8px 16px; /* Adjust button size */
    }
}

/* For Small Mobile Screens */
@media screen and (max-width: 480px) {
    .inquiries-grid {
        flex-direction: column; /* Stack vertically on very small screens */
        gap: 10px; /* Tighten the gap between sections */
    }

    .inquiry-info,
    .inquiry-form,
    .inquiry-extra {
        padding: 10px; /* Reduce padding */
    }

    .inquiry-info h3,
    .inquiry-form h3,
    .inquiry-extra h3 {
        font-size: 18px; /* Further reduce font size for very small screens */
    }

    .inquiry-info p,
    .inquiry-extra p {
        font-size: 12px; /* Reduce paragraph font size */
    }

    .inquiry-form input,
    .inquiry-form textarea {
        width: 100%; /* Full width input fields on small screens */
    }

    .inquiry-form button {
        font-size: 14px; /* Smaller button font size */
        padding: 6px 14px; /* Reduce button padding */
    }
}

/* Join Us/Contact Section */
#roles h2,
#roles h3,
#roles p,
#roles a {
    color:white; /* Yellow color matching the Apply Now button */
    text-decoration: none; /* Removes underline from links */
}

#roles a:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
	 color: #white; /* Slightly darker color on hover */
}

#roles {
    padding: 50px 20px;
    text-align: center;
 
    color: white;
}

#roles h2 {
    font-size: 36px;
    color: white; /* Yellow color */
    margin-bottom: 20px;
}

#roles p {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 50px;
    text-align: center;
}

.join-us-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.apply-info,
.apply-form,
.apply-extra {
    
    border-radius: 10px;
    padding: 20px;
    max-width: 600px;
    width: 100%; /* Ensures full width on small screens */
    text-align: center; /* Center the text */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
	animation: glowParagraph 5s infinite; /* Apply the glowing effect */
}

.apply-info h3,
.apply-form h3,
.apply-extra h3 {
    font-size: 24px;
    color: white; /* Yellow color */
    margin-bottom: 15px;
	 text-align: center;
}

.apply-info p,
.apply-extra p {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
}

.apply-form .form-group {
    margin-bottom: 20px;
    text-align: center;
}

.apply-form label {
    display: block;
    font-size: 16px;
    color: #ccc;
    margin-bottom: 5px;
}

.apply-form input,
.apply-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #333;
    color: white;
    font-size: 16px;
}

.apply-form button {
    padding: 10px 20px;
    background-color: white; /* Yellow color */
    color: #111;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px; /* Added margin to create space around button */
}

.apply-form button:hover {
    background-color: gray;
}

@media screen and (min-width: 1024px) {
    .join-us-grid {
        flex-direction: row;
        justify-content: center;
        gap: 20px; /* Reduced gap between columns */
    }

    .apply-extra {
        grid-column: span 3;
        text-align: left;
    }
}

@media screen and (min-width: 768px) {
    .join-us-grid {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left; /* Align text to the left on larger screens */
    }

    .apply-extra {
        grid-column: span 3;
        text-align: left;
    }
}

@media screen and (min-width: 1024px) {
    .join-us-grid {
        flex-direction: row;
        justify-content: center;
        gap: 20px; /* Reduced gap between columns */
    }

  
#clients {
    padding: 50px 20px;
    text-align: center;
    background-color: #111;
    color: white;
}

#clients h2 {
    font-size: 36px;
    color: #white; /* Yellow color for the header */
    margin-bottom: 20px;
}
.projects p {
   
    color: #ccc; /* Yellow color for the header */

}

#projects {
    padding: 50px 20px;
    text-align: center;
    background-color: rgba(17, 17, 17, 0.7); /* 70% opacity */
    color: white;
}

#projects h2 {
    font-size: 36px;
    color: white;
    margin-bottom: 20px;
}
/* Navigation Links */
.nav-links {
    list-style: none;
    display: flex;
    flex-direction: row; /* Horizontal direction */
    justify-content: center;
    align-items: center; /* Center links vertically */
    position: fixed;
    top: 0;
    left: 50%; /* Center the nav on the screen */
    transform: translateX(-50%); /* Center it */
    width: 100%;
    height: 0; /* Initially hidden */
    background: rgba(0, 0, 0, 0.9); /* Dark background */
    z-index: 1001;
    padding: 0;
    overflow: hidden; /* Hide by default */
    transition: height 0.5s ease;
}

/* Active State for Nav Links (expand downwards) */
.nav-links.active {
    height: auto; /* Set height to auto to expand based on content */
}

/* Nav Items */
.nav-links li {
    position: relative;
    margin: 0 20px; /* Space between links */
}

.nav-links li a {
    color: white;
    font-size: 18px; /* Font size for larger screens */
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    border-radius: 5px;
}

/* 3D Hover Effect for Nav Items */
.nav-links li a:hover {
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7);
    transform: translateY(-10px) rotateX(15deg);
    background: rgba(255, 255, 255, 0.1);
    filter: blur(1px);
}

/* Glowing Borders */
.nav-links li a.active {
    color: var(--section-color);
    box-shadow: 0 0 20px 10px var(--section-color);
}

/* Responsive Design */

/* For screens smaller than 1024px (tablets, etc.) */
@media (max-width: 1024px) {
    .nav-links {
        top: 0;
        transform: translateX(-50%) translateY(0); /* Center the nav */
    }

    .nav-links li {
        margin: 0 15px; /* Reduce space between links */
    }

    .nav-links li a {
        font-size: 16px; /* Slightly smaller font size */
        padding: 8px; /* Adjust padding */
    }
}

/* For screens smaller than 768px (small tablets, etc.) */
@media (max-width: 768px) {
    /* Keep the links horizontally aligned but make them smaller */
    .nav-links {
        top: 0;
        transform: translateX(-50%) translateY(0);
    }

    .nav-links li {
        margin: 0 10px; /* Decrease the space between links */
    }

    .nav-links li a {
        font-size: 14px; /* Make font size smaller */
        padding: 6px; /* Smaller padding */
    }

    .hamburger-menu {
        font-size: 22px; /* Smaller hamburger icon */
    }
}

/* For very small screens (max-width: 480px) */
@media (max-width: 480px) {
    /* For even smaller screens, reduce padding and font size */
    .nav-links {
        top: 0;
        transform: translateX(-50%) translateY(0);
    }

    .nav-links li {
        margin: 0 5px; /* Reduce space even further */
    }

    .nav-links li a {
        font-size: 12px; /* Even smaller font */
        padding: 5px; /* Further reduce padding */
    }

    .hamburger-menu {
        font-size: 20px; /* Even smaller hamburger icon */
    }
}

/* Expanded Sections */
.content-sections {
    position: fixed;
    top: 70px; /* Position under navbar */
    right: -120%;
    width: calc(100% - 200px); /* Full width minus navbar */
    height: calc(100vh - 70px); /* Full height minus navbar */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    z-index: 1000;
    transition: right 0.5s ease-in-out, background-color 0.5s ease;
    overflow-x: hidden;
    padding: 20px;
}

/* Section Active State */
.content-sections.active {
    right: 0;
    box-shadow: 0 0 20px 10px var(--section-color);
}

/* Section Expansion */
.content-sections section {
    flex: 0 0 100%;
    padding: 20px;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, box-shadow 0.5s ease;
    position: relative;
    z-index: 1000;
}

/* Section Expanded State */
.content-sections section.expanded {
    display: block;
    opacity: 1;
    box-shadow: 0 0 20px 10px var(--section-color);
    z-index: 1000;
}

/* Responsive Adjustments for Content Sections */

/* For smaller screens, reduce padding and adjust layout */
@media (max-width: 768px) {
    .content-sections {
        padding: 15px; /* Less padding for smaller screens */
    }

    .content-sections section {
        padding: 15px; /* Reduce padding in sections */
    }
}

/* For very small screens (max-width: 480px) */
@media (max-width: 480px) {
    .content-sections {
        padding: 10px; /* Further reduce padding */
    }

    .content-sections section {
        padding: 10px; /* Smaller padding in sections */
    }
}


background-color: rgba(34, 34, 34, 0.7); /* 70% opacity for team member cards */

#home {
    padding: 40px;
    background-color: #1b1b1b; /* Dark background */
    color: white;
    text-align: center; /* Center text */
}

#home h1, #home h2 {
    color: white;
    margin-bottom: 20px;
}

/* Updated home-grid to allow for a wider grid */
.home-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center items horizontally */
    gap: 20px; /* Spacing between boxes */
    max-width: 1200px; /* Decrease max-width for better fitting on smaller screens */
    margin: 0 auto; /* Center the entire grid */
}

/* Adjust home-box container */
.home-box {
    border-radius: 10px;
    padding: 20px;
    max-width: 100%; /* Allow full width */
    text-align: center;
    box-sizing: border-box;
}

/* Headings inside home-box */
.home-box h2 {
    font-size: 24px;
    color: #B87333; /* Similar yellow color for headings */
    margin-bottom: 15px;
}

/* Paragraphs inside home-box */
.home-box p {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Responsive Image */
#home img {
    display: block; /* Ensure image is a block element */
    margin: 20px auto; /* Center the image and add margin */
    max-width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px;
    box-shadow: 
        0 0 5px rgba(255, 215, 0, 0.8),  /* Inner glow */
        0 0 15px rgba(255, 215, 0, 0.6), /* Medium glow */
        0 0 25px rgba(255, 215, 0, 0.4); /* Outer glow */
    animation: glowParagraph2 5s infinite; /* Apply the glowing effect */
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    #home {
        padding: 20px; /* Less padding on smaller screens */
    }

    .home-grid {
        max-width: 100%; /* Full width on smaller screens */
        gap: 10px; /* Less gap between items */
    }

    .home-box {
        padding: 15px; /* Reduce padding on smaller screens */
        width: 45%; /* Adjust the width for two items per row */
    }

    .home-box h2 {
        font-size: 20px; /* Smaller heading font size */
    }

    .home-box p {
        font-size: 14px; /* Smaller text size */
    }

    #home img {
        width: 100%; /* Make image full-width on smaller screens */
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    /* For extremely small screens like mobile phones */
    #home {
        padding: 15px; /* Smaller padding */
    }

    .home-grid {
        gap: 8px; /* Tighten spacing between boxes */
    }

    .home-box {
        width: 100%; /* Stack the boxes on top of each other */
        padding: 10px; /* Reduce padding even further */
    }

    .home-box h2 {
        font-size: 18px; /* Even smaller heading font */
    }

    .home-box p {
        font-size: 12px; /* Reduce paragraph font size */
    }

    #home img {
        width: 100%; /* Ensure image fits the screen */
        max-width: 100%;
        height: auto; /* Maintain aspect ratio */
    }
}


/* Glowing effect keyframes */
@keyframes glowParagraph2 {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.9); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.9); }
    100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.9); }
}
/* Glowing effect keyframes */

   @keyframes glowParagraph {
    0% { box-shadow: 0 0 10px rgba(255, 0, 0, 0.8); } /* Red glow */
    25% { box-shadow: 0 0 15px rgba(255, 165, 0, 0.8); } /* Orange glow */
    50% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.8); } /* Green glow */
    75% { box-shadow: 0 0 15px rgba(0, 0, 255, 0.8); } /* Blue glow */
    100% { box-shadow: 0 0 10px rgba(255, 0, 255, 0.8); } /* Magenta glow */
}



/* Styling for Paragraph Boxes in Home Section */
#home p {

    border-radius: 10px;
    padding: 20px;
    max-width: 600px;
    margin: 20px auto; /* Center paragraphs and add margin */
    text-align: center;
    color: #ccc;
 
	 animation: glowParagraph2 5s infinite; /* Apply the glowing effect */
}
	
}

/* Responsive Design */
@media (max-width: 768px) {
    .home-grid {
        flex-direction: column; /* Stack items vertically on small screens */
        gap: 20px;
    }

    .home-box {
        max-width: 100%; /* Ensure boxes are full-width on small screens */
    }
}

@media (max-width: 480px) {
    #home h1 {
        font-size: 28px; /* Adjust font size for smaller screens */
    }

    #home h2 {
        font-size: 20px; /* Adjust font size for smaller screens */
    }

    .home-box p {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    #home img {
        max-width: 90%; /* Adjust image size for smaller screens */
    }
}

/* News Section */



#news p {
	
	
    border-radius: 10px;
    padding: 20px;
    max-width: 600px;
    margin: 20px auto; /* Center paragraphs and add margin */
    text-align: left;
    color: #ccc;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); /* Glowing effect */
	animation: glowParagraph2 5s infinite; /* Apply the glowing effect */

}

.news-grid{
	
	   display: grid; /* Switch to grid layout */
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Adjust min-width to fit the design */
    gap: 10px;
	  justify-content: center;
    max-width: 2000px;
    margin: 0 auto; /* Center the entire grid container */
	  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr)); /* Increase min-width to 300px for larger images */
}
.header-style {
    font-size: 2em; /* Adjust the size as needed */
    color: white; /* Set the text color to white */
    display: block; /* Make it take the full width like a block element */
    margin-bottom: 10px; /* Add space below the header */
}

/* What We Offer Section */
.what-we-offer {
    padding: 40px 20px;
    background-color: #222; /* Background color */
  color: #ccc;
    text-align: center;
}

/* Title Style */
.what-we-offer h2 {
    font-size: 36px; /* Title size */
    margin-bottom: 20px; /* Space below title */
    position: relative;
	 
}

/* Mission Box Container (Grid) */
.mission-box-container {
    display: flex;
    flex-wrap: wrap; /* Ensure items wrap in case of smaller screens */
    justify-content: center; /* Center the items horizontally */
    gap: 20px; /* Space between boxes */
	  cursor: pointer;
}

/* Individual Mission Box */
.mission-box {
    position: relative; /* For positioning the close icon and arrows */
    color: #fff; /* White text */
    padding: 30px; /* Increased padding inside boxes for more size */
    border-radius: 10px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition */
    animation: glowParagraph2 5s infinite; /* Apply the glowing effect */
    min-width: 300px; /* Set a minimum width for larger boxes */
    max-width: 400px; /* Set a maximum width to control box size */
    flex: 1 0 auto; /* Allow boxes to grow based on available space */
}

/* Hover Effect */
.mission-box:hover {
    transform: translateY(-5px); /* Lift effect */
    animation: glowParagraph 5s infinite; /* Apply the glowing effect */
}

/* Expanded Box */
.mission-box.expanded {
    position: absolute;
    background-color: black; /* Darker background when expanded */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8); /* Stronger glow */
    transform: translate(-50%, -50%) scale(1.05); /* Scale up slightly */
    z-index: 1000;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    width: 85vw; /* Increase width slightly */
    max-height: 85vh; /* Increase max height */
    overflow-y: auto; /* Scroll if needed */
    animation: glowParagraph 5s infinite; /* Apply the glowing effect */
}

/* Minimized Box */
.mission-box.minimized {
    height: 150px; /* Fixed height for minimized state */
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: #fff; /* White text */
    text-align: center;
    transition: all 0.5s ease-in-out; /* Smooth transition */
}

/* Content Fade Effect */
.mission-box.minimized .content {
    display: none; /* Hide content when minimized */
    opacity: 0; /* Fade out */
    transition: opacity 0.4s ease-out; /* Smooth fade */
}

/* Show Content when Expanded */
.mission-box.expanded .content {
    display: block; /* Show content when expanded */
    opacity: 1; /* Fade in */
    transition: opacity 0.4s ease-in; /* Smooth fade */
}

/* Close Icon */
.mission-box .close-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #fff; /* White color */
    cursor: pointer; /* Pointer cursor */
    display: none; /* Hidden when minimized */
}

/* Show Close Icon when Expanded */
.mission-box.expanded .close-icon {
    display: block; /* Show when expanded */
}

/* Navigation Arrows */
.mission-box .nav-arrow {
    position: absolute;
    top: 50%; /* Center vertically */
    font-size: 24px; /* Arrow size */
    color: #fff; /* White color */
    cursor: pointer; /* Pointer cursor */
    display: none; /* Hidden when minimized */
}

.mission-box .nav-arrow.left {
    left: 10px; /* Position for left arrow */
}

.mission-box .nav-arrow.right {
    right: 10px; /* Position for right arrow */
}

/* Show Navigation Arrows when Expanded */
.mission-box.expanded .nav-arrow {
    display: block; /* Show when expanded */
}

/* Responsive Design */
@media (max-width: 768px) {
    .mission-box-container {
        grid-template-columns: 1fr; /* Single column on small screens */
    }

    .mission-box.expanded {
        width: 90vw; /* Full width on mobile */
        top: 40%; /* Adjust vertical position */
    }
}

/* Responsive Design for Smaller Screens */
@media (max-width: 480px) {
    .what-we-offer h2 {
        font-size: 28px; /* Smaller title size */
    }

    .mission-box {
        padding: 15px; /* Less padding on small screens */
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    #news, #mission {
        padding: 20px; /* Adjust padding for smaller screens */
    }

    #mission {
        flex-direction: column; /* Stack items vertically on small screens */
    }

    .offer-window {
        max-width: 100%; /* Ensure offer windows are full-width on small screens */
    }
}

@media (max-width: 480px) {
    section h2 {
        font-size: 24px; /* Adjust font size for smaller screens */
    }

    section p {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    #news img, .offer-window img {
        max-width: 90%; /* Adjust image size for smaller screens */
    }
}
/* Beyond Imagination */
#beyond-imagination {
    color: white;
    animation: bounce 2s ease-in-out infinite;
    cursor: pointer;
    position: fixed; /* Fixed position to stay at the bottom */
    bottom: 25px; /* Move up from the bottom */
    left: 200px; /* Move more to the left */
    transition: all 0.3s ease-in-out; /* Smooth transition for position adjustments */
	  animation: neonGlow 2s infinite alternate; /* Neon glow for the Enter text */
	z-index: 1003;
}

.beyond-imagination:hover { 
    transform: rotate(0) translateY(-10px);
    cursor: pointer;
}

/* Create Yourself */
#create-yourself {
    color: white; 
   
    cursor: pointer;
    position: fixed; /* Fixed position to stay at the bottom */
    bottom: 25px; /* Move up from the bottom */
    left: 365px; /* Move next to #beyond-imagination */
    transition: all 0.3s ease-in-out; /* Smooth transition for position adjustments */
	 animation: bounce 2s ease-in-out infinite;
	  animation: neonGlow 2s infinite alternate; /* Neon glow for the Enter text */
	z-index: 1003;
	
	
}

.create-yourself:hover { 
    transform: rotate(0) translateY(-10px);
    cursor: pointer;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    #beyond-imagination {
         bottom: 10px; /* Adjust for very small screens */
        left: 190px; /* Move to the left */
    }

    #create-yourself {
        bottom: 30px; /* Adjust for very small screens */
        left: 190px; /* Move to the left */
    }
}

@media (max-width: 768px) {
    #beyond-imagination {
        bottom: 10px; /* Adjust for very small screens */
        left: 190px; /* Move to the left */
    }

    #create-yourself {
       bottom: 30px; /* Adjust for very small screens */
        left: 190px; /* Move to the left */
    }
}

@media (max-width: 480px) {
    #beyond-imagination {
        bottom: 10px; /* Adjust for very small screens */
        left: 190px; /* Move to the left */
    }

    #create-yourself {
       bottom: 30px; /* Adjust for very small screens */
        left: 190px; /* Move to the left */
    }
}


/* CSS for spinning animation */
.fa-film {
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}

.fa-robot {
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}
.fa-gamepad {
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}


.fa-vr-cardboard {
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}


.fa-puzzle-piece {
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}

.fa-cube{
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}
.fa-music{
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}

.spin-icon{
    font-size: 50px;
    color: white;
    animation: pulse 2s linear infinite; /* Apply animation */
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


/* Fullscreen black surface overlay with random distortion effect */
#black-surface-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9;
    opacity: 1; /* Full opacity initially */
    pointer-events: none; /* Make sure it doesn't block interactions */
    padding: 20px;
  
   
}

/* Random distortion effect animation */
@keyframes randomDistortion {
    0% {
        filter: blur(0px) grayscale(0%) hue-rotate(0deg);
        opacity: 1;
    }
    20% {
        filter: blur(2px) grayscale(20%) hue-rotate(30deg);
        opacity: 0.9;
    }
    40% {
        filter: blur(1px) grayscale(40%) hue-rotate(60deg);
        opacity: 0.9;
    }
    60% {
        filter: blur(3px) grayscale(60%) hue-rotate(120deg);
        opacity: 0.9;
    }
    80% {
        filter: blur(2px) grayscale(80%) hue-rotate(150deg);
        opacity: 0.9;
    }
    100% {
        filter: blur(5px) grayscale(100%) hue-rotate(180deg);
        opacity: 0.9;
    }
}

/* Center the logo container in the middle of the screen */
#logo-container {
    position: absolute; /* Absolute positioning for centering */
    top: 50%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Adjust for exact centering */
    z-index: 30; /* Ensure it's above other content */
    cursor: pointer; /* Pointer cursor for interactivity */
    text-align: center; /* Center the text inside the container */
}

/* Logo image adjustments */
#logo {
    width: auto; /* Set initial width to auto */
    max-width: 700px; /* Initially large logo size */
    height: auto; /* Maintain aspect ratio */
}

/* Text adjustments for the "Enter" text */
#enter-text {
    margin-top: 10px; /* Space between the logo and text */
    font-size: 1.2em; /* Font size for the text */
    color: #000; /* Text color */
}

/* For medium screens (tablets and larger phones) */
@media screen and (max-width: 1024px) {
    #logo {
        max-width: 300px; /* Reduce the logo size on medium screens */
    }

    #enter-text {
        font-size: 1em; /* Adjust text size for smaller devices */
    }
}

/* For smaller screens (phones in portrait mode) */
@media screen and (max-width: 768px) {
    #logo {
        max-width: 250px; /* Reduce the logo size further on smaller screens */
    }

    #enter-text {
        font-size: 0.9em; /* Adjust text size for mobile screens */
    }
}

/* For very small screens (phones in portrait mode) */
@media screen and (max-width: 480px) {
    #logo {
        max-width: 200px; /* Cap the maximum size on very small screens */
    }

    #enter-text {
        font-size: 0.8em; /* Further adjust text size for very small screens */
    }
}


/* Hover effect for the "Enter" text */
#enter-text:hover {
    transform: translateZ(20px) scale(1.1); /* 3D and scaling effect */
    text-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.6), /* Shadow behind the text */
        4px 4px 10px rgba(255, 255, 255, 0.4); /* White glow */
}
/* Style for "Enter" text */
#enter-text {
    font-size: 24px; /* Adjust size to match your website's font size */
   
    color: white; /* Text color */
    font-family: inherit; /* Same font as the rest of the webpage */
    letter-spacing: 3px; /* Add some spacing between letters */
    position: relative;
    transition: transform 0.3s ease, text-shadow 0.3s ease; /* Add transition for hover effects */
    text-transform: uppercase; /* Make it uppercase */
	  color: white; 
    animation: neonGlow 2s infinite alternate; /* Neon glow for the Enter text */
	 font-size: 48px; /* Make the "Enter" text bigger */
    margin-top: -10px; /* Position the text on top of the logo */
	margin-left: 110px;
	  z-index: 11; /* Ensure it's on top of the logo */
	 /* Start random distortion animation */
    
}

/* Random words container */
#random-words-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Disable pointer events */
	 /* Start random distortion animation */
    animation: randomDistortion 3s infinite alternate ease-in-out;
}

/* Style for individual random words */
.random-word {
    color: rgba(255, 255, 255, 0.7); /* Light white color with transparency */
    filter: blur(2px); /* Apply blur */
    animation: float 10s linear infinite; /* Float animation */
    position: absolute; /* Absolute positioning for randomness */
    white-space: nowrap; /* Prevent line breaks */
}

/* Floating animation */
@keyframes float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


/* Animations */
@keyframes neonGlow {
    0%, 100% {
        text-shadow: 0px 0px 5px rgba(0, 255, 255, 0.5), 0px 0px 10px rgba(0, 255, 255, 0.7), 0px 0px 20px rgba(0, 255, 255, 1);
    }
    50% {
        text-shadow: 0px 0px 20px rgba(0, 255, 255, 1), 0px 0px 30px rgba(0, 255, 255, 1.2), 0px 0px 40px rgba(0, 255, 255, 1.5);
    }
}

/* Shrink and fade animation */
.shrink-and-fade {
    animation: shrink 1s forwards, fade 1s forwards; /* Combine shrink and fade animations */
}

@keyframes shrink {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}

@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Black surface animation */
.open-animation {
    animation: openAnimation 2s ease-in-out forwards;
}

@keyframes openAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#countdown-container {
    position: fixed; /* Fixed position for overlay */
    top: 50%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
    font-size: 10vw; /* Use viewport width for responsive font size */
    color: #00eaff; /* Neon blue */
    display: none; /* Hide by default */
    z-index: 2000; /* Ensure it's above other content */
    animation: countdownGlow 1s infinite alternate; /* Glow animation */
    
    /* Frame and shape styling */
    padding: 2vw; /* Use viewport width for responsive padding */
    border: 0.5vw solid #00eaff; /* Use viewport width for border */
    box-shadow: 0 0 20px #00eaff, 0 0 40px #00eaff; /* Glowing effect */
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    text-align: center; /* Center text inside */
    
    /* Limit the maximum size on large screens */
    max-width: 90%; /* Limit the width to 90% of the screen */
    max-height: 80vh; /* Limit the height to 80% of the screen height */
    width: auto;
    height: auto;
    overflow: hidden; /* Ensure the content doesn't overflow the container */
}

/* For medium screens (tablets and larger phones) */
@media screen and (max-width: 1024px) {
    #countdown-container {
        font-size: 15vw; /* Scale font size based on viewport width */
        padding: 3vw; /* Scale padding */
        border-width: 1vw; /* Scale border width */
    }
}

/* For smaller screens (phones in portrait mode) */
@media screen and (max-width: 768px) {
    #countdown-container {
        font-size: 20vw; /* Scale font size even more */
        padding: 4vw; /* Increase padding */
        border-width: 1.5vw; /* Adjust border width */
    }
}

/* For very small screens (phones in portrait mode) */
@media screen and (max-width: 480px) {
    #countdown-container {
        font-size: 25vw; /* Further increase font size for smaller screens */
        padding: 5vw; /* Adjust padding */
        border-width: 2vw; /* Adjust border width */
    }
}



/* Styling for random words */
.random-word {
    position: absolute;
    font-size: 40px;
    color: #00eaff;;
	animation: shrinkFade 30s infinite alternate;
}

/* Neon effect animation for countdown */
@keyframes countdownGlow {
    0% {
        text-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff, 0 0 24px #00eaff;
        filter: blur(1px);
    }
    100% {
        text-shadow: 0 0 16px #00eaff, 0 0 32px #00eaff, 0 0 48px #00eaff;
        filter: blur(3px);
    }
}
/* Neon effect and transition for logo and enter text */
#logo {
    transition: all 0.7s ease-in-out;
    color: white;
    filter: drop-shadow(0 0 5px #00eaff);
    animation: logoGlow 2.5s ease-in-out infinite alternate;
}

#enter-text {
    transition: all 0.7s ease-in-out;
    color: white;
    filter: drop-shadow(0 0 5px #00eaff);
    animation: TextGlow 2.5s ease-in-out infinite alternate;
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 6px red) blur(0.4px);
    }
    20% {
        filter: drop-shadow(0 0 10px orange) blur(0.6px);
    }
    40% {
        filter: drop-shadow(0 0 14px yellow) blur(0.7px);
    }
    60% {
        filter: drop-shadow(0 0 16px green) blur(0.8px);
    }
    80% {
        filter: drop-shadow(0 0 18px blue) blur(0.9px);
    }
    100% {
        filter: drop-shadow(0 0 20px purple) blur(1px);
    }
}

@keyframes TextGlow {
    0% {
        filter: drop-shadow(0 0 6px purple) blur(0.4px);
    }
    20% {
        filter: drop-shadow(0 0 10px magenta) blur(0.6px);
    }
    40% {
        filter: drop-shadow(0 0 14px cyan) blur(0.7px);
    }
    60% {
        filter: drop-shadow(0 0 16px lime) blur(0.8px);
    }
    80% {
        filter: drop-shadow(0 0 18px pink) blur(0.9px);
    }
    100% {
        filter: drop-shadow(0 0 20px red) blur(1px);
    }
}


.shrink-and-fade {
    animation: shrinkFade 1.5s forwards;
}

/* Smooth shrinking and fading transition */
@keyframes shrinkFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
        filter: blur(3px);
    }
}

@keyframes shapeGlow {
    0% {
        filter: drop-shadow(0 0 6px #00eaff);
    }
    100% {
        filter: drop-shadow(0 0 12px #00eaff);
    }
}

html {
    scroll-behavior: smooth; /* This allows for smooth scrolling when an anchor is clicked */
}
/* Global Resets */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body */
body {
   
    overflow-x: hidden; /* Prevent horizontal scroll */
    width: 100%;
    height: 100%;
}

/* Navigation Bar */
nav {
    width: 100%;
    position: fixed;
    top: 70px; /* Moved a bit lower */
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: transparent;
    z-index: 1003;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    height: 60px;
	flex-direction: row; /* Keep horizontal layout */
    transform: translateY(-100%); /* Hidden initially */
}

/* Navigation Links (initially hidden) */
.nav-links {
    list-style: none;
    display: flex;
    flex-direction: row; /* Keep horizontal layout */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 0; /* Initially hide the nav links */
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    padding: 0;
    overflow: hidden; /* Hide content */
    transition: background 0.3s ease, box-shadow 0.3s ease, height 0.5s ease; /* Add smooth transition */
	border-radius: 15px; /* Add rounded corners */
}

/* When the nav-links are active (hamburger menu clicked) */
.nav-links.active {
    height: 60px; /* Set the height to show the links */
    /* Optionally you can use `height: auto;` to let the content determine the height */
}

/* Adjust list items */
.nav-links li {
    margin: 0 10px;
    padding: 10px 0; /* Add padding to make the links taller */
}

.nav-links li a {
    color: white; /* Make nav link text visible */
    font-size: 18px;
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s, box-shadow 0.3s, transform 0.3s;
    border-radius: 5px;
}

/* Hover Effect */
.nav-links li a:hover {
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7);
    transform: translateY(-10px) rotateX(15deg);
}

/* Active Link */
.nav-links li a.active {
    color: var(--section-color);
    box-shadow: 0 0 20px 10px var(--section-color);
}


/* Home Section */
#home {
    padding: 40px;
    background-color: #1b1b1b;
    color: white;
    text-align: center;
	    background: transparent;
}

.home-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
}

.home-box {
    border-radius: 10px;
    padding: 20px;
    max-width: 100%;
    text-align: center;
}

.home-box h2 {
    font-size: 24px;  top: 20px; /* Move navbar slightly lower on smaller screens */
    color: #B87333;
    margin-bottom: 15px;
}

.home-box p {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
    line-height: 1.6;
}

#home img {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 
        0 0 5px rgba(255, 215, 0, 0.8),  
        0 0 15px rgba(255, 215, 0, 0.6), 
        0 0 25px rgba(255, 215, 0, 0.4); 
}

/* Client Logos */
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px auto;
}

.client-logo {
    flex: 1 1 200px;
    max-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.client-logo img {
    max-width: 100%;
    border-radius: inherit;
}

/* Media Queries for Responsiveness */

/* For Tablets and Larger Screens */
@media (max-width: 1024px) {
    nav {
        padding: 10px 5%;
        height: 50px;
    }

    .nav-links {
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-links li a {
        font-size: 16px;
        padding: 8px;
    }

    .home-grid {
        flex-direction: column;
    }

    .client-logo {
        flex: 1 1 150px;
    }
}

/* For Mobile Screens (Tablets to Small Phones) */
@media (max-width: 768px) {
    nav {
        padding: 8px 5%;
        height: 45px;
		  top: 30px; /* Move navbar slightly lower on smaller screens */
    }

    .nav-links {
        flex-direction: row; /* Keep horizontal */
        justify-content: center;
    }

    .nav-links li a {
        font-size: 14px;
        padding: 6px;
    }

    .home-grid {
        gap: 10px;
    }

    .client-logo {
        flex: 1 1 120px;
        max-width: 120px;
    }

    #home img {
        max-width: 100%;
    }

    /* Adjust expanded nav bar */
    .nav-links.active {
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Adjust width for better fit */
    }
}

/* For Small Phones (Portrait Mode) */
@media (max-width: 480px) {
    nav {
        padding: 6px 5%;
        height: 40px;
    }

    .nav-links {
        flex-direction: row; /* Keep horizontal layout */
        justify-content: flex-start;
    }

    .nav-links li {
        margin: 5px 0;
    }

    .nav-links li a {
        font-size: 12px;
        padding: 4px;
    }

    .home-grid {
        gap: 5px;
    }

    .client-logo {
        flex: 1 1 100px;
        max-width: 100px;
        padding: 10px;
    }

    #home {
        padding: 30px;
    }

    #home img {
        max-width: 100%;
    }

    /* Adjust expanded nav bar */
    .nav-links.active {
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }
}

/* For Extra Small Phones (Very Narrow Screens) */
@media (max-width: 375px) {
    nav {
        padding: 5px 5%;
        height: 35px;
    }

    .nav-links li a {
        font-size: 10px;
        padding: 3px;
    }

    .home-grid {
        gap: 5px;
    }

    .client-logo {
        flex: 1 1 80px;
        max-width: 80px;
        padding: 8px;
    }

    #home img {
        max-width: 100%;
    }

    /* Adjust expanded nav bar */
    .nav-links.active {
        left: 50%;
        transform: translateX(-50%);
        width: 95%; /* Full width for very small screens */
    }
}