/* ============================================================
   GLOBAL.CSS
============================================================ */

/* === Custom Properties ======================================= */
:root {
  --body:           #0d1e3d;     /* main section background      */
  --c-darker:       #091020;     /* deeper dark                  */
  --c-map-bg:       #0b2835;     /* locations / map section      */
  --c-card:         #091528;     /* case-card body               */
  --c-footer-bg:    #07090f;     /* footer background            */
  --c-footer-email: #4dbdd4;     /* footer email accent (teal)   */
  --c-accent:       #3b82f6;     /* primary blue accent          */
  --c-accent-hero:  #5bc8f5;     /* "Logistics" cyan highlight   */
  --c-white:        #ffffff;
  --c-white-70:     rgba(255, 255, 255, 0.70);
  --c-white-30:     rgba(255, 255, 255, 0.30);
  --c-white-12:     rgba(255, 255, 255, 0.12);
  --c-trusted-bg:   #f2f4f7;     /* logo strip background        */
  --c-form-bg:      #ffffff;     /* contact form card background */
  --c-form-text:    #111827;     /* contact form text            */
  --c-input-border: #d1d5db;     /* input border                 */

  --gradient-bar: linear-gradient(
    90deg,
    #0B1F3B 0%,
    #1F3A5F 20%,
    #C8A24A 40%,
    #E6D3A3 60%,
    #C8A24A 80%,
    #1F3A5F 100%
  );

  --font:            "Messina Sans",sans-serif;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   2rem;
  --sp-lg:   3.5rem;
  --sp-xl:   6rem;

  --container-max:     1600px;
  --container-px:      5rem;
  --navbar-height:     70px;
  --gradient-bar-h:    6px;
  --header-total-h:    calc(var(--navbar-height) + var(--gradient-bar-h));

  --radius-sm:    4px;
  --radius-md:    8px;
  --transition:   180ms ease;
}

/* === Reset ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:       16px;
  scroll-behavior: smooth;
}

body {
  font-family:  var(--font);
  font-weight:  var(--fw-medium);
  color:        var(--c-white);
  background:   var(--body);
  line-height:  1.65;
  transition:   var(--body-bg-transition, none);
  overflow-x:   hidden;
}

img, video {
  max-width:  100%;
  height:     auto;
  display:    block;
}

a        { color: inherit; text-decoration: none; }
ul, ol   { list-style: none; }
button   { cursor: pointer; border: none; background: none; font-family: inherit; }
address  { font-style: normal; }

/* === Container ================================================= */
.container {
  width:          100%;
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--container-px);
}

/* === Buttons =================================================== */
.btn {
  display:         inline-block;
  padding:         0.65rem 1.75rem;
  font-family:     var(--font);
  font-size:       0.8rem;
  font-weight:     var(--fw-semibold);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-align:      center;
  border:          2px solid transparent;
  cursor:          pointer;
  transition:      var(--transition);
  white-space:     nowrap;
}

.btn--primary {
  background:   var(--c-accent);
  border-color: var(--c-accent);
  color:        var(--c-white);
}



.btn--dark {
  background:   var(--c-darker);
  border-color: var(--c-darker);
  color:        var(--c-white);
}

/* === Section Title ============================================= */
.section-title {
  display:        inline-block;
  font-size:      1rem;
  font-weight:    var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--c-white);
  padding-bottom: 0.6rem;
  border-bottom:  2px solid var(--c-white);
}