/* =========navbar start============ */
.top-bar { 
  background: #fff;
  padding: 4px 0;
  font-size: 13px;
  z-index: 1040; 
}

.top-info { 
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  flex-wrap: wrap; /* agar chhoti screen ho to line break kar sake */
}

.top-info div { 
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* ensure aik hi line mein rahe */
  gap: 6px; 
  font-weight: 400; 
  font-size: 14px; 
  color: #444; 
  border-left: 1px solid green; 
  padding: 6px 10px;
  white-space: nowrap; /* text break hone se rokta hai */
}

.top-info i { 
  color: green; 
  font-size: 18px; /* chhoti elegant size */
}

.logo-img {
  width: 35%;
}


    @media (max-width:768px) {
      .top-info i { 
        font-size:20px; 
    }
      .top-info div {
         border:none; 
         padding:0; 
         font-size:15px; 
        }
    }
    @media (max-width:425px) {
       .logo-img{
        width:30%;
    }
    }

    .navbar { 
        background-color: green; 
        color:white; 
        z-index:1030; 
    }
    .navbar-nav .nav-link { 
        color:#fff !important; 
        padding: 20px 24px; 
        font-weight:600; 
        font-size:18px; 
        margin-right:5px; 
        position: relative; 
        border-bottom:2px solid green; 
        transition: all 0.3s ease; 
    }
    .navbar-nav .nav-link::after { 
        content:"";
        position:absolute; 
        left:50%; 
        bottom:6px; 
        transform:translateX(-50%); 
        width:0; height:2px; 
        background:white; 
        transition: width 0.3s ease; 
    }
    .navbar-nav .nav-link:hover::after,
     .navbar-nav .nav-link.active::after { 
        width:60%; 
    }
    .navbar-nav .nav-link:hover, 
    .navbar-nav .nav-link.active { 
        color:white !important; 
    }
 .navbar-toggler,
 .navbar-toggler:hover,
 .navbar-toggler:focus,
 .navbar-toggler:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

    .dropdown-menu { 
        background: transparent !important;
        border-radius:0 !important; 
        border:none !important; 
        }
    .dropdown-item { 
        background:white !important; 
        color:green !important; 
        font-weight:600 !important; 
        border-bottom:1px solid green !important; 
        padding:15px 50px !important; 
    }
    .dropdown-item:hover,
     .dropdown-item.active { 
        background-color: green !important; 
        color:white !important; 
    }

    .quote-btn { 
        background:transparent ; 
        color:white ; 
        font-weight:600 ; 
        border:2px solid white ; 
        padding:12px 22px ; 
        text-transform:uppercase ; 
        letter-spacing:0.5px ; 
        text-decoration: none;
        border-radius:0 ;
    }

    .offcanvas { 
        background-color: green !important; 
        color: #fff !important; 
        text-align: center !important; 
    }
    .offcanvas-body .nav-link,
     .offcanvas-body .dropdown-item {
        color:white !important; 
        border-bottom:1px solid white !important; 
        background-color:transparent !important; 
        padding:15px; font-size:18px !important; 
    }

    @media (max-width:768px) {
         .navbar-nav .nav-link { 
            padding:12px 16px !important; 
            font-size:15px !important;
         } 
        }
        /* =====button effect====== */
        /* Button Base */
.button_effect {
  position: relative;
  padding: 14px 40px;
  background: transparent;
  color: #fff;
  border: 2px solid white;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* Liquid overlay */
.button_effect::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgb(248, 250, 248), white);
  z-index: -1;
  transition: all 0.4s ease;
}

/* Hover effect — liquid rises */
.button_effect:hover::before {
  top: 0;
}

/* Text turns dark when filled */
.button_effect:hover {
  color: green;
  border:2px solid white;
  font-weight: 700;
}