/* =======================================================
   BusinessForward.AI Global Stylesheet
   Last updated: 2025-07-24-v2
   ======================================================= */

/* ---------- Brand Palette ---------- */
:root{
  --violet:#261F47; /* primary headings & accents */
  --blue:#007BFF;   /* hero background, call-outs */
  --lblue:#3b99fe;
  --cyan:#00AEEF;   /* subtle accent, arrow, links */
  --white:#FFFFFF;
  --black:#000000;
  --gray:#F9F9F9;   /* neutral cards / table rows */
  --dgray:#C0C0C0;
@media(max-width:350px){
  .mobile-nav-toggle.active span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .mobile-nav-toggle.active span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }
}

/* ---------- Base Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth; font-size:100%;overflow-x:hidden;}
body{
  font-family:"Inter",Arial,sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{text-decoration:none;color:var(--black);transition:opacity .2s;}
a:hover{opacity:.85;}

h1,h2,h3,h4{font-weight:700;color:var(--violet);line-height:1.25;}
h1{font-size:2.25rem; margin-bottom: 1.5rem;}
h2{font-size:1.85rem;text-align:center;margin-bottom:1.2rem;}
h3{font-size:1.25rem;}

/* ---------- Layout helpers ---------- */
.container{max-width:1140px;margin-inline:auto;padding-inline:1rem;}
.section-title{text-align:center;margin-bottom:2.5rem;}
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:6px;font-weight:600;}
.btn-primary{background:var(--lblue);color:var(--white);}
.btn-secondary{background:var(--cyan);color:var(--white);}
.text-center{text-align:center;}
.mt-2{margin-top:2rem;}
.mb-2{margin-bottom:2rem;}

/* =======================================================
   1. Header & Navigation
   ======================================================= */
header{background:var(--gray);position:relative;z-index:1000;}
.header-container{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem 1.5rem;position:relative;
  flex-wrap:nowrap;
}
/* Logo text */
.logo{font-size:1.5rem;font-weight:700;color:var(--violet);white-space:nowrap;}
/* Blog header menu text */
.blog_menu{font-size:1.0rem;font-weight:600;color:var(--violet);white-space:nowrap;}

/* Right-hand logo mark */
.header-right{white-space:nowrap;}
.header-right img{height:48px;width:auto;object-fit:contain;}

/* Nav list */
.header-center nav ul{
  display:flex;gap:1.5rem;list-style:none;margin:0;
  align-items:center;        /* vertical centring */
}
.header-center nav a,
.nav-dropdown > button{
  font-size:1rem;font-weight:500;background:none;border:0;
  color:var(--black);cursor:pointer;line-height:1;
}

/* Dropdown arrow */
.nav-dropdown > button::after{
  content:"▾";margin-left:.25rem;font-size:.75em;transition:transform .2s;
}
.nav-dropdown.open > button::after{transform:rotate(180deg);}

/* Dropdown menu */
.nav-dropdown{position:relative;}
.nav-dropdown .dropdown{
  list-style:none;position:absolute;top:100%;left:0;
  background:var(--white);box-shadow:0 2px 6px rgba(0,0,0,.12);
  border-radius:6px;padding:.5rem 0;min-width:220px;display:none;z-index:1000;
}
.nav-dropdown.open .dropdown{display:block;}
.nav-dropdown .dropdown a{
  display:block;padding:.5rem 1rem;color:var(--black);white-space:nowrap;
}
.nav-dropdown .dropdown a:hover{background:var(--gray);}

/* Mobile nav toggle (hamburger menu) */
.mobile-nav-toggle{
  display:none;
  border:0;
  background:none;
  padding:6px;
  cursor:pointer;
  z-index:1001;
  position:relative;
  flex-shrink:0;
}
.mobile-nav-toggle span{
  display:block;
  width:24px;
  height:2.5px;
  background:var(--violet);
  margin:4px 0;
  transition:all 0.3s ease;
}
.mobile-nav-toggle.active span:nth-child(1){
  transform:translateY(6.5px) rotate(45deg);
}
.mobile-nav-toggle.active span:nth-child(2){
  opacity:0;
}
.mobile-nav-toggle.active span:nth-child(3){
  transform:translateY(-6.5px) rotate(-45deg);
}

/* Desktop and tablet styles */
@media(min-width:769px){
  .header-right{
    order:3;
  }
  
  .header-center{
    order:2;
    flex:1;
  }
}

/* Mobile styles */
@media(max-width:768px){
  .header-container{
    flex-wrap:nowrap;
    padding:0.75rem;
    gap:0.5rem;
  }
  
  .header-left{
    flex:0 0 auto;
  }
  
  .logo{
    font-size:1.1rem;
  }
  
  .header-right{
    flex:0 1 auto;
    margin-left:auto;
  }
  
  .header-right img{
    height:32px;
  }
  
  .mobile-nav-toggle{
    display:block;
    flex:0 0 auto;
    margin-left:0.5rem;
  }
  
  .header-center{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--gray);
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease;
    width:100%;
  }
  
  header.menu-open .header-center{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
  
  .header-center nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:1rem;
  }
  
  .header-center nav ul#nav-list.active{
    display:flex;
  }
  
  .header-center nav li{
    border-bottom:1px solid rgba(0,0,0,0.1);
  }
  
  .header-center nav li:last-child{
    border-bottom:none;
  }
  
  .header-center nav a,
  .nav-dropdown > button{
    display:block;
    padding:1rem;
    width:100%;
    text-align:left;
  }
  
  /* Mobile dropdown adjustments */
  .nav-dropdown .dropdown{
    position:static;
    box-shadow:none;
    background:rgba(0,0,0,0.05);
    margin-top:0;
    border-radius:0;
  }
  
  .nav-dropdown .dropdown a{
    padding-left:2rem;
  }
}

/* =======================================================
   2. Hero
   ======================================================= */
#hero{
  background:var(--blue);color:var(--white);text-align:center;padding:4rem 1rem;
}
#hero h1{font-size:clamp(1.75rem, 5vw, 2.25rem);}
#hero p{max-width:680px;margin:0 auto 2rem;font-size:1.2rem;}

/* Hero buttons container */
.hero-buttons{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

@media(max-width:768px){
  #hero{padding:3rem 1rem;}
  #hero p{font-size:1.1rem;}
  
  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }
  
  .hero-buttons .btn{
    width:100%;
    max-width:280px;
    text-align:center;
  }
}

/* =======================================================
   3. Features Grid
   ======================================================= */
#features{
  display:grid;gap:2rem;max-width:1100px;margin:2rem auto;padding:0 1rem;
}
@media(min-width:768px){#features{grid-template-columns:repeat(3,1fr);}}
@media(max-width:767px){#features{grid-template-columns:1fr;gap:1.5rem;margin:2rem auto;}}
.feature{background:var(--gray);padding:2rem;border-radius:12px;}
.feature h3{margin:1rem 0 .75rem;color:var(--violet);}
.icon-placeholder{width:32px;height:32px;background:transparent;border-radius:4px;margin-bottom:.75rem;}

/* =======================================================
   3A. Summary
   ======================================================= */
#summaries{
  display:grid;gap:0.75rem;max-width:1100px;margin:4rem auto;padding:0 1rem;
}
@media(min-width:768px){#summaries{grid-template-columns:repeat(1,1fr);}}
.summary{background:var(--gray);padding:2rem;border-radius:12px;}
.summary h3{margin:1rem 0 .75rem;color:var(--violet);display:inline;}
.icon-placeholder{width:25px;height:25px;background:transparent;border-radius:4px;margin-bottom:0rem;}

@media(max-width:767px){
  #summaries{margin:2rem auto;}
  .summary{padding:1.5rem;}
  .summary h1{font-size:1.5rem;}
}

/* =======================================================
   4. Timeline / Card Layouts
   ======================================================= */
.timeline-grid {
  display: grid;
  gap: 2rem;
  /* Flexible auto-fit grid with cards that are at least 250px wide */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.time-card {
  background: var(--white);
  padding: 1.75rem;
  border-radius: 10px;
  border-top: 4px solid var(--cyan);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.time-card.wide {
  /* Optional: spans two columns if space allows */
  grid-column: span 2;
}

.time-card span {
  display: block;
  margin-bottom: .25rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cyan);
}

.time-card h3 {
  margin: .5rem 0 .75rem;
  font-size: 1.15rem;
  color: var(--violet);
}

.time-card p {
  margin-bottom: 1rem;
  font-size: .95rem;
}

.time-card ul {
  padding-left: 1.25rem;
  margin-bottom: .5rem;
}

.time-card li {
  margin-bottom: .35rem;
  font-size: .9rem;
}

/* Optional: On very small screens force single column */
@media (max-width: 600px) {
  .timeline-grid {
    grid-template-columns: 1fr;
  }
}

/* =======================================================
   5. Proof, Safeguards, Training, etc.
   ======================================================= */
#proof{
  background:var(--violet);color:var(--white);padding:3rem 1rem;text-align:center;
}
#proof blockquote{font-size:1.5rem;font-weight:500;margin:0 auto 1.5rem;max-width:800px;}
#proof ul{list-style:none;padding:0;margin:0 auto;max-width:600px;font-size:1.1rem;}
#proof li{margin:.5rem 0;}

@media(max-width:767px){
  #proof blockquote{font-size:1.25rem;}
  #proof ul{font-size:1rem;}
}

#security{
  background:var(--violet);color:var(--white);padding:4rem 0;
}
.guard-list{display:grid;gap:1.5rem;}
@media(min-width:768px){.guard-list{grid-template-columns:repeat(2,1fr);}}
.guard-item{background:rgba(255,255,255,.06);padding:1.75rem;border-radius:10px;}
.guard-item h4{color:var(--cyan);margin-bottom:.75rem;}

#training{padding:4rem 0;background:var(--white);}
.train-grid{display:grid;gap:1.5rem;}
@media(min-width:768px){.train-grid{grid-template-columns:repeat(3,1fr);}}
.train-card{background:var(--gray);padding:1.75rem;border-radius:10px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.train-card h4{color:var(--violet);margin-top:0;font-size:1.05rem;}
.train-card a{color:var(--cyan);font-weight:600;}

/* =======================================================
   6. FAQ
   ======================================================= */
#faq{max-width:900px;margin:4rem auto;padding:0 1rem;}
#faq details{background:var(--gray);padding:1rem 1.25rem;border-radius:8px;margin-bottom:1rem;}
#faq summary{font-weight:600;cursor:pointer;list-style:none;padding-left:1.25rem;position:relative;}
#faq summary::before{
  content:"▶";position:absolute;left:0;top:0;font-size:.9rem;color:var(--violet);transition:transform .2s;
}
#faq details[open] summary::before{transform:rotate(90deg);}

@media(max-width:767px){
  #faq{margin:2rem auto;}
  #faq details{padding:0.75rem 1rem;}
}

/* =======================================================
   7. Trust Badges
   ======================================================= */
.trust-badges{display:flex;gap:.75rem;flex-wrap:wrap;}
.trust-badges img,
.trust-badges svg{width:40px;height:40px;object-fit:contain;flex:0 0 40px;}

/* =======================================================
   8. Flag Background Helper
   ======================================================= */
.flag-bg{position:relative;}
.flag-bg::before{
  content:"";position:absolute;inset:0;
  background:url("images/flag.svg") center/cover no-repeat;
  opacity:0.12;pointer-events:none;z-index:0;
}
.flag-bg > *{position:relative;z-index:1;}

/* =======================================================
   9. Footer
   ======================================================= */
footer{background:var(--gray);text-align:center;padding:2rem 1rem;font-size:.9rem;color:var(--black);}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.footer-links{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

@media(max-width:767px){
  .footer-top{
    flex-direction:column;
    text-align:center;
  }
  
  .footer-links{
    flex-direction:column;
    gap:0.75rem;
  }
  
  .trust-badges{
    justify-content:center;
  }
}

.inner-form {
padding-left: 5px;
padding-left: 5px;
}

/* =======================================================
   Responsive Text Sizing
   ======================================================= */
@media(max-width:767px){
  h1{font-size:1.75rem;}
  h2{font-size:1.5rem;}
  h3{font-size:1.15rem;}
  
  .section-title{
    font-size:1.5rem;
    margin-bottom:1.5rem;
  }
}

/* Extra small devices */
@media(max-width:400px){
  .logo{
    font-size:0.95rem;
  }
  
  .header-right img{
    height:28px;
  }
  
  .mobile-nav-toggle{
    padding:6px;
  }
  
  .mobile-nav-toggle span{
    width:22px;
    height:2px;
  }
}

/* Very small devices (old phones) */
@media(max-width:350px){
  .header-container{
    padding:0.5rem;
    gap:0.25rem;
  }
  
  .logo{
    font-size:0.85rem;
  }
  
  .header-right img{
    height:24px;
  }
  
  .mobile-nav-toggle{
    padding:4px;
  }
  
  .mobile-nav-toggle span{
    width:20px;
  }
}

/* =======================================================
   End of stylesheet
   ======================================================= */