/* ===============================
   VARIABLES
================================ */
:root{
  --blue:#0693e3;
  --amber:#fcb900;
  --dark:#020381;
  --light:#f7f9fb;
  --navy:#0a2a55;
  --eagle-green:#7e9599;
  --eagle-blue:#021761;
}

/* ===============================
   GLOBAL
================================ */
:root{
  --header-h: 92px; /* fallback until JS sets the real value */
}
html{
  scroll-behavior:smooth;
  scroll-padding-top: var(--header-h); /* anchor offsets */
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  padding-top: var(--header-h); /* pushes content below fixed header */
  font-family:'Roboto', sans-serif;
  background:var(--light);
  line-height:1.7;
  color:#222;
}
section{padding:90px 8%}
h2{
  text-transform:lowercase;
  font-size:48px;
  margin-bottom:20px;
  font-weight:400;
  }
h2::after{
  content:"";display:block;width:60px;height:4px;
  background:var(--eagle-blue);margin-top:10px
}
p{max-width:900px;font-size:20px;}

/* ===============================
   HEADER
================================ */
header{
  position:fixed;top:0;width:100%;z-index:1000;
/*  background:rgba(2,3,129,.75);*/
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  transition:background .3s,padding .3s;
}
.nav-container{
/*  max-width:1400px;*/
  margin:auto;
  padding:12px 0.5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
header.shrink .nav-container{padding:6px 0.5%;}
header.shrink .logo img{height:clamp(28px,3vw,38px);}

.logo img{
/*  height:clamp(32px,4vw,48px);*/
  height:clamp(32px,4vw,60px);
  transition:.3s;
}

nav ul{display:flex;list-style:none;gap:30px}
nav a{
  color:var(--eagle-blue);text-decoration:none;
  text-transform:uppercase;font-size:1.1rem
}
nav a:hover{color:var(--eagle-green)}
nav a.active{color:var(--eagle-green);}

/* Mobile header */
@media(max-width:900px){
:root{
  --header-h: 64px; /* fallback until JS sets the real value */
}
}
/* ===== HAMBURGER ===== */
.nav-toggle{
  display:none;
  background:transparent;
  border:none;
  cursor:pointer;
  width:32px;
  height:24px;
  position:relative;
}
.nav-toggle span{
  position:absolute;
  width:100%;
  height:2px;
  background:#021761;
  left:0;
  transition:0.3s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ bottom:0; }

/* X state */
header.menu-open .nav-toggle span:nth-child(1){ transform:rotate(45deg); top:11px; }
header.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
header.menu-open .nav-toggle span:nth-child(3){ transform:rotate(-45deg); bottom:11px; }

/* Mobile nav */
@media(max-width:900px){
  .nav-toggle{
	display:block;
	margin-right:2%;
  }
  nav{
    position:absolute;
    top:100%;
    left:50%;
    width:100%;
/*    background:rgba(2,3,129,0.7);*/
    background:rgba(255,255,255,0.9);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  header.menu-open nav{ max-height:300px; }
  nav ul{
    flex-direction:column;
    padding:0px 20px;
    gap:16px;
  }
}

/* ===============================
   HERO
================================ */
#home{
  height: calc(100vh - var(--header-h));
/*  background:url("../img/Home-Eagle Ship Management LLC.jpg") top/cover;*/
  background:url("../img/Home-Eagle Ship Management LLC.jpg") top/cover no-repeat;
     /*linear-gradient(rgba(0, 0, 227,.05),rgba(6, 147, 227,.25)),*/
  display:flex;
  align-items:center;
}
.hero-content{color:#fff;max-width:700px;position:relative;top:15%;}
.hero-content h1{font-size:clamp(2rem,4vw,2.2rem);font-weight:400;text-shadow: 0 0 5px black; } /*text-shadow:1px 1px 2px black, 0 0 12px blue, 0 0 5px darkblue;*/
.hero-content p{font-size:1.3rem;font-weight:300;color:#fff;text-shadow: 0 0 5px black;} /*#e0e0e0;*/ /*text-shadow:1px 1px 2px black, 0 0 6px blue, 0 0 5px darkblue;*/
/* Mobile hero */
@media(max-width:900px){
  #home{
    height:80vh;
    background:url("../img/Home-Eagle Ship Management LLC.jpg") top/cover no-repeat;
	display:flex;
    align-items:center;
  }
  .hero-content{color:#fff;max-width:700px;position:relative;top:30%;}
  .hero-content h1{font-size:clamp(1.8rem,4vw,1.8rem);font-weight:400;text-shadow: 0 0 5px black;} /*text-shadow:1px 1px 2px black, 0 0 12px blue, 0 0 5px darkblue;*/
  .hero-content p{font-size:1rem;font-weight:300;color:#fff;text-shadow: 0 0 5px black;} /*#e0e0e0;*/ /*text-shadow:1px 1px 2px black, 0 0 6px blue, 0 0 5px darkblue;*/
}

/* ===============================
   ABOUT
================================ */
#about a{color:var(--eagle-blue);text-decoration:none;font-weight:500;}
#about a:hover{color:var(--eagle-green)}

/* ===============================
   FLEET BACKGROUND IMAGE + OVERLAY
================================ */
#fleet{
  background:url("../img/Eagle-Fleet.jpg") center/cover no-repeat;
  position:relative;
/*  height:80vh;*/
}
#fleet::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.5);  
/*  background:rgba(10, 42, 85, 0.35);*/
  z-index:0;
}
#fleet > *{
  position:relative;
  z-index:1;
}
#fleet h2{ color:#fff; }
#fleet h2::after{ background:var(--eagle-green); }

/* ===============================
   FLEET KPI COUNTERS (UNDER TITLE)
================================ */
.fleet-kpis{
  margin:26px 0 18px 0;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:28px;
  padding:26px 0 6px 0;
  border-top:1px solid rgba(255,255,255,.25);
  border-bottom:1px solid rgba(255,255,255,.25);
}

.kpi{
  flex:1;
  min-width:220px;
  text-align:center;
  color:#fff;
}

.kpi-icon{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}
.kpi-icon img{
  height:58px;
  width:auto;
  opacity:.95;
}

.kpi-label{
  font-size:16px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.75);
  margin-bottom:6px;
  font-weight:500;
}

.kpi-value{
  font-size:54px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
}

.kpi-value.segment{
  font-size:32px;
  letter-spacing:.06em;
}

@media(max-width:1024px){
  .fleet-kpis{ gap:18px; }
  .kpi-value{ font-size:46px; }
}
@media(max-width:900px){
  .fleet-kpis{
    flex-direction:column;
    padding:18px 0 10px 0;
  }
  .kpi{ text-align:left; display:flex; align-items:center; gap:16px; }
  .kpi-icon{ height:auto; margin:0; }
  .kpi-icon img{ height:46px; }
  .kpi-text{ display:flex; flex-direction:column; }
  .kpi-value{ font-size:40px; }
  .kpi-value.segment{ font-size:26px; }
}

/* ===============================
   FLEET ACCORDION
================================ */
.fleet-accordion{max-width:100%;margin-top:50px;background:transparent;}
.fleet-item{border-bottom:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.15);}

.fleet-header{
  width:100%;
  display:grid;
  grid-template-columns:
    90px
    2.2fr
    1.3fr
    1.3fr
    1.1fr
    2fr
    50px;
  align-items:center;
  height:74px;
  padding:0 24px;
  background:rgba(255,255,255,.40);
  border:none;
  border-top:1px solid rgba(255,255,255,.25);
  cursor:pointer;
  font-size:16px;
  font-weight:300;
}
.fleet-header:hover{background:rgba(255,255,255,.65);}

.vessel-type-img{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:100%;
}
.vessel-type-img img{
  height:44px;
  width:auto;
}
.vessel-name{
  font-weight:600;
  font-size:22px;
  color:#021761;
}
.vessel-type, .vessel-DWT, .vessel-built, .vessel-shipyard{
  font-weight:400;
  font-size:18px;
  color:#021761;

}

.toggle{
  font-size:22px;
  font-weight:300;
  color:var(--navy);
}

.fleet-details{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  background:rgba(255,255,255,.65);
  border-bottom:1px solid rgba(255,255,255,.25);
}
.details-inner{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:40px;
  padding:30px 90px 40px 90px;
  align-items:end;
  border-top:1px solid rgba(255,255,255,.25);
}

.spec-dl{
  display:grid;
  grid-template-columns:150px 1fr;
  column-gap:18px;
  row-gap:10px;
  margin:0;
  font-size:18px;
}
.spec-dl dt{ font-weight:700; color:var(--navy); }
.spec-dl dd{ margin:0; color:#222; }

/* Spec button */
.spec-btn{
  width:100%;
  height:64px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  text-decoration:none;
  border:0;
  background:#f3f3f3;
  border-radius:0;
  overflow:hidden;
}
.spec-btn-label{
  flex:1;
  display:flex;
  align-items:center;
  padding:0 10px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--navy);
  text-transform:uppercase;
  font-size:16px;
}
.spec-btn-arrow{
  width:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--eagle-blue);
  color:#fff;
  font-size:22px;
}

/* Responsive fleet */
@media(max-width:1024px){
  .fleet-header{
    grid-template-columns:80px 1fr auto;
    height:auto;
    padding:16px 20px;
  }
  .details-inner{
    grid-template-columns:1fr;
    padding:24px;
    gap:16px;
    align-items:start;
  }
  .details-right{ margin-top:10px; }

  .vessel-type, .vessel-DWT, .vessel-built, .vessel-shipyard{ display:none; color:#021761;}
}

@media(max-width:640px){
  .fleet-header{
    grid-template-columns:1fr 44px;
    grid-template-rows:auto auto;
    height:auto;
    padding:14px 16px;
    row-gap:8px;
    align-items:start;
    justify-items:start;
  }
  .vessel-type-img{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    align-self:start;
    height:auto;
  }
  .vessel-type-img img{
    height:38px;
    width:auto;
    display:block;
  }
  .vessel-name{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    text-align:left;
    margin:0;
    font-size:17px;
    font-weight:600;
    line-height:1.2;
  }
  .toggle{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:start;
    font-size:22px;
    line-height:1;
    padding-top:2px;
  }
  .details-inner{
    grid-template-columns:1fr;
    gap:16px;
    padding:18px 16px 16px 16px;
    align-items:start;
  }
  .spec-dl{
    grid-template-columns:130px 1fr;
    row-gap:8px;
  }
}

/* ===============================
   POLICIES (BACKGROUND IMAGE)
================================ */
#policies{
 /* position:relative;
  background:url("../img/Eagle-Policies.jpg") center / cover no-repeat;*/
  background:linear-gradient(rgba(10, 42, 85,.05),rgba(10, 42, 85,.05));
}
/*#policies::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(10, 42, 85,.45),rgba(10, 42, 85,.75)); /*rgba(10, 42, 85,.45),rgba(10, 42, 85,.75)*/
  z-index:0;
}*/
#policies > *{ position:relative; z-index:1; }
#policies h2{ color:var(--eagle-blue); }
#policies h2::after{ background:var(--eagle-blue); }

.policies p{color:var(--eagle-blue);} /*text-shadow:1px 1px 2px black, 0 0 6px blue, 0 0 5px darkblue;*/
.policies a{color:var(--eagle-blue);text-decoration:none;} /*text-shadow:1px 1px 2px black, 0 0 6px blue, 0 0 5px darkblue;*/
.policies a:hover{color:var(--eagle-green);} /*text-shadow:1px 1px 2px black, 0 0 6px blue, 0 0 5px darkblue;*/


/* ===============================
   POLICIES TABS (STAR BULK STYLE)
================================ */
.policies-tabs{
  list-style:none;
  padding:0;
  margin:26px 0 0 0;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.policies-tab{
  margin:0;
}

.policies-tab-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;

  min-height:74px;
  padding:16px 18px;

  background:#ffffff;
  border:1px solid rgba(2, 23, 97, 0.18);
  border-top:4px solid transparent;

  color:var(--eagle-blue);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:400;
  font-size:16px;
  line-height:1.25;

  transition:border-color .18s ease, color .18s ease, background .18s ease;
}

/* Document icon (CSS-based, no image needed) */
.policies-tab-icon{
  flex:0 0 22px;
  height:28px;
  position:relative;
  border:2px solid currentColor;
  border-radius:2px;
  opacity:.7;
}

/* folded corner */
.policies-tab-icon::after{
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:8px;
  height:8px;
  background:#fff;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

/* Hover state — TOP highlight only */
.policies-tab-link:hover{
  border-top-color:var(--eagle-blue);
  color:var(--eagle-green);
  background:#fbfcfc;
}

/* Selected (active) tab */
.policies-tab-link.is-active{
  border-top-color:var(--eagle-green);
  color:var(--eagle-green);
  background:#fbfcfc;
}

/* Responsive */
@media (max-width:1024px){
  .policies-tabs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  .policies-tabs{
    grid-template-columns:1fr;
  }
  .policies-tab-link{
    min-height:68px;
    font-size:13px;
  }
}

/* ===============================
   CONTACT
================================ */
#contact{
  position:relative;
  background:url("../img/Eagle-Contact.jpg") center / cover no-repeat;
  /*background:linear-gradient(rgba(10, 42, 85,.45),rgba(10, 42, 85,.75));*/
/*  background:linear-gradient(rgba(255, 255, 255,0.1),rgba(41, 73, 117,1));*/
}
#contact h2{ color:#fff; }
#contact h2::after{ background:var(--eagle-green); }
.contact-grid{
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:40px;
  align-items:stretch;
}
.contact-info p{font-size:20px;color:#fff;font-weight:300;}
.contact-info a{font-size:20px;color:#fff;font-weight:300;text-decoration: none;}
.contact-info a:hover{color:var(--eagle-green)}
.contact-info img{
  width:100%;
  border-radius:6px;
  margin-bottom:20px;
}
.contact-map iframe{
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
  border-radius:6px;
}
@media(max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map iframe{ min-height:300px; }
  .contact-info img{ border-radius:8px }
}

/* ===============================
   BACK TO TOP
================================ */
#backToTop{
  position:fixed;
  bottom:25px;
  right:25px;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  display:none;
}
#backToTop.show{display:block}

/* ===============================
   FOOTER
================================ */
footer{
  background:var(--navy);
  color:#ccc;
  font-size:0.8rem;
  text-align:center;
  padding:25px;
}
footer a{color:#ccc;text-decoration:none;}
footer a:hover{color:var(--eagle-green)}