/* Full-width header, positioned at top-right and top-left 
.header-bar {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
*/ 

/* Company name styling */
.company-name {
  font-size: 1.25rem;
  font-weight: bold;
  color: #3ad900; /* adjust to match your theme */
}

/* (Existing) Call-Now button */
.call-now-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #a074c4;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  min-width: 200px;
}

.call-now-btn .icon {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

.call-now-btn .number {
  margin-left: auto;
  font-weight: bold;
}

.call-now-btn:hover {
  opacity: 0.9;
}



/* Position wrapper at top-right */
.header-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Call-Now button */
.call-now-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F78C6C; /* light red */
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  min-width: 200px;
}

/* Icon spacing */
.call-now-btn .icon {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

/* Push number to the far right */
.call-now-btn .number {
  margin-left: auto;
  font-weight: bold;
}

/* Hover effect */
.call-now-btn:hover {
  opacity: 0.9;
}

<style>
body {
    margin: 0; /* Remove default browser body margin */
}

header {
    display: flex; /* Use Flexbox for layout */
    align-items: center; /* Vertically align items in the middle */
    justify-content: flex-start; /* Align items to the start (left) - often default */
    padding: 10px 20px; /* Add some padding around header content */
    background-color: #f8f8f8; /* Example background */
    border-bottom: 1px solid #eee; /* Example border */
}

.logo-link {
    margin-right: auto; /* Pushes navigation to the right */
    /* Or remove if nav should be close */
}

#logo {
    max-height: 50px; /* Control the logo size - adjust as needed */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Good practice for images inside links */
}

nav {
    /* Styles for your navigation */
}
</style>
<style>
        body { font-family: Arial, sans-serif; }
        header, footer { background: #0044cc; color: white; padding: 10px 20px; text-align: center; }
        nav { text-align: center; margin-top: 10px; }
        nav a { color: white; margin: 0 10px; text-decoration: none; }
        .hero { padding: 20px; background: #1f7199; text-align: center; }
        .hero h1 { color: #33ff00; }
        .hero button { padding: 10px; font-size: 16px; cursor: pointer; }

        .footer-links { text-align: center; padding: 10px; margin-top: 10px; }
        .footer-links a { color: white; text-decoration: none; margin: 0 5px; }
    </style>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
        }
        nav {
            background-color: #0044cc;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        nav ul li {
            position: relative;
        }
        nav ul li a {
            display: block;
            padding: 15px 20px;
            color: white;
            text-decoration: none;
        }
        nav ul li:hover {
            background-color: #003399;
        }
        /* Dropdown */
        nav ul li ul {
            display: none;
            position: absolute;
            background-color: #0044cc;
            top: 100%;
            left: 0;
            min-width: 250px;
            z-index: 9999;
        }
        nav ul li:hover ul {
            display: block;
        }
        nav ul li ul li {
            width: 100%;
        }
        nav ul li ul li a {
            padding: 10px 20px;
        }
        nav ul li ul li:hover {
            background-color: #003399;
        }
    </style>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            margin: 2em;
            color: #333;
            background-color: #f8f9fa; /* Light grey background */
        }
        .main-container {
            max-width: 1200px; /* Wider container for horizontal layout */
            margin: 2em auto;
            background-color: #ffffff; /* White container background */
            padding: 2em 2.5em;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        h1 {
            text-align: center;
            color: #2c3e50; /* Darker blue-grey */
            border-bottom: 3px solid #3498db; /* Lighter blue accent */
            padding-bottom: 0.6em;
            margin-bottom: 1.5em;
            font-weight: 600;
        }
        .levels-wrapper {
            display: flex; /* Arrange level blocks in a row */
            gap: 1.5em; /* Space between the blocks */
            align-items: stretch; /* Make blocks equal height */
        }
        .level-block {
            flex: 1; /* Each block takes equal width */
            padding: 1.5em;
            border: 1px solid #e0e0e0; /* Subtle border */
            border-left: 5px solid #3498db; /* Accent color */
            border-radius: 6px;
            background-color: #fdfdfd; /* Slightly off-white */
            transition: box-shadow 0.3s ease;
            display: flex; /* Use flex inside block */
            flex-direction: column; /* Stack content vertically */
        }
        .level-block:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .level-block h2 {
            color: #3498db; /* Matching accent blue */
            margin-top: 0;
            margin-bottom: 0.6em;
            font-size: 1.4em; /* Adjusted for potentially less width */
            font-weight: 600;
        }
        .level-block p {
            margin-bottom: 0.8em;
            color: #555;
            font-size: 1em; /* Adjusted for potentially less width */
            flex-grow: 1; /* Allows paragraph to push footer down */
        }
        .level-block .think {
            display: block;
            margin-top: 1em; /* Ensure space above */
            font-weight: bold;
            font-style: italic;
            color: #2c3e50; /* Darker text for emphasis */
            font-size: 0.95em;
        }

        /* --- Responsive Design --- */
        @media (max-width: 850px) { /* Switch to vertical layout on smaller screens */
            .levels-wrapper {
                flex-direction: column;
                gap: 2em; /* Adjust gap for vertical stacking */
            }
            .level-block h2 {
                font-size: 1.6em; /* Revert font size */
            }
            .level-block p {
                font-size: 1.05em; /* Revert font size */
            }
            .level-block .think {
                font-size: 1em; /* Revert font size */
            }
        }
    </style>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            margin: 0;
            padding: 2em; /* Add padding around the body for context */
            color: #333;
            background-color: #eef1f5; /* Light neutral background */
        }

        /* --- About Us Section Styling --- */
        .about-section {
            background-color: #ffffff; /* White background for the section */
            padding: 2.5em 3em;      /* Generous padding inside the section */
            margin: 2em auto;         /* Vertical margin, centered horizontally */
            max-width: 850px;         /* Control maximum width for readability */
            border-radius: 8px;       /* Soft rounded corners */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Subtle shadow for depth */
            border-top: 5px solid #007bff; /* Accent color border top (Example: Bootstrap Blue) */
        }

        .about-section h2 {
            text-align: center;
            color: #2c3e50; /* Dark, professional heading color */
            font-size: 2.1em; /* Prominent heading size */
            margin-top: 0;
            margin-bottom: 1.2em;
            font-weight: 600;
            letter-spacing: -0.5px; /* Slight tightening of letter spacing */
        }

        .about-section p {
            color: #495057; /* Slightly softer text color for body */
            font-size: 1.1em; /* Comfortable reading size */
            margin-bottom: 1.3em;
            text-align: left; /* Left-align is generally better for web readability */
        }

        .about-section p:last-of-type {
            margin-bottom: 0; /* No margin after the last paragraph */
        }


        /* Responsive adjustments */
        @media (max-width: 768px) {
            .about-section {
                padding: 2em 1.5em;
                margin: 1.5em auto;
            }
            .about-section h2 {
                font-size: 1.8em;
            }
            .about-section p {
                font-size: 1em;
            }

        }

        @media (max-width: 500px) {
            body { padding: 1em; } /* Reduce body padding */
            .about-section {
                padding: 1.5em 1em;
            }
            .about-section h2 {
                font-size: 1.6em;
            }
        }

    </style>

    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            margin: 0;
            padding: 2em; /* Add padding around the body for context */
            color: #333;
            background-color: #f8f9fa; /* Light neutral background */
        }
        .main-container { /* Optional: Wrap everything */
            max-width: 800px;
            margin: 2em auto;
            background-color: #ffffff; /* White container background */
            padding: 2em 2.5em;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        .content-block {
            margin-bottom: 2.5em; /* Space below this block */
            padding: 1.5em;
            border: 1px solid #e0e0e0;
            border-left: 5px solid #3498db; /* Blue accent */
            border-radius: 6px;
            background-color: #fdfdfd;
        }
        .content-block h2 { /* Heading for the topic */
            color: #3498db;
            margin-top: 0;
            margin-bottom: 0.8em;
            font-size: 1.6em;
            font-weight: 600;
        }
        .content-block ul {
            list-style: none; /* Remove default bullets */
            padding-left: 0.5em; /* Slight indent for alignment */
        }
        .content-block ul li {
            position: relative; /* Needed for absolute positioning of ::before */
            padding-left: 1.8em; /* Space for custom bullet */
            margin-bottom: 0.7em; /* Space between list items */
            color: #444; /* Slightly darker text */
            font-size: 1.05em;
        }
        .content-block ul li::before {
            content: '\\203A'; /* Single right-pointing angle quotation mark › */
            position: absolute;
            left: 0;
            top: 1px; /* Fine-tune vertical alignment */
            color: #3498db; /* Accent color for bullet */
            font-size: 1.2em; /* Adjust bullet size */
            font-weight: bold;
        }

        /* --- Contact Info Styling --- */
        .contact-info {
          margin-top: 2.5em; /* Space above contact info */
          padding-top: 1.5em;
          border-top: 1px solid #e0e0e0; /* Separator line */
          text-align: center; /* Center align contact details */
        }
        .contact-info h3 {
          color: #333;
          margin-bottom: 0.8em;
          font-size: 1.3em;
          font-weight: 600;
        }
        .contact-info p {
          margin-bottom: 0.6em;
          color: #555;
          font-size: 1.05em;
        }
        .contact-info a {
          color: #007bff; /* Standard link blue */
          text-decoration: none; /* No underline by default */
        }
        .contact-info a:hover {
          text-decoration: underline; /* Underline on hover */
        }
        .contact-info em { /* Style for location */
            color: #777;
            font-size: 0.95em;
            display: block; /* Put location on its own line */
            margin-top: 0.3em;
        }

        /* Basic Responsive Adjustments */
         @media (max-width: 600px) {
             body { padding: 1em; }
             .main-container { padding: 1.5em; margin: 1em auto; }
             .content-block h2 { font-size: 1.4em; }
             .content-block ul li { font-size: 1em; }
             .contact-info h3 { font-size: 1.2em; }
             .contact-info p { font-size: 1em; }
         }
    </style>