/* Colors inspired by fluid-tech.org */
:root{
  --primary:#ffffff;
  --accent:#f1b605;
  --muted:#666;
  --bg:#f7f8fb;
  --card:#ffffff;
}

*{box-sizing:border-box}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  scroll-behavior: smooth;
}

body{
  font-family:Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#222;
}

/* NAV */
.nav{
  position:fixed; top:0; left:0; width:100%; background:var(--primary); color:#fff; z-index:1200;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.nav .nav-inner{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px;
}
.logo, .logo a {
  background: transparent; /* remove background */
  color: #04001b;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.5rem; /* adjust size */
}
.logo img {
  background: transparent; /* remove background */
  height: 60px; /* adjust height */
  width: auto;
}
.menu{list-style:none;display:flex;gap:18px;align-items:center;margin:0;padding:0}
.menu a{color:#04001b;text-decoration:none;padding:8px 6px;border-radius:4px;display:inline-block}
.menu a:hover{background:rgba(255,255,255,0.06)}
.menu li a {padding:0.8em 1.5em; display:inline-block}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute; top:42px; left:0; background:#fff; color:#222; padding:8px; border-radius:6px;
  min-width:240px; box-shadow:0 8px 20px rgba(0,0,0,0.12); display:none;
}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu li{list-style:none}
.dropdown-menu li a{color:#000;text-decoration:none}
.dropdown-menu li a:hover{color:#555}

/* HERO */
.hero{
  height:80vh; position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin-top:64px;
}
.video-container{position:absolute;inset:0}
.video-container video{
  width:100%; height:100%; object-fit:cover; display:block; transition:opacity 0.8s ease;
}
.hero-content{position:relative; z-index:2; text-align:center; color:#fff; padding:20px}
.hero-content h1{font-size:clamp(24px,4vw,48px); margin-bottom:8px}
.video-controls{position:relative; z-index:3; display:flex; gap:8px; justify-content:center; margin-top:12px}

/* MAIN SECTIONS */
main{width:100%; margin:30px 0; padding:0}

/* Full-width sections with side padding */
section.card{
  width:100%;
  max-width:100%;
  padding:20px 90px; /* left/right padding */
  box-sizing:border-box;
}

/* Background colors */
#about { background-color: #f7f7f7; }
#services { background-color: #ffffff; }
#duqm-crusher { background-color: #f1f1f1; }
#duqm-port-trading { background-color: #ffffff; }
#al-kahal { background-color: #f7f7f7; }
#greeneze { background-color: #ffffff; }
#cargo-globe { background-color: #f1f1f1; }
#chairman { background-color: #ffffff; }
#evolution { background-color: #f7f7f7; }
#contact { background-color: #ffffff; }

/* Company cards */
.company-card .company-inner{display:flex;gap:18px;align-items:center}
.company-logo{
  width:240px;
  height:300px;
  object-fit:contain;
  border-radius:0; /* optional: remove rounded corners */
  background: transparent; /* remove background */
  display:block;
  padding:0; /* remove padding */
}

/* Chairman */
.chairman-inner{
  display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:20px;
}
.chair-photo{
  width:250px; height:auto; border-radius:10px; flex-shrink:0; margin-top:0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
}
.chair-text{flex:1; text-align:left; line-height:1.6; margin-top:0}

/* Back to top button */
.back{position:fixed; right:22px; bottom:32px; background:var(--accent); border:none; padding:12px 16px; border-radius:999px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.12); cursor:pointer; display:none; z-index:1300}

/* Contact form */
.contact-form{display:grid;gap:12px;max-width:700px;margin:0 auto}
.contact-form label{display:block;font-size:0.95rem}
.contact-form input, .contact-form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px}
.contact-form button{background:var(--primary);color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer}

/* Map */
.mapwrap{border-radius:8px;overflow:hidden;margin-top:12px}

/* Expand / Collapse */
.more-content{ max-height:0; overflow:hidden; transition:max-height 0.6s ease, opacity 0.6s ease; opacity:0; }
.company-card.expanded .more-content{ max-height:1000px; opacity:1; }
.summary-text{ position:relative; max-height:4.5em; overflow:hidden; }
.summary-text::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:2em; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events:none; transition:opacity 0.3s ease; }
.company-card.expanded .summary-text{ max-height:none; }
.company-card.expanded .summary-text::after{ opacity:0; }
.read-more{ display:inline-block;margin-top:8px;padding:6px 14px;border:none;border-radius:6px;background:#333;color:#fff;cursor:pointer;transition:background 0.3s ease; }
.read-more:hover{background:#555;}

/* Scroll Animations */
.section-anim{ opacity:0; transform:translateY(30px); transition: all 0.6s ease-out; }
.section-anim.visible{ opacity:1; transform:translateY(0); }

/* Justify body text */
p, .chair-text, .company-card div p { text-align: justify; hyphens:auto; }

/* Responsive rules */
@media (max-width:899px){
  .desktop-menu{display:none}
  .menu-toggle{display:block}
  .mobile-menu{display:none}
  .hero{height:60vh;margin-top:56px}
  .chair-photo{width:160px}
  .company-logo{width:110px;height:70px}
  section.card { padding-left:20px; padding-right:20px; }
}
@media (min-width:900px){
  .mobile-menu{display:none}
  .menu-toggle{display:none}
  .desktop-menu{display:flex}
h2 {
  font-family: 'calibri', cursive; /* or any handwriting font you chose */
  font-size: 42px;                  /* make it big */
  color: #000000;                   /* black */
  font-weight: 300;                 /* thin line look */
  text-transform:   ;        /* all capitals */
  letter-spacing: 2px;              /* spacing for elegant uppercase look */
}

.video-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
}

.video-controls {
  position: absolute;
  bottom: 10px;               /* closer to the bottom */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);  /* lighter transparency */
  padding: 4px 8px;
  border-radius: 20px;
}

.video-controls button {
  background: rgba(255, 255, 255, 0.4); /* semi-transparent buttons */
  border: none;
  border-radius: 50%;
  width: 28px;      /* smaller size */
  height: 28px;
  cursor: pointer;
  font-size: 12px;  /* smaller icon text */
  color: #000;
  transition: all 0.2s ease;
}

.video-controls button:hover {
  background: rgba(255, 255, 255, 0.8); /* less transparent on hover */
  color: #000;
}