body {
      font-family: 'Montserrat', sans-serif;
      background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
      color: #f8f9fa;
      margin: 0;
      padding: 0;
    }

    .navbar {
      background-color: rgba(0, 0, 0, 0.7) !important;
      backdrop-filter: blur(10px);
    }

    .navbar-brand {
      font-weight: bold;
      font-size: 1.5rem;
      color: #ffffff;
    }

    .nav-link {
      color: #ffffff !important;
      position: relative;
      transition: 0.3s ease;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      background: #00d4ff;
      left: 0;
      bottom: 0;
      transition: width 0.3s;
    }

    .nav-link:hover::after {
      width: 100%;
    }

.hero {
  /* Positioning context for the image */
  position: relative; 
  
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: #ffffff; /* Set text color to white for better contrast */
  overflow: hidden; /* Important to contain the absolutely positioned image */
}

/* Style for the HTML image element */
.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the section without distortion */
  z-index: 0; /* Ensures the image is at the lowest layer */
}

/* Optional: Add a semi-transparent overlay for better text readability */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
  z-index: 1; /* Place the overlay on top of the image */
}

/* Ensure the content is on top of the image and overlay */
.hero .container {
  position: relative;
  z-index: 2; /* Place content above everything */
}

.hero h1 {
  font-size: 3rem;
  animation: slideIn 1.5s ease-in-out;
  /* Add shadow for better contrast */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.hero p {
  font-size: 1.3rem;
  margin-top: 1rem;
  color: #d1d1d1;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
    .btn-glow {
      margin-top: 2rem;
      padding: 0.8rem 2rem;
      font-size: 1rem;
      background: #00d4ff;
      border: none;
      color: black;
      font-weight: bold;
      transition: all 0.4s ease;
      border-radius: 50px;
    }

    .btn-glow:hover {
      background: #ffffff;
      color: #000;
      transform: scale(1.05);
      box-shadow: 0 0 15px #00d4ff;
    }

    .feature-card {
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      transition: 0.4s ease;
      padding: 2rem;
    }

    .feature-card:hover {
      transform: scale(1.05);
      background-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    }

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 6cm);
  grid-template-rows: repeat(2, 6cm);
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.mini-card {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
  overflow: hidden;
  transition: transform 0.6s ease;
}

.mini-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.5s ease;
}

.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.content-wrapper {
  display: flex;
  width: 80vw;
  min-height: 80vh;
  position: relative;
}

input {
  display: none;
}

#section-1, #section-2 {
  display: flex;
  width: 80vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#section-1 {
  opacity: 1;
  z-index: 5;
  transition: transform 0.5s, opacity 0.5s;
}

#section-2 {
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

.image-container {
  width: 50%;
  height: 100%;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

img {
  flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
}

.info-container {
  width: 50%;
  height: 100%;
  background-color: rgba(93, 144, 159, 0.701);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#section-2 .image-container {
  opacity: 0;
  transform: translateY(2em);
  transition: all 1s 0.7s;
}
#section-2 .info-container {
  opacity: 0;
  transform: translateY(-2em);
  transition: all 1s 0.7s;
}

#section-2 .info-container p{
    justify-content: flex-start;
    padding: 10px;
    text-align: justify;
}

#section-1 .info-container p{
    justify-content: flex-start;
    padding: 10px;
    text-align: justify;
}



label {
  display: block;
  border: solid 2px black;
  padding: 1em 2em;
  border-radius: 5px;
  cursor: pointer;
}

#toggle2:checked ~ #section-2 {
  opacity: 1;
}

#toggle2:checked ~ #section-1 {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

#toggle2:checked ~ #section-2 .image-container,
#toggle2:checked ~ #section-2 .info-container {
  opacity: 1;
  transform: translateY(0);
}

#toggle3:checked ~ #section-1 {
  transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
}

#toggle3:checked ~ #section-2 .image-container,
#toggle3:checked ~ #section-2 .info-container {
  transition: transform 0.5s, opacity 0.5s;
}


.mini-card:hover img {
  transform: scale(1.1) rotate(3deg);
}

/*
  The following CSS is a simple, direct approach to creating a two-column layout
  with an image on the left and content on the right, suitable for the provided HTML.
  It's designed to be clean, readable, and responsive.
*/

.goofy-card {
  font-family: 'Montserrat', sans-serif; /* Consistent font with the rest of the site */
  display: flex; /* Establishes a flex container for the card */
  flex-direction: column; /* Stacks children vertically by default on small screens */
  background-color: #fff; /* Sets a white background */
  border-radius: 12px; /* Adds rounded corners */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  overflow: hidden; /* Ensures content doesn't spill out of the rounded corners */
  transition: all 0.3s ease-in-out; /* Adds a smooth transition for hover effects */
}

/* Styles for when the card is hovered over */
.goofy-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.15); /* Enhances the shadow on hover */
  transform: scale(1.02); /* Slightly scales up the card on hover */
}

/*
  Media query for larger screens (e.g., tablets and desktops).
  This is where the two-column layout is applied.
*/
@media (min-width: 768px) {
  .goofy-card {
    flex-direction: row; /* Arranges children horizontally on larger screens */
  }

  .goofy-card > div {
    flex-basis: 50%; /* Gives each child div an equal width of 50% */
  }
}

/*
  General utility classes used in the HTML for consistent styling.
*/
.w-full {
  width: 100%; /* Ensures an element takes up the full width of its container */
}

.max-w-5xl {
  max-width: 1024px; /* A common max-width for content to prevent it from getting too wide on large screens */
}

.mx-auto {
  margin-left: auto;
  margin-right: auto; /* Centers the block-level element horizontally */
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem; /* Vertical padding */
}

.p-4 {
  padding: 1rem; /* All-around padding */
}

.md\:p-8 {
  padding: 2rem; /* Larger padding on medium screens */
}

.text-4xl {
  font-size: 2.25rem; /* Large font size */
}

.font-extrabold {
  font-weight: 800; /* Extra bold font weight */
}

.text-teal-700 {
  color: #0d9488; /* A specific shade of teal */
}

.mb-4 {
  margin-bottom: 1rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; /* Bottom margin */
}

.text-justify {
  text-align: justify; /* Justifies the text */
}
        /* Card styling */
        .service-card {
            background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            padding: 2.5rem; /* Increased padding */
            margin-bottom: 2rem; /* Space between cards */
            border: 1px solid rgba(0, 255, 255, 0.3); /* Subtle electric border */
        }

        .service-card:hover {
            transform: translateY(-10px) scale(1.02); /* Lift and slightly enlarge */
            box-shadow: 0 15px 30px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2); /* Electric glow shadow */
        }

        .service-card h3 {
            color: #122a45; /* Bootstrap primary blue, can be changed to teal */
            font-weight: 700;
            margin-bottom: 1rem;
            transition: color 0.3s ease-in-out;
        }

        .service-card:hover h3 {
            color: #00bcd4; /* Brighter teal on hover */
        }

        .service-card p {
            color: #495057;
            line-height: 1.7;
        }

        .service-list li {
            margin-bottom: 0.75rem;
            color: #343a40;
            font-size: 1.05rem;
            list-style: none; /* Remove default bullet */
            position: relative;
            padding-left: 1.5rem; /* Space for custom bullet */
        }

        .service-list li::before {
            content: '⚡'; /* Electric bolt emoji */
            position: absolute;
            left: 0;
            color: #00bcd4; /* Teal electric bolt */
            font-size: 1.1rem;
            line-height: 1;
        }

        .hero-section {
            padding: 8rem 0;
            text-align: center;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.6); /* Dark overlay for text readability */
            position: relative;
            z-index: 1; /* Ensure content is above background effects */
        }

        .hero-section h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 8px rgba(0, 255, 255, 0.6); /* Electric glow for title */
        }

        .hero-section p {
            font-size: 1.5rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
        }

/* Combined Section Container for the entire layout */
        .combined-section {
            background-color: #ffffff; /* White background for the entire section */
            border-radius: 0.5rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 75rem; /* Adjusted max-width since the form no longer has its own image */
            margin: 0 auto;
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr; /* Default to single column for mobile */
            gap: 0; /* No gap between major sections on mobile */
        }

        /* --- Career Information Section Styles --- */
        .career-info-section {
            padding: 2.5rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column; /* Stack image and content on mobile */
            justify-content: center;
            align-items: center;
            text-align: center;
            border-bottom: 1px solid #e0e0e0; /* Separator for mobile */
        }

        .career-info-section .career-image-container-fluid {
            width: 100%;
            overflow: hidden;
            border-radius: 0.5rem; /* Rounded corners for image */
            margin-bottom: 1.5rem; /* Space between image and text on mobile */
        }

        .career-info-section .career-image {
            width: 100%;
            height: 15rem; /* Fixed height for career image on mobile */
            object-fit: cover;
            display: block;
            border-radius: 0.5rem;
        }

        .career-info-section .career-content h2 {
            font-size: 2.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
            line-height: 1.25;
        }

        .career-info-section .career-content p {
            font-size: 1rem;
            color: #374151;
            line-height: 1.75;
            max-width: 65ch;
        }

        /* Custom bullet points for the career content list */
        .career-info-section .career-content ul {
            list-style: none; /* Remove default list style */
            padding: 0; /* Remove default padding */
            margin-left: 0; /* Remove default margin */
            text-align: left;
            color: #374151;
        }

        .career-info-section .career-content ul li {
            margin-bottom: 0.75rem; /* Space between list items */
            padding-left: 1.5rem; /* Space for the custom bullet */
            position: relative; /* For positioning the pseudo-element */
        }

        .career-info-section .career-content ul li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.4rem; /* Adjust vertical alignment of the bullet */
            width: 0.75rem; /* Size of the bullet */
            height: 0.75rem; /* Size of the bullet */
            background-color: #007bff; /* Bullet color */
            border-radius: 50%; /* Make it a circle */
        }


        /* --- Job Application Form Section Styles --- */
        .job-application-section-wrapper {
            /* This wrapper now directly contains the form and doesn't need its own grid */
            /* It will act as the right column of the main combined-section grid */
        }

        /* Form Container styles (retaining grid background) */
        .form-container {
            padding: 2.5rem;
            box-sizing: border-box;
            background-image:
                linear-gradient(to right, #e0e0e0 1px, transparent 1px),
                linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
            background-size: 20px 20px;
            background-repeat: repeat;
            width: 100%; /* Ensure form takes full width of its wrapper */
        }

        .form-container h2 {
            font-size: 2.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 2rem;
            text-align: center;
        }

        /* Form Group for labels and inputs */
        .form-group {
            margin-bottom: 1.25rem;
        }

        .form-group label {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.6rem;
        }

        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="tel"],
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.85rem 1rem;
            border: 1px solid #c0c0c0;
            border-radius: 0.25rem;
            font-size: 1rem;
            color: #1f2937;
            box-sizing: border-box;
            position: relative; /* Ensure it's on top */
            z-index: 1; /* Ensure it's on top */
        }

        .form-group input[type="file"] {
            width: 100%;
            padding: 0.85rem 0;
            font-size: 1rem;
            color: #1f2937;
            box-sizing: border-box;
            position: relative; /* Ensure it's on top */
            z-index: 1; /* Ensure it's on top */
        }

        .form-group textarea {
            min-height: 9rem;
            resize: vertical;
            position: relative; /* Ensure it's on top */
            z-index: 1; /* Ensure it's on top */
        }

        /* Checkbox group */
        .checkbox-group {
            margin-top: 2rem;
            margin-bottom: 2rem;
            display: flex;
            align-items: flex-start;
        }

        .checkbox-group input[type="checkbox"] {
            margin-right: 0.75rem;
            margin-top: 0.25rem;
            min-width: 1rem;
            min-height: 1rem;
            /* Fixes for checkbox visibility */
            -webkit-appearance: checkbox; /* For Webkit browsers */
            -moz-appearance: checkbox;    /* For Mozilla browsers */
            appearance: checkbox;         /* Standard property */
            display: inline-block;        /* Ensure it behaves as a block element within flex */
            cursor: pointer;              /* Indicate it's clickable */
            z-index: 1; /* Ensure it's on top */
        }

        .checkbox-group label {
            font-size: 0.9rem;
            color: #4b5563;
            line-height: 1.5;
        }

        /* Submit Button */
        .submit-button {
            width: 100%;
            padding: 1.1rem;
            background-color: #007bff;
            color: #ffffff;
            font-size: 1.15rem;
            font-weight: 600;
            border: none;
            border-radius: 0.3rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .submit-button:hover {
            background-color: #0056b3;
        }

        /* Responsive adjustments for desktop (medium screens and up) */
        @media (min-width: 768px) {
            .combined-section {
                grid-template-columns: 1fr 1fr; /* Two equal columns for desktop */
                gap: 0; /* Ensures no gap between the two main halves */
            }

            .career-info-section {
                border-bottom: none; /* Remove separator on desktop */
                border-right: 1px solid #e0e0e0; /* Add vertical separator */
                text-align: left; /* Align text left for desktop */
                align-items: flex-start; /* Align items to start */
            }

            .career-info-section .career-image-container-fluid {
                width: 100%; /* Image takes full width of its column */
                height: auto; /* Allow height to adjust */
                margin-bottom: 2rem; /* More space below image */
            }

            .career-info-section .career-image {
                height: 20rem; /* Taller image on desktop */
            }
        }


/* employee chart */

#employee-hierarchy {
    font-family: Arial, sans-serif;
    background: #ded7d7;
    padding: 20px;
}

#employee-hierarchy h2,p {
    color: #000;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    margin-bottom: 20px;
}

#employee-hierarchy .org-chart {
    display: flex;
    justify-content: center;
    padding: 20px;
}

#employee-hierarchy .node {
    background: #3f3131;
    padding: 10px 15px;
    border: 2px solid #333;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    min-width: 160px;
    transition: all 0.3s ease;
}

#employee-hierarchy .node:hover {
    background: #805551cf;
    transform: scale(1.05);
}

#employee-hierarchy .line {
    width: 2px;
    background: #1b0707;
    margin: auto;
}

#employee-hierarchy .level {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}

#employee-hierarchy .hidden {
    display: none;
}

.footer-custom {
    background: linear-gradient(135deg, #0a0d14, #0c0d0ed1);
    color: #ffffff; /* white text */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  }

  /* Social Icons */
  .footer-custom .social-icon {
    color: #ffffff;  /* white icons */
    margin: 0 10px;
    font-size: 1.7rem;
    transition: all 0.3s ease-in-out;
    display: inline-block;
  }

  .footer-custom .social-icon:hover {
    color: #748cab; /* hover color can remain muted blue */
    transform: translateY(-4px) scale(1.1);
  }

  /* Footer Text */
  .footer-custom p {
    margin-top: 10px;
    color: #ffffff; /* white text */
    font-size: 0.9rem;
  }

        .about-section {
            width: 100%;
            padding: 2rem 1rem;
        }

        .about-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .about-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .image-column {
            width: 100%;
            padding: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .company-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .content-column {
            width: 100%;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .main-heading {
            font-size: 2.5rem;
            font-weight: 800;
            color: #110e27;
            margin-bottom: 1rem;
            text-align: center;
        }

        .description-text {
            color: #374151;
            line-height: 1.4;
            margin-bottom: 1rem;
            text-align: justify;
        }

        .divider {
            margin: 2rem 0;
            border: none;
            border-top: 1px solid #d1d5db;
        }

        .org-section {
            width: 100%;
            padding: 2rem 1rem;
        }

        .org-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .org-card {
            background-color: white;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
        }

        .section-heading {
            font-size: 2.5rem;
            font-weight: 800;
            color: #0d063f;
            margin-bottom: 1rem;
        }

        .chart-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .org-chart {
            width: 50%;
            max-width: 400px;
            height: 600px;
            border-radius: 8px;
        }

        /* Responsive Design */
        @media (min-width: 768px) {
            .about-card {
                flex-direction: row;
            }

            .image-column,
            .content-column {
                width: 50%;
            }

            .image-column {
                padding: 3rem;
            }

            .content-column {
                padding: 3rem;
            }
        }

        @media (max-width: 767px) {
            .main-heading,
            .section-heading {
                font-size: 2rem;
            }

            .about-section,
            .org-section {
                padding: 1rem;
            }

            .content-column,
            .org-card {
                padding: 1rem;
            }
        }