/* Hide Translator on Mobile View - exactly as in template */
 @media (max-width: 767px) {
     #google_mobile {
         display: none !important;
         visibility: hidden !important;
         height: 0 !important;
         margin: 0 !important;
         padding: 0 !important;
         overflow: hidden !important;
     }

     #google_desktop {
         display: none !important;
         visibility: hidden !important;
     }

     #mainmenu li#google_mobile {
         display: none !important;
         list-style: none;
         margin: 0 !important;
         padding: 0 !important;
         height: 0 !important;
         line-height: 0 !important;
     }

     .goog-te-gadget,
     .goog-te-gadget-simple,
     .goog-te-banner-frame,
     .goog-te-menu-frame {
         display: none !important;
         visibility: hidden !important;
     }
 }

 .goog-te-banner-frame {
     display: none !important;
 }

 body {
     top: 0 !important;
     background: #f6f8fb;
     font-family: 'Segoe UI', sans-serif;
     color: #333;
 }

 .h4 {
     color: #063a6b;
 }

 /* WhatsApp floating button */
 .whatsapp-float {
     position: fixed;
     bottom: 30px;
     right: 30px;
     background-color: #25d366;
     color: white;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     text-align: center;
     font-size: 30px;
     line-height: 60px;
     z-index: 100;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transition: all 0.3s;
     text-decoration: none;
 }

 .whatsapp-float:hover {
     background-color: #128C7E;
     color: white;
     transform: scale(1.1);
 }

 /* Scroll to top button */
 .scroll-to-top {
     position: fixed;
     bottom: 30px;
     left: 30px;
     background-color: #0a4d8c;
     color: white;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     text-align: center;
     font-size: 24px;
     line-height: 50px;
     z-index: 100;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transition: all 0.3s;
     display: none;
     text-decoration: none;
 }

 .scroll-to-top:hover {
     background-color: #063a6b;
     color: white;
 }

 /* Contact link styles */
 .contact-link {
     display: block;
     width: 100%;
     word-break: break-word;
     overflow-wrap: break-word;
     text-decoration: none;
     color: inherit;
 }

 .contact-text {
     font-size: 20px;
     font-weight: normal;
     line-height: 1.5;
     word-break: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
 }

 @media (max-width: 768px) {
     .contact-text {
         font-size: 16px !important;
         line-height: 1.4;
     }
 }

 .footer-products-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-products-list li {
     margin-bottom: 8px;
 }

 .footer-products-list li a {
     font-size: 15px;
     line-height: 1.6;
     display: inline-block;
     transition: all 0.3s ease;
     color: #ddd;
     text-decoration: none;
 }

 .footer-products-list li a:hover {
     padding-left: 5px;
     color: #0a4d8c !important;
 }

 /* footer blue shade overrides */
 .section-dark .widget h5 {
     color: #0a4d8c !important;
     font-weight: 600;
 }

 .section-dark .social-icons a {
     background: rgba(10, 77, 140, 0.1);
     color: #0a4d8c;
 }

 .section-dark .social-icons a:hover {
     background: #0a4d8c;
     color: #fff;
 }

 .section-dark .contact-text,
 .section-dark .contact-link {
     color: #fff;
 }

 .section-dark .contact-link:hover .contact-text {
     color: #0a4d8c;
 }

 .section-dark .op-5 {
     color: #aaa;
 }

 /* footer arrow image replacement with blue */
 .footer-blue-arrow {
     display: inline-block;
     width: 60px;
     height: 60px;
     background-color: #0a4d8c;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z'/%3E%3C/svg%3E") no-repeat center;
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z'/%3E%3C/svg%3E") no-repeat center;
     mask-size: contain;
     -webkit-mask-size: contain;
     background-color: #0a4d8c;
     opacity: 0.8;
 }

 /* HERO */

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

 .hero p {
     font-size: 18px;
     opacity: .9;
 }

 /* ABOUT */
 .about {
     padding: 80px 0;
 }

 .about img {
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
 }

 .about-card {
     background: white;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 .btn-main {
     background: #0a4d8c;
     color: white;
     padding: 12px 30px;
     border-radius: 30px;
     font-weight: 600;
     display: inline-block;
     text-decoration: none;
 }

 .btn-main:hover {
     background: #063a6b;
     color: white;
 }

 /* FEATURES */
 .features {
     background: #0a4d8c;
     color: white;
     padding: 80px 0;
 }

 .feature-card {
     background: rgba(255, 255, 255, 0.08);
     padding: 30px;
     border-radius: 12px;
     backdrop-filter: blur(10px);
     transition: 0.3s;
     height: 100%;
 }

 .feature-card:hover {
     transform: translateY(-8px);
     background: rgba(255, 255, 255, 0.15);
 }

 .feature-card i {
     font-size: 30px;
     margin-bottom: 15px;
 }

 /* MISSION */
 .mission-card {
     border-radius: 12px;
     overflow: hidden;
     color: white;
     position: relative;
     height: 280px;
 }

 .mission-card img {
     width: 100%;
     height: 280px;
     object-fit: cover;
 }

 .mission-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 30px;
     background: linear-gradient(transparent, rgba(0, 0, 0, 63%));
 }

 /* ===== MOBILE HEADER FIX - SAME AS INDEX ===== */
 /* ===== MOBILE HEADER FIX - DARK BACKGROUND ===== */
 @media (max-width: 992px) {
     .header-static {
         position: relative !important;
         background: #0a1a2a !important;
         padding: 10px 0 !important;
         margin: 0 !important;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
         z-index: 9999 !important;
         display: block !important;
     }

     .de-flex {
         display: flex !important;
         align-items: center !important;
         justify-content: space-between !important;
         width: 100% !important;
     }

     #logo {
         display: block !important;
         margin: 0 !important;
         padding: 0 !important;
     }

     #logo img {
         max-height: 45px !important;
         width: auto !important;
         display: block !important;
         /* Make sure image loads and is visible */
         opacity: 1 !important;
         visibility: visible !important;
     }

     .header-col-mid {
         display: none !important;
     }

     #menu-btn {
         display: block !important;
         width: 45px !important;
         height: 45px !important;
         background: #0a4d8c !important;
         border-radius: 8px !important;
         cursor: pointer !important;
         margin-left: 15px !important;
         position: relative !important;
     }

     #menu-btn span {
         display: block !important;
         width: 28px !important;
         height: 3px !important;
         background: white !important;
         margin: 8px auto !important;
         border-radius: 3px !important;
     }

     .mobile-nav {
         display: none !important;
         position: absolute !important;
         top: 80px !important;
         left: 0 !important;
         width: 100% !important;
         background: #0a1a2a !important;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
         z-index: 9999 !important;
         padding: 15px 0 !important;
     }

     .mobile-nav.active {
         display: block !important;
     }

     .mobile-nav ul {
         list-style: none !important;
         margin: 0 !important;
         padding: 0 !important;
     }

     .mobile-nav li {
         margin: 0 !important;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
     }

     .mobile-nav li:last-child {
         border-bottom: none !important;
     }

     .mobile-nav li a {
         display: block !important;
         padding: 12px 20px !important;
         color: white !important;
         text-decoration: none !important;
         font-weight: 600 !important;
         font-size: 14px !important;
         text-transform: uppercase !important;
     }

     .mobile-nav li a:hover {
         background: rgba(10, 77, 140, 0.3) !important;
         color: #0a4d8c !important;
     }

     /* Fix container */
     .container {
         width: 100% !important;
         max-width: 100% !important;
         padding-left: 15px !important;
         padding-right: 15px !important;
     }
 }

 @media (min-width: 993px) {

     #menu-btn,
     .mobile-nav {
         display: none !important;
     }
 }

 #menu-btn {
     display: none;
 }

 @media (max-width: 768px) {
     .hero h1 {
         font-size: 28px;
     }

     .hero {
         padding: 80px 20px;
     }
 }

 body.no-scroll {
     overflow: hidden;
     height: 100vh;
 }