:root {
   --appla-primary: #2a592a;
   /* Deep Green */
   --appla-accent: #ff6d29;
   /* Vibrant Orange */
   --appla-light: #ffffff;
   --appla-background: #f4f6f8;
   /* Very light gray */
   --appla-text-dark: #1f2a37;
 }

 /* Base Styles */
 body {
   font-family: 'Poppins', sans-serif;
   background-color: var(--appla-background);
   color: var(--appla-text-dark);
   line-height: 1.7;
   overflow-x: hidden;
 }

 /* === KEYFRAMES & GRAPHIC CSS === */
 @keyframes gradient-shift {
   0% {
     background-position: 0% 50%;
   }

   100% {
     background-position: 100% 50%;
   }
 }

 /* Dynamic Button - UPDATED: Removed glow and simplified */
 .btn-appla-dynamic {
   background-color: var(--appla-primary);
   border: 1px solid var(--appla-primary);
   color: var(--appla-light);
   font-weight: 600;
   padding: 0.8rem 2.2rem;
   border-radius: 4px;
   position: relative;
   z-index: 1;
   overflow: hidden;
   transition: all 0.3s;
   /* Removed animation: glowing */
 }

 .btn-appla-dynamic:hover {
   background-color: #1e451e;
   /* Darker shade of primary */
   border-color: #1e451e;
   color: var(--appla-light);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   /* Subtle shadow instead of glow */
 }

 /* Contact Us Button Hover Fix */
 .nav-item.ms-lg-3 .nav-link.btn-appla-dynamic:hover {
   color: var(--appla-light) !important;
 }

 /* Animated Border Effect for Cards */
 .graphic-card {
   background: var(--appla-light);
   padding: 2.5rem;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: all 0.3s;
   position: relative;
   z-index: 2;
   overflow: hidden;
 }

 .graphic-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 }

 /* Hover state for text elements inside the card */
 .graphic-card:hover p,
 .graphic-card:hover .text-secondary,
 .graphic-card:hover a,
 .graphic-card:hover h4 {
   color: var(--appla-light) !important;
 }


 .graphic-card::after {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(45deg, var(--appla-primary), var(--appla-accent), var(--appla-primary));
   background-size: 400% 400%;
   z-index: -1;
   filter: blur(5px);
   opacity: 0;
   transition: opacity 0.5s;
 }

 .graphic-card:hover::after {
   opacity: 1;
   animation: gradient-shift 3s ease infinite alternate;
 }

 /* Floating Image Overlays */
 .image-overlay-box {
   position: absolute;
   top: -20px;
   right: -20px;
   width: 100px;
   height: 100px;
   background-color: var(--appla-primary);
   border-radius: 10px;
   z-index: 3;
   transform: rotate(5deg);
 }

 .image-overlay-box::after {
   content: "\f0ad";
   /* Looms icon (fa-wrench) */
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   color: var(--appla-light);
   font-size: 2rem;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 /* === LAYOUT & STRUCTURE === */

 /* Navigation Hover Links */
 .navbar-nav .nav-link {
   transition: color 0.3s, border-bottom 0.3s;
   border-bottom: 3px solid transparent;
   /* Prepare for hover effect */
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link.active {
   color: var(--appla-primary) !important;
   border-bottom: 3px solid var(--appla-accent);
 }

 /* Dropdown Styles */
 .dropdown-menu .dropdown-item:hover,
 .dropdown-menu .dropdown-item.active {
   background-color: var(--appla-background);
   color: var(--appla-primary);
   font-weight: 600;
   /* Emphasis on hover/active item */
 }


 /* Hero */
 .hero-section {
   background-color: var(--appla-text-dark);
   color: var(--appla-light);
 }

 /* Stacked Image Group for Hero - UPDATED: Made middle image more prominent */
 .stacked-images {
   position: relative;
   width: 100%;
   height: 450px;
   /* Default height for desktop */
   margin-top: 30px;
 }

 .stacked-images img {
   position: absolute;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   transition: all 0.5s ease;
   cursor: pointer;
   z-index: 5;
   object-fit: cover;
   height: 280px;
   /* Default height for desktop */
 }

 /* First image (slider2.jpg) - smaller, left position */
 .stacked-images img:nth-child(1) {
   width: 65%;
   max-width: 350px;
   top: 0;
   left: 0;
   transform: rotate(-5deg);
   border: 3px solid var(--appla-accent);
 }

 /* Second image (slider.png) - UPDATED: Larger and more prominent */
 .stacked-images img:nth-child(2) {
   width: 85%;
   max-width: 420px;
   top: 20px;
   right: 5%;
   transform: rotate(3deg);
   opacity: 1;
   /* Full opacity */
   z-index: 7;
   /* Highest z-index */
   border: 5px solid var(--appla-light);
   height: 320px;
   /* Taller than others */
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
   /* More prominent shadow */
 }

 /* Third image (slider3.jpg) - smaller, bottom position */
 .stacked-images img:nth-child(3) {
   width: 60%;
   max-width: 330px;
   bottom: 20px;
   left: 15%;
   transform: rotate(-8deg);
   opacity: 0.9;
   z-index: 6;
   border: 3px solid var(--appla-primary);
 }

 .stacked-images img:hover {
   transform: scale(1.05) rotate(0deg);
   z-index: 10;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
 }

 /* MOBILE ADJUSTMENTS (Screens < 768px) */
 @media (max-width: 767.98px) {
   .stacked-images {
     height: 350px;
     /* Reduce container height for mobile */
     margin-top: 50px;
     /* Add separation below the text/buttons */
   }

   .stacked-images img {
     width: 90%;
     /* Use more width on small screens */
     max-width: none;
     /* Remove max-width constraint */
     height: 200px;
     /* Smaller image height on mobile */
   }

   .stacked-images img:nth-child(1) {
     width: 75%;
     top: 0;
     left: 0;
   }

   .stacked-images img:nth-child(2) {
     width: 85%;
     top: 50px;
     right: 5%;
     height: 220px;
     /* Adjusted for mobile */
   }

   .stacked-images img:nth-child(3) {
     width: 70%;
     bottom: 10px;
     left: 10%;
   }

   .image-overlay-box {
     /* Hide or simplify the overlay box if needed on mobile */
     display: none;
   }
 }

 /* End Stacked Image Group */


 /* Content Strip (Visual break) */
 .content-strip {
   background-color: var(--appla-primary);
   color: var(--appla-light);
   padding: 1rem 0;
   transform: skewY(-1deg);
   margin: 2rem 0;
 }

 .content-strip>.container {
   transform: skewY(1deg);
   /* Counter-skew content */
 }

 /* Services Grid */
 .service-list-item {
   background-color: var(--appla-light);
   border-left: 5px solid var(--appla-accent);
   padding: 1.5rem;
   transition: border-left-color 0.3s, background-color 0.3s;
 }

 .service-list-item:hover {
   border-left-color: var(--appla-primary);
   background-color: #fcfcfc;
 }

 .service-list-item i {
   color: var(--appla-primary);
 }

 /* Partner Logo Styles (from previous request) */
 .partner-logo-container {
   transition: transform 0.3s, box-shadow 0.3s;
 }

 .partner-logo-container a {
   display: block;
   width: 100%;
 }

 .partner-logo-container img {
   max-height: 80px;
   opacity: 0.9;
   /* Slightly dim logos when not hovered */
   transition: transform 0.4s, opacity 0.4s, box-shadow 0.4s;
   transform: rotate(0deg);
   /* Default state */
 }

 .partner-logo-container:nth-child(1) img {
   transform: rotate(-2deg);
 }

 .partner-logo-container:nth-child(2) img {
   transform: rotate(3deg);
 }

 .partner-logo-container:nth-child(3) img {
   transform: rotate(-1deg);
 }

 .partner-logo-container:nth-child(4) img {
   transform: rotate(4deg);
 }


 .partner-logo-container:hover img {
   opacity: 1;
   transform: scale(1.1) rotate(0deg);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 /* Footer */
 .footer-appla {
   background-color: var(--appla-text-dark);
   color: var(--appla-background);
   border-top: 5px solid var(--appla-accent);
 }

 .footer-appla h4 {
   color: var(--appla-accent);
 }

 .footer-appla a {
   color: var(--appla-background);
 }

 /* Dropdown Fix (Included from previous attempts) */
 @media (min-width: 992px) {
   .nav-item.dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
   }
 }

 /* === APPLA: OUR CORE IDENTITY UNIQUE STYLING === */
 .core-identity-section {
   padding-top: 5rem !important;
   padding-bottom: 5rem !important;
   position: relative;
   z-index: 1;
   overflow: hidden;
   background-color: var(--appla-background);
   /* Base background */
 }

 /* Skewed Background Element */
 .core-identity-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--appla-primary);
   opacity: 0.05;
   /* Subtle deep green overlay */
   transform: skewY(1deg);
   z-index: -1;
 }

 /* Specific Card Styling for Color Coding on Hover Border */
 /* Card 1: At a Glance - Accent color dominant in gradient */
 .card-glance .graphic-card::after {
   background: linear-gradient(45deg, var(--appla-accent), var(--appla-primary), var(--appla-accent));
   background-size: 400% 400%;
 }

 /* Card 2: Advocacy & Scope - Primary color dominant in gradient */
 .card-advocacy .graphic-card::after {
   background: linear-gradient(45deg, var(--appla-primary), var(--appla-accent), var(--appla-primary));
   background-size: 400% 400%;
 }

 /* Simple buttons for service items */
 .service-btn {
   background-color: var(--appla-primary);
   border: 1px solid var(--appla-primary);
   color: white;
   padding: 0.5rem 1.5rem;
   border-radius: 3px;
   font-size: 0.875rem;
   font-weight: 500;
   transition: all 0.3s;
 }

 .service-btn:hover {
   background-color: #1e451e;
   border-color: #1e451e;
   color: white;
   text-decoration: none;
 }