/* Consistent font and size */
    html,
    body {
      font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
      font-size: 16px;
      color: #155e63;
      background: #fff;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
      font-weight: 700;
      color: #155e63;
      margin-bottom: 0.7em;
      line-height: 1.2;
    }

    h1 {
      font-size: 2.25rem;
    }

    h2 {
      font-size: 1.75rem;
    }

    h3 {
      font-size: 1.35rem;
    }

    h4 {
      font-size: 1.1rem;
    }

    p,
    ul,
    li,
    label,
    input,
    textarea,
    .btn,
    .nav-link,
    .dropdown-item {
      font-size: 1rem;
      font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
      color: #155e63;
    }

    .lead {
      font-size: 1.15rem;
      font-weight: 400;
    }

    /* Header styles */
    #header {
      background: #155e63;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .top-row {
      border-bottom: 1px solid #2e3a47;
      margin-top: -25px;
    }

    .logo-text .brand-name {
      color: #fff;
      font-weight: 700;
    }

    .logo-text .brand-sub {
      color: #155e63;
      font-size: 0.9em;
    }

    .social-links a {
      color: #fff;
    }

    /* Nav menu styles */
    .navmenu {
      background: #155e63;
      border-radius: 0 0 8px 8px;
    }

    .navmenu ul li a {
      color: #fff !important;
    }

    .navmenu ul li a.active,
    .navmenu ul li a:hover {
      color: #d2d8d8 !important;
    }

    .mobile-nav-toggle {
      color: #fff;
    }

    /* Hero section styles */
    #hero {
      position: relative;
      overflow: hidden;
      color: #fff;
    }

    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2;
    }

    .hero-content {
      position: relative;
      z-index: 3;
      padding: 100px 0;
      text-align: center;
    }

    .hero-content h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .hero-content p {
      font-size: 1.125rem;
      margin-bottom: 1.5rem;
    }

    

    /* About section styles */
    #about {
      position: relative;
      overflow: hidden;
      padding: 80px 0;
    }

    #about .about-icon {
      transition: transform 0.3s;
    }

    #about .about-icon:hover {
      transform: scale(1.18) rotate(-8deg);
    }

    #about .card {
      box-shadow: 0 4px 24px rgba(0, 188, 212, 0.10);
      transition: box-shadow 0.2s;
    }

    #about .card:hover {
      box-shadow: 0 8px 32px rgba(0, 188, 212, 0.16);
    }

    
    /* Candidate Journey section styles */
    #candidate-journey {
      padding: 80px 0;
      background: #f4f8fb;
    }

    #candidate-journey .stepper {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: 0 auto;
      max-width: 320px;
      position: relative;
    }

    #candidate-journey .step {
      display: flex;
      align-items: center;
      position: relative;
     padding-bottom: 5px;
    }

    #candidate-journey .step:last-child {
      padding-bottom: 0;
    }

    #candidate-journey .step-icon {
      width: 40px;
      height: 40px;
      background: #eaf6fa;
      color: #155e63;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      font-size: 1.5em;
      margin-right: 16px;
      box-shadow: 0 2px 8px rgba(0, 188, 212, 0.08);
      transition: background 0.2s;
    }

    #candidate-journey .step.active .step-icon {
      background: #155e63;
      color: #fff;
    }

    #candidate-journey .step-label {
      font-size: 1.08em;
      color: #155e63;
      font-weight: 500;
    }

    #candidate-journey .step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 20px;
      top: 40px;
      width: 2px;
      height: 24px;
      background: #eaf6fa;
      z-index: 0;
    }

    @media (max-width: 767px) {
      #candidate-journey .stepper {
        max-width: 100%;
      }
    }

    #candidate-journey .card {
      transition: box-shadow 0.2s;
    }

    #candidate-journey .card:hover {
      box-shadow: 0 4px 24px rgba(0, 188, 212, 0.14);
    }

    /* Footer styles */
    #footer {
      background: #155e63;
      color: #fff;
      padding: 60px 0;
    }

    .footer-content {
      margin-bottom: 30px;
    }

    .footer-content .logo {
      color: #155e63;
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .footer-content p {
      margin-bottom: 1rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .footer-links {
      margin-bottom: 30px;
    }

    .footer-links h4 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      position: relative;
      display: inline-block;
    }

    .footer-links h4::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background: #155e63;
      bottom: -4px;
      left: 0;
    }

    .footer-links ul {
      list-style: none;
      padding: 0;
    }

    .footer-links ul li {
      margin-bottom: 0.5rem;
    }

    .footer-links ul li a {
      color: #fff;
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-links ul li a:hover {
      color: #155e63;
    }

    .footer-contact {
      margin-top: 30px;
    }

    .footer-contact h4 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
    }

    .social-links {
      display: flex;
      gap: 10px;
    }

    .social-links a {
      color: #fff;
      font-size: 1.2rem;
      transition: color 0.2s;
    }

    .social-links a:hover {
      color: #155e63;
    }

    .footer-bottom {
      background: rgba(255, 255, 255, 0.1);
      padding: 20px 0;
      margin-top: 30px;
    }

    .copyright {
      text-align: center;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .copyright span {
      color: #ffff;
      font-weight: 500;
    }

    /* Scroll top button */
    #scroll-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: #155e63;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      box-shadow: 0 4px 8px rgba(0, 188, 212, 0.2);
      transition: background 0.2s;
    }

    #scroll-top:hover {
      background: #0097a7;
    }

    /* Preloader */
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.9);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #preloader:after {
      content: '';
      width: 40px;
      height: 40px;
      border: 4px solid #155e63;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Global Section Animation */
    .section {
      opacity: 0;
      transform: translateY(40px) scale(0.98);
      animation: sectionFadeIn 1s forwards;
      animation-delay: 0.2s;
    }

    @keyframes sectionFadeIn {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Card Animation */
    .card,
    .usp-card,
    .disclaimer-card,
    .blog-card {
      opacity: 0;
      transform: scale(0.96) translateY(30px);
      animation: cardFadeIn 0.8s forwards;
      animation-delay: 0.3s;
    }

    @keyframes cardFadeIn {
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    

    /* Glassmorphism Card Effect */
    .card,
    .usp-card,
    .disclaimer-card,
    .blog-card {
      background: rgba(255, 255, 255, 0.85);
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(0, 188, 212, 0.16), 0 1.5px 6px rgba(34, 44, 53, 0.10);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(0, 188, 212, 0.08);
      padding: 48px 36px;
      transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
    }

    .card:hover,
    .usp-card:hover,
    .disclaimer-card:hover,
    .blog-card:hover {
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 16px 48px rgba(0, 188, 212, 0.22), 0 2px 12px rgba(34, 44, 53, 0.14);
      transform: translateY(-6px) scale(1.04);
      border-color: #155e63;
    }

   

    /* Section Spacing & Luxury Feel */
    .section {
      padding-top: 100px !important;
      padding-bottom: 100px !important;
    }

    #about,
    #candidate-journey,
    #employer-usp,
    #legal-disclaimer,
    #blog-strategy {
      border-radius: 32px;
      /*margin-bottom: 40px;*/
      box-shadow: 0 2px 24px rgba(0, 188, 212, 0.06);
    }

    /* Section Backgrounds - Soft Gradients */
    #hero {
      background: linear-gradient(120deg, #155e63 0%, #155e63 100%);
      position: relative;
    }

    #about {
      background: linear-gradient(90deg, #f8fafc 0%, #eaf6fa 100%);
    }

    #candidate-journey {
      background: linear-gradient(90deg, #f4f8fb 0%, #eaf6fa 100%);
    }

    #employer-usp {
      background: linear-gradient(120deg, #fff3e0 0%, #ffe0b2 100%);
      padding: 100px 0 !important;
      border-radius: 40px 8px 32px 8px;
      margin-bottom: 48px;
      box-shadow: 0 12px 40px rgba(255,152,0,0.13), 0 2px 24px rgba(34,44,53,0.06);
      position: relative;
      overflow: hidden;
      border-left: 8px solid #ff9800;
      border-right: 8px solid #fb8c00;
    }

    #legal-disclaimer {
      background: linear-gradient(120deg, #fffde7 0%, #ffe0b2 100%);
      padding: 100px 0 !important;
      border-radius: 8px 40px 8px 32px;
      margin-bottom: 48px;
      box-shadow: 0 12px 40px rgba(255,152,0,0.13), 0 2px 24px rgba(34,44,53,0.06);
      position: relative;
      overflow: hidden;
      border-top: 8px solid #ff9800;
      border-bottom: 8px solid #fb8c00;
    }

    /* Icon Animation (pulse + bounce + rotate) */
    @keyframes icon-rich {
      0%,
      100% {
        transform: scale(1) rotate(0deg) translateY(0);
      }

      10% {
        transform: scale(1.18) rotate(-8deg) translateY(-8px);
      }

      20% {
        transform: scale(1.08) rotate(8deg) translateY(0);
      }

      30% {
        transform: scale(1.12) rotate(-4deg) translateY(-4px);
      }

      40% {
        transform: scale(1) rotate(0deg) translateY(0);
      }

      50% {
        transform: scale(1.08) rotate(4deg) translateY(-2px);
      }

      60% {
        transform: scale(1) rotate(0deg) translateY(0);
      }

      70% {
        transform: scale(1.05) rotate(-2deg) translateY(-1px);
      }

      80% {
        transform: scale(1) rotate(0deg) translateY(0);
      }

      90% {
        transform: scale(1.02) rotate(2deg) translateY(-1px);
      }
    }

    .about-icon i,
    .animated-icon i,
    .blog-icon i,
    .step-icon i,
    .usp-icon,
    .disclaimer-icon {
      animation: icon-rich 1.8s infinite cubic-bezier(.4, 0, .2, 1);
      transition: color 0.3s, transform 0.3s;
      will-change: transform;
      filter: drop-shadow(0 2px 8px rgba(0, 188, 212, 0.12));
    }

    .usp-icon:hover,
    .disclaimer-icon:hover,
    .about-icon:hover i,
    .blog-card:hover .blog-icon i {
      color: #0097a7 !important;
      transform: scale(1.2) rotate(-8deg);
      filter: drop-shadow(0 4px 16px rgba(0, 188, 212, 0.18));
    }

    /* Section Title Animation */
    .section-title,
    h2,
    .disclaimer-title {
      opacity: 0;
      transform: scale(0.96) translateY(20px);
      animation: titleFadeIn 0.7s forwards;
      animation-delay: 0.4s;
      letter-spacing: 0.01em;
      text-shadow: 0 2px 8px rgba(0, 188, 212, 0.08);
    }

    @keyframes titleFadeIn {
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    /* Subtle Gradient Overlay for Depth */
    .main:before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      background: radial-gradient(circle at 60% 20%, #155e63 0%, transparent 60%);
      opacity: 0.08;
      z-index: 0;
    }

    /* Unified Section Design for Candidate Journey, Employer USP, Legal Disclaimer */
    #candidate-journey,
    #employer-usp,
    #legal-disclaimer {
      background: linear-gradient(90deg, #f4f8fb 0%, #eaf6fa 100%);
      padding: 80px 0;
      border-radius: 32px;
      margin-bottom: 40px;
      box-shadow: 0 2px 24px rgba(0, 188, 212, 0.06);
      position: relative;
      overflow: hidden;
    }

    #candidate-journey .card,
    #employer-usp .usp-card,
    #legal-disclaimer .disclaimer-card {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px rgba(0, 188, 212, 0.10);
      border: none;
      padding: 48px 36px;
      transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
    }

    #candidate-journey .card:hover,
    #employer-usp .usp-card:hover,
    #legal-disclaimer .disclaimer-card:hover {
      box-shadow: 0 8px 32px rgba(0, 188, 212, 0.16);
      transform: translateY(-4px) scale(1.02);
      background: #f8fafc;
    }

    /* Section Title Styling */
    #candidate-journey h2,
    #employer-usp .usp-title,
    #legal-disclaimer .disclaimer-title {
      font-size: 2em;
      font-weight: 700;
      color: #155e63;
      margin-bottom: 0.5em;
      letter-spacing: 0.02em;
      text-shadow: 0 2px 8px rgba(0, 188, 212, 0.08);
      font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
    }

    #candidate-journey .lead,
    #employer-usp .usp-subtitle,
    #legal-disclaimer .disclaimer-subtitle {
      font-size: 1.15em;
      color: #155e63;
      margin-bottom: 2em;
      font-weight: 500;
      letter-spacing: 0.01em;
      font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
    }

    /* Icon Styling */
    #candidate-journey h2 i,
    #employer-usp .usp-icon,
    #legal-disclaimer .disclaimer-icon {
      font-size: 2em;
      color: #155e63;
      margin-bottom: 10px;
      display: inline-block;
      filter: drop-shadow(0 2px 8px rgba(0,188,212,0.12));
      transition: color 0.3s, transform 0.3s;
      animation: icon-rich 1.8s infinite cubic-bezier(.4,0,.2,1);
    }

    /* List Styling for USP and Disclaimer */
    #employer-usp .usp-list li,
    #legal-disclaimer .disclaimer-text p {
      font-size: 1.08em;
      color: #155e63;
      background: none;
      border-radius: 0;
      padding: 0;
      margin-bottom: 1.2em;
      box-shadow: none;
      font-weight: 500;
    }
    .site-logo img {
  height: 90px;            /* Increase logo size */
  width: auto;             /* Maintain proportions */
  display: block;
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;      /* Space on left/right */
}

@media (max-width: 768px) {
  .site-logo img {
    height: 70px;          /* Slightly smaller on mobile */
  }
}
  


        #about .about-icon {
          transition: transform 0.3s;
        }

        #about .about-icon:hover {
          transform: scale(1.18) rotate(-8deg);
        }

        #about .card {
          box-shadow: 0 4px 24px rgba(0, 188, 212, 0.10);
          transition: box-shadow 0.2s;
        }

        #about .card:hover {
          box-shadow: 0 8px 32px rgba(0, 188, 212, 0.16);
        }

        .about-icon i,
        .animated-icon i {
          animation: icon-bounce 1.6s infinite;
        }
      


        /* Blog Strategy Rich UI */
        #blog-strategy {
          background: linear-gradient(90deg, #eaf6fa 0%, #f8fafc 100%);
          border-radius: 32px;
          margin-bottom: 40px;
          box-shadow: 0 2px 24px rgba(0, 188, 212, 0.06);
          padding: 100px 0 !important;
          position: relative;
          overflow: hidden;
        }
        .blog-title-rich {
          font-size: 2.2em;
          font-weight: 900;
          color: #155e63;
          margin-bottom: 0.5em;
          letter-spacing: 0.02em;
          text-shadow: 0 2px 12px rgba(0,188,212,0.10);
          font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
        }
        .blog-strategy-icon {
          font-size: 2em;
          color: #155e63;
          margin-right: 10px;
          display: inline-block;
          filter: drop-shadow(0 2px 8px rgba(0,188,212,0.12));
          animation: icon-rich 1.8s infinite cubic-bezier(.4,0,.2,1);
          vertical-align: middle;
        }
        .blog-strategy-lead {
          font-size: 1.18em;
          color: #155e63;
          margin-bottom: 2em;
          font-weight: 500;
          letter-spacing: 0.01em;
          font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
        }
        .blog-card-rich {
          background: rgba(255,255,255,0.97);
          border-radius: 24px;
          box-shadow: 0 8px 32px rgba(0,188,212,0.14), 0 2px 12px rgba(34,44,53,0.10);
          border: 1.5px solid #155e63;
          padding: 48px 36px;
          transition: box-shadow 0.3s, transform 0.3s, background 0.3s, border-color 0.2s;
          position: relative;
          z-index: 1;
        }
        .blog-card-rich:hover {
          background: #fff;
          box-shadow: 0 16px 48px rgba(0,188,212,0.18), 0 4px 24px rgba(34,44,53,0.14);
          transform: translateY(-6px) scale(1.03);
          border-color: #0097a7;
        }
        .blog-icon-rich {
          background: #eaf6fa;
          border-radius: 50%;
          padding: 14px;
          margin-right: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2.2em;
          color: #155e63;
          box-shadow: 0 2px 8px rgba(0,188,212,0.10);
          transition: color 0.3s, transform 0.3s;
          animation: icon-rich 1.8s infinite cubic-bezier(.4,0,.2,1);
        }
        .blog-card-rich:hover .blog-icon-rich {
          color: #0097a7;
          transform: scale(1.12) rotate(-8deg);
          box-shadow: 0 4px 16px rgba(0,188,212,0.18);
        }
        .blog-card-title {
          color: #155e63;
          font-weight: 700;
          font-size: 1.3em;
          margin-bottom: 0;
          letter-spacing: 0.01em;
        }
        .blog-list {
          font-size: 1.13em;
          margin-top: 18px;
          margin-bottom: 0;
          padding-left: 0;
        }
        .blog-list li {
          display: flex;
          align-items: center;
          margin-bottom: 1em;
          color: #155e63;
          font-weight: 500;
          background: none;
          border-radius: 0;
          padding: 0;
          box-shadow: none;
          font-size: 1em;
        }
        .blog-list li i {
          color: #155e63;
          margin-right: 10px;
          font-size: 1.2em;
          transition: color 0.2s;
        }
        .blog-card-rich:hover .blog-list li i {
          color: #0097a7;
        }
        .blog-publishing-cadence {
          font-size: 1.08em;
          color: #155e63;
          margin-top: 1.5em;
        }
        /* Decorative background shapes */
        #blog-strategy::before {
          content: "";
          position: absolute;
          top: -80px; left: -120px;
          width: 320px; height: 320px;
          background: radial-gradient(circle, #155e63 0%, transparent 70%);
          opacity: 0.10;
          z-index: 0;
          border-radius: 50%;
        }
        #blog-strategy::after {
          content: "";
          position: absolute;
          bottom: -100px; right: -140px;
          width: 260px; height: 260px;
          background: radial-gradient(circle, #0097a7 0%, transparent 70%);
          opacity: 0.08;
          z-index: 0;
          border-radius: 50%;
        }
      
.inline-style-1 {background:#ebe7e7; box-shadow:0 2px 8px rgba(0,0,0,0.08);}

.inline-style-2 {border-bottom:1px solid #155e63;}

.inline-style-3 {height:100px; margin-right:12px;width:180px}

.inline-style-4 {background:transparent; color:#155e63; border:1.5px solid #155e63; font-size:1rem; padding:6px 18px; border-radius:6px; transition:background 0.2s, color 0.2s, border-color 0.2s;}

.inline-style-5 {margin-right:6px;}

.inline-style-6 {background:transparent; color:#155e63; border:1.5px solid #155e63; font-size:1rem; padding:6px 18px; border-radius:6px; transition:background 0.2s, color 0.2s, border-color 0.2s;}

.inline-style-7 {margin-right:6px;}

.inline-style-8 {background:#155e63;margin-top: -27px;}

.inline-style-9 {background:#f8fafc;}

.inline-style-10 {background:#fff; border-radius:20px;}

.inline-style-11 {color:#155e63; font-weight:700;}

.inline-style-12 {display:inline-block;}

.inline-style-13 {color:#155e63; font-size:2em;}

.inline-style-14 {color:#155e63;}

.inline-style-15 {margin-bottom:8px;}

.inline-style-16 {font-size:2.2em; color:#155e63;}

.inline-style-17 {font-size:1em; color:#155e63;}

.inline-style-18 {margin-bottom:8px;}

.inline-style-19 {font-size:2.2em; color:#155e63;}

.inline-style-20 {font-size:1em; color:#155e63;}

.inline-style-21 {margin-bottom:8px;}

.inline-style-22 {font-size:2.2em; color:#155e63;}

.inline-style-23 {font-size:1em; color:#155e63;}

.inline-style-24 {margin-bottom:8px;}

.inline-style-25 {font-size:2.2em; color:#155e63;}

.inline-style-26 {font-size:1em; color:#155e63;}

.inline-style-27 {color:#155e63; font-size:1.15em;}

.inline-style-28 {background:#f8fafc;}

.inline-style-29 {color:#155e63; font-weight:700;}

.inline-style-30 {font-size:0.95em;}

.inline-style-31 {color:#155e63;}

.inline-style-32 {color:#155e63;}

.inline-style-33 {color:#155e63;}

.inline-style-34 {color:#155e63;}

.inline-style-35 {background:#f4f8fb;}

.inline-style-36 {color:#155e63; font-weight:700;}

.inline-style-37 {color:#155e63;}

.inline-style-38 {color:#155e63;}

.inline-style-39 {border-radius:18px; background:#fff;}

.inline-style-40 {color:#155e63;}

.inline-style-41 {font-size:0.98em; color:#555;}

.inline-style-42 {font-size:0.98em; color:#555;}

.inline-style-43 {font-size:0.98em; color:#555;}

.inline-style-44 {font-size:0.98em; color:#555;}

.inline-style-45 {border-radius:18px; background:#fff;}

.inline-style-46 {color:#155e63;}

.inline-style-47 {font-size:0.98em; color:#555;}

.inline-style-48 {font-size:0.98em; color:#555;}

.inline-style-49 {font-size:0.98em; color:#555;}

.inline-style-50 {font-size:0.95em;}

.inline-style-51 {font-size:0.98em; color:#555;}

.inline-style-52 {height:40px; margin-right:10px;}


ul.clean-list { color: #555; }          /* container text color */
ul.clean-list li { color: #6b6b6b; }    /* individual list item color */


/* ===============================
   OUR SERVICES SECTION STYLES
================================= */
.services-section {
  background: #f9fdfd;
  padding-top: 60px;
  padding-bottom: 70px;
}

/* ===== Banner (left image) ===== */
.services-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(12, 139, 135, 0.08);
  background: #fff;
  height: 220px;
  width: 100%;
}

.services-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  border-radius: 16px;
}

.services-banner:hover img {
  transform: scale(1.03);
}

/* Teal overlay */
.services-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(21,94,99,0.25), rgba(12,139,135,0.15));
  pointer-events: none;
  border-radius: 16px;
}

/* ===== Intro (right text) ===== */
.intro-text {
  color: #555;
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: 0;
  margin-bottom: 0;
}

/* Key points list */
.service-points {
  list-style: none;
  padding-left: 0;
  margin-top: 12px;
}

.service-points li {
  font-size: 0.95rem;
  color: #155e63;
  line-height: 1.7;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== Cards ===== */
.service-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(12, 139, 135, 0.08);
  background: #fff;
  border-radius: 16px;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(12, 139, 135, 0.15);
}

/* ===== List inside cards ===== */
.clean-list {
  color: #155e63;
  font-size: 0.95em;
  text-align: left;
  padding-left: 18px;
  list-style-type: disc;
  line-height: 1.7;
  margin-bottom: 0;
}

.clean-list li {
  margin-bottom: 4px;
  word-break: break-word;
}

/* ===== Section title hover ===== */
#services h2 i {
  transition: transform 0.3s ease;
}
#services h2:hover i {
  transform: scale(1.1);
}

/* ===== Responsive adjustments ===== */
@media (min-width: 992px) {
  .services-section .row.align-items-center {
    align-items: center !important;
  }
}

@media (max-width: 991px) {
  .services-banner {
    height: 200px;
  }

  .intro-text {
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  .services-section {
    padding-top: 40px;
    padding-bottom: 50px;
  }

  .services-banner {
    height: 180px;
  }

  .service-card {
    text-align: left;
  }
}

/* Ensure card lists and bullet items use the main content color */
.service-card,
.service-card p,
.service-card .clean-list,
.service-card .clean-list li {
  color: #555 !important;
}

/* keep list marker color subtle and consistent */
.service-card .clean-list {
  color: #555;                /* item text */
  list-style-type: disc;
  padding-left: 18px;
}

/* if you want the disc marker slightly darker/lighter, use this */
.service-card .clean-list li::marker {
  color: #6b6b6b;             /* optional: adjust marker shade */
}


/* how we work */
.process-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(12, 139, 135, 0.08);
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(12, 139, 135, 0.15);
}

.clean-list {
  color: #555;
  font-size: 0.95em;
  text-align: left;
  padding-left: 20px;
  list-style-type: disc;
  line-height: 1.7;
  margin-bottom: 0;
}

.clean-list li {
  margin-bottom: 4px;
  word-break: break-word;
}

@media (max-width: 768px) {
  .process-card {
    text-align: left;
  }
}

/* why choose us */
.why-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(12, 139, 135, 0.08);
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(12, 139, 135, 0.15);
}

.clean-list {
  color: #155e63;
  font-size: 0.95em;
  text-align: left;
  padding-left: 20px;
  list-style-type: disc;
  line-height: 1.7;
  margin-bottom: 0;
}

.clean-list li {
  margin-bottom: 5px;
  word-break: break-word;
}

blockquote {
  background: #f8fafc;
  border-radius: 6px;
  margin: 10px 0;
}
/* who We Serve */

.serve-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(12, 139, 135, 0.08);
}

.serve-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(12, 139, 135, 0.15);
}

.clean-list {
  color: #155e63;
  font-size: 0.95em;
  text-align: left;
  padding-left: 20px;
  list-style-type: disc;
  line-height: 1.7;
  margin-bottom: 0;
}

.clean-list li {
  margin-bottom: 5px;
  word-break: break-word;
}

@media (max-width: 768px) {
  .serve-card {
    text-align: left;
  }
}

/* join our team */
.benefit-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(12, 139, 135, 0.08);
}

.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(12, 139, 135, 0.15);
}

#join-our-team a.btn:hover {
  background:#155e63;
  transition: all 0.3s ease;
}
/* ==============================
   Contact Section Styles
============================== */

#contact .form-control {
  border: 1px solid #dcdcdc;
  box-shadow: none;
  font-size: 15px;
  color: #555;
  padding: 12px 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
}

/* Universal placeholder styling for all input + textarea */
#contact .form-control::placeholder,
#contact input[type="text"]::placeholder,
#contact input[type="email"]::placeholder,
#contact input[type="tel"]::placeholder,
#contact input[type="subject"]::placeholder,
#contact textarea::placeholder {
  color: #999 !important;
  opacity: 1;
  font-size: 0.95em;
  font-weight: 400;
  font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif;
}

/* Textarea consistency */
#contact textarea.form-control {
  line-height: 1.6;
  resize: vertical;
}

/* Focus state */
#contact .form-control:focus {
  border-color: #0c8b87;
  box-shadow: 0 0 0 0.15rem rgba(12, 139, 135, 0.1);
}

/* Button styling */
#contact .btn {
  background-color: #0c8b87;
  border: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: all 0.3s ease;
}

#contact .btn:hover {
  background-color: #155e63 !important;
}

/* Links */
#contact a {
  color: #0c8b87;
  text-decoration: none;
  transition: color 0.3s ease;
}
#contact a:hover {
  text-decoration: underline;
}

/* Contact image */
#contact .contact-image {
  border-bottom: 1px solid #f1f3f3;
  transition: transform 0.4s ease;
}
#contact .contact-image:hover {
  transform: scale(1.03);
}

/* Icon alignment */
#contact .bi {
  min-width: 28px;
  text-align: center;
  color: #0c8b87;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  #contact .contact-image {
    height: 200px;
  }
}
/* ============================
   ABOUT US SECTION
============================ */
.about-section {
  background: #f8fafc;
  padding-top: 40px;   /* reduced from 80px */
  padding-bottom: 60px;
  overflow: hidden;
  margin-top: 0 !important;
}
body.has-fixed-navbar #about {
  scroll-margin-top: 80px; /* ensures smooth scroll positions correctly */
}
.about-section .section-title {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.about-section .section-title h2 {
  color: #155e63;
  font-weight: 700;
  font-size: 2rem;
  margin: 0;
}

.about-section p {
  color: #555;
  font-size: 1.05em;
  line-height: 1.9;
  margin-bottom: 1rem;
  text-align: justify;
}

.about-section .highlight-box {
  border-left: 5px solid #0c8b87;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.about-section .highlight-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.about-image img {
  border-radius: 20px;
  transition: transform 0.5s ease;
}

.about-image:hover img {
  transform: scale(1.05);
}

#readMoreBtn {
  background: #0c8b87;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  transition: all 0.3s ease;
}

#readMoreBtn:hover {
  background: #155e63;
  transform: translateY(-2px);
}

/* ============================
   VALUES SECTION
============================ */
.values-section {
    
  background: linear-gradient(180deg, #ffffff 0%, #f9fdfd 100%);
  /*padding: 80px 0;*/
}

.values-section h3 {
  color: #155e63;
  font-weight: 700;
  font-size: 1.9rem;
  margin-bottom: 2.5rem;
}

.value-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.8rem;
  box-shadow: 0 4px 12px rgba(12, 139, 135, 0.05);
  transition: all 0.3s ease;
}

.value-card i {
  font-size: 2em;
  color: #0c8b87;
}

.value-card h6 {
  margin-top: 1rem;
  font-weight: 600;
  color: #0c8b87;
}

.value-card p {
  font-size: 0.9em;
  color: #555;
  margin: 0.5rem 0 0;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(12, 139, 135, 0.15);
}

/* Responsive */
@media (max-width: 992px) {
  .about-section {
    padding: 60px 0;
  }
  .about-image img {
    min-height: 320px;
  }
}
#about,
#about .container {
  margin-top: 0 !important;
}

.about-section {
  padding-top: 40px !important;
}

/* support care */
/* .map-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(12, 139, 135, 0.15);
  background: #ffffff;
  max-width: 900px;
  margin: 0 auto;
}
#coverageMap {
  width: 100%;
  height: 450px;
  border-radius: 20px;
}
.zoom-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #0c8b87;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}
.zoom-toggle:hover {
  background: #155e63;
}
.map-tooltip {
  background: #ffffff;
  color: #155e63;
  border: 1px solid #0c8b87;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(12, 139, 135, 0.15);
  line-height: 1.4;
} */
/* ===== Coverage Section ===== */
.coverage-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfc 100%);
}

.coverage-section h2 {
  font-weight: 700;
  color: #155e63;
}

.coverage-section i {
  color: #0c8b87;
  transition: transform 0.3s ease;
}

.coverage-section:hover i {
  transform: scale(1.1);
}

/* ===== Text ===== */
.coverage-text {
  color: #555;
  font-size: 1.05em;
  line-height: 1.9;
  max-width: 850px;
}

/* ===== Map Container ===== */
.coverage-map-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(12, 139, 135, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.coverage-map-wrapper:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 35px rgba(12, 139, 135, 0.15);
}

/* Map element (Leaflet or static image) */
#coverageMap {
  width: 100%;
  height: 400px;
  border-radius: 16px;
  background-color: #d8f3f1; /* fallback if map not loaded */
}

/* ===== Zoom Button ===== */
.zoom-toggle {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: #0c8b87;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(12, 139, 135, 0.2);
}

.zoom-toggle:hover {
  background: #155e63;
  transform: translateY(-2px);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .coverage-text {
    font-size: 1em;
    line-height: 1.8;
    padding: 0 10px;
  }
  #coverageMap {
    height: 300px;
  }
}