@import url("base.layout-wireframe.css");
	
	
	
	
	.tankseal-layout-component {
      --navy-dark: #16202c;
      --navy-accent: #1e2d3d;
      --text-white: #ffffff;
      --text-muted: #94a3b8;
      --highlight-green: #00a859;
      --font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .tankseal-layout-component, .tankseal-layout-component * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .tankseal-layout-component {
      overflow-x: hidden;
    }

    .tankseal-layout-component {
      font-family: var(--font-family);
      background-color: #0f172a;
      color: var(--text-white);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      max-width: 100vw;
    }

    /* --- HEADER STYLING --- */
    .tankseal-layout-component header {
      width: 100%;
      background: var(--navy-dark);
      padding: 16px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 100;
    }

    .tankseal-layout-component .header-container {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Top Utility Bar */
    .tankseal-layout-component .top-bar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 500;
    }

    .tankseal-layout-component .top-bar a {
      text-decoration: none;
      color: var(--text-white);
      opacity: 0.9;
      transition: opacity 0.2s ease;
    }

    .tankseal-layout-component .top-bar a.green-link {
      color: var(--highlight-green);
      font-weight: 600;
      opacity: 1;
    }

    .tankseal-layout-component .top-bar a:hover {
      opacity: 1;
    }

    .tankseal-layout-component .top-bar .divider {
      color: rgba(255, 255, 255, 0.2);
    }

    .tankseal-layout-component .login-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
	
	.tankseal-layout-component .login-btn:hover {
		
		color:lightblue;
		
	}

    .tankseal-layout-component .login-btn svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* Main Navigation Bar */
    .tankseal-layout-component .main-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    .tankseal-layout-component .logo-link {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }

    .tankseal-layout-component .logo-svg {
      height: 40px;
      width: auto;
    }

    /* Mobile Menu Toggle */
    .tankseal-layout-component .mobile-menu-btn {
      display: block;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-white);
      padding: 4px;
    }

    .tankseal-layout-component .mobile-menu-btn svg {
      width: 28px;
      height: 28px;
    }

    /* Navigation Menu */
    .tankseal-layout-component .nav-menu {
      display: none;
      flex-direction: column;
      width: 100%;
      list-style: none;
      gap: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .tankseal-layout-component .nav-menu.active {
      display: flex;
    }

    .tankseal-layout-component .nav-menu a {
      text-decoration: none;
      color: var(--text-white);
      font-weight: 600;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: color 0.2s ease;
    }

    .tankseal-layout-component .nav-menu a:hover {
      color: var(--highlight-green);
    }

    .tankseal-layout-component .chevron {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.5;
    }

    /* Search Box */
    .tankseal-layout-component .search-container {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .tankseal-layout-component .search-input {
      background-color: var(--navy-accent);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 9999px;
      padding: 10px 42px 10px 18px;
      font-family: var(--font-family);
      font-size: 14px;
      color: var(--text-white);
      outline: none;
      width: 100%;
      transition: all 0.2s ease;
    }

    .tankseal-layout-component .search-input::placeholder {
      color: var(--text-muted);
    }

    .tankseal-layout-component .search-input:focus {
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    }

    .tankseal-layout-component .search-icon-btn {
      position: absolute;
      right: 14px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
    }

    .tankseal-layout-component .search-icon-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    }

    /* Tablet & Mobile Viewport Adjustments (max-width: 991px) */
    @media (max-width: 991px) {
    }

    /* Mobile Viewport Adjustments (max-width: 640px) */
    @media (max-width: 640px) {
      .tankseal-layout-component header { padding: 12px 16px; }

      .tankseal-layout-component .header-container { gap: 8px; }

      /* Top utility bar: wrap and trim so it never overflows */
      .tankseal-layout-component .top-bar {
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: center;
      }

      .tankseal-layout-component .top-left {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }

      .tankseal-layout-component .top-right {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
      }

      .tankseal-layout-component .social-links { display: none; }

      .tankseal-layout-component .top-right .divider:nth-of-type(1) { display: none; }

      .tankseal-layout-component .quote-btn { padding: 6px 14px; font-size: 11px; }

      .tankseal-layout-component .login-btn { font-size: 12px; }

      .tankseal-layout-component .logo-svg { height: 32px; }

      /* Hero */

    }

    /* Extra-small phones: collapse the utility bar to just Quote + Login */
    @media (max-width: 400px) {
      .tankseal-layout-component .top-left { display: none; }

      .tankseal-layout-component .top-right a[href="#"]:not(.quote-btn):not(.login-btn) { display: none; }
      .tankseal-layout-component .top-right .divider:nth-of-type(2) { display: none; }

    }

    /* Desktop Viewport Adjustments (992px+) */
    @media (min-width: 992px) {
      .tankseal-layout-component header { padding: 20px 48px; }

      .tankseal-layout-component .mobile-menu-btn { display: none; }

      .tankseal-layout-component .main-nav {
        flex-wrap: nowrap;
        gap: 32px;
      }

      .tankseal-layout-component .logo-svg { height: 44px; }

      .tankseal-layout-component .nav-menu {
        display: flex !important;
        flex-direction: row;
        width: auto;
        padding-top: 0;
        border-top: none;
        gap: 32px;
      }

      .tankseal-layout-component .nav-menu a {
        justify-content: flex-start;
        gap: 6px;
      }

      .tankseal-layout-component .search-container { width: auto; }
      .tankseal-layout-component .search-input { width: 200px; }
      
    }
	
	
	
	
	
	/* BUTTON REQUEST QUOTE*/
	/* High-Visibility "Request a Quote" Button */
.tankseal-layout-component .top-bar a.quote-btn {
  background-color: #3b597d;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 168, 89, 0.35); /* Glowing shadow */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tankseal-layout-component .top-bar a.quote-btn:hover {
  background-color: #008f4c; /* Slightly darker green on hover */
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 168, 89, 0.45);
}

.tankseal-layout-component .top-bar a.quote-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 168, 89, 0.3);
}
	
	


.tankseal-layout-component .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
}

.tankseal-layout-component .top-left, .tankseal-layout-component .top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tankseal-layout-component .contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00a859; /* Matching brand green accent */
  text-decoration: none;
  font-weight: 600;
}

.tankseal-layout-component .contact-item .icon {
  width: 15px;
  height: 15px;
}

.tankseal-layout-component .social-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tankseal-layout-component .social-links a {
  color: var(--text-dark);
  opacity: 0.7;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.tankseal-layout-component .social-links a:hover {
  opacity: 1;
  color: #00a859;
}

.tankseal-layout-component .social-links svg {
  width: 15px;
  height: 15px;
}

	
	
	
/* Page shell: keeps bottom content at the bottom when middle content is short */
.tankseal-page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tankseal-page-shell > .top,
.tankseal-page-shell > .middle,
.tankseal-page-shell > .bottom {
  width: 100%;
}

.tankseal-page-shell > .middle {
  flex: 1 0 auto;
}

.tankseal-page-shell > .bottom {
  margin-top: auto;
  flex: 0 0 auto;
}


	
	
	
	
	
	
	
	
	
/* Make middle content participate fully in page height */
.tankseal-page-shell > .middle {
    flex: 1 0 auto;
    position: relative;
    display: flow-root;
    min-width: 0;
}

/* Prevent the CTA from visually overlapping the content below */
.tankseal-page-shell > .middle .scoped-cta-wrapper
.techwix-cta-section-02 .cta-wrap {
    margin-bottom: 0 !important;
}

/* Clear any floated elements inside middle */
.tankseal-page-shell > .middle::after {
    content: "";
    display: table;
    clear: both;
}	
	
	
.tankseal-page-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.tankseal-page-shell > .bottom {
    margin-top: auto;
}




.nav-menu > li > a.active {
    background: #0284c7;
    color: #fff;
    border-radius: 28px;
    padding: 5px 10px;
	margin-top:-5px;
	
	pointer-events: none;
    cursor: default;
}	
	

	
/* Normal menu items can hover */
.nav-menu > li > a:not(.active):hover {
    /* your hover effect */
}