/* =========================
   Centinel Securities – Clean CSS
   ========================= */

/* ---------- CSS Variables ---------- */
:root{
  --brand:#0f3270;          /* deep blue */
  --accent:#1976d2;         /* bright blue */
  --soft:#f4f8ff;
  --ink:#050F4A;
  --text:#222;
  --muted:#64728f;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--ink);
  background:#f5f8fa;
}
p{ line-height:1.7; margin:0 0 1.2em; }

/* ---------- Navbar ---------- */
.navbar{
  font-size:1rem;
  padding:.8rem 0;
  border-bottom:1px solid #f0f0f0;
  background:#fff;
}
.navbar-brand img{ height:55px; }

.navbar-nav .nav-link{
  color:#0B3D91;
  padding:.5rem .75rem;
  font-weight:500;
  transition:color .2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color:#062c6e; }
.navbar-nav .nav-link.active{ color:#0B3D91; font-weight:600; }

.custom-nav{ color:#0B3D91 !important; }
.custom-nav:hover,
.custom-nav.active{ color:#063073 !important; }

/* Toggler */
.navbar-toggler{
  border:2px solid var(--accent);
  background:var(--accent);
  border-radius:10px;
  padding:8px 10px;
}
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(25,118,210,.25); }
.navbar-toggler .navbar-toggler-icon{
  background-image:none; width:24px; height:2px; position:relative; display:inline-block; background:#fff;
}
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:#fff;
}
.navbar-toggler .navbar-toggler-icon::before{ top:-7px; }
.navbar-toggler .navbar-toggler-icon::after{ top:7px; }

/* ---------- Dropdowns (look) ---------- */
.navbar .dropdown-menu{
  border-radius:10px;
  border:1px solid #e0e6f3;
  box-shadow:0 6px 20px rgba(15,50,112,.08);
  padding:8px 0;
  z-index:1030;
  overflow:visible;
}
.navbar .dropdown-item{
  font-size:.95rem;
  font-weight:500;
  color:#0f3270;
  padding:10px 16px;
  transition:all .2s ease;
  border-bottom:1px dotted #eee;
}
.navbar .dropdown-item:last-child{ border-bottom:0; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  background:linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff !important;
}
.navbar .dropdown-divider{
  margin:6px 0;
  border-top:1px solid #e0e6f3;
}

/* ---------- Dropdowns (behavior) ----------
   - Mobile/tablet (<992px): Bootstrap default (click)
   - Desktop (>=992px): open on hover
------------------------------------------ */

/* Desktop hover behavior */
@media (min-width: 992px){
  /* top-level dropdown */
  .nav-item.dropdown:hover > .dropdown-menu{ display:block; }

  /* right-opening submenu (dropend) */
  .dropdown-menu > .dropend > .dropdown-menu{
    display:none; position:absolute; top:0; left:100%; margin-left:.15rem;
  }
  .dropdown-menu > .dropend:hover > .dropdown-menu{ display:block; }

  /* left-opening submenu (dropstart) */
  .dropdown-menu > .dropstart > .dropdown-menu{
    display:none; position:absolute; top:0; right:100%; margin-right:.25rem;
    border-radius:.5rem;
  }
  .dropdown-menu > .dropstart:hover > .dropdown-menu{ display:block; }

  /* align submenus nicely */
  .dropend .dropdown-menu,
  .dropstart .dropdown-menu{ margin-top:-.25rem; }
}

/* Prevent always-open bug on touch by NOT enabling global hover below 992px */

/* ---------- Hero ---------- */
#hero{
  background:linear-gradient(135deg, #050F4A, #0B3D91);
  color:#fff;
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
#hero h1{
  font-size:38px;
  font-weight:700;
  line-height:1.2;
}
#hero p.lead{ font-size:1.2rem; max-width:600px; margin-bottom:30px; }
#hero i{ color:#00bcd4; }
#hero .btn{
  border-radius:50px; padding:12px 30px; font-size:1.1rem; transition:.2s ease;
}
#hero .btn:hover{ background:#00acc1; color:#fff; }
#hero img{ max-height:500px; object-fit:cover; border-radius:12px; }

/* ---------- Sections ---------- */
.section-title{
  text-align:center; color:var(--ink); font-weight:700; font-size:2rem; margin:0 0 50px; position:relative;
}
.section-title::after{
  content:''; display:block; width:60px; height:3px; background:var(--brand);
  margin:12px auto 0; border-radius:2px;
}

/* About */
.about-section{ background:linear-gradient(to bottom,#f9f9f9,#fff); }
.about-section .lead{ font-size:1.1rem; color:#333; }
.ceo-box{ border-left:4px solid #0B3D91; padding-left:15px; }
.about-image{ max-width:100%; height:auto; border-radius:10px; transition:transform .3s ease; }
.about-image:hover{ transform:scale(1.03); }

/* Mission & Vision */
#mission-vision{
  background:linear-gradient(to right, #e3f2fd, #cfd8dc);
  padding:70px 20px; text-align:center; color:var(--ink);
}
#mission-vision .item{ max-width:600px; margin:0 auto 50px; }
#mission-vision h3{ font-weight:700; margin-bottom:20px; font-size:1.8rem; }
#mission-vision p{ font-size:1.15rem; line-height:1.6; }
#mission-vision .card:hover{ background:#d0eaff; transform:translateY(-8px); transition:.3s ease; }

/* Services */
#services{ padding:80px 20px; }
#services .service-card{
  border:2px dashed var(--ink);
  border-radius:12px;
  padding:30px 25px; height:100%;
  transition:background-color .3s ease, transform .3s ease;
}
#services .service-card:hover{
  background:#e3f2fd; transform:translateY(-6px);
  box-shadow:0 12px 25px rgba(5,15,74,.15);
}
#services .service-card h4{ color:var(--ink); font-weight:700; margin-bottom:15px; }
#services .service-card i{ color:#00bcd4; font-size:28px; margin-bottom:12px; }
#services .service-card p{ color:#333; }

/* Testimonials */
#testimonials{ padding:80px 20px; background:#fff; text-align:center; }
.testimonial-card{
  background:#e3f2fd; padding:30px 25px; border-radius:15px;
  box-shadow:0 6px 20px rgba(5,15,74,.1);
  margin:0 auto 30px; max-width:650px; position:relative; font-style:italic; color:#222;
}
.testimonial-card::before{
  content:"“"; position:absolute; top:10px; left:18px; font-size:3.5rem;
  color:#00bcd4; font-weight:700; opacity:.2;
}
.testimonial-card strong{ display:block; margin-top:20px; font-weight:700; font-style:normal; color:var(--ink); }

/* Contact */
#contact{ background:#f8fafc; padding:80px 20px; }
#contact h2{ text-align:center; font-weight:700; margin-bottom:50px; color:var(--ink); }
#contact form{
  background:#fff; padding:30px 25px; border-radius:15px; box-shadow:0 6px 20px rgba(5,15,74,.1);
}
#contact form label{ font-weight:600; color:var(--ink); }
#contact form input, #contact form textarea{
  margin-bottom:20px; border-radius:8px; border:1px solid #ccc; padding:12px 15px; font-size:1rem; resize:none;
}
#contact form button{
  background:var(--ink); color:#fff; border:none; padding:12px 30px; font-weight:700; border-radius:50px; width:100%;
  transition:background-color .2s ease;
}
#contact form button:hover{ background:#004080; }

/* ---------- Footer ---------- */
.footer-section{
  background:linear-gradient(135deg, #0B3D91 0%, #092c6d 100%);
  color:#fff;
}
.footer-link{
  display:inline-block; font-size:14px; margin-bottom:8px; color:#fff; text-decoration:none; transition:.3s ease;
}
.footer-link:hover{ color:#ffc107; transform:translateX(5px); }
.footer-bottom{
  text-align:center; margin-top:30px; font-size:13px;
  border-top:1px solid rgba(255,255,255,.2); padding-top:15px;
}

/* ---------- Utilities ---------- */
.text-gradient{
  background:linear-gradient(to right, #ffc107, #f76e11);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.dual{ color:#0dcaf0; }
.btn{ font-weight:700; border-radius:999px; padding:10px 18px; box-shadow:0 8px 20px rgba(25,118,210,.12); }
.btn-primary, .btn-success{ box-shadow:0 8px 20px rgba(25,118,210,.22); }
.btn-primary:hover{ transform:translateY(-1px); }

/* ---------- WhatsApp Float (optional) ---------- */
.whatsapp-float{
  position:fixed; bottom:20px; right:20px; z-index:9999;
}
.whatsapp-float img{ width:55px; height:55px; border-radius:50%; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  /* collapse menu clean look on mobile */
  .navbar .dropdown-menu{
    border:none; box-shadow:none; padding:6px 0;
  }
  .navbar-nav .nav-link{ padding:12px 4px; font-weight:600; }
}

@media (max-width: 767.98px){
  #hero{ text-align:center; padding:60px 15px; }
  #hero h1{ font-size:30px; }
  #hero .btn{ padding:8px 25px; }
  #hero img{ max-height:300px; margin-top:30px; }

  .about-section .section-title,
  .section-title{ text-align:center; }

  .ceo-box{
    text-align:center; border-left:none; border-top:4px solid #0B3D91;
    margin-top:20px; padding-top:15px;
  }
}

@media (max-width: 576px){
  .container, .container-fluid{ padding-left:16px; padding-right:16px; }
  section, .py-5{ padding-top:42px !important; padding-bottom:42px !important; }
  .lead{ font-size:1.02rem; }
  .btn, .btn-lg, .btn-sm{
    width:100%; padding:12px 16px !important; font-size:.98rem;
  }
  .btn + .btn{ margin-top:10px; }
}

/* ---------- Submenu helpers (both directions, keep if needed) ---------- */
/* Right-opening nested submenu (dropend) – only if you still use it */
.dropdown-menu > .dropend > .dropdown-menu{
  /* hidden by default; shown on hover in ≥992px block */
}
/* Left-opening nested submenu (dropstart) – primary case */
.dropstart .dropdown-menu{ z-index:1050; }



/* Hide Bootstrap's built-in caret on navbar dropdowns */
.navbar .dropdown-toggle::after {
  content: none !important;
}