/* --- General Reset & Variables (From Index) --- */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
  }

  html {
      scroll-behavior: smooth;
  }

  :root {
      --primary-yellow: #fbbc05;
      --dark-gray: #333333;
      --light-gray: #e9ecef;
      --text-gray: #666666;
      --white: #ffffff;
  }

  body {
      color: var(--dark-gray);
      line-height: 1.6;
      overflow-x: hidden;
      /* Prevent side scrolling */
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  ul {
      list-style: none;
  }

  .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 15px;
      /* Added responsive padding */
  }

  /* ========================================= */
  /* ======== SCROLL ANIMATION CLASSES ======= */
  /* ========================================= */
  .animate-on-scroll {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .animate-on-scroll.scrolled {
      opacity: 1;
      transform: translateY(0);
  }

  /* --- Top Bar (From Index) --- */
  .top-bar {
      background-color: #767676;
      color: var(--white);
      font-size: 15px;
      font-weight: 400;
      padding: 10px 0;
  }

  .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
  }

  .top-bar-left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
  }

  .top-bar-left span {
      margin-right: 15px;
      display: flex;
      align-items: center;
  }

  .top-bar-left i {
      margin-right: 10px;
      font-size: 16px;
      color: white;
  }

  .top-bar-right {
      display: flex;
      align-items: center;
      gap: 25px;
  }

  .top-bar-right a {
      color: var(--white);
      font-size: 16px;
      transition: color 0.3s;
      display: flex;
      align-items: center;
  }

  .top-bar-right a:hover {
      color: var(--primary-yellow);
  }

  /* --- Header / Navbar (From Index) --- */
  header {
      background: var(--white);
      padding: 15px 0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      position: relative;
      top: 0;
      z-index: 1000;
  }

  header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

 .logo img {
        width: 350px;
    }

  /* Mobile Menu UI - Hidden by default on desktop */
  .menu-toggle {
      display: none;
  }

  .menu-header {
      display: none;
  }

  .close-menu {
      display: none;
  }

  .menu-overlay {
      display: none;
  }

  .nav-menu {
      display: flex;
      align-items: center;
      gap: 25px;
      font-weight: 600;
      font-size: 17px;
  }

  .nav-menu li.active>a {
      background: var(--primary-yellow);
      padding: 15px 16px;
      border-radius: 10px;
      color: var(--dark-gray);
  }

  /* Active Menu Dropdown Support */
  .nav-menu li.active-menu>a {
      background: var(--primary-yellow);
      padding: 15px 16px;
      border-radius: 10px;
      color: var(--dark-gray);
  }

  .nav-menu li.active-menu .dropdown a {
      background: transparent;
      padding: 10px 20px;
      border-radius: 0;
  }

  .nav-menu li.active-menu .dropdown a:hover {
      background-color: var(--light-gray);
  }

  /* --- Dropdown Menu Styles (From Index) --- */
  .has-dropdown {
      position: relative;
      padding: 10px 0;
  }

  .dropdown {
      display: none;
      position: absolute;
      /* top: 100%; */
      left: 0;
      background-color: var(--white);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      min-width: 210px;
      padding: 10px 0;
      border-radius: 4px;
      z-index: 1001;
  }

  .has-dropdown:hover .dropdown {
      display: block;
  }

  .dropdown li {
      width: 100%;
  }

  .dropdown li a {
      display: block;
      padding: 10px 20px;
      color: var(--dark-gray);
      font-weight: 400;
      font-size: 14px;
      transition: background 0.3s, color 0.3s;
  }

  .dropdown li a:hover {
      background-color: var(--light-gray);
  }

  /* --- Page Hero Banner --- */
  .page-banner {
      /* height: 500px; */
      padding-top: 200px;
      padding-bottom: 200px;
      padding-left: 0px;
      padding-right: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--white);
      position: relative;
      background-image: url(../images/general-lnsurance-banner.jpg);
      background-repeat: no-repeat;
      background-size: cover;
  }

  .page-banner::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background-color: #00000078;
      width: 100%;
      height: 100%;
  }

  .page-banner h1 {
      font-size: 37px;
      font-weight: 600;
      font-family: 'Roboto', sans-serif;
      position: relative;
      padding-left: 720px;
      /* Kept for desktop */
  }

  /* --- Main Content Section --- */
  .life-insurance-main {
      padding: 50px 15px 30px 15px;
  }

  /* Top Layout (Sidebar + Image) */
  .top-layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 30px;
      margin-bottom: 40px;
      align-items: stretch;
  }

  /* Left Side Sub-Navigation */
  .side-nav {
      display: flex;
      flex-direction: column;
      gap: 15px;
      justify-content: center;
  }

  .side-nav-btn {
      background-color: #a0a0a0;
      color: var(--white);
      padding: 20px 20px 20px 20px;
      border-radius: 12px;
      font-size: 20px;
      font-weight: 600;
      text-align: left;
      transition: background-color 0.3s, color 0.3s;
      cursor: pointer;
      line-height: 1.4;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 40px;
      padding-right: 40px;
  }

  .side-nav-btn:hover {
      background-color: var(--primary-yellow);
      color: var(--dark-gray);
  }

  .side-nav-btn.active {
      background-color: var(--primary-yellow);
      color: #000;
      font-weight: 600;
  }

  /* Right Side Image */
  .main-image-container {
      height: 100%;
  }

  .main-image-container .main-img {
      width: 740px;
      max-width: 100%;
      /* Important for responsiveness */
      min-height: 320px;
      border-radius: 20px;
      object-fit: cover;
  }

  /* Full Width Text Content */
  .text-content {
      padding-top: 5px;
  }

  .yellow-heading {
      font-size: 30px;
      color: #fabd05;
      margin-top: 25px;
      margin-bottom: 15px;
      font-weight: 600;
      scroll-margin-top: 30px;
      font-family: 'Roboto', sans-serif;
  }

  .yellow-heading:first-child {
      margin-top: 0;
  }

  .text-content p {
      color: #7a7a7a;
      margin-bottom: 15px;
      font-size: 17.5px;
      line-height: 1.8;
      text-align: justify;
  }

  /* --- Why Choose Us Section --- */
  .why-choose-us {
      background-color: #ffffff;
      padding: 10px 0 30px 0;
  }

  .section-title.text-center {
      text-align: center;
      font-size: 30px;
      color: black;
      margin-bottom: 30px;
      font-weight: 500;
      font-family: 'Poppins', sans-serif;
  }

  .why-choose-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: center;
  }

  .why-choose-img img {
      width: 100%;
      border-radius: 10px;
      object-fit: cover;
      height: 400px;
  }

  .why-choose-list li {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      font-size: 15px;
      color: var(--text-gray);
      font-weight: 500;
  }

  .why-choose-list i {
      margin-right: 15px;
      color: var(--primary-yellow);
      font-size: 18px;
  }

  /* --- Partners Slider --- */
  .partners {
      text-align: center;
      padding-bottom: 50px;
      overflow: hidden;
      font-family: "Roboto", Sans-serif;
      font-size: 25px;
      font-weight: 600;
      color: #000000;
  }

 .partners-logos {
        display: flex;
        gap: 20px;
        /* Logos ke beech ka space */
      
        overflow-x: auto;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
       
        cursor: grab;
        height: 170px;
       
    }

  .partners-logos.active {
      cursor: grabbing;
      scroll-behavior: auto;
      /* Drag karte time smooth behavior off rakhte hain */
  }

  .partners-logos::-webkit-scrollbar {
      display: none;
  }

  /* Yahan par logic hai exactly 4 show karne ka */
  .partners-logos img {
 
      /* Equal height set karne ke liye */
      object-fit: cover;
      /* Image stretch nahi hogi */
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 5px;
      user-select: none;
      pointer-events: none;
  }

  /* Responsive screens ke liye (3, 2, 1 items adjust) */
  @media (max-width: 992px) {
      
  }

  @media (max-width: 768px) {
          .logo img {
        width: 250px !important;
    }
  }

  @media (max-width: 480px) {
      
  }

  /* --- Footer --- */
  footer {
      background-color: #2a2a2a;
      color: #e9ecef;
      padding: 40px 15px 20px;
      font-size: 15.5px;
      position: relative;
      background-image: url(../images/footer.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center right;
  }

  footer::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background-color: #00000078;
      width: 100%;
      height: 100%;
  }

  .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      position: relative;
  }

  .footer-logo {
      padding: 0;
      display: inline-flex;
      border-radius: 4px;
      position: relative;
  }

  .footer-logo img {
       width: 500px;
    }
  .footer-social {
      display: flex;
      gap: 12px;
      position: relative;
  }

  .footer-social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      color: var(--white);
      transition: 0.3s;
      font-size: 14px;
  }

  .footer-social a:hover {
      background: var(--primary-yellow);
      border-color: var(--primary-yellow);
      color: var(--dark-gray);
  }

  .footer-divider {
      border: 0;
      height: 1px;
      background: rgb(255 255 255 / 59%);
      margin: 0 0 40px 0;
      position: relative;
  }

  .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
      gap: 30px;
      margin-bottom: 40px;
      position: relative;
  }

  .footer-col h4 {
      color: #ffffff;
      margin-bottom: 25px;
      font-size: 22px;
      font-weight: 600;
  }

  .footer-col p {
      line-height: 1.8;
      color: #ffffff;
  }

  .footer-col ul li {
      margin-bottom: 12px;
  }

  .footer-col ul li a {
      color: #d1d1d1;
      transition: 0.3s;
      font-weight: 600;
  }

  .footer-col ul li a:hover {
      color: var(--primary-yellow);
  }

  .footer-contact li {
      display: flex;
      margin-bottom: 18px;
      color: white;
      align-items: flex-start;
      font-weight: 500;
  }

  .footer-contact i {
      margin-right: 15px;
      margin-top: 5px;
      color: var(--white);
      font-size: 16px;
  }

  .footer-bottom {
      text-align: center;
      padding-top: 0;
      padding-bottom: 20px;
      font-size: 16px;
      color: #fffbfb;
      font-weight: 500;
      position: relative;
  }

  /* --- Floating Buttons --- */
  .float-wa {
      position: fixed;
      bottom: 30px;
      left: 30px;
      width: 55px;
      height: 55px;
      background-color: #25d366;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      transition: background-color 0.3s;
  }

  .float-wa:hover {
      background-color: #1ebe57;
      color: white;
  }

  .float-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 35px;
      height: 35px;
      background-color: #f7c307;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      border-radius: 4px;
      transition: background-color 0.3s;
  }

  .float-top:hover {
      background-color: #e0a800;
  }

  /* ========================================= */
  /* ======== RESPONSIVE MEDIA QUERIES ======= */
  /* ========================================= */

  @media (max-width: 992px) {
      .footer-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .page-banner h1 {
          padding-left: 0;
          /* Resetting padding for smaller screens */
      }
  }

  @media (max-width: 768px) {

      .top-bar .container {
          flex-direction: column;
          gap: 10px;
          text-align: center;
      }

      .top-bar-left,
      .top-bar-right {
          justify-content: center;
          width: 100%;
      }

      /* --- Left Side Slide-in Menu Styles --- */
      .menu-toggle {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: #333;
          cursor: pointer;
          border: 1px solid #ccc;
          padding: 6px 12px;
          border-radius: 4px;
      }

      .menu-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.6);
          z-index: 1500;
      }

      .menu-overlay.active {
          display: block;
      }

      .nav-menu {
          position: fixed;
          top: 0;
          left: -300px;
          /* Hide off screen initially */
          width: 280px;
          height: 100vh;
          background: var(--white);
          flex-direction: column;
          align-items: flex-start;
          padding: 0;
          gap: 0;
          box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
          transition: left 0.3s ease;
          z-index: 2000;
          overflow-y: auto;
      }

      .nav-menu.active {
          left: 0;
          /* Slide in to view */
      }

      .menu-header {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border-bottom: 1px solid #ddd;
          background: #fff;
          position: sticky;
          top: 0;
          z-index: 10;
      }

      .mobile-menu-logo {
          height: 40px;
      }

      .close-menu {
          display: block;
          font-size: 24px;
          cursor: pointer;
          color: var(--dark-gray);
          border: 1px solid #ccc;
          padding: 4px 10px;
          border-radius: 4px;
      }

      .nav-menu li {
          width: 100%;
          border-bottom: 1px solid var(--light-gray);
      }

      .nav-menu li:last-child {
          border-bottom: none;
      }

      .nav-menu li a {
          display: block;
          padding: 15px 20px;
          font-size: 16px;
      }

      .nav-menu li.active>a {
          background: transparent;
          /* Remove pill shape on mobile */
          color: var(--primary-yellow);
          padding: 15px 20px;
          border-radius: 0;
      }

      .nav-menu li.active-menu>a {
          background: transparent;
          color: var(--primary-yellow);
          padding: 15px 20px;
          border-radius: 0;
      }

      /* Fix dropdown for side menu */
      .has-dropdown .dropdown {
          position: relative;
          box-shadow: none;
          background: #f8f8f8;
          padding: 0;
          min-width: 100%;
          display: none;
          /* ADDED: Hidden by default on mobile */
      }

      /* ADDED: Disable hover opening on mobile */
      .has-dropdown:hover .dropdown {
          display: none;
      }

      /* ADDED: Show only when active class is added by clicking */
      .has-dropdown.active .dropdown {
          display: block;
      }

      /* ADDED: Smoothly rotate the arrow when clicked */
      .has-dropdown>a i {
          transition: transform 0.3s ease;
      }

      .has-dropdown.active>a i {
          transform: rotate(180deg);
      }

      .dropdown li {
          border-bottom: none;
      }

      .dropdown li a {
          padding-left: 40px;
          font-size: 15px;
      }

      /* --------------------------------- */

      .top-layout {
          grid-template-columns: 1fr;
      }

      .why-choose-grid {
          grid-template-columns: 1fr;
      }

     .footer-grid {
            /* grid-template-columns: 1fr; */
            text-align: left;
        }

        .footer-top {
            /* flex-direction: column; */
            gap: 20px;
        }

      .footer-contact li {
          justify-content: left;
          /* flex-direction: column; */
          align-items: center;
          text-align: center;
          gap: 10px;
      }

      .footer-contact i {
          margin-right: 0;
      }

      .partners h2 {
          font-size: 35px;
      }

      .page-banner {

          padding-top: 60px;
          padding-bottom: 60px;
          padding-left: 0px;
          padding-right: 0px;
      }

      
  }

  @media (max-width: 480px) {
      .top-bar-left {
          flex-direction: column;
          gap: 5px;
      }

      .top-bar-left span {
          margin-right: 0;
      }

      .page-banner h1 {
          font-size: 32px;
      }

      .partners h2 {
          font-size: 25px;
      }

      .page-banner {

          padding-top: 60px;
          padding-bottom: 60px;
          padding-left: 0px;
          padding-right: 0px;
      }

       .footer-grid {
            grid-template-columns: 1fr;
            text-align: left;
        }

        .footer-top {
            flex-direction: column;
            gap: 20px;
        }
        .footer-logo img {
            width: 330px;
        }
    }

    @media (max-width: 374px) {
        .footer-logo img {
            width: 300px;
        }
    }