/********** ABOUT PAGE ONLY (FINAL FIXED CSS) **********/

/* =========================
   GLOBAL FIX (remove weird blank/white side space)
   ========================= */
html, body{ overflow-x:hidden; }

/* =========================
   ABOUT SECTION
   ========================= */
.gss-about-section{
  position: relative;
  overflow: hidden;
  color: #fff;
  background: url('/img/1.png') center/cover no-repeat;
}

/* ✅ Balanced overlay (not too dark / not washed) */
.gss-about-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 35%, rgba(187,21,24,.12), transparent 60%),
    radial-gradient(900px 520px at 85% 55%, rgba(52,68,214,.08), transparent 60%),
    linear-gradient(180deg, rgba(6,3,21,.45) 0%, rgba(6,3,21,.16) 55%, rgba(6,3,21,.55) 100%);
  pointer-events:none;
  z-index:0;
}
.gss-about-section .container{ position:relative; z-index:1; }

/* Title */
.gss-subtitle{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.gss-main-title{
  font-size: clamp(26px, 2.4vw, 44px);
  font-weight: 950;
  margin-top: 12px;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 14px 40px rgba(0,0,0,.30);
}

.gss-divider{
  width: 84px;
  height: 4px;
  background: var(--primary);
  margin: 14px auto 0;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(187,21,24,.24);
}

/* ✅ Readable text */
.gss-about-section p{
  color: rgba(255,255,255,.88);
  text-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.gss-about-section .lead{
  color: rgba(255,255,255,.95);
  font-weight: 650;
}

/* ===== Mission/Vision Glass Cards (FIX: no grey dull look) ===== */
.gss-glass-card{
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  padding: 26px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.gss-glass-card:hover{
  transform: translateY(-8px);
  background: rgba(255,255,255,.22);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}

/* Icon box */
.gss-icon-box{
  width: 54px;
  height: 54px;
  background: var(--primary);
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 20px;
  box-shadow: 0 18px 55px rgba(187,21,24,.28);
}

/* ✅ override bootstrap text-danger */
.gss-glass-card h5{
  color: #fff !important;
  font-weight: 900 !important;
}
.gss-glass-card p{
  color: rgba(255,255,255,.92);
}

/* ===== Feature Cards (bottom 4) ===== */
.gss-feature-card{
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.06);
  padding: 24px 20px;
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
  transition: transform .22s ease, box-shadow .22s ease;
  color: #0b1220;
}
.gss-feature-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 30px 90px rgba(0,0,0,.18);
}

.gss-feature-icon{
  width: 58px;
  height: 58px;
  border-radius: 20px;
  margin: 0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(187,21,24,.12);
  color: var(--primary);
  font-size: 22px;
}
.gss-feature-card h6{
  font-weight: 950;
  margin-bottom: 8px;
  color: #0b1220;
}
.gss-feature-card p{
  font-size: 14px;
  margin-bottom: 0;
  color: rgba(11,18,32,.70);
}

/* Mobile */
@media (max-width: 576px){
  .gss-glass-card{ padding: 20px; }
  .gss-feature-card{ padding: 20px 16px; }
}

/* =========================
   WHAT DEFINES US (FIXED)
   ========================= */
.gss-define{
  position: relative;
  overflow: hidden;
  background: url('/img/ship-bg.jpg') center/cover no-repeat;
  color: #fff;
}

/* ✅ inset was -120px (layout break). fixed to inset:0 */
.gss-define::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 25%, rgba(187,21,24,.16), transparent 60%),
    radial-gradient(900px 520px at 85% 55%, rgba(52,68,214,.10), transparent 60%),
    linear-gradient(180deg, rgba(6,3,21,.70) 0%, rgba(6,3,21,.28) 55%, rgba(6,3,21,.78) 100%);
  pointer-events:none;
  z-index:0;
}
.gss-define .container{ position:relative; z-index:1; }

.gss-define-title{
  font-weight: 950;
  letter-spacing: -0.6px;
  color: #fff;
  text-shadow: 0 14px 40px rgba(0,0,0,.30);
}
.gss-underline{
  width: 84px;
  height: 4px;
  border-radius: 999px;
  background: var(--primary);
  margin: 12px auto 0;
  box-shadow: 0 14px 40px rgba(187,21,24,.24);
}
.gss-define .gss-define-left h2{
  color:#fff;
  text-shadow: 0 14px 40px rgba(0,0,0,.30);
}
.gss-define-text{
  color: rgba(255,255,255,.88);
  line-height: 1.85;
  font-size: 16px;
}

/* Call card */
.gss-call-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
}
.gss-call-icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--primary);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  flex-shrink: 0;
}
.gss-call-number{
  font-weight: 950;
  font-size: 22px;
  color: var(--primary);
  text-decoration: none;
}
.gss-call-number:hover{ text-decoration: underline; }

/* Stat cards */
.gss-stat-card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
  overflow: hidden;
}
.gss-stat-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(520px 190px at 50% 0%, rgba(187,21,24,.12), transparent 60%);
  pointer-events:none;
}
.gss-stat-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 28px 90px rgba(0,0,0,.18);
}
.gss-stat-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  margin: 0 auto 12px;
  background: rgba(187,21,24,.12);
  color: var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
}
.gss-stat-card h2{
  font-weight: 950;
  margin: 0;
  letter-spacing: -0.6px;
  color: #0b1220 !important;
}
.gss-stat-card p{
  margin-top: 6px;
  color: rgba(11,18,32,.68);
  font-weight: 800;
}

@media (max-width: 991.98px){
  .gss-call-number{ font-size: 20px; }
}

/* =========================
   PAGE HERO (kept)
   ========================= */
.gss-page-hero{
  position: relative;
  height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;

  --hero-img: url('/img/about.png');

  background-image: var(--hero-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gss-page-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(6, 3, 21, 0.78) 0%,
    rgba(6, 3, 21, 0.62) 35%,
    rgba(6, 3, 21, 0.35) 60%,
    rgba(6, 3, 21, 0.10) 85%,
    rgba(6, 3, 21, 0.00) 100%
  );
  z-index: 1;
}

.gss-page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 450px at 18% 55%, rgba(0,0,0,.45), transparent 60%);
  pointer-events:none;
  z-index: 1;
}

/* ✅ zoom animation (keep/remove as you like) */
.gss-page-hero::after{
  content:"";
  position:absolute;
  inset:-10px;
  background-image: var(--hero-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
  animation: gssHeroZoom 18s ease-in-out infinite alternate;
  z-index: 0;
  filter: saturate(1.05);
}
@keyframes gssHeroZoom{
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}

.gss-page-content{
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding-top: 6px;
}

.gss-page-content h1{
  margin: 0 0 14px 0;
  color:#fff;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -1px;
  text-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.gss-breadcrumb-wrap{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 500;
}
.gss-breadcrumb-wrap a{ color: rgba(255,255,255,.92); text-decoration:none; }
.gss-breadcrumb-wrap a:hover{ color:#fff; text-decoration:underline; }
.gss-breadcrumb-sep{ opacity: .75; }
.gss-breadcrumb-current{ opacity: .85; }

@media (max-width: 992px){
  .gss-page-hero{ height: 320px; }
  .gss-page-content h1{ font-size: 44px; }
  .gss-breadcrumb-wrap{ font-size: 15px; }
}
@media (max-width: 576px){
  .gss-page-hero{ height: 280px; }
  .gss-page-content h1{ font-size: 34px; }
  .gss-breadcrumb-wrap{ font-size: 14px; }
}