.logo {
      display: flex;
      align-items: center;
      height: 100%;
      width: 40%;
      padding: 0;
    }

    .logo img {
      height: 60px;
      width: auto;
      display: block;
      object-fit: contain;
      transition: height 0.3s ease;
    }

    
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background-color: white;
      transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
      overflow: hidden;
    }

   

    .nav_section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 60px;
      width: 100%;
    }

  .nav_links {
  display: flex;
  flex-wrap: wrap;

  list-style: none;
  width: 60%;
  gap: 20px;
}



    .nav_links li a {
      color: black;
      text-decoration: none;
      font-size: 1.2rem;
      transition: 0.3s;
      position: relative;
    }

    /* Centered Hover Underline */
    .nav_links li a::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0%;
      height: 2px;
      background-color: orange;
      transform: translateX(-50%);
      transition: width 0.3s ease;
    }

    .nav_links a:hover::after {
      width: 100%;
    }

    /* Ripple Effect on Click */
    .nav_links a .ripple {
      position: absolute;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 165, 0, 0.4);
      animation: rippleAnim 0.5s linear forwards;
      pointer-events: none;
      z-index: 1;
    }

    @keyframes rippleAnim {
      from {
        width: 0;
        height: 0;
        opacity: 1;
      }

      to {
        width: 250px;
        height: 250px;
        opacity: 0;
      }
    }

    /* Dropdown Menu Styling */
    .dropdown {
      position: relative;
    }

    .dropdown_menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 40px;
      left: 0;
      background-color: #f4f2f9;
      list-style: none;
      padding: 10px 0;
      border-radius: 8px;
      min-width: 180px;
      z-index: 9999;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    .dropdown_menu li {
      padding: 10px 15px;
    }

    .dropdown_menu li a {
      color: rgb(21, 20, 20);
      display: block;
    }

    .dropdown_menu li a:hover {
      background-color: #30204d;
      color: orange;
    }

    /* Show menu on hover */
    .dropdown.show .dropdown_menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    nav,
    header,
    .nav_section {
      overflow: visible !important;
    }

     /* Custom Cursor */
    .cursor {
     position: fixed;
     width: 30px;
     height: 30px;
     border: 2px solid orange;
     border-radius: 50%;
     pointer-events: none; /* VERY IMPORTANT */
     transform: translate(-50%, -50%);
     transition: transform 0.2s ease, background 0.2s ease;
     z-index: 10000;
}

/* MOBILE MENU STYLES */
.hamburger {
  display: none;
  color: black;
}

.hamburger i {
  font-size: 25px;
  transition: transform 0.3s ease;
}

/* ✅ CHANGE: Hamburger rotates when active */
.hamburger.open i {
  transform: rotate(90deg);
}

/* ✅ MOBILE VIEW (Up to 900px) */
@media (max-width: 900px) {
  .nav_links {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 80px; /* space below header */
    left: 0;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    transition: none !important;
  }

  .nav_links.active {
    display: flex;
  }

  /* ✅ Dropdown Menu Base */
  .dropdown_menu {
    display: none;
    position: static;
    background-color: #f4f2f9;
    box-shadow: none;
    border-radius: 8px;
    padding: 5px 0;
    transition: none !important;
  }

  /* ✅ Instant open dropdowns when clicked */
  .dropdown.open .dropdown_menu {
    display: block !important;
  }

  .dropdown_menu li a:hover {
    background-color: #30204d;
    color: orange;
  }

  .hamburger {
    display: block;
    color: black;
  }
}


/*     */
     /*footer */
   
     
    .footer {
               display: grid;
               grid-template-columns: 1fr 1fr 1fr 1fr;
               gap: 60px;
               background-color: #fff;
               padding: 40px 60px;
               box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
               color: black;
               width: 100%;
              
          
          }

          /* Left Section */
          .footer-left img {
               width: 220px;
               display: block;
               margin-bottom: 10px;
          }

          .tagline {
               font-size: 14px;
               font-weight: bold;
               color: #00aa00;
               margin-bottom: 15px;
               font-family: cursive;
          }

          .footer-left p {
               font-size: 14px;
               line-height: 1.5;
               margin-bottom: 20px;
               font-weight: bold;
          }

          .footer-left strong {
               font-weight: 700;
          }

          .contact-info {
               display: flex;
               align-items: center;
               margin-bottom: 8px;
               font-size: 14px;
               font-weight: bold;
               padding: 5px;
            padding-left: 0px;
          }

          .contact-info i {
               margin-right: 5px;
             

          }
          .contact-info a {
               text-decoration: none;
               color: black;
          }

          /* Middle Section */
          .footer h2 {
               font-size: 20px;
               font-weight: 700;
               margin-bottom: 15px;
               text-align: left;
               margin-left: 10px;
          }

          .footer-links  a {
               display: inline-block;
               text-decoration: none;
               color: #333;
               font-size: 14px;
               margin-bottom: 8px;
               transition: color 0.3s ease;
               font-weight: bold;
               font-size: 1rem;
               padding: 10px;
               
               
          }
          .footer-links ul li {
            list-style: none;
          }

          .footer-links a:hover {
               color: blue;
            border-bottom: 2px solid orange;
               
          }
          .copyright{
              background-color: #d9d7db;

               padding: 20px;
               font-size: 20px;
               text-align: center;
               color: black;
               font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
              
          }
          .copyright a{
               text-decoration: none;
               color: black;
          }

      /* ✅ MOBILE VIEW (Up to 768px) */
@media (max-width: 768px) {
  .footer {
    grid-template-columns: 1fr;
    text-align: left; /* ✅ Left align everything */
    padding: 40px 20px; /* better spacing for mobile */
  }

  .footer h2 {
    text-align: left; /* ✅ Heading left */
  }

  .footer p,
  .footer a {
    text-align: left; /* ✅ Paragraphs & links left */
  }

  .contact-info {
    justify-content: flex-start; /* ✅ Align icons left */
    text-align: left;
  }

  .footer .social-icons {
    justify-content: flex-start; /* ✅ Social icons left */
  }
}

/* 💻 For Small PCs / Laptops (769px to 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
  .footer {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    text-align: left;
    padding: 60px 50px;
  }

  .footer h2 {
    font-size: 22px;
    text-align: left;
  }

  .footer p,
  .footer a {
    font-size: 15px;
    line-height: 1.7;
  }

  .contact-info {
    justify-content: flex-start;
    gap: 20px;
  }

  .footer .social-icons {
    justify-content: flex-start;
    gap: 15px;
  }
}

/*whatsapp icon */
          .whatsapp-float {
               position: fixed;
               width: 60px;
               height: 60px;
               bottom: 20px;
               right: 20px;
               /* background-color: #25D366; */
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
               z-index: 1000;
               transition: transform 0.3s ease, bottom 0.3s ease;
          }

          .whatsapp-float:hover {
               transform: scale(1.1);
          }

          .whatsapp-float img {
               width: 60px;
               height: 60px;
          }

          .notification-dot {
               position: absolute;
               top: 8px;
               right: 10px;
               width: 12px;
               height: 12px;
               background-color: rgb(252, 29, 29);
               border-radius: 50%;
               border: 2px solid white;
          }

          @media (max-width: 600px) {
               .whatsapp-float {
                    width: 50px;
                    height: 50px;
                    bottom: 15px;
                    right: 15px;
               }

               .whatsapp-float img {
                    width: 45px;
                    height: 45px;
               }

               .notification-dot {
                    width: 10px;
                    height: 10px;
                    top: 6px;
                    right: 8px;
               }

               .notification-dot {
                    position: absolute;
                    top: 8px;
                    right: 10px;
                    width: 10px;
                    height: 10px;
                    background-color: red;
                    border-radius: 50%;
                    border: 2px solid white;
               }
          }

          /* Medium devices (tablets) */
          @media (min-width: 601px) and (max-width: 1024px) {
               .whatsapp-float {
                    width: 55px;
                    height: 55px;
                    bottom: 18px;
                    right: 18px;
               }

               .whatsapp-float img {
                    width: 50px;
                    height: 50px;
               }

          }
          /* 💻 For Small PCs / Laptops (700px to 1200px) */
@media (min-width: 700px) and (max-width: 1200px) {
     .whatsapp-float {
          width: 65px;
          height: 65px;
          bottom: 25px;
          right: 25px;
          transition: all 0.3s ease;
     }

     .whatsapp-float img {
          width: 60px;
          height: 60px;
     }

     .notification-dot {
          position: absolute;
          top: 10px;
          right: 12px;
          width: 12px;
          height: 12px;
          background-color: red;
          border-radius: 50%;
          border: 2px solid white;
     }
}