.home-page{
  color:var(--text-color);
  background-color:var(--page-bg);
  background-image:
    linear-gradient(120deg, rgba(46,125,50,0.08), rgba(242,169,0,0.08)),
    linear-gradient(0deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 16px);
  background-attachment:fixed;
}

.home-container{
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--section-pad-x);
  padding-right:var(--section-pad-x);
  box-sizing:border-box;
}

.home-header{
  background:#2f3337;
  border-bottom:3px solid var(--accent);
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

.home-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
  gap:16px;
}

.home-logo{
  max-width:70px;
  height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.home-nav-actions{
  display:flex;
  gap:12px;
  align-items:center;
}

.home-brand{
  display:inline-flex;
  align-items:center;
  flex-direction:column;
  /* gap:6px; */
  text-decoration:none;
}

.home-nav-links{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  justify-content:center;
}

.home-nav-link{
  color:#f8f9fa;
  font-weight:600;
  text-decoration:none;
  padding:6px 12px;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  font-family:inherit;
  font-size:0.95rem;
  cursor:pointer;
}

.home-brand-title{
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.3px;
  line-height:1;
}

.home-brand-title .brand-pak{
  color:#2e7d32;
}

.home-brand-title .brand-dash{
  color:#f2a900;
}

.home-brand-title .brand-develop{
  color:#c7cdd3;
}

.navbar-nav{
  gap:12px;
}

.navbar-dark .navbar-nav .nav-link{
  color:#fff;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{
  color:#fff;
}

.home-header .dropdown-menu{
  background:#2b2f33;
  border:1px solid rgba(46,125,50,0.4);
  box-shadow:0 16px 30px rgba(0,0,0,0.25);
  border-radius:12px;
  padding:10px;
}

.home-header .dropdown-item{
  color:#f5f7f8;
  font-weight:600;
  border-radius:8px;
  padding:8px 12px;
}

.home-header .dropdown-item:hover,
.home-header .dropdown-item:focus{
  background:rgba(46,125,50,0.22);
  color:#fff;
}

.home-header .dropdown-divider{
  border-color:rgba(255,255,255,0.12);
}

.home-nav-link:hover,
.home-nav-link:focus{
  color:#fff;
  border-color:rgba(242,169,0,0.6);
  background:rgba(242,169,0,0.12);
}

.home-nav-dropdown{
  position:relative;
}

.home-nav-dropdown::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
}

.home-nav-toggle{
  cursor:pointer;
}

.home-nav-toggle::after{
  content:"";
  display:inline-block;
  margin-left:8px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #f8f9fa;
  vertical-align:middle;
}

.home-nav-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:220px;
  background:#fff;
  border-radius:10px;
  padding:8px;
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
  border:1px solid rgba(46,125,50,0.2);
  display:none;
  z-index:50;
}

.home-nav-dropdown:hover .home-nav-menu,
.home-nav-dropdown:focus-within .home-nav-menu,
.home-nav-menu:hover{
  display:block;
}

.home-nav-menu a{
  display:block;
  padding:10px 12px;
  color:#1b1b1b;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
}

.home-nav-menu a:hover,
.home-nav-menu a:focus{
  background:rgba(46,125,50,0.12);
  color:#1b1b1b;
}

.btn{
  border-radius:4px;
  padding:10px 18px;
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
  text-decoration:none;
  display:inline-block;
}

.btn-white{
  background:#f8f9fa;
  color:#222;
  border:1px solid rgba(0,0,0,0.18);
  font-weight:600;
}

.btn-white:hover,
.btn-white:focus{
  background:#fff;
  color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,0.16);
}

.btn-accent{
  border:none;
  background-color:var(--accent);
  color:#1b1b1b;
  font-weight:600;
}

.btn-outline{
  border:1px solid var(--accent-green);
  color:var(--accent-green);
  background:transparent;
  font-weight:600;
}

.btn-outline:hover,
.btn-outline:focus{
  background:var(--accent-green);
  color:#fff;
}

.hero-band{
  background:
    linear-gradient(135deg, rgba(8,9,12,0.92), rgba(8,9,12,0.7)),
    linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15)),
    linear-gradient(135deg, rgba(46,125,50,0.12), rgba(242,169,0,0.1)),
    url('../assets/images/wall_image.png');
  background-size:cover;
  background-position:center;
  min-height:0;
  padding-top:72px;
  padding-bottom:72px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:36px;
  align-items:center;
}

.hero-copy{
  max-width:520px;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.8rem;
  color:var(--accent-green);
  margin:0 0 10px;
  font-weight:700;
}

.hero-title{
  font-size:2.5rem;
  margin:0 0 16px;
  color:#fff;
}

.hero-sub{
  color:#e9ecef;
  line-height:1.7;
  margin:0 0 16px;
  text-align:justify;
}

.hero-cta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.cta-note{
  color:#e9ecef;
  font-weight:600;
}

.hero-btn{
  min-width:150px;
  text-align:center;
}

.hero-note{
  color:#e9ecef;
  margin:4px 0 0;
  font-weight:600;
}

.hero-media{
  display:flex;
  justify-content:flex-end;
}

.hero-media-card{
  background:#f8f9fa;
  padding:12px;
  border-radius:12px;
  box-shadow:0 18px 36px rgba(0,0,0,0.22);
  border:1px solid rgba(0,0,0,0.08);
}

.hero-media img,
.media-col img{
  width:100%;
  height:auto;
  display:block;
  text-align:center;
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,0.16);
}

.media-col{
  display:flex;
  justify-content:center;
}

.media-col img{
  width:min(100%, 520px);
  max-height:360px;
  object-fit:contain;
}

.home-section{
  padding-top:var(--section-gap);
  padding-bottom:var(--section-gap);
  background:var(--panel);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:32px;
  align-items:center;
}

.text-col h2{
  margin:0 0 12px;
  color:var(--ink);
}

.text-col p,
.text-col li,
.about-section p{
  margin:0 0 16px;
  line-height:1.65;
  text-align:justify;
  color:var(--muted);
}

.inline-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.feature-card{
  background:var(--panel-strong);
  border:1px solid rgba(46,125,50,0.18);
  border-radius:10px;
  padding:22px;
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.feature-card-highlight{
  border:1px solid rgba(46,125,50,0.35);
  box-shadow:0 16px 30px rgba(0,0,0,0.12);
  transform:translateY(-6px);
}

.feature-link{
  text-decoration:none;
  color:inherit;
  display:block;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-link:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

.feature-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(46,125,50,0.08);
  border:1px solid rgba(46,125,50,0.18);
  margin-bottom:10px;
}

.feature-icon img{
  width:28px;
  height:28px;
  display:block;
}

.feature-card h3{
  margin:0 0 8px;
  color:var(--ink);
}

.feature-card p{
  margin:0;
  color:var(--muted);
}

.feature-kicker{
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.72rem;
  color:var(--accent-green);
  font-weight:700;
}

.feature-btn{
  margin-top:12px;
  align-self:flex-start;
}

.contact-form{
  background:var(--ink);
  color:#fff;
  padding:20px;
  text-align:center;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  border:1px solid rgba(46,125,50,0.35);
}

.contact-form textarea{
  resize:none;
}

.service-list{
  padding-left:18px;
  margin:0;
}

.service-list li{
  display:flex;
  align-items:center;
  gap:10px;
}

.service-list a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
}

.service-list a:hover,
.service-list a:focus{
  color:var(--accent-green);
}

.service-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
}

.services-section .text-col h2{
  position:relative;
}

.services-section .text-col h2::after{
  content:"";
  display:block;
  width:56px;
  height:3px;
  background:linear-gradient(90deg, var(--accent-green), var(--accent));
  margin-top:8px;
  border-radius:999px;
}

.service-list-animate li{
  position:relative;
  padding-left:14px;
  margin-bottom:10px;
  opacity:0;
  transform:translateY(8px);
  animation:serviceFade 0.6s ease forwards;
}

.service-list-animate li:nth-child(1){animation-delay:0.1s;}
.service-list-animate li:nth-child(2){animation-delay:0.2s;}
.service-list-animate li:nth-child(3){animation-delay:0.3s;}
.service-list-animate li:nth-child(4){animation-delay:0.4s;}

.service-list-animate li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-green);
  position:absolute;
  left:0;
  top:10px;
  box-shadow:0 0 0 4px rgba(46,125,50,0.12);
}

.services-media{
  display:flex;
  align-items:center;
  justify-content:center;
}

.services-card{
  position:relative;
  display:inline-block;
  padding:18px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
  box-shadow:0 16px 40px rgba(0,0,0,0.16);
  border:1px solid rgba(46,125,50,0.2);
  overflow:hidden;
  animation:floatSoft 6s ease-in-out infinite;
}

.services-image{
  width:240px;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  filter:saturate(1.05);
}

.services-badge{
  position:absolute;
  left:14px;
  bottom:14px;
  background:var(--accent-green);
  color:#fff;
  font-weight:700;
  font-size:0.75rem;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 8px 16px rgba(0,0,0,0.18);
  letter-spacing:0.03em;
}

.services-badge.alt{
  left:auto;
  right:14px;
  top:14px;
  bottom:auto;
  background:var(--accent);
  color:#1b1b1b;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
  align-items:stretch;
}

.contact-card{
  background:var(--panel-strong);
  border-radius:14px;
  padding:24px;
  box-shadow:0 14px 30px rgba(0,0,0,0.08);
  border:1px solid rgba(46,125,50,0.18);
  display:flex;
  flex-direction:column;
}

.contact-card h2{
  margin:0 0 10px;
  color:var(--ink);
}

.contact-card p{
  margin:0 0 16px;
  color:var(--muted);
}

.contact-form-light{
  background:transparent;
  color:inherit;
  padding:0;
  box-shadow:none;
  border:none;
  text-align:left;
}

.contact-form-light .form-control{
  margin-bottom:12px;
}

.contact-form-light button{
  margin-top:8px;
}

.contact-details{
  display:grid;
  gap:14px;
}

.contact-label{
  display:block;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--accent-green);
  margin-bottom:4px;
  font-weight:700;
}

.contact-map{
  margin-top:auto;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,0.12);
  border:1px solid rgba(46,125,50,0.15);
}

.contact-map img{
  width:100%;
  display:block;
  height:200px;
  object-fit:cover;
}

.service-hero{
  padding:56px 0;
  background:
    linear-gradient(135deg, rgba(12,13,15,0.88), rgba(12,13,15,0.6)),
    linear-gradient(135deg, rgba(46,125,50,0.2), rgba(242,169,0,0.18)),
    url('../assets/images/wall_image.png');
  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.service-hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:36px;
  align-items:center;
}

.service-title{
  font-size:2.3rem;
  margin:0 0 12px;
  color:#fff;
}

.service-sub{
  color:#e9ecef;
  line-height:1.7;
  margin:0 0 16px;
}

.service-hero-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
  max-height:320px;
  object-fit:cover;
}

.service-highlights{
  margin-top:18px;
}

.service-hero-media{
  background:rgba(255,255,255,0.08);
  padding:12px;
  border-radius:16px;
}


@keyframes serviceFade{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes floatSoft{
  0%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
  100%{transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  .services-card,
  .service-list-animate li{
    animation:none;
  }
}

.neticon{
  animation:rotate 15s linear infinite;
}

@keyframes rotate{
  0%{transform:rotate(0deg);} 
  25%{transform:rotate(-150deg);} 
  75%{transform:rotate(300deg);} 
  100%{transform:rotate(360deg);} 
}

.home-footer{
  background:#2b2f33;
  color:#fff;
  padding:20px 0;
  border-top:4px solid var(--accent-green);
}

.text-center{
  text-align:center;
}

/* Admin base styling */
.admin-shell{
  display:flex;
  min-height:100vh;
  background:var(--page-bg);
}

.admin-shell--login{
  justify-content:center;
}

.admin-sidebar{
  width:240px;
  background:#1f2327;
  color:#fff;
  padding:24px 18px;
  box-shadow:4px 0 20px rgba(0,0,0,0.08);
}

.admin-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}

.admin-logo{
  width:44px;
  height:44px;
}

.admin-title{
  font-weight:700;
}

.admin-sub{
  font-size:0.85rem;
  color:#b9c0c7;
}

.admin-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.admin-link{
  color:#fff;
  text-decoration:none;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  border:1px solid transparent;
  text-align:left;
  width:100%;
}

.admin-link:hover{
  background:rgba(255,255,255,0.12);
}

.admin-logout{
  background:rgba(200,60,60,0.2);
}

.admin-logout:hover{
  background:rgba(200,60,60,0.35);
}

.admin-main{
  flex:1;
  padding:32px;
}

.admin-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--page-bg);
}

.admin-login-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:14px;
  padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
  text-align:center;
}

.admin-login-card .form-control{
  margin:10px 0;
}

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.admin-card{
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.admin-row{
  display:flex;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-row .btn{
  padding:6px 12px;
  font-size:0.9rem;
  line-height:1.2;
  height:38px;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
}

.admin-table th,
.admin-table td{
  padding:12px 10px;
  border-bottom:1px solid #eef1f4;
}

.admin-table .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.admin-table .btn-icon{
  display:inline-flex;
  margin-right:6px;
  vertical-align:middle;
}

.admin-table .status-select{
  min-width:120px;
}