/* =================================
   1. GLOBAL
================================= */
*{
box-sizing:border-box;
margin:0;
padding:0;
}

:root{

--light-accent:#60AFFF;
--brand-navy:#001489;
--brand-green:#009A3D;

--dark-base:#13182D;
--brand-text:#212121;

--brand-white:#FFFFFF;

}

/* =================================
   2. BASE TYPOGRAPHY
================================= */
body{
font-family:"Libre Franklin", sans-serif;
line-height:1.6;
color:#222;
background:#ffffff;
}

h1,
h2,
h3,
h4{
font-weight:700;
line-height:1.2;
text-align:center;
}

h1{
font-size:clamp(2.2rem,4vw,3rem);
margin-bottom:20px;
}

h2{
font-size:clamp(1.6rem,3vw,2.2rem);
margin-bottom:15px;
}

h3{
font-size:1.2rem;
margin-bottom:10px;
}

p{
max-width:720px;
margin:0 auto 20px auto;
text-align:center;
color:#555;
}

.section-intro{
max-width:700px;
margin:10px auto 40px auto;
opacity:0.75;
text-align:center;
}

.small-caps-text {
  font-variant: small-caps;
}

/* ================================= 
   3. PAGE HEADING ANIMATION
================================*/
.page-hero{ 
position: relative;
}

.hero h1,
.page-hero h1{
opacity:0;
transform:translateY(20px);
animation:headingFade 0.6s ease forwards;
}

.page-hero .hero-text{
opacity:0;
transform:translateY(20px);
animation:headingFade 0.8s ease forwards;
animation-delay:0.2s;
color: #FFFFFF;
}

@keyframes headingFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* HERO TEXT COLOURS */
.hero{
color:#fff;
}

.home-hero-text{
max-width:720px;
margin:0 auto 20px auto;
text-align:center;
color:#fff;
}

/* =================================
   4. LAYOUT SYSTEM
================================= */
.hidden-section {
  display: none;
}

.hidden-social{
display:none;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

section{
padding:80px 0;
}

.site-main{
padding-top:0;
min-height:60vh;
}

.section{
  padding:80px 20px;
}

.section.white{
  background:#fff
}

.section.light{
  background:#f7f9fc;
}

.section.medium{
  background:#f4f6fc;
}

.section.dark{
  background:var(--dark-base);
  color:#ffffff;
}

.section.dark p{
  color:#ffffff;
}

.container{
  max-width:1100px;
  margin:0 auto;
}

.container.narrow{
  max-width:750px;
}

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

/* =================================
   5. UNIVERSAL GRID LAYOUT (FLEXBOX)
================================= */
.grid{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

/* =================================
   6. UNIVERSAL CARD LAYOUT (FLEXBOX)
================================= */
.card{
background:#ffffff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
min-height:180px;

}

.card{
flex:0 1 260px;
max-width:260px;
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
text-align:center;
transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 16px 35px rgba(0,0,0,0.08);
}

.card h3{
margin-bottom:10px;
}

.card p{
opacity:0.75;
font-size:15px;
}

.services{
background:#f7f9fc;
}

.card{
width:100%;
max-width:260px;
}

/* =================================
   7. HEADER / NAVIGATION
================================= */
.header{
background: rgba(31, 35, 71, 0.75); /* 👈 semi-transparent */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */

  position: sticky; /* or fixed if you're using that */
  top: 0;
  z-index: 1000;
}

/* NAV WRAPPER */
.nav-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
height:70px;
}

/* NAV MENU */
.nav-menu{
display:flex;
gap:30px;
}

/* NAV LINKS */
.nav-menu a{
position:relative;
text-decoration:none;
color:var(--brand-white);
font-weight:500;
padding-bottom:6px;
transition:opacity 0.2s ease;
}

/* HOVER EFFECT */
.nav-menu a:hover{
opacity:0.75;
}

/* UNDERLINE BASE (hidden by default) */
.nav-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:3px;
border-radius:2px;
background:var(--brand-white);
transition:width 0.25s ease;
}

/* UNDERLINE ON HOVER */
.nav-menu a:hover::after{
width:100%;
}

/* ACTIVE LINK */
nav a.active{
color:var(--brand-green);
font-weight:600;
}

/* ACTIVE UNDERLINE */
nav a.active::after{
width:100%;
}

/* LOGO */
.logo a{
font-weight:800;
font-size:20px;
text-decoration:none;
color: var(--brand-white);
}

.logo {
  font-weight: bold;
  font-size: 1.2rem;

}

.logo img {
  height: 50px;        /* desktop size */
  width: auto;
  display: block;
  filter:brightness(1.1);
}

/* Mobile tweak */
@media (max-width: 768px) {
  .logo img {
    height: 40px;
  }
}

/* HAMBURGER BUTTON */
.menu-toggle{
display:none;
font-size:28px;
background:none;
border:none;
cursor:pointer;
color:var(--brand-white);
}

.menu-toggle{
display:none;
background:none;
border:none;
cursor:pointer;
}

.menu-toggle img{
width:26px;
height:26px;
}

.icon-close{
display:none;
}

.menu-toggle.active .icon-menu{
display:none;
}

.menu-toggle.active .icon-close{
display:block;
}

/* MOBILE / TABLET NAVIGATION */
@media (max-width:1024px){

.nav-menu{
position:absolute;
top:70px;
left:0;
width:100%;

background:var(--dark-base);

flex-direction:column;
align-items:center;
gap:20px;

padding:30px 0;

display:none;
}

.nav-menu.active{
display:flex;
}

.menu-toggle{
display:block;
}

}

/* =================================
   8. HOME PAGE 
================================= */

/* hero section */
.home-page-hero{
  position:relative;
  height: clamp(500px, 75vh, 750px);
  padding-top:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

.home-page-hero-text{
  color:white;
}

.home-page-hero p{
  font-size:1.1rem;
  color:rgba(255,255,255,0.9);
  margin-top:10px;
  margin-bottom:30px;
}

.hero h1,
.home-page-hero h1{
  font-weight:800;
  line-height:1.1;
  letter-spacing:-1px;
}

/* video hero section */
.hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

/* video hero overlay section */
.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.35)
);
}

/* hero content positioning */
.hero-content{
position:relative;
z-index:2;
max-width:700px;
padding-bottom:20px;
}

/* home hero buttons */
.hero-buttons{
margin-top:30px;
margin-bottom:35px;
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

/* primary button */
.btn.primary{
background: var(--brand-navy);
color:#fff;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:all 0.25s ease;
}

.btn.primary:hover{
background: var(--dark-base);
border: var(--dark-base);
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

/* small button */
.btn.primary.btn-small{
padding:14px 10px;   /* smaller than 14px 28px */
font-size:12px;
border-radius:6px;  /* optional: slightly tighter */
}

/* secondary button */
.btn.secondary{
background:#fff;
color: var(--brand-navy);
padding:14px 28px;
border-radius:8px;

text-decoration:none;
font-weight:600;
transition:all 0.25s ease;
}

.btn.secondary:hover{
background:var(--dark-base);
color:#fff;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .home-page-hero{
    height: auto;          /* 🔥 THIS is the key */
    min-height: 100vh;     /* ensures full screen */
    padding-top: 120px;    /* space from navbar */
    padding-bottom: 60px;  /* space for credibility strip */
  }
}

@media (max-width: 768px) {
  .home-page-hero{
    align-items: flex-start;
  }

  .hero-content{
    margin-top: 40px;
  }

   .hero-company-name{
    font-size:0.8rem;
    letter-spacing:1.5px;
    padding:7px 14px;
  }
}

@media (min-width: 1024px) {
  .home-page-hero{
    height: clamp(600px, 85vh, 900px);
  }
}

/* =================================
   HOME HERO COMPANY NAME
================================= */

.hero-company-name{
  display:inline-block;
  margin-bottom:18px;
  padding:8px 18px;
  border:1px solid rgba(255,255,255,0.18);

  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(6px);

  color:var(--brand-navy); /* NAS brand color */
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;

  border-radius:8px;

  opacity:0;
  transform:translateY(20px);
  animation:headingFade 0.8s ease forwards;
}

/* =================================
   9. CREDIBILITY STRIP
================================= */
.credibility-box{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
margin-top:0;
padding:3px 28px 14px;  /* top | sides | bottom */
border-radius:12px;
background:rgba(15, 25, 45, 0.65);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.08);
max-width:900px;
margin:auto;
}

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

.cred-number{
font-size:32px;
font-weight:700;
color: var(--light-accent);
text-shadow:0 0 12px rgba(127, 161, 177, 0.277);
display:block;
}

.cred-value{
display:flex;
justify-content:center;
align-items:flex-start;
margin-bottom:2px;
gap:4px;
}

.cred-suffix{
font-size:0.8em;
position:relative;
top:10px;
font-weight:600;
color:var(--light-accent);
}

.credibility-box p {
  color: rgba(255,255,255,0.85);
}

.cred-item p{
font-size:15px;
color:#ffffff;
opacity:0.85;
margin: 2px 0 0;     /* top | right-left | bottom */
line-height: 1.2;    /* reduces vertical slack */
}

@media (max-width:768px){

.credibility-box{
flex-direction:column;
gap:14px;
padding: 3px 28px 14px;  /* top | sides | bottom */
max-width:92%;
}

.hero-buttons{
margin-bottom:26px;
}

.cred-number{
font-size:24px;
}

.cred-suffix{
font: size 0.8em;
top:2px;
}

.cred-item p{
margin: 2px 0 0;     /* top | right-left | bottom */
line-height: 1.0;    /* reduces vertical slack */
}

}

/* =================================
   10. INDUSTRIES
================================= */
.industries{
background:#eef2f7;
}

/* flex layout for industry cards */
.industries .grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

/* industry card size control */
.industry-card{
flex:0 1 260px;
max-width:360px;

background:#ffffff;
padding:30px;
border-radius:12px;
box-shadow:0 8px 22px rgba(0,0,0,0.04);
text-align:center;

display:flex;
flex-direction:column;
justify-content:flex-start;

transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.industry-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 36px rgba(0,0,0,0.08);
}

.industry-card h3{
margin-bottom:10px;
font-size:1.1rem;
}

.industry-card p{
font-size:14px;
opacity:0.75;
}

/* subtle hover line under heading of industry card */
.industry-card h3::after{
content:"";
display:block;
width:0;
height:2px;
background:var(--brand-green);
margin:6px auto 0 auto;
transition:width 0.25s ease;
}

.industry-card:hover h3::after{
width:40px;
}

.industry-card:hover .industry-icon{
background:#e8eef7;
transform:translateY(-2px);
}

/* industry icons */
.industry-icon{
width:48px;
height:48px;

display:flex;
align-items:center;
justify-content:center;

background:#f2f5fa;
border-radius:8px;

margin:0 auto 14px auto;

transition:all .25s ease;
}

.industry-icon img{
width:28px;
height:28px;
}

/* =================================
   11. WHY NAS
================================= */
.why-nas{
background:#f7f9fc;
}

.why-layout{
display:flex;
align-items:center;
justify-content:center;
gap:60px;
flex-wrap:wrap;
}

.why-content{
flex:1 1 420px;
max-width:520px;
text-align:center;
}

.why-list{
list-style:none;
margin-top:20px;
padding:0;
}

.why-list li{
margin-bottom:16px;
line-height:1.6;
}

.why-image{
flex:1 1 420px;
max-width:500px;
}

.why-image img{
width:100%;
border-radius:12px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.image-frame{
background:#ffffff;
padding:12px;
border-radius:12px;

box-shadow:0 18px 45px rgba(0,0,0,0.08);
border:1px solid rgba(76,80,175,0.15);

transition:transform 0.3s ease;
}

.image-frame:hover{
transform:translateY(-4px);
}

.image-frame img{
width:100%;
display:block;
border-radius:12px;
}

/* =================================
   12. SERVICE ICONS
================================= */
.service-icon{
width:56px;
height:56px;

display:flex;
align-items:center;
justify-content:center;

background:#f2f5fa;
border-radius:8px;

margin:0 auto 16px auto;

transition:all .25s ease;
}

.service-icon img{
width:34px;
height:34px;

transition:transform .25s ease;
}

.service-card:hover .service-icon{
background:#e8eef7;
transform:translateY(-2px);
}

.service-card:hover .service-icon img{
transform:translateY(-2px);
}

/* ================================= 
   13. HOME PAGE PROJECTS HIGHLIGHTS
================================= */
.projects-preview{
padding:80px 0;
background:#eef2f7;
text-align:center;
}

.projects-grid{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
margin-top:50px;
}

/* project highlights card */
.projects-card{
flex:1 1 300px;
max-width:360px;
display:block;
perspective:1200px;
}

/* project highlights inner flip */
.projects-inner{
position:relative;
width:100%;
aspect-ratio:4/3;
transform-style:preserve-3d;
transition:transform .7s ease;
border-radius:12px;
}

.projects-card:hover .projects-inner{
transform:rotateY(180deg);
}

/* project highlights card faces */
.projects-face{
position:absolute;
inset:0;
border-radius:12px;
overflow:hidden;
backface-visibility:hidden;
}

/* project hightlights back of card */
.projects-back{
transform:rotateY(180deg);
}

/* project highlights card image */
.projects-face img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* project highlights front image blur effect */
.projects-front img{
filter:blur(2px);
transform:scale(1.05);
}

/* project hightlights font dark overlay */
.projects-front::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.35);

z-index:1;
}

.projects-back::after{
content:"";
position:absolute;
inset:0;

background:rgba(0,0,0,0.22);

z-index:1;
}

/* project hightlights title */
.projects-title{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color:#fff;
font-size:1.2rem;
font-weight:600;
text-align:center;

z-index:2;

/* improved shadow */
text-shadow:
0 2px 4px rgba(0,0,0,0.45),
0 6px 18px rgba(0,0,0,0.55);
}

/* project hightlights title position on back */
.projects-title-back{
top:45%;
}

/* project hightlights view more button */
.projects-button{
position:absolute;
top:75%;
left:50%;
transform:translate(-50%, -50%);
padding:10px 18px;
color:#fff;
font-size:0.95rem;
font-weight:500;
z-index: 3;
border-radius:8px;
background:var(--brand-navy);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}

/* =================================
   14. CLIENT LOGO SLIDER
================================= */
.clients{
padding:80px 0;
background:#ffffff;
text-align:center;
}

/* client slider */
.clients-slider{
position:relative;
overflow:hidden;
margin-top:50px;
}

/* client slider faded outer edges */
.clients-slider::before,
.clients-slider::after{
content:"";
position:absolute;
top:0;
height:100%;
width:120px;
z-index:2;
pointer-events:none;
}

.clients-slider::before{
left:0;
background:linear-gradient(to right,#ffffff,rgba(255,255,255,0));
}

.clients-slider::after{
right:0;
background:linear-gradient(to left,#ffffff,rgba(255,255,255,0));
}

/* client slider track */
.clients-track{
display:flex;
align-items:center;
gap:40px;
will-change:transform;

width:max-content;   /* important */
animation:clients-scroll 40s linear infinite;
}

/* pause animation on hover */
.clients-slider:hover .clients-track{
animation-play-state:paused;
}

/* client logo box */
.client-logo{
min-width:150px;
height:80px;

display:flex;
align-items:center;
justify-content:center;

border-radius:8px;

background:#f4f6fb;
color:#7a8496;
font-weight:600;
letter-spacing:1px;

flex-shrink:0;
}

/* client logo image */
.client-logo img{
max-height:70%;
max-width:80%;
width:auto;
object-fit:contain;

transition:transform .3s ease;
}

.client-logo:hover img{
transform:translateY(-4px);
}

/* client track & logo responsive */
@media (max-width:1024px){

.clients-track{
gap:40px;
animation-duration:50s;
}

.client-logo{
min-width:120px;
height:60px;
}
}

@media (max-width:640px){

.clients-track{
gap:30px;
animation-duration:50s;
}

.client-logo{
min-width:100px;
height:50px;
}
}

/* animation */
@keyframes clients-scroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* =================================
   15. TESTIMONIALS
================================= */
.testimonials{
padding:80px 0;
background:#f7f9fc;
text-align:center;
}

.testimonial-text{
margin-top:10px;
padding-left:12px;

font-size:1rem;
line-height:1.6;
color:#4a5568;
}

.testimonials-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
margin-top:50px;
}

.testimonial-text{
font-size:1rem;
line-height:1.6;
color:#4a5568;
margin-bottom:20px;
}

.testimonial-author{
margin-top:10px;
}

.author-name{
display:block;
font-weight:600;
color:#1a202c;
}

.author-company{
display:block;
font-size:.9rem;
color:#718096;
margin-top:2px;
}

/* testimonials slider cards */
.testimonial-slider{
position:relative;
margin-top:50px;
display:flex;
align-items:center;
overflow:hidden;
}

.testimonial-track{
display:flex;
overflow:hidden;
scroll-behavior:smooth;
width:100%;
border-radius:12px;
gap:30px;

scroll-snap-type:x mandatory;
}

/* testimonial card */
.testimonial-card{
min-width:calc(33.333% - 20px);
padding:32px 28px;
background:#ffffff;
border-radius:12px;
box-shadow:none;
transition:transform .35s ease, box-shadow .35s ease;
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.testimonial-card::before{
content:"“";
position:absolute;
top:20px;
left:25px;
font-size:52px;
font-weight:600;
color:#e6ebf2;
line-height:1;
}

.testimonial-card{
scroll-snap-align:start;
}

.testimonial-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 28px rgba(0, 0, 0, 0.020);
}

/* mobile responsiveness | tablet - show 2 cards */
@media (max-width:1024px){

.testimonial-card{
min-width:calc(50% - 15px);
}

}

/*  mobile responsiveness | mobile - show 1 card */
@media (max-width:640px){

.testimonial-card{
min-width:100%;
}

}

/* testimonials arrow */
.testimonial-arrow{
background:none;
border:none;
font-size:28px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:#1a202c;
padding:10px;
transition:transform .25s ease, color .25s ease;
}

.testimonial-arrow:hover{
transform:scale(1.15);
color:#1f3a5f;
}

/* testimonial navigation dots */
.testimonial-dots{
display:flex;
justify-content:center;
gap:10px;
margin-top:30px;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:#d5dbe4;
transition:all .3s ease;
}

.dot.active{
background:var(--dark-base); 
transform:scale(1.2);
}

/* ===============================
   16. CTA SECTION
================================= */
.cta-section{
background:#eef2f7;
padding:90px 20px;
text-align:center;
}

.cta-section .container{
background:#ffffff;
padding:50px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.cta-section h3{
font-size:32px;
margin-bottom:20px;
color:#1f2d3d;
}

.cta-section p{
font-size:18px;
line-height:1.6;
color:#555;
max-width:650px;
margin:0 auto 35px;
}

.cta-buttons{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
}

/* Primary button */
.btn-primary{
background:var(--brand-navy);
color:#fff;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:all 0.25s ease;
}

.btn-primary:hover{
background:var(--brand-green);
color: #FFFFFF;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

/* Secondary button */
.btn-secondary{
background:var(--brand-navy);
color:#fff;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:all 0.25s ease;
}

.btn-secondary:hover{
background: var(--brand-green);
border:none;
color:#fff;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

/* Trust section container */
.cta-trust{
margin-top:45px;
display:flex;
justify-content:center;
gap:60px;
flex-wrap:wrap;
}

/* Individual trust item */
.trust-item{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
max-width:160px;
flex:1 1 160px;
}

/* Trust Icon */
.trust-icon{
width:42px;
height:42px;
color:#5a9963; /* brand green */
margin-bottom:10px;
}

/* Text */
.trust-item span{
font-size:15px;
color:#666;
line-height:1.4;
}

@media (max-width: 600px){

.cta-trust{
gap:35px;
}

}

/* =================================
   17. PATTERN OVELAYS
================================ */
.section-airflow{
background-color:#eef2f7;
background-image:url("data:image/svg+xml,%3Csvg width='200' height='60' viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q50 10 100 30 T200 30' stroke='%2360AFFF' stroke-width='1' fill='none' opacity='0.15'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:200px 60px;
}

.section-pattern{
background-color:#eef2f7;
background-image:
repeating-linear-gradient(
45deg,
rgba(0,0,0,0.03) 0px,
rgba(0,0,0,0.03) 1px,
transparent 1px,
transparent 10px
);
}

/* =================================
   18. OTHER PAGES - HERO SECTIONS
================================= */
.page-hero{
  background:#eef2f7;
  padding:100px 20px 80px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.page-hero h1{
  margin-bottom:12px;
  font-size:clamp(28px, 4vw, 42px);
}

.page-hero:not(.home-page-hero) p{
  max-width:650px;
  margin:auto;
  color:#5f6b7a;
  line-height:1.6;
}

/* ACCREDITATIONS GRID */
.accreditations-grid{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:40px;
}

.accred-item{
  background:rgba(105, 105, 105, 0.322);
  padding:20px;
  border-radius:10px;
  width:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  
}

.accred-item img{
  max-width:100%;
}

@media (max-width: 768px) {
  .home-page-hero{
    height: auto;          /* 🔥 THIS is the key */
    min-height: 100vh;     /* ensures full screen */
    padding-top: 120px;    /* space from navbar */
    padding-bottom: 60px;  /* space for credibility strip */
  }
}

/* =================================
   TEAM LAYOUT (FINAL, STABLE)
================================= */

.team-group{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 👈 THIS guarantees centering */
  gap: 20px;
}

/* CARD BASE */
.team-card{
  flex: 0 0 260px;   /* fixed width cards */
  max-width: 260px;

  background: #fff;
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* =================================
MANAGEMENT TEAM (2 → 2 → 1)
==================================*/
.management .team-card{
  flex: 0 0 300px;
  max-width: 300px;
}

.management{
  max-width: 640px; /* prevents 3 per row */
  margin: 0 auto;
}

/* ================================= 
OFFICE TEAM (4 → 2 → 1)
================================= */
.office .team-card{
  flex: 0 0 240px;
  max-width: 240px;
}

.office{
  max-width: 1040px;
  margin: 0 auto;
}

/* ===================================
TECHNICIANS & OPERATORS
====================================*/
.technicians,
.operators{
  max-width: 820px; /* caps at 3 cards */
  margin: 0 auto;
}

/* TEAM RESPONSIVE */
@media (max-width: 1000px){
  .office,
  .technicians,
  .operators{
    max-width: 560px; /* 2 cards */
  }
}

@media (max-width: 500px){
  .team-card{
    flex: 0 0 90%;
    max-width: 320px;
  }

  .management,
  .office,
  .technicians,
  .operators{
    max-width: 100%;
  }
}

/* ==================================
TEAM CARD IMAGES
===================================*/
.team-card img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  margin-bottom: 15px;
  background: #f3f4f6;
}

/* TEXT */
.team-card span{
  display: block;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 10px;
}

/* HOVER */
.team-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.12);
}

/* BUTTON */
.view-certs{
  align-self: center;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #13182D;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

/* CERTIFICATIONS */
.certifications{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.team-card.active .certifications{
  max-height: 200px;
  margin-top: 12px;
}

.certifications ul{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.certifications li{
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}

/* SUBHEADINGS */
.team-subheading{
  font-size: 20px;
  margin: 40px 0 20px;
  text-align: center;
  color: #13182D;
}

/* ===================================
  SERVICE NOTICE BOX 
  ===============================*/
.contact-service-note{
  max-width: 750px;
  margin: 0 auto 30px auto;
  padding: 14px 20px;
  background: #ffffff;
  border-left: 4px solid var(--brand-green);
  border-radius: 10px;
  color: #4b5563;
  line-height: 1.6;
  font-size: 0.95rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* =================================
   MINI CONTACT SECTION (SCOPED)
================================= */

/* GRID LAYOUT */
.contact-mini .contact-mini-grid{
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: space-between;
}

/* LEFT SIDE (DETAILS) */
.contact-mini .contact-details{
  flex: 1 1 0;           /* 👈 stable flex behavior */
  max-width: 500px;
}

.contact-mini .contact-details h3{
  margin-bottom: 20px;
}

.contact-mini .contact-details p{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #4b5563;
}

.contact-mini .contact-details i{
  width: 18px;
}

/* RIGHT SIDE (FORM CARD) */
.contact-mini .contact-form{
  flex: 0 1 420px;       /* 👈 controlled width */
  max-width: 420px;      /* 👈 consistent with flex-basis */
  width: 100%;

  background:#fff;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.contact-mini .contact-form h3{
  margin-bottom: 20px;
}

/* FORM */
.contact-mini .contact-form form{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-mini .contact-form input,
.contact-mini .contact-form textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.contact-mini .contact-form textarea{
  min-height: 120px;
  resize: vertical;
}

.contact-mini .contact-form button{
  margin-top: 10px;
}

/* =================================
   CONTACT RESPONSIVE BEHAVIOUR
================================= */

@media (max-width:900px){

  .contact-mini .contact-mini-grid{
    display: flex;              /* 👈 ensures layout stays flex */
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .contact-mini .contact-form{
    max-width: 100%;
    width: 100%;
  }

  .contact-mini .contact-details{
    max-width: 100%;
  }

}

/* =================================
   19. CONTACT PAGE 
================================= */

/* CONTACT MAIN SECTION */
.contact-main{
  padding: 40px 0 100px;
  background: #f7f9fc;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* CONTACT FORM */
.contact-form{
  background: #ffffff;
  padding: 45px;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  order: 2;
  text-align: left;
}

.contact-form h2{
  margin-bottom: 30px;
}

.contact-form form{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-group{
  display: flex;
  flex-direction: column;
}

.form-group label{
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c3442;
}

.form-group input,
.form-group textarea{
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d9dde5;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  transition: border .2s ease, box-shadow .2s ease;
}

.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(0,160,120,0.12);
}

.form-group textarea{
  resize: vertical;
}

.form-btn{
  margin-top:10px;
  align-self:center;
  padding:14px 36px;
}

/* company contact details */
.contact-details{
  order:1;
  text-align:left;
}

.contact-details-inner{
max-width:500px;
margin:30px auto 0;
}

.contact-details p{
  margin-bottom:20px;
  color:#5f6b7a;
}

.contact-list{
text-align:left; /* keeps icon layout intact */
}

.contact-list{
list-style:none;
padding:0;
margin:25px 0;
}

.contact-list li{
display:grid;
grid-template-columns:22px 1fr;
gap:12px;
align-items:start;
margin-bottom:12px;
line-height:1.5;
color:#333;
}

/* icons */
.contact-list i{
font-size:16px;
color:var(--brand-navy);
margin-top:4px;
}

/* text */
.contact-list a,
.contact-list span{
color:#222;
text-decoration:none;
line-height:1.6;
}

/* hover polish */
.contact-list a:hover{
color:var(--brand-blue);
}

.contact-list li:hover i{
color:var(--brand-blue);
transform:translateY(-1.5px);
transition:.2s ease;
}

/* HONEYPOT FOR BOTS */
.form-honeypot{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* EMBEDDED MAP (inside left column) */
.contact-map-embed{
margin:25px 0;
margin-top:35px;
}

.contact-map-embed iframe{
width:100%;
height:220px;
border:0;
border-radius:12px;
}

.contact-extra{
margin-top:10px;
font-size:0.95rem;
color:#5f6b7a;
}

.contact-extra p{
margin-bottom:6px;
}

/* =================================
   20. FINAL CTA
================================= */
.contact-cta{
padding:80px 0;
background:#f4f6fb;
text-align:center;
}

.contact-cta .container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.contact-cta p{
max-width:600px;
margin:10px auto 0;
}

.contact-cta .btn{
margin-top:25px;
padding:16px 32px;
font-size:1.05rem;
}

/* =================================
   21. CONTACT RESPONSIVE
================================= */
@media (max-width:768px){

  .contact-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .contact-cards-grid{
    gap:20px;
  }

}

/* =================================
   22. MOBILE CALL BUTTON
================================= */
.mobile-call-btn{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:var(--brand-green);
  color:#fff;
  padding:14px 26px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  animation:callPulse 3s infinite;
  z-index:999;
}

.mobile-call-btn:hover{
animation:none;
}

/* icon */
.call-icon{
width:18px;
height:18px;
}

/* hide on desktop */
@media (min-width:768px){
.mobile-call-btn{
display:none;
}
}

@keyframes callPulse{

0%{
box-shadow:0 0 0 0 rgba(0,160,120,0.6);
}

70%{
box-shadow:0 0 0 14px rgba(0,160,120,0);
}

100%{
box-shadow:0 0 0 0 rgba(0,160,120,0);
}

}

/* =================================
   23. FOOTER
================================= */
.site-footer{
background:var(--dark-base);
color:#d9e1ea;
padding-top:60px;
line-height:1.6;
}

/* FOOTER TOP CONTACT STRIP */
.footer-top-inner{
text-align:center;
}

.footer-logo{
display:block;
max-width:180px;
margin:0 auto 15px auto;
filter:brightness(1.1);
}

.footer-top-contact{
margin-top:10px;
font-size:15px;
color:#d9e1ea;
}

.footer-top-contact .divider{
margin:0 10px;
opacity:.5;
}

.footer-tagline{
margin-top:6px;
font-size:14px;
color:#a9b4c2;
letter-spacing:.5px;
}

/* FOOTER GRID */
.footer-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px;
padding:50px 0 30px;
}

/* HEADINGS */
.site-footer h4{
color: #fff;
margin-bottom: 15px;
font-size: 16px;
letter-spacing: .5px;
}

/* LINKS */
.footer-links ul{
list-style: none;
padding: 0;
margin: 0;
}

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

.footer-links a{
color: #d9e1ea;
text-decoration: none;
transition: color .2s ease;
}

.footer-links a:hover{
color: var(--light-accent);
}

.footer-links li::before{
content: "→";
margin-right: 8px;
color: var(--light-accent);
}

/* SOCIAL */
.footer-social{
text-align: center;
padding: 28px 0 18px;
border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-social p{
margin-bottom: 14px;
color: #cfd6df;
font-weight: 500;
letter-spacing: .4px;
}

/* ICON CONTAINER */
.social-icons{
display: flex;
justify-content: center;
gap: 14px;
}

/* ICON BUTTON */
.social-icons a{
width: 46px;
height: 46px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;
background: rgba(255,255,255,0.05);

color: #d9e1ea;
font-size: 20px;

text-decoration: none; /* removes underline */

transition: all .25s ease;
}

/* ICON FIX */
.social-icons i{
line-height: 1;
}

/* HOVER */
.social-icons a:hover{
background: var(--light-accent);
color: #fff;

transform: translateY(-3px);

box-shadow: 0 0 12px rgba(0,180,255,.35); /* subtle glow */
}

/* BOTTOM FOOTER BAR */
.footer-bottom{
margin-top: 40px;
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,0.08);
text-align: center;
font-size: 14px;
color: #a9b4c2;
font-weight: 500;
}

.footer-credit{
margin-top: 6px;
font-size: 12px;
}

.footer-credit a{
color: inherit;
text-decoration: none;
font-weight: 500;
}

.footer-credit a:hover{
color: var(--light-accent);
}

/* FOOTER BOTTOM LINKS */
.footer-bottom a{
color: #a9b4c2;
text-decoration: none;
transition: color .2s ease;
}

.footer-bottom span{
margin: 0 6px;
opacity: .6;
}

.footer-bottom a:hover{
color: var(--light-accent);
text-decoration: none;
}

/* RESPONSIVE */
@media (max-width:900px){
.footer-grid{
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}

@media (max-width:500px){
.footer-grid{
grid-template-columns: 1fr;
text-align: center;
}

.footer-links ul{
padding-left: 0;
}
}

/* =================================
   24. BACK-TO-TOP BUTTON
================================= */
.backtotop-icon{
width: 16px;
height: 16px;
}

#backToTop{
position: fixed;
bottom: 30px;
right: 30px;

width: 44px;
height: 44px;

border: none;
border-radius: 50%;

background: #1f2d3d;
color: #ffffff;

cursor: pointer;

display: flex;
align-items: center;
justify-content: center;

box-shadow: 0 6px 16px rgba(0,0,0,0.25);

opacity: 0;
visibility: hidden;

transition: all .25s ease;
}

#backToTop{
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .25s ease, transform .25s ease;
}

#backToTop.show{
opacity: 1;
visibility: visible;
transform: translateY(0);
}

#backToTop:hover{
transform: translateY(-3px);
background: #2c3f55;
}

#backToTop i{
font-size: 14px;
}

/* =================================
    PRIVACY POLICY & WEBSITE TERMS
================================ */
.legal-page {
  padding: 60px 20px;
  max-width: 900px;
  margin: auto;
}

.legal-header {
  margin-bottom: 30px;
}

.last-updated {
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 15px;
}


/* ACCORDION CONTROLS */
.accordion-controls {
  display: flex;
  justify-content: center; 
  gap: 10px;
  margin-bottom: 20px;
}

.accordion-controls button {
  padding: 8px 14px;
  border: 1px solid gray;
  background: white;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s ease;
  border-radius: 6px;
}

.accordion-controls button:hover {
  background: #2e7d32; /* 👈 NAS green */
  color: white;
  border-color: #2e7d32;
}

/* Accordion Items */
.accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion-header {
  width: 100%;
  text-align: left;
  padding: 18px;
  font-size: 16px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease;
}

.accordion-header:hover {
  color: var(--brand-green);
}

/* Accordion Icon + -  */
.accordion-header::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 18px;
  transition: transform 0.2s ease;
}

.accordion-header.active::after {
  content: "–";
}

/* Accordion Content */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 18px;
}

/* Paragraphs */
.accordion-content p {
  padding: 10px 0 6px; /* smaller gap below sentence */
  text-align: left;
}

/* Bullet Lists */
.accordion-content ul {
  padding: 0 0 20px 28px; /* more indentation */
  margin: 0;
  text-align: left;
}

/* Bullet spacing */
.accordion-content li {
  margin-bottom: 8px;
}

/* Optional: subtle open state */
.accordion-item.active {
  background: rgba(46, 125, 50, 0.05);
}

.btn-download{ 
  background: var(--brand-navy); 
  color:#fff; 
  padding: 10px 16px;
  border-radius:8px; 
  text-decoration:none; 
  font-weight:600; 
  transition:all 0.25s ease; 
}

.btn-download:hover {
  background: var(--brand-green);
}

.download-button {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}


/* =================================
   MINOR TWEAKS
================================= */
.areas-list {
  list-style-type: none; /* Removes the bullet points in areas we serve section */
  text-align: center;
}

.values-list {
  list-style-type: none; /* Removes the bullet points in values list section */
  text-align: center;

}

/* =================================
EMAIL SENT POP-UP STYLING
=================================*/
.form-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  max-width: 300px;
}

.popup-content button {
  margin-top: 15px;
  padding: 8px 16px;
  border: none;
  background: var(--brand-green); 
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.popup-content button {
  margin-top: 15px;
  padding: 8px 16px;
  border: none;
  background: var(--brand-green);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
}

.popup-content button:hover {
  background: var(--brand-navy); 
}

/* =================================
   RESPONSIVE ADJUSTMENTS
================================= */