.logo {
     display: flex;
     align-items: center;
     /* vertically align logo & text */
     text-decoration: none;
   }

   .logo .sitename {
     font-size: 24px;
     margin: 0;
     white-space: nowrap;
     /* keep text in one line */
   }

   /* Logo size */
   .header .logo img {
     max-height: 40px;
     margin-left: 10px;
   }

   /* Hover effect on nav links */
   #navmenu ul li a {
     padding: 8px 12px;
     border-radius: 5px;
     /* keeps hover background smooth */
     transition: all 0.3s ease;
   }

   #navmenu ul li a:hover {
     background-color: #012A4A;
     color: white !important;
   }

   /* Active link style */
   #navmenu a.active {
     color: #012a4a;
     font-weight: bold;
     border-bottom: 2px solid #37729F;
     padding-bottom: 2px;
   }

   /* Slider dots for Clients section */
   #clients .swiper-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     opacity: 1;
     background-color: rgba(19, 65, 85, 0.2);
     /* light brand color */
     transition: background-color 0.3s ease, transform 0.3s ease;
   }

   #clients .swiper-pagination .swiper-pagination-bullet-active {
     background-color: #012A4A;
     /* your brand color */
     transform: scale(1.3);
     /* make active dot pop */
     border-radius: 50%;
     /* ensure round shape */
   }

   /* Carousel Text & Buttons */
   .carousel-inner h2 {
     font-size: 2rem;
   }

   .carousel-inner p {
     font-size: 1.1rem;
     line-height: 1.6;
   }

   .carousel-inner .btn-primary:hover {
     background-color: #012A4A;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }

   /* Carousel Controls */
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     filter: invert(1);
     width: 40px;
     height: 40px;
   }

   /* Responsive */
   @media (max-width: 768px) {
     .carousel-inner h2 {
       font-size: 1.5rem;
     }

     .carousel-inner p {
       font-size: 1rem;
     }

     .carousel-inner .container {
       padding: 2rem 1rem;
     }
   }

   html {
     scroll-behavior: smooth;
   }

   /* Image hover effect */
   section img:hover {
     transform: scale(1.03);
   }


   /* Position both buttons in same vertical column */
   #scroll-top {
     position: fixed;
     bottom: 90px;
     /* higher so WhatsApp is below it */
     right: 20px;
     z-index: 999999;
     width: 45px;
     height: 45px;
     background: #007bff;
     color: white;
     border-radius: 50%;
     text-align: center;
     line-height: 45px;
     font-size: 24px;
     transition: transform 0.2s ease;
   }

   #scroll-top:hover {
     transform: scale(1.1);
   }

   /* WhatsApp button */
   #whatsapp-button {
     position: fixed;
     bottom: 30px;
     /* directly under scroll button */
     left: 20px;
     z-index: 999999;
   }

   #whatsapp-button img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     background: #25D366;
     padding: 8px;
     transition: transform 0.2s ease;
   }

   #whatsapp-button img:hover {
     transform: scale(1.1);
   }

   /* For Chrome, Edge, Safari */
   ::-webkit-scrollbar {
     width: 10px;
     /* scrollbar width */
   }

   ::-webkit-scrollbar-track {
     background: #f1f1f1;
     /* track color */
   }

   ::-webkit-scrollbar-thumb {
     background: #134155;
     /* scrollbar handle */
     border-radius: 5px;
     /* rounded edges */
   }

   ::-webkit-scrollbar-thumb:hover {
     background: #0f2f3f;
     /* darker shade on hover */
   }

   /* For Firefox */
   * {
     scrollbar-width: thin;
     /* thin, auto, or none */
     scrollbar-color: #134155 #f1f1f1;
     /* thumb color | track color */
   }

   .testimonials .testimonial-item {
     background-color: #f7f7f7;
     box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08);
     padding: 30px;
     position: relative;
     height: 100%;
   }

   .picture-card {
     background: #fff;
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     text-align: center;
     margin-bottom: 30px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
   }

   .picture-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
   }

   .picture-card i {
     font-size: 48px;
     margin-bottom: 15px;
     display: inline-block;
     transition: color 0.3s ease;
   }

   /* Icon Colors */
   .icon-webdev {
     color: #007bff;
   }

   /* Blue */
   .icon-seo {
     color: #28a745;
   }

   /* Green */
   .icon-googleads {
     color: #fbbc05;
   }

   /* Yellow */
   .icon-smm {
     color: #e1306c;
   }

   /* Instagram Pink */
   .icon-metaads {
     color: #1877f2;
   }

   /* Facebook Blue */
   .icon-graphic {
     color: #ff5722;
   }

   /* Orange */

   /* Icon color change on card hover */
   .picture-card:hover i {
     filter: brightness(1.2);
   }

   /* Remove bullets */
   .picture-card ul {
     list-style: none;
     padding: 0;
     margin: 0 0 15px 0;
   }

   .picture-card ul li {
     margin-bottom: 8px;
   }

   .card-btn {
     margin: 5px 5px 0 5px;
     padding: 8px 18px;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 600;
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
   }

   .see-more-btn {
     background-color: #012A4A;
     color: white;
   }

   .see-more-btn:hover {
     /* background-color: #28556eff; */
     box-shadow: 0 4px 15px rgba(42, 94, 125, 0.5);
   }

   .picture-card a .card-btn {
     background-color: #37729f;
     /* WhatsApp green */
     color: white;
   }

   .picture-card a .card-btn:hover {
     /* background-color: #37729f; */
     box-shadow: 0 4px 15px rgba(18, 140, 68, 0.5);
   }

   details {
     margin-bottom: 15px;
     background: white;
     border-radius: 10px;
     padding: 15px 20px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     border-left: 5px solid transparent;
     width: 100%;
   }

   details:hover {
     border-left: 5px solid #012A4A;
     box-shadow: 0 6px 20px rgba(55, 114, 159, 0.15);
     transform: translateY(-2px);
   }

   details summary {
     font-weight: bold;
     font-size: 18px;
     cursor: pointer;
     color: #012A4A;
     outline: none;
   }

   details[open] summary {
     color: #2a5e7d;
   }

   details p {
     margin-top: 10px;
     font-size: 15px;
     line-height: 1.6;
     color: #555;
   }

   /* Responsive for mobile */
   @media (max-width: 800px) {
     section {
       flex-wrap: wrap;
     }

     .right-image {
       display: none !important;
       /* Hide image */
     }

     .left-accordion {
       flex: 1 1 100% !important;
       max-width: 100% !important;
     }

     details {
       width: 100%;
     }
   }