 .input{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px 14px;
  outline:none;
  font-size:14px;
  transition:0.2s;
}

.input:focus{
  border-color:#ac881a;
  box-shadow:0 0 0 2px rgba(172,136,26,.15);
}



 body {
   font-family: 'Poppins', sans-serif;
 }


 html {
   scroll-behavior: smooth;
 }

 #scrollProducts,
 #scrollProjects,
 #scrollGallery {
   scroll-margin-top: 120px;
 }


 .card {
   transition: all .5s ease;
 }

 .card.show {
   opacity: 1;
   transform: translateY(0) scale(1);
   max-height: 1000px;
 }

 .card.hide {
   opacity: 0;
   transform: translateY(20px) scale(.96);
   max-height: 0;
   overflow: hidden;
   margin: 0;
   padding-top: 0;
   padding-bottom: 0;
   pointer-events: none;
 }

 .missionCard {
   width: 220px;
   padding: 30px 20px;
   background: white;
   border-radius: 22px;
   text-align: center;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
   transition: all .35s ease;
   cursor: pointer;
 }

 .missionCard h4 {
   font-weight: 600;
   margin-top: 18px;
   color: #3a2a05;
 }

 .missionCard p {
   font-size: 14px;
   color: #777;
   margin-top: 6px;
 }

 /* ICON */
 .missionIcon {
   width: 60px;
   height: 60px;
   margin: auto;
   border-radius: 50%;
   background: #f4efe3;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   transition: all .35s ease;
 }

 /* ===== HOVER GOLD ONLY ===== */
 .missionCard:hover {
   background: linear-gradient(135deg, #ac881a, #e0c36c);
   transform: translateY(-6px);
   box-shadow: 0 20px 40px rgba(172, 136, 26, 0.35);
 }

 .missionCard:hover h4,
 .missionCard:hover p {
   color: white;
 }

 .missionCard:hover .missionIcon {
   background: rgba(255, 255, 255, 0.2);
   color: white;
 }


 .blogText {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 72px;
 }

 .blogTitle {
   min-height: 56px;
 }



 .workCard {
   flex: 0 0 420px;
   /* FIX WIDTH */
 }

 /* Tablet */
 @media(max-width:1024px) {
   .workCard {
     flex: 0 0 320px;
   }
 }

 /* Mobile */
 @media(max-width:640px) {
   .workCard {
     flex: 0 0 100%;
   }
 }



 /* <---gaudan page css-----> */
 /* ===== FULL WIDTH LAYOUT ===== */
 .kp-container {
   width: 100%;
   display: flex;
   gap: 60px;
   padding: 40px 40px;
 }

 .kp-left {
   flex: 2;
 }

 .kp-right {
   flex: 1;
 }

 .kp-sticky {
   position: sticky;
   top: 30px;
 }

 /* ===== BOX (LESS RADIUS) ===== */
 .kp-box {
   background: white;
   padding: 46px;
   border-radius: 14px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
   margin-bottom: 28px;
 }


 .left-kp-box {
   background: white;
   padding: 16px;
   border-radius: 4px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
   margin-bottom: 28px;
 }

 /* ===== PRODUCTS ===== */
 .kp-products {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 22px;
 }

 .kp-product {
   background: white;
   padding: 18px;
   border-radius: 3px;
   text-align: center;
   box-shadow: 0 5px 18px rgba(0, 0, 0, .05);
 }

 .kp-product img {
   /* height: 350px; */
   margin: auto;
   object-fit: fill;
 }

 .kp-qty {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 10px;
 }

 .kp-qty button {
   background: #ac881a;
   color: white;
   width: 30px;
   height: 30px;
   border-radius: 6px;
 }

 .kp-buy {
   margin-top: 12px;
   background: #ac881a;
   color: white;
   padding: 10px;
   border-radius: 8px;
   width: 100%;
 }

 /* ===== DONATION ===== */
 .kp-donate-btn {
   padding: 10px;
   border: 1px solid #eee;
   border-radius: 8px;
 }

 .kp-donate-btn.active {
   background: #ac881a;
   color: white;
 }

 /* ===== STORY TEXT ===== */
 .kp-story p {
   margin-top: 16px;
   line-height: 1.8;
   color: #555;
 }

 /* ===== FAQ ===== */
 .kp-faq {
   border-bottom: 1px solid #eee;
   padding: 14px 0;
   cursor: pointer;
 }

 /* ===== MOBILE ===== */
 @media(max-width:1024px) {
   .kp-container {
     flex-direction: column;
     padding: 30px 20px;
   }

   .kp-sticky {
     position: relative;
   }
 }

 .kp-hero-slider {
   height: 100%;
 }

 /* ===== TABS ===== */

 .kp-tabs {
   backdrop-filter: blur(6px);
 }

 .kp-tab {
   padding: 10px 18px;
   border-radius: 10px;
   background: #f3efe6;
   font-weight: 600;
   color: #444;
   transition: .3s;
 }

 .kp-tab:hover {
   background: #e8dcc0;
 }

 .kp-tab.active {
   background: #ac881a;
   color: white;
 }

 /* MOBILE SCROLL SMOOTH */
 .kp-tabs::-webkit-scrollbar {
   display: none;
 }

 /* MOBILE CART BAR SHOW ONLY MOBILE */
 @media(min-width:1024px) {
   #kpMobileCartBar {
     display: none;
   }
 }

 /* ===== INFO DROPDOWN ===== */

 .kp-infoBtn {
   width: 100%;
   background: #ac881a;
   color: white;
   padding: 8px 10px;
   border-radius: 8px;
   font-size: 13px;
   display: flex;
   justify-content: center;
   gap: 6px;
 }

 .kp-infoContent {
   position: absolute;
   left: 0;
   top: 110%;
   width: 100%;
   background: white;
   border-radius: 10px;
   padding: 12px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
   opacity: 0;
   transform: translateY(10px);
   pointer-events: none;
   transition: .3s;
   z-index: 10;
 }

 .kp-infoDrop:hover .kp-infoContent {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
 }

 /* ===== PROGRESS CIRCLE ===== */

 .kp-circle {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 5px solid #ac881a;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   color: #ac881a;
 }


 /* Sidebar and Card styling */
.dashboard-container {
    display: flex;
    min-h-screen;
    background-color: #f8f9fa;
}

.sidebar {
    width: 260px;
    background: white;
    box-shadow: 2px 0 10px rgba(0,0,0,0.05);
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.table-container {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}