*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
font-family: 'Poppins', sans-serif;
}

html{
scroll-behavior:smooth;
} 



.stock-hero{
min-height:340px;
height:auto;
background:url("../../assets/sbHero.png") center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.stock-hero-overlay{
position:absolute;
inset:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
display:flex;
align-items:center;
justify-content:center;
padding-top: calc(var(--navbar-height, 82px) + 16px);
padding-bottom: 16px;
}

.stock-hero-content{
text-align:center;
color:white;
}

.stock-hero-content h1{
font-size:42px;
font-weight:700;
letter-spacing:1px;
}

/* RESPONSIVE */

@media (max-width:768px){

.stock-hero{
min-height:260px;
height:auto;
}

.stock-hero-overlay{
padding-top: calc(var(--navbar-height, 70px) + 16px);
padding-bottom: 16px;
}

.stock-hero-content h1{
font-size:30px;
}

}
.reveal{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

.trade-section{
padding-top:10px;
padding-bottom:10px;
background:#f4f6f7;
}

.trade-container{
max-width:1200px;
margin:auto;
background:#e9f1f3;
border-radius:12px;
padding:40px;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;
}

.trade-content{
flex:1;
min-width:300px;
}

.trade-content h2{
font-size:28px;
margin-bottom:15px;
}

.trade-content p{
line-height:1.6;
color:#444;
font-size:18px;
}

.trade-image{
flex:1;
text-align:center;
min-width:280px;
}

.trade-image img{
max-width:320px;
width:100%;
}

/* RESPONSIVE */

@media(max-width:768px){

.trade-container{
flex-direction:column;
text-align:center;
padding:24px 16px;
}

.trade-content{
min-width:0;
width:100%;
}

.trade-image{
min-width:0;
width:100%;
}

.trade-image img{
max-width:260px;
}

}

.scroll-animate{
opacity:0;
transform:translateY(60px);
transition:all 0.8s ease;
}

.scroll-animate.active{
opacity:1;
transform:translateY(0);
}


.services-section{
  padding-top:5px;
  padding-bottom:40px;
  background:#f7f7f7;
}

.container{
  max-width:1200px;
  margin:auto;
}

.section-title{
  text-align:center;
  font-size:32px;
  font-weight:700;
  margin-bottom:50px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

/* Card */
.service-card{
  background:#e9eff1;
  padding:30px 25px;
  border-radius:12px;
  text-align:center;
  transition:all .4s ease;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.service-card img{
  width:200px;
  margin-bottom:20px;
  height: auto;
}

.service-card h3{
  font-size:18px;
  margin-bottom:12px;
}

.service-card p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

/* Hover effect */
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

/* Responsive */
@media(max-width:992px){
  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .services-grid{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:26px;
  }
}

.scroll-animate{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s ease;
}

.scroll-animate.active{
  opacity:1;
  transform:translateY(0);
}

.cta-section{
  padding:30px 5%;
  padding-top:20px;
  background:#fff;
  border-radius:0;
  margin:80px auto;
  max-width:none;
  box-shadow:none;
  display:flex;
  justify-content:center;
}

.cta-container{
  text-align:center;
  max-width:900px;
  width:100%;
  margin:0;
  background:linear-gradient(135deg,#0b2027,#075e6e);
  padding:60px 50px;
  border-radius:20px;
  color:#fff;
  box-shadow:0 20px 45px rgba(11,32,39,0.18);
}

.cta-container h2{
  font-size:36px;
  font-weight:600;
  color:#fff;
  margin-bottom:16px;
  font-family:Georgia, "Times New Roman", serif;
}

.cta-container h2 span{
  color:#f2c469;
}

.cta-container p{
  color:#cfe4e8;
  font-size:16px;
  margin-bottom:30px;
  line-height:1.7;
}

/* Button */

.cta-btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:8px;
  background:transparent;
  color:#fff;
  border:1px solid #d8aa43;
  font-weight:500;
  text-decoration:none;
  transition:all .3s ease;
}

.cta-btn:hover{
  background:#d8aa43;
  color:#0b2027;
  transform:translateY(-3px);
}

.scroll-animate{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s ease;
}

.scroll-animate.active{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:768px){

  .cta-container h2{
    font-size:26px;
  }

  .cta-container p{
    font-size:14px;
  }

}

@media(max-width:600px){

  .cta-section{
    padding:32px 20px;
  }

  .cta-container{
    padding:44px 24px;
  }

  .cta-container h2{
    font-size:28px;
  }
}

/* =========================================================
   STOCK BROKING COMPREHENSIVE DARK MODE STYLING
   ========================================================= */
body.dark-mode {
  background-color: #080c14 !important;
  color: #f8fafc !important;
}

body.dark-mode .stock-hero {
  background: url("../../assets/sbHero.png") center/cover no-repeat !important;
}

body.dark-mode .stock-hero-overlay {
  background: rgba(8, 12, 20, 0.45) !important;
}

body.dark-mode .stock-hero-content h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

body.dark-mode .trade-section {
  background-color: #080c14 !important;
}

body.dark-mode .trade-container {
  background: #111827 !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .trade-content h2 {
  color: #ffffff !important;
}

body.dark-mode .trade-content p {
  color: #cbd5e1 !important;
}

body.dark-mode .services-section {
  background-color: #0b0f19 !important;
}

body.dark-mode .services-section .section-title {
  color: #ffffff !important;
}

body.dark-mode .service-card {
  background: #111827 !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .service-card:hover {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
}

body.dark-mode .service-card h3 {
  color: #ffffff !important;
}

body.dark-mode .service-card p {
  color: #cbd5e1 !important;
}

body.dark-mode .cta-section {
  background-color: #080c14 !important;
}

body.dark-mode .cta-container {
  background: linear-gradient(135deg, #0d1e3a, #11284d) !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .cta-container h2 {
  color: #ffffff !important;
}

body.dark-mode .cta-container p {
  color: #e2e8f0 !important;
}

body.dark-mode .cta-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
}

body.dark-mode .cta-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}