* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }
    body {
      background: #f9f9f9;
      color: #333;
    }
   /* header {
      background: #004aad;
      color: white;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      font-size: 2rem;
    }*/
    nav {
      margin-top: 10px;
    }
    nav a {
      color: white;
      margin: 0 15px;
      text-decoration: none;
      font-weight: bold;
    }
    .container {
      width: 90%;
      margin: 20px auto;
    }
    .plans {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    .plan {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s;
    }
    .plan:hover {
      transform: translateY(-5px);
    }
    .plan h3 {
      color: #004aad;
      margin-bottom: 10px;
    }
    .calculators {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .calculator {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .calculator h3 {
      color: #004aad;
      margin-bottom: 10px;
    }
    .calculator label {
      display: block;
      margin: 10px 0 5px;
    }
    .calculator input {
      width: 100%;
      padding: 8px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .calculator button {
      background: #004aad;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
    }
    .calculator button:hover {
      background: #003080;
    }
    footer {
      background: #004aad;
      color: white;
      text-align: center;
      padding: 15px;
      margin-top: 40px;
    }

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* --- NavBar Container (Desktop/Mobile) --- */
.navbar {
    background-color: #ffffff;
    color: white;
    display: flex;
    justify-content: space-between; /* Puts logo on one side, menu on the other */
    align-items: center;
    padding: 10px 20px;
    position: sticky; /* Keeps it visible at the top */
    top: 0;
    z-index: 1000;
    flex-wrap: nowrap; /* Ensures logo and button stay on one line */
    height: 60px; /* Fixed height for consistency */
}

/* --- Logo Styling (Right Side) --- */
.logo-container {
    /* Pushes the logo to the right based on the 'justify-content: space-between' on .navbar */
    order: 2; 
}

.header-logo-img {
    height: 40px; /* Adjust height to fit the 60px navbar height (40px looks good) */
    width: auto;
    /* This ensures the logo itself doesn't cause overflow issues */
    max-width: 100%; 
    display: block;
}

/* --- Navigation Links Styling (Desktop) --- */
.nav-links {
    order: 1; /* Puts the menu links on the left side of the logo */
}

.nav-links ul {
    list-style: none;
        

    display: flex; /* Makes the list items horizontal */
}

.nav-links li a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 5px 5px;
    display: block;
    white-space: nowrap; /* Prevent links from wrapping */
    transition: background-color 0.3s;
}

.nav-links li a:hover {
    background-color: #575757;
    border-radius: 3px;
}


/* --- Mobile Menu Button (Hamburger Icon) --- */
.menu-toggle {
    display: none; /* Hide on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    order: 3; /* Keep it on the right side of the main nav links on mobile */
    margin-left: 15px; /* Space between links (when active) and button */
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: rgb(0, 0, 0);
    transition: all 0.3s ease-in-out;
}


/* ======================================= */
/* --- MEDIA QUERY for Mobile Layout --- */
/* ======================================= */
@media (max-width: 768px) {
    
    /* Show the hamburger menu button */
    .menu-toggle {
        display: block;
        /* Ensure the button and logo are on one line */
        order: 2; /* Put the button next to the logo on the right */
        margin-left: 0; /* Adjust spacing */
    }

    /* Hide the navigation links by default on mobile */
    .nav-links {
        /* Full width and positioned absolutely */
        position: absolute;
        top: 60px; /* Below the navbar height */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        max-height: 0; /* Collapse the menu */
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        flex-direction: column; /* Stacking the menu items */
        order: 3; /* Place it below the logo/button line */
    }

    /* When the menu is active (toggled by JS) */
    .nav-links.active {
        max-height: 500px; /* Arbitrarily large enough value to show all links */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .nav-links ul {
        flex-direction: column; /* Stack menu items vertically */
        padding: 10px 0;
    }

    .nav-links li {
        text-align: center;
        margin: 5px 0;
    }
    
    .nav-links li a {
        padding: 12px;
        border-bottom: 1px solid #444; /* Separator for mobile links */
    }
    
    .nav-links li:last-child a {
        border-bottom: none;
    }
    
    /* Adjust logo position to keep it in line with the hamburger */
    .logo-container {
        order: 3; /* Moves logo to the left to make space for the button on the right */
    }

    /* Reorder the navbar items for mobile */
    .navbar {
        /* Default: logo on left, button on right, menu collapsed */
        justify-content: space-between;
    }
    
    /* Styling the Hamburger to an 'X' (Optional but common UX) */
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}.hero-banner {
    /* Replace 'banner-bg.jpg' with your image file path or color */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('banner-bg.jpg') center/cover no-repeat; 
    color: white;
    padding: 80px 20px;
    text-align: center;
    min-height: 600px; /* Responsive height */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 0px;
}

 .cta-button {
    background: #ffc107; /* Bright call-to-action color */
    color: #333;
    padding: 12px 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    margin-top: 0px; 
}

.cta-button:hover {
    background: #e0a800;
}
  @media (max-width: 576px) {
        .hero-banner {
            min-height: 100px; /* Even smaller height for compact mobile view */
            padding: 40px 10px;
        }
        .hero-content h1 {
            font-size: 1.8em;
        }
        .cta-button {
            margin-top: 180px;
        }
    }
/* --- NEW: Specialty Tabs Section Styles --- */
.specialty-tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
    margin-top: -60px; /* Overlap the banner */
    position: relative; 
    z-index: 10;
}

.tab-item {
    background: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    flex: 1; /* Ensures equal width distribution */
    transition: transform 0.3s;
}

.tab-item:hover {
    transform: translateY(-10px);
}

.tab-circle {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: #004aad; /* Blue background */
    border-radius: 50%; /* Makes it round */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffc107; /* Star/icon color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tab-item h3 {
    color: #004aad;
    margin-bottom: 5px;
}

/* --- Responsive Adjustments for New Sections --- */
@media (max-width: 768px) {
    
    /* Banner Adjustment */
    .hero-content h1 {
        font-size: 2em; 
    }

    /* Tabs Stacking */
    .specialty-tabs {
        flex-direction: column; /* Stacks the tabs vertically on small screens */
        gap: 20px;
        margin-top: 20px; /* Removes the overlap effect on mobile for better spacing */
        padding: 20px;
    }

    .tab-item {
        max-width: 100%; /* Full width tabs on mobile */
    }
}
.inquiry-form {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 1500px; 
}

.inquiry-form h2 {
    color: #004aad;
    margin-bottom: 5px;
    text-align: center;
}

.inquiry-form p {
    text-align: center;
    margin-bottom: 25px;
    color: #555;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form select,
.inquiry-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* Ensures padding doesn't affect total width */
    font-size: 16px;
}

.inquiry-form textarea {
    resize: vertical;
}

.submit-button {
    background: #ffc107; /* Your CTA color */
    color: #333;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    width: 100%; /* Full width button */
    transition: background-color 0.3s;
}

.submit-button:hover {
    background: #e0a800;
}
/* --- New Footer Styles --- */
.main-footer {
    background-color: #0b1522; /* Dark background from your image */
    color: #ffffff; /* White text */
    padding: 60px 0 0; /* Padding for top, no padding for bottom initially */
    font-size: 0.95em;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAwIiBoZWlnaHQ9IjcwMCIgdmlld0JveD0iMCAwIDcwMCA3MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBmaWxsPSIjMTcyYTNkIiBmaWxsLW9wYWNpdHk9IjAuMSI+PHBhdGggZD0iTTM3Ny4zMzMgNTU4LjczM0wyNjkuMTggNjk2SDBsMzI2LjY1Ny00MzhINjkyLjA4em0tMjEwLjk2NiA4Ny4zODVsNTcuNDYyIDU3LjQ2MmwxNy4zNzMtMjcuODI3LTM3Ljg4Ny00MC42MTR6TTEyOC4yMiA0MDguMjczbDMwNi44MTUgMjA2LjU0Mi0yNTUuMTI1IDI1My4xNjhoLTM5Mi40WiIvPjxwYXRoIGQ9Ik0zMzcuMzMzIDQ5OC43MzNMMjI5LjE4IDYzNkgwYzMyNi42NTctNDM4SDY1Mi4wOHptLTIxMC45NjYgODcuMzg1bDU3LjQ2MiA1Ny40NjJsMTcuMzczLTI3LjgyNy0zNy44ODctNDAuNjE0eiIvPjwvZz48L2c+PC9zdmc+'); /* Subtle background pattern */
    background-size: 200px; /* Adjust pattern size */
    background-repeat: repeat;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr; /* Adjust column widths as needed */
    gap: 40px;
    margin-bottom: 40px; /* Space above social icons */
    padding: 0 20px; /* Horizontal padding */
}

.footer-col {
    padding: 15px 0;
}

/* Company Info Column */
.about-company .footer-logo {
    max-width: 180px; /* Adjust based on your logo's size */
    height: auto;
    margin-bottom: 20px;
}

.about-company p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #cccccc;
}

.about-company .thank-you {
    font-weight: bold;
    margin-top: 25px;
    color: white;
}

/* Quick Links & Company Locations Headers */
.footer-col h3 {
    font-size: 1.2em;
    margin-bottom: 25px;
    color: white; /* Header text color */
    position: relative;
}

/* Quick Links Styling */
.quick-links ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for links */
    gap: 10px 0; /* Vertical gap between rows */
}

.quick-links li a {
    color: #cccccc;
    text-decoration: none;
    padding: 5px 0;
    display: flex; /* For the small dash */
    align-items: center;
    transition: color 0.3s;
}

.quick-links li a::before {
    content: '—'; /* Small dash */
    margin-right: 8px;
    color: #ffc107; /* Accent color for the dash */
}

.quick-links li a:hover {
    color: #ffc107; /* Hover effect */
}

/* Company Locations Styling */
.company-locations .contact-item {
    display: flex;
    align-items: flex-start; /* Align icon to the top of text */
    margin-bottom: 20px;
}

.company-locations .contact-item .icon {
    font-size: 1.5em; /* Icon size */
    color: #ffc107; /* Accent color for icons */
    margin-right: 15px;
    flex-shrink: 0; /* Prevent icon from shrinking on small screens */
}

.company-locations .contact-item h4 {
    font-size: 1.05em;
    margin-bottom: 5px;
    color: white;
}

.company-locations .contact-item p {
    color: #cccccc;
    line-height: 1.4;
}

/* Social Media Section */
.footer-social {
    background-color: #0d1a29; /* Slightly darker background for social bar */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Subtle separator */
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1); /* Transparent white background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.1em;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.social-icons a:hover {
    background-color: #ffc107; /* Accent color on hover */
    color: #0b1522; /* Dark text on hover */
}

.social-icons .back-to-top {
    background-color: #ff0033; /* Red background for back to top */
    margin-left: 20px;
}

.social-icons .back-to-top:hover {
    background-color: #cc002a; /* Darker red on hover */
}

/* Responsive adjustments for the footer */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* Two columns on medium screens */
    }
    .footer-col.about-company {
        grid-column: 1 / -1; /* Full width for about section */
        text-align: center;
    }
    .about-company .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }
    .quick-links ul {
        grid-template-columns: 1fr; /* Single column for links on medium screens */
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stack all columns vertically on small screens */
        gap: 30px;
        text-align: center;
    }
    .footer-col {
        padding: 15px 0;
    }
    .quick-links li a {
        justify-content: center; /* Center links on mobile */
    }
    .company-locations .contact-item {
        justify-content: center;
    }
    .company-locations .contact-item .icon {
        margin-right: 10px; /* Adjust icon spacing */
    }
}

#container {
  height:150px; 
  position:relative; 
  overflow:hidden;
}

.photobanner {
  position:absolute; 
  top:0px; 
  left:0px; 
  overflow:hidden; 
  white-space: nowrap;
  animation: bannermove 10s linear infinite;
}

.photobanner img {    
  margin: 0 2.5em 
  
}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}