:root {
   --navy: #071b33;
   --navy-2: #0d2d4f;
   --yellow: #f5a400;
   --orange: #e46d21;
   --white: #ffffff;
   --light: #f5f7fa;
   --grey: #6b7280;
   --dark: #111827;
   --border: #e5e7eb;
   --shadow: 0 24px 70px rgba(7, 27, 51, .14);
   --radius: 24px;
   --transition: all .35s ease
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0
 }

 html {
   scroll-behavior: smooth
 }

 body {
   font-family: Inter, Poppins, Roboto, Arial, sans-serif;
   color: var(--dark);
   background: var(--white);
   line-height: 1.7;
   overflow-x: hidden
 }

 img {
   width: 100%;
   display: block
 }

 a {
   text-decoration: none;
   color: inherit
 }

 ul {
   list-style: none
 }

 .container {
   width: min(1180px, calc(100% - 40px));
   margin: 0 auto
 }

 .section {
   padding: 100px 0
 }

 .section-dark {
   background: var(--navy);
   color: var(--white)
 }

 .section-kicker,
 .eyebrow {
   display: inline-block;
   font-size: 13px;
   letter-spacing: 1.8px;
   text-transform: uppercase;
   color: var(--orange);
   font-weight: 800;
   margin-bottom: 14px
 }

 .section-kicker.light {
   color: var(--yellow)
 }

 h1,
 h2,
 h3,
 h4 {
   line-height: 1.15;
   font-weight: 850
 }

 h1 {
   font-size: clamp(42px, 6vw, 76px);
   letter-spacing: -2px
 }

 h2 {
   font-size: clamp(30px, 4vw, 50px);
   letter-spacing: -1.2px
 }

 h3 {
   font-size: 22px
 }

 p {
   color: #526070
 }
 
 .port_para{
     color: #d7d7d7
 }

 .section-dark p,
 .hero p,
 .cta-section p,
 .site-footer p {
   color: rgba(255, 255, 255, .76)
 }

 .center {
   text-align: center
 }

 .section-heading {
   max-width: 780px;
   margin: 0 auto 52px
 }

 .section-heading p {
   margin-top: 16px
 }

 .site-header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   transition: var(--transition)
 }

 .site-header.scrolled {
   background: rgba(7, 27, 51, .96);
   box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
   backdrop-filter: blur(16px)
 }

 .top-bar {
   background: rgba(0, 0, 0, .25);
   color: rgba(255, 255, 255, .86);
   font-size: 13px
 }

 .top-bar-content {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding: 8px 0
 }

 .navbar {
   color: var(--white)
 }

 .nav-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 78px
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 850;
   font-size: 22px
 }

 .logo small {
   display: block;
   font-size: 11px;
   color: rgba(255, 255, 255, .72);
   font-weight: 500;
   margin-top: 1px
 }

 .logo-icon {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, var(--yellow), var(--orange));
   color: var(--navy);
   border-radius: 14px;
   font-weight: 950
 }
 
 .roller_logo{
     width: 96px;
     height: 77px;
 }
 
 .loader_logo{
     width: 126px;
     height: 107px;
 }

 .nav-menu {
   display: flex;
   align-items: center;
   gap: 28px;
   font-size: 15px;
   font-weight: 700
 }

 .nav-menu a {
   position: relative;
   color: rgba(255, 255, 255, .9)
 }

 .nav-menu a:not(.nav-cta)::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -7px;
   width: 0;
   height: 2px;
   background: var(--yellow);
   transition: var(--transition)
 }

 .nav-menu a:hover::after {
   width: 100%
 }

 .nav-cta {
   padding: 12px 20px;
   background: var(--yellow);
   color: var(--navy) !important;
   border-radius: 999px
 }

 .menu-toggle {
   display: none;
   width: 45px;
   height: 45px;
   border: 0;
   background: var(--yellow);
   border-radius: 12px;
   cursor: pointer;
   padding: 11px
 }

 .menu-toggle span {
   display: block;
   height: 2px;
   background: var(--navy);
   margin: 5px 0
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 52px;
   padding: 0 26px;
   border-radius: 999px;
   font-weight: 800;
   cursor: pointer;
   transition: var(--transition);
   border: 2px solid transparent
 }

 .btn-primary {
   background: linear-gradient(135deg, var(--yellow), var(--orange));
   color: var(--navy);
   box-shadow: 0 12px 26px rgba(245, 164, 0, .28)
 }

 .btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 36px rgba(245, 164, 0, .35)
 }

 .btn-outline {
   color: var(--white);
   border-color: rgba(255, 255, 255, .4)
 }

 .btn-outline:hover {
   background: var(--white);
   color: var(--navy)
 }

 .full-width {
   width: 100%
 }

 .hero {
   position: relative;
   min-height: 100vh;
   padding: 190px 0 110px;
   background: linear-gradient(90deg, rgba(7, 27, 51, .94), rgba(7, 27, 51, .62), rgba(7, 27, 51, .35)), url("img/banner/banner.png") center/cover;
   overflow: hidden
 }

 .hero::after {
   content: "";
   position: absolute;
   right: -180px;
   bottom: -180px;
   width: 460px;
   height: 460px;
   border-radius: 50%;
   background: rgba(245, 164, 0, .15);
   filter: blur(10px)
 }

 .hero-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.25fr .75fr;
   gap: 50px;
   align-items: center
 }

 .hero-text {
   max-width: 720px;
   margin: 24px 0 34px;
   font-size: 18px
 }

 .hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 30px
 }

 .hero-points {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
 }

 .hero-points span {
   padding: 9px 14px;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 999px;
   color: rgba(255, 255, 255, .88);
   font-size: 14px
 }

 .hero-card {
   background: rgba(255, 255, 255, .96);
   color: var(--dark);
   padding: 34px;
   border-radius: var(--radius);
   box-shadow: var(--shadow)
 }

 .hero-card p {
   color: var(--grey);
   margin: 12px 0 22px
 }

 .mini-form,
 .contact-form {
   display: grid;
   gap: 14px
 }

 input,
 select,
 textarea {
   width: 100%;
   border: 1px solid var(--border);
   background: var(--white);
   padding: 15px 16px;
   border-radius: 14px;
   outline: none;
   font: inherit;
   transition: var(--transition)
 }

 input:focus,
 select:focus,
 textarea:focus {
   border-color: var(--yellow);
   box-shadow: 0 0 0 4px rgba(245, 164, 0, .14)
 }

 .stats-section {
   margin-top: -48px;
   position: relative;
   z-index: 5
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
 }

 .stat-card {
   background: var(--white);
   padding: 30px;
   border-radius: 22px;
   box-shadow: var(--shadow);
   border-bottom: 5px solid var(--yellow)
 }

 .stat-card strong {
   display: block;
   font-size: 42px;
   color: var(--navy);
   line-height: 1
 }

 .stat-card span {
   display: block;
   margin-top: 10px;
   color: var(--grey);
   font-weight: 700
 }

 .split-grid,
 .why-grid,
 .quality-grid,
 .contact-grid,
 .client-cert-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 58px;
   align-items: center
 }

 .reverse {
   direction: rtl
 }

 .reverse>* {
   direction: ltr
 }

 .content-block p {
   margin-top: 18px
 }

 .image-stack {
   position: relative
 }

 .image-stack img,
 .why-image img {
   height: 520px;
   object-fit: cover;
   border-radius: var(--radius);
   box-shadow: var(--shadow)
 }

 .experience-badge {
   position: absolute;
   right: -24px;
   bottom: 32px;
   max-width: 210px;
   background: var(--navy);
   color: var(--white);
   padding: 26px;
   border-radius: 22px;
   box-shadow: var(--shadow);
   border-left: 6px solid var(--yellow)
 }

 .experience-badge strong {
   display: block;
   font-size: 46px;
   line-height: 1;
   color: var(--yellow)
 }

 .experience-badge span {
   display: block;
   margin-top: 8px;
   font-weight: 700
 }

 .check-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
   margin-top: 28px
 }

 .check-grid span {
   padding: 14px 16px;
   background: var(--light);
   border-radius: 14px;
   font-weight: 750;
   color: var(--navy)
 }

 .check-grid span::before {
   content: "✓";
   color: var(--orange);
   margin-right: 8px
 }

 .services-section {
   background: linear-gradient(180deg, var(--light), var(--white))
 }

 .service-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
 }

 .service-card {
   background: var(--white);
   padding: 32px;
   border-radius: var(--radius);
   box-shadow: 0 14px 48px rgba(7, 27, 51, .08);
   border: 1px solid rgba(7, 27, 51, .06);
   transition: var(--transition);
   position: relative;
   overflow: hidden
 }

 .service-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, var(--yellow), var(--orange))
 }

 .service-card:hover {
   transform: translateY(-9px);
   box-shadow: var(--shadow)
 }

 .service-icon {
   width: 58px;
   height: 58px;
   display: grid;
   place-items: center;
   background: var(--navy);
   color: var(--yellow);
   border-radius: 18px;
   font-weight: 900;
   margin-bottom: 22px
 }

 .service-card p {
   margin: 14px 0 18px
 }

 .service-card li {
   color: #4b5563;
   margin: 8px 0;
   font-weight: 600
 }

 .service-card li::before {
   content: "•";
   color: var(--orange);
   margin-right: 8px;
   font-weight: 900
 }

 .why-section {
   background: linear-gradient(120deg, rgba(7, 27, 51, .97), rgba(7, 27, 51, .86)), url("https://images.unsplash.com/photo-1590496793929-36417d3117de?auto=format&fit=crop&w=1800&q=80") center/cover fixed
 }

 .why-list {
   display: grid;
   gap: 14px;
   margin-top: 30px
 }

 .why-list div {
   display: flex;
   gap: 16px;
   align-items: center;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12);
   padding: 16px;
   border-radius: 16px
 }

 .why-list strong {
   color: var(--yellow)
 }

 .why-list span {
   color: rgba(255, 255, 255, .86);
   font-weight: 700
 }

 .why-image img {
   height: 580px
 }

 .timeline {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 18px
 }

 .timeline-item {
   background: var(--white);
   padding: 26px;
   border-radius: 22px;
   border: 1px solid var(--border);
   box-shadow: 0 12px 34px rgba(7, 27, 51, .06);
   transition: var(--transition)
 }

 .timeline-item:hover {
   transform: translateY(-7px)
 }

 .timeline-item span {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   background: var(--yellow);
   color: var(--navy);
   font-weight: 900;
   border-radius: 50%;
   margin-bottom: 20px
 }

 .timeline-item h3 {
   font-size: 18px;
   margin-bottom: 12px
 }

 .capabilities-section {
   background: var(--light)
 }

 .capability-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 28px
 }

 .capability-tags span {
   padding: 12px 15px;
   border-radius: 999px;
   background: var(--white);
   color: var(--navy);
   font-weight: 800;
   border: 1px solid var(--border)
 }

 .equipment-panel {
   background: linear-gradient(135deg, rgba(7, 27, 51, .96), rgba(13, 45, 79, .92)), url("https://images.unsplash.com/photo-1536895058696-a69b1c7ba34f?auto=format&fit=crop&w=900&q=80") center/cover;
   padding: 40px;
   border-radius: var(--radius);
   color: var(--white);
   box-shadow: var(--shadow)
 }

 .equipment-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
   margin-top: 28px
 }

 .equipment-grid span {
   background: rgba(255, 255, 255, .12);
   padding: 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, .12);
   font-weight: 700
 }

 .project-filter {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin-bottom: 34px;
   flex-wrap: wrap
 }

 .filter-btn {
   border: 1px solid var(--border);
   background: var(--white);
   padding: 11px 18px;
   border-radius: 999px;
   cursor: pointer;
   font-weight: 800;
   color: var(--navy);
   transition: var(--transition)
 }

 .filter-btn.active,
 .filter-btn:hover {
   background: var(--navy);
   color: var(--white)
 }

 .project-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
 }

 .project-card {
   position: relative;
   height: 360px;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
   transition: var(--transition)
 }

 .project-card.hide {
   display: none
 }

 .project-card:hover {
   transform: translateY(-8px)
 }

 .project-card img {
   height: 100%;
   object-fit: cover;
   transition: .6s ease
 }

 .project-card:hover img {
   transform: scale(1.08)
 }

 .project-info {
   position: absolute;
   inset: auto 18px 18px 18px;
   background: rgba(7, 27, 51, .88);
   opacity: 85%;
   color: var(--white);
   padding: 20px;
   border-radius: 18px;
   backdrop-filter: blur(14px)
 }

 .project-info span {
   color: var(--yellow);
   font-size: 12px;
   font-weight: 900;
   text-transform: uppercase
 }

 .project-info h3 {
   margin: 8px 0;
   font-size: 20px
 }

 .quality-section {
   background: linear-gradient(120deg, rgba(7, 27, 51, .95), rgba(7, 27, 51, .82)), url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1800&q=80") center/cover
 }

 .quality-card {
   background: rgba(255, 255, 255, .09);
   border: 1px solid rgba(255, 255, 255, .14);
   padding: 42px;
   border-radius: var(--radius)
 }

 .quality-points {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px
 }

 .quality-point {
   background: rgba(255, 255, 255, .95);
   color: var(--dark);
   padding: 26px;
   border-radius: 22px;
   border-top: 5px solid var(--yellow)
 }

 .quality-point p {
   color: var(--grey);
   margin-top: 12px
 }

 .sectors-section {
   background: var(--light)
 }

 .sector-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
 }

 .sector-card {
   background: var(--white);
   padding: 24px 20px;
   text-align: center;
   border-radius: 18px;
   font-weight: 850;
   color: var(--navy);
   border: 1px solid var(--border);
   box-shadow: 0 12px 30px rgba(7, 27, 51, .06);
   transition: var(--transition)
 }

 .sector-card:hover {
   background: var(--navy);
   color: var(--white);
   transform: translateY(-6px)
 }

 .panel {
   padding: 38px;
   border-radius: var(--radius);
   background: var(--light);
   border: 1px solid var(--border);
   min-height: 350px
 }

 .logo-strip,
 .certificate-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
   margin-top: 28px
 }

 .logo-strip span,
 .certificate-list span {
   display: grid;
   place-items: center;
   min-height: 30px;
   background: var(--white);
   border-radius: 16px;
   color: var(--grey);
   font-weight: 800;
   /*border: 1px dashed #cbd5e1*/
 }

 .team-section {
   background: linear-gradient(180deg, var(--white), var(--light))
 }

 .team-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
 }

 .team-card {
   background: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: 0 16px 48px rgba(7, 27, 51, .08);
   text-align: center;
   padding-bottom: 24px
 }

 .team-card img {
   height: 310px;
   object-fit: cover
 }

 .team-card h3 {
   margin-top: 22px
 }

 .team-card p {
   margin-top: 6px
 }

 .cta-section {
   background: var(--navy);
   color: var(--white);
   padding: 70px 0
 }

 .cta-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: var(--radius);
   padding: 44px
 }

 .contact-section {
   background: var(--light)
 }

 .contact-cards {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
   margin-top: 30px
 }

 .contact-cards div {
   background: var(--white);
   padding: 20px;
   border-radius: 18px;
   box-shadow: 0 12px 34px rgba(7, 27, 51, .06)
 }

 .contact-cards strong {
   display: block;
   color: var(--navy)
 }

 .contact-cards span {
   color: var(--grey);
   font-weight: 650
 }

 .contact-form {
   background: var(--white);
   padding: 36px;
   border-radius: var(--radius);
   box-shadow: var(--shadow)
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
 }

 .contact-form small {
   color: var(--grey)
 }

 .site-footer {
   background: #04101f;
   color: var(--white);
   padding-top: 70px
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 1.5fr .8fr 1fr 1fr;
   gap: 40px;
   padding-bottom: 45px
 }

 .footer-logo {
   font-size: 26px;
   font-weight: 900;
   color: var(--yellow)
 }

 .site-footer p {
   margin-top: 15px
 }

 .site-footer h4 {
   margin-bottom: 18px;
   color: var(--yellow)
 }

 .site-footer a {
   display: block;
   color: rgba(255, 255, 255, .75);
   margin: 9px 0;
   transition: var(--transition)
 }

 .site-footer a:hover {
   color: var(--yellow);
   transform: translateX(4px)
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 18px 0;
   text-align: center
 }

 .footer-bottom p {
   margin: 0
 }

 .scroll-top {
   position: fixed;
   right: 22px;
   bottom: 22px;
   width: 48px;
   height: 48px;
   border: 0;
   border-radius: 50%;
   background: var(--yellow);
   color: var(--navy);
   font-size: 22px;
   font-weight: 900;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: var(--transition);
   z-index: 999
 }

 .scroll-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
 }

 .reveal {
   opacity: 0;
   transform: translateY(35px);
   transition: .8s ease
 }

 .reveal.active {
   opacity: 1;
   transform: translateY(0)
 }

 @media(max-width:1024px) {

   .hero-grid,
   .split-grid,
   .why-grid,
   .quality-grid,
   .contact-grid,
   .client-cert-grid {
     grid-template-columns: 1fr
   }

   .service-grid,
   .project-grid,
   .team-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .timeline {
     grid-template-columns: repeat(2, 1fr)
   }

   .sector-grid,
   .stats-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .footer-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .hero-card {
     max-width: 580px
   }
 }

 @media(max-width:820px) {
   .top-bar {
     display: none
   }

   .menu-toggle {
     display: block
   }

   .nav-menu {
     position: fixed;
     top: 78px;
     right: -100%;
     width: min(340px, 88vw);
     height: calc(100vh - 78px);
     background: var(--navy);
     flex-direction: column;
     align-items: flex-start;
     padding: 34px;
     transition: var(--transition);
     box-shadow: -20px 0 60px rgba(0, 0, 0, .25)
   }

   .nav-menu.active {
     right: 0
   }

   .hero {
     padding-top: 140px
   }

   .section {
     padding: 72px 0
   }

   .hero-actions,
   .cta-box {
     align-items: flex-start;
     flex-direction: column
   }

   .image-stack img,
   .why-image img {
     height: 380px
   }

   .experience-badge {
     right: 18px
   }
 }

 @media(max-width:640px) {
   .container {
     width: min(100% - 28px, 1180px)
   }

   h1 {
     font-size: 40px
   }

   .service-grid,
   .project-grid,
   .team-grid,
   .timeline,
   .sector-grid,
   .stats-grid,
   .quality-points,
   .contact-cards,
   .footer-grid,
   .form-row,
   .check-grid,
   .equipment-grid,
   .logo-strip,
   .certificate-list {
     grid-template-columns: 1fr
   }

   .hero-card,
   .contact-form,
   .panel,
   .quality-card,
   .cta-box {
     padding: 26px
   }

   .project-card {
     height: 320px
   }

   .team-card img {
     height: 260px
   }
 }

 /* Professional icons and upgraded visuals */
 .stat-icon {
   width: 54px;
   height: 54px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, rgba(245, 164, 0, 0.12), rgba(228, 109, 33, 0.14));
   color: var(--orange);
   border-radius: 16px;
   margin-bottom: 18px;
   font-size: 22px;
 }

 .service-icon {
   width: 62px;
   height: 62px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, var(--navy), var(--navy-2));
   color: var(--yellow);
   border-radius: 18px;
   margin-bottom: 22px;
   font-size: 24px;
   box-shadow: 0 14px 28px rgba(7, 27, 51, 0.18);
 }

 .quality-point h3 i,
 .contact-cards strong i,
 .footer-grid h4 i,
 .equipment-panel h3 i {
   color: var(--orange);
   margin-right: 10px;
 }

 .sector-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 14px;
   min-height: 150px;
 }

 .sector-card i {
   font-size: 28px;
   color: var(--orange);
 }

 .sector-card span {
   display: block;
 }

 .logo-strip span,
 .certificate-list span {
   gap: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .logo-strip span i {
   color: var(--grey);
 }

 .certificate-list span i {
   color: var(--orange);
 }

 .hero-card,
 .contact-form,
 .panel,
 .team-card,
 .service-card,
 .project-card,
 .quality-card,
 .stat-card {
   position: relative;
 }

 .hero-card::before,
 .contact-form::before,
 .panel::before,
 .team-card::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .project-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(7, 27, 51, 0.02), rgba(7, 27, 51, 0.3));
   pointer-events: none;
 }

 .team-card img {
   filter: saturate(1.05) contrast(1.02);
 }

 .hero-card h3,
 .panel h2,
 .contact-info h2 {
   color: var(--navy);
 }

 .service-card:hover .service-icon,
 .stat-card:hover .stat-icon {
   transform: translateY(-3px) scale(1.03);
   transition: var(--transition);
 }

 @media (max-width: 640px) {
   .sector-card {
     min-height: auto;
   }
 }

 /* Floating WhatsApp and Call Buttons - Top Right Style */
 .floating-contact-buttons {
   position: fixed;
   right: 22px;
   top: 305px;
   z-index: 999;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .floating-btn {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: var(--white);
   font-size: 22px;
   box-shadow: 0 14px 34px rgba(7, 27, 51, 0.24);
   transition: var(--transition);
   position: relative;
 }

 .floating-btn span {
   position: absolute;
   right: 62px;
   top: 50%;
   transform: translateY(-50%) translateX(10px);
   background: var(--navy);
   color: var(--white);
   padding: 7px 12px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 800;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition);
 }

 .floating-btn:hover span {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(0);
 }

 .whatsapp-btn {
   background: #25D366;
 }

 .call-btn {
   background: linear-gradient(135deg, var(--yellow), var(--orange));
   color: var(--navy);
 }

 .floating-btn:hover {
   transform: translateY(-4px);
   box-shadow: 0 18px 44px rgba(7, 27, 51, 0.32);
 }

 @media (max-width: 640px) {
   .floating-contact-buttons {
     right: 14px;
     top: auto;
     bottom: 76px;
     gap: 10px;
   }

   .floating-btn {
     width: 48px;
     height: 48px;
     font-size: 20px;
   }

   .floating-btn span {
     display: none;
   }

   .scroll-top {
     right: 14px;
     bottom: 18px;
   }
 }
 
 /* Gallery Section */
.gallery-section {
  background: linear-gradient(180deg, var(--white), var(--light));
}

.gallery-filter {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}

.gallery-filter-btn {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  color: var(--navy);
  transition: var(--transition);
}

.gallery-filter-btn.active,
.gallery-filter-btn:hover {
  background: var(--navy);
  color: var(--white);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.gallery-item {
  position: relative;
  height: 260px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(7, 27, 51, 0.10);
  cursor: pointer;
  transition: var(--transition);
}

.gallery-item.hide {
  display: none;
}

.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.gallery-item img {
  height: 100%;
  object-fit: cover;
  transition: 0.55s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 27, 51, 0.05), rgba(7, 27, 51, 0.78));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: var(--white);
  opacity: 0;
  transition: var(--transition);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: var(--navy);
  border-radius: 50%;
  margin-bottom: 14px;
  font-size: 18px;
}

.gallery-overlay span {
  font-size: 18px;
  font-weight: 850;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 16, 31, 0.88);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.gallery-lightbox.active {
  display: flex;
}

.gallery-lightbox img {
  max-width: min(1100px, 95vw);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}

.gallery-lightbox-close {
  position: fixed;
  right: 28px;
  top: 22px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 32px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item {
    height: 280px;
  }

  .gallery-overlay {
    opacity: 1;
  }
}

/* Real Certificate Preview Cards */
.certificate-preview-list {
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}

.certificate-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(7,27,51,0.07);
  transition: var(--transition);
  color: var(--navy);
}

.certificate-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.certificate-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--light);
}

.certificate-card-content {
  padding: 14px 4px 4px;
}

.certificate-card-content strong {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.35;
}

.certificate-card-content strong i {
  color: var(--orange);
}

.certificate-card-content span {
  /*display: inline-block;*/
  margin-top: 8px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 640px) {
  .certificate-preview-list {
    grid-template-columns: 1fr;
  }

  .certificate-card img {
    height: 260px;
  }
}


/* Separated Clients and Certificates Sections */
.clients-only-section {
  background: var(--white);
}

.clients-only-section .section-heading {
  margin-bottom: 42px;
}

.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.client-logo-card {
  min-height: 130px;
  background: var(--light);
  border: 1px dashed #cbd5e1;
  border-radius: 22px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--grey);
  font-weight: 850;
  transition: var(--transition);
  padding: 20px;
}

.client-logo-card i {
  display: block;
  font-size: 28px;
  color: var(--orange);
  margin-bottom: 12px;
}

.client-logo-card span {
  display: block;
}

.client-logo-card:hover {
  background: var(--white);
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--yellow);
}

.certificates-only-section {
  background: linear-gradient(180deg, var(--light), var(--white));
}

.certificates-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 48px;
  box-shadow: 0 18px 54px rgba(7,27,51,0.08);
}

.certificate-content h2 {
  margin-bottom: 18px;
}

.certificate-content p {
  max-width: 560px;
}

.certificate-highlights {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.certificate-highlights span {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--light);
  color: var(--navy);
  font-weight: 800;
  padding: 14px 16px;
  border-radius: 14px;
}

.certificate-highlights i {
  color: var(--orange);
}

.certificates-only-section .certificate-preview-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 0;
}

.certificates-only-section .certificate-card {
  min-height: auto;
}

@media (max-width: 1024px) {
  .client-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .certificates-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .client-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .certificates-layout {
    padding: 26px;
    border-radius: 24px;
  }

  .certificates-only-section .certificate-preview-list {
    grid-template-columns: 1fr;
  }
}

/* Centered Preloader Fix */
.preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: var(--navy);
  color: var(--white);
  z-index: 99999;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
}

.preloader-logo {
  width: 150px;
  max-width: 42vw;
  height: auto;
  display: block;
  object-fit: contain;
  animation: preloaderLogoPulse 1.6s ease-in-out infinite;
}

.preloader-logo-text {
  font-size: 30px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 1px;
  animation: preloaderLogoPulse 1.6s ease-in-out infinite;
}

.loader {
  width: 54px;
  height: 54px;
  border: 4px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--yellow);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 !important;
}

 @keyframes spin {
   to {
     transform: rotate(360deg)
   }
 }

@keyframes preloaderLogoPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.92;
  }
}

@media (max-width: 640px) {
  .preloader-logo {
    width: 120px;
  }

  .preloader-content {
    gap: 22px;
  }
}