body{margin:0;font-family:'Open Sans',Arial,sans-serif;background:#000;color:#fff;line-height:1.6;text-align:center; padding-top:110px;}
h1,h2,h3{font-family:'Montserrat',Arial,sans-serif;font-weight:700;margin:0 0 20px;}
/* Navbar */
.navbar{display:flex;align-items:center;flex-wrap:wrap;position:fixed;top:0;left:0;width:100%;z-index:1000;background:#000;border-bottom:3px solid #0054a6;justify-content:flex-start;padding:10px 20px;}
.logo{height:80px;margin-right:30px;}
.navbar a{color:#fff;margin:0 15px;font-weight:600;text-decoration:none;}
.navbar a.active,.navbar a:hover{color:#0054a6;}
body{padding-top:110px;} /* compensate for fixed nav */
/* Footer */
footer{padding:20px;border-top:1px solid #0054a6;margin-top:40px;color:#ccc;font-size:14px;}
footer a.linkedin-icon img{height:28px;margin-left:12px;vertical-align:middle;}
/* Hero */
.hero{position:relative;height:50vh;min-height:350px;background-size:cover;background-position:center;}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);}
.hero-overlay h1{font-size:2.8rem;text-shadow:0 2px 4px rgba(0,0,0,0.6);}
.section{padding:60px 10%;}
.section.dark{background:#0d0d0d;}
.section.dark h2{color:#0054a6;}
.section h2{font-size:2.2rem;color:#0054a6;margin-bottom:15px;}
.section p{max-width:900px;margin:0 auto;font-size:1.05rem;}
.nice-list{display:inline-block;text-align:left;margin:20px auto;list-style:none;padding:0;}
.nice-list li{position:relative;margin:10px 0 10px 30px;font-size:1.05rem;}
.nice-list li::before{content:'\25A0';position:absolute;left:-25px;color:#0054a6;font-size:0.9rem;top:3px;}
/* Home side‑image layout */
.home-flex{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.home-flex .text{flex:1 1 300px;padding:20px;}
.home-flex img{flex:1 1 300px;width:100%;max-width:450px;height:300px;object-fit:cover;border-radius:8px;margin:10px;}
/* Buttons */
.cta-btn{display:inline-block;margin-top:20px;background:#0054a6;color:#fff;padding:12px 30px;border-radius:4px;font-weight:600;text-decoration:none;transition:background 0.3s;}
.cta-btn:hover{background:#0068d1;}
/* Hero backgrounds */
.home-hero{background-image:url('../images/offshore-platform.jpg');}
.about-hero{background-image:url('../images/turbine-inspection.jpg');}
.why-hero{background-image:url('../images/compressor-room.jpg');}
.mission-hero{background-image:url('../images/sunset-field-team.jpg');}
.contact-hero{background-image:url('../images/hse-fireteam.jpg');}
@media(max-width:768px){
  .hero-overlay h1{font-size:2rem;}
  .section{padding:40px 6%;}
}

/* CONTACT STYLES START */
.contact-wrapper{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start;}
.contact-card, .contact-info{flex:1 1 320px;background:#0d0d0d;padding:30px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.6);}
.contact-card h2, .contact-info h2{margin-top:0;color:#0054a6;}
.contact-card input, .contact-card textarea{width:100%;margin-bottom:15px;padding:12px 15px;border:1px solid #333;border-radius:4px;background:#121212;color:#fff;font-size:1rem;}
.contact-card input:focus, .contact-card textarea:focus{outline:none;border-color:#0054a6;box-shadow:0 0 5px rgba(0,84,166,0.7);}
.contact-card button{background:#0054a6;color:#fff;border:none;padding:12px 28px;border-radius:4px;font-size:1rem;font-family:'Montserrat',sans-serif;font-weight:600;cursor:pointer;transition:background 0.3s;}
.contact-card button:hover{background:#0068d1;}
.form-row{display:flex;gap:15px;}
.form-row input{flex:1 1 50%;}
.contact-info p{line-height:1.4;margin:10px 0;}
@media(max-width:768px){
  .contact-wrapper{flex-direction:column;}
  .form-row{flex-direction:column;}
}
/* CONTACT STYLES END */
/* =====================================================================
   MOBILE NAVBAR  –   ≤ 640 px
   ===================================================================== */
@media (max-width:640px){

  /* NAVBAR wrapper --------------------------------------------------- */
  .navbar{
    flex-wrap:wrap;              /* allow wrapping                */
    flex-direction:column;       /* stack logo / button / links   */
    align-items:center;          /* centre everything horizontally*/
    padding:12px 2px;
  }

  /* LOGO ------------------------------------------------------------- */
  .logo{
    height:100px;
    margin:0 auto 12px;          /* centre + gap below            */
  }

  /* HAMBURGER button ------------------------------------------------- */
  .nav-toggle{
    display:flex;                /* visible on mobile             */
    flex-direction:column;
    gap:5px;
    background:transparent;
    border:none;
    cursor:pointer;
    margin-left:auto;            /* keeps it right-aligned when menu is closed */
    padding:6px;
  }
  .nav-toggle span{
    display:block;
    width:26px;
    height:3px;
    background:#fff;
    transition:transform .3s, opacity .3s;
  }
  /* morph to × when menu is open */
  .navbar.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .navbar.open .nav-toggle span:nth-child(2){opacity:0;}
  .navbar.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* LINKS ------------------------------------------------------------ */
  .navbar a{display:none;}                 /* hidden until open */

  .navbar.open a{
    display:block;                         /* show when open    */
    width:100%;                            /* full width line   */
    text-align:center;                     /* centred text      */
    margin:10px 0;
    font-size:1.2rem;
  }

  /* extra padding under open menu so first hero/section isn't flush */
  .navbar.open{padding-bottom:16px;}

  /* body offset for shorter nav bar */
  body{padding-top:118px;}
}