body {
   font-family: "Segoe UI", sans-serif;
   background-color: var(--light-bg);
   text-align: justify;
 }

 :root {
   --primary-green: #0F5132;
   --gold: #EFBF04;
   --light-bg: #0F5132;
 }

 .navbar-nav .nav-link {
   position: relative;
   padding-bottom: 6px;
   color: #0F5132 !important;
   /* unactive color */
   font-weight: 500;
 }

 /* underline hidden by default */
 .navbar-nav .nav-link::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 2px;
   background-color: #0F5132;
   transition: width 0.3s ease;
 }

 /* Active Link */
 .navbar-nav .nav-link.active {
   color: #0F5132 !important;
   font-weight: 600;
 }

 .navbar-nav .nav-link.active::after {
   width: 100%;
 }

 /* Hover effect */
 .navbar-nav .nav-link:hover {
   color: #0F5132 !important;
 }

 .navbar-nav .nav-link:hover::after {
   width: 100%;
 }

 /* Mobile specific tweaks */
 @media (max-width: 991px) {
   .navbar-nav .nav-link {
     padding: 0.5rem 1rem;
   }
 }

 .hero {
   background: linear-gradient(135deg, #0F5132, #198754);
   color: #fff;
   border-radius: 0 0 0px 0px;
   padding: 50px 0;
 }

 .hero h2 span {
   color: var(--gold);
 }

 .hero .badge {
   background-color: var(--gold);
   color: #000;
   font-weight: 600;
 }

 /* FOOTER */

 footer a {
   color: #0F5132;
   text-decoration: none;
 }

 footer a:hover {
   text-decoration: underline;
 }

 /* MOBILE ADJUSTMENTS */
 @media (max-width: 768px) {
   .hero {
     padding: 120px 20px 80px;
   }

   .hero h1 {
     font-size: 32px;
   }
 }

 .image-box {
   position: relative;
   border-radius: 15px;
   overflow: hidden;
 }

 .main-img {
   border-radius: 15px;
   transition: transform 0.5s ease, box-shadow 0.5s ease;
 }

 .image-box:hover .main-img {
   transform: scale(1.05);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 /* Floating Card */
 .info-card {
   position: absolute;
   bottom: 20px;
   left: 20px;
   background: linear-gradient(135deg, #EFBF04, #EFBF04);
   padding: 15px;
   border-radius: 10px;
   border-left: 5px solid var(--gold);
   font-weight: 500;
 }

 /* Button Styling */

 .btn-outline-dark {
   border-radius: 30px;
 }

 a {
   color: #0d6efd;
   font-weight: bold;
 }

 /* Layout */
 .form-wrapper {
   display: flex;
   gap: 25px;
   max-width: 1100px;
   margin: 40px auto;
   align-items: flex-start;
 }

 input::placeholder,
 textarea::placeholder {
   color: #0F5132;
   opacity: 1;
 }

 /* Left Form */
 .form-left {
   flex: 1;
   border: 2px solid #D4AF37;
   background: #fff;
   color: #0F5132;
   padding: 25px;
   border-radius: 12px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 /* INPUT ICON STYLE */
 .input-group {
   position: relative;
   margin-bottom: 12px;
 }

 .input-group i {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: #D4AF37;
   font-size: 14px;
 }

 .input-group input,
 .input-group textarea,
 .input-group select {
   padding-left: 38px !important;
   width: 100%;
   padding: 10px;
   border: 1px solid #ccc;
   /* border-radius: 6px; */
 }

 .input-group input:focus,
 .input-group textarea:focus {
   border-color: #D4AF37;
   outline: none;
 }

 /* Flex rows */
 .row-flex {
   display: flex;
   gap: 10px;
 }

 .row-flex .input-group {
   width: 50%;
 }

 /* Button */

 input[type="submit"]:hover {
   background: #D4AF37;
   color: #000;
 }

 /* ===== DESIGNEE CARD ===== */
 .designee-card {
   width: 320px;
   position: sticky;
   top: 100px;
   background: #ffffff;
   border-radius: 12px;
   overflow: hidden;
   border: 2px solid #D4AF37;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }

 .card-header {
   background: #0F5132;
   color: #fff;
   padding: 14px;
   text-align: center;
   font-size: 17px;
   font-weight: 700;
   border-bottom: 3px solid #D4AF37;
 }

 .card-body {
   padding: 18px;
 }

 .designee-card p {
   font-size: 14px;
   margin-bottom: 12px;
   line-height: 1.6;
   color: #0F5132;
 }

 .designee-card i {
   color: #D4AF37;
   margin-right: 6px;
 }

 .designee-card a {
   color: #0F5132;
   text-decoration: none;
   font-weight: 600;
 }

 .designee-card a:hover {
   color: #D4AF37;
 }

 /* Call Button */
 .call-btn {
   display: block;
   text-align: center;
   background: #D4AF37;
   color: #000;
   padding: 10px;
   border-radius: 8px;
   margin-top: 12px;
   font-weight: 700;
   text-decoration: none;
 }

 .call-btn:hover {
   background: #0F5132;
   color: #fff;
 }

 .submit-btn {
   display: block;
   width: 100%;
   /* optional: full width like button */
   text-align: center;
   background: #D4AF37;
   color: #0F5132;
   padding: 10px;
   border-radius: 8px;
   margin-top: 12px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   text-decoration: none;
 }

 /* Hover same as call-btn */
 .submit-btn:hover {
   background: #0F5132;
   color: #D4AF37;
 }

 /* Responsive */
 @media (max-width: 992px) {
   .form-wrapper {
     flex-direction: column;
   }

   .designee-card {
     width: 100%;
     position: static;
   }
 }