/* Tech-inspired subtle pattern */
body {
  font-family: 'Hind Siliguri', sans-serif;
  background: #fffefa; /* base background */
  color: #000;        
  font-weight: bold;  
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://www.transparenttextures.com/patterns/triangles.png") repeat;
  opacity: 0.08; /* subtle tech pattern */
  pointer-events: none;
  z-index: -1;
}
section{
  padding:30px 0;
  text-align:center;
  /*scroll-margin-top:5px;*/
}

section h2{
  font-size:2.2rem;
  color:#1e3c72;
  margin-bottom:10px;
}

section p{
  font-size:1rem;
  color:#555;
  margin-bottom:25px;
}

/* ===== HEADER ===== */
header{
  position:fixed;
  top:0;
  width:100%;
  background:#1e3c72;
  z-index:1000;
  /*box-shadow:0 4px 4px rgba(0,0,0,0.15);*/
  /*border-bottom:3px solid #ffdd57; */
  /*/ yellow color*/
}

header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 15px;
}

header h1{
  color:#ffdd57;
  font-size:1.8rem;
  margin:0;
}

.logo-compact {
  display: flex;
  align-items: center;
  gap: 10px; /* space between icon and line/text */
  color: #ffdd57;
  line-height: 1;
}

.logo-compact i {
  font-size: 42px;
  color: #ffdd57;
  flex-shrink: 0;
}

.logo-compact .separator {
  width: 2px;                /* vertical line width */
  height: 45px;              /* vertical line height */
  background-color: #ffdd57; /* same as icon color */
}

.logo-compact .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content; /* width of top text */
}

.logo-compact .top {
  font-size: 23px;
  font-weight: 700;
}

.logo-compact .bottom {
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;

  /* Make letters stretch to match width of top text */
  display: flex;
  justify-content: space-between; /* distribute letters evenly */
  width: 100%;  /* same as .text width (max-content of top) */
  letter-spacing: 2px; /* optional: adjust spacing between letters */
}
/* Logo hover effect */
.logo-compact:hover {
  color: #fff; /* main wrapper text color on hover */
}

.logo-compact:hover i {
  color: #fff; /* icon color on hover */
}

.logo-compact:hover .separator {
  background-color: #fff; /* separator line color on hover */
}

.logo-compact:hover .top,
.logo-compact:hover .bottom {
  color: #fff; /* top & bottom text turns white */
}
/* ===== NAVBAR ===== */
#navbar {
  display: flex;
  width: 55%;
  gap: 5px;
}

#navbar a {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 16px;
  background: #ff6f61;
  color: #fff;
  font-weight:600;
  text-decoration:none;
  border-radius:4px;
  transition:.25s;
}

#navbar a:hover {
  background-color: #ffdd57;
  color:#000;
}

/* Active navbar link */
#navbar a.active {
  background-color: #ffdd57;
  color: #000 !important;
  font-weight:700;
}

#navbar a.active i {
  color: inherit !important;
}
/*menu*/

.menu-toggle{
  display:none;
  flex-direction:column;
  cursor:pointer;
}
.menu-toggle span{
  height:3px;
  width:25px;
  background:#fff;
  margin-bottom:5px;
}

/* ===== HERO ===== */
#hero{
  height:70vh;
  background:#e8f9fc;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  text-align:center;  
  padding:0 20px;
}

#hero h2{
  font-size:3rem;
  color:#fff;
  margin-bottom:15px;
}

#hero p{
  font-size:1.15rem;
  color:#f0f0f0;
  margin-bottom:25px;
  max-width:650px;
}

.hero-buttons a{
  padding:10px 20px;
  font-weight:600;
  border-radius:6px;
  text-decoration:none;
  transition:.25s;
}

.hero-buttons .btn-primary{
  background:#ffdd57;
  color:#000;
  border:1px solid #ccc;
}
.hero-buttons .btn-primary:hover{
  background:#ff6f61;
  color:#fff;
   border:1px solid #ccc;
}

/* ===== PRICING CARDS ===== */
/*.row.g-3 {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}*/

.col-md-3 {
  flex:1 1 calc(25% - 20px);   /* 4 cards desktop */
  max-width:calc(25% - 20px);
}
.pricing-card{
  border-radius:12px;
  padding:18px 14px;
  box-shadow:0 4px 4px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.25s;
}

.border-primary { 
  border-top:4px solid #0d6efd; 
  background:#e7f1ff;   /* light blue */
}

.border-info { 
  border-top:4px solid #17a2b8; 
  background:#e8f9fc;   /* light cyan */
}

.border-success { 
  border-top:4px solid #28a745; 
  background:#e9f7ef;   /* light green */
}

.border-warning { 
  border-top:4px solid #ffc107; 
  background:#fff8e1;   /* light yellow */
}

.border-secondary { 
  border-top:4px solid #6c757d; 
  background:#f1f3f5;   /* light gray */
}

.pricing-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}
.pricing-card h3{
  font-size:1.3rem;
  margin-bottom:8px;
}

.pricing-card span{
  font-size:1.25rem;
  font-weight:bold;
  margin-bottom:10px;
  display:block;
}

.pricing-card ul{
  list-style:none;
  padding-left:0;
  text-align:left;
  margin-bottom:12px;
}

.pricing-card ul li{
  margin-bottom:6px;
  font-size:0.95rem;
}

.pricing-card ul li i{
  color:#0d6efd;
  margin-right:6px;
}

.pricing-card a.btn{
  display:block;
  text-align:center;
  padding:10px 0;
  font-weight:600;
  border-radius:6px;
  text-decoration:none;
  transition:.25s;
}
/* Reduce height of order buttons */
.pricing-card a.btn {
    padding: 5px 0;  /* top/bottom 6px, left/right 0 (adjust as needed) */
    font-size: 0.95rem; /* slightly smaller text if needed */
}
/* COLORS */
.border-primary { border-top:4px solid #0d6efd; }
.border-info { border-top:4px solid #17a2b8; }
.border-success { border-top:4px solid #28a745; }
.border-warning { border-top:4px solid #ffc107; }
.border-secondary { border-top:4px solid #6c757d; }
.border-danger { border-top:4px solid #dc3545;  background:#fdecea;   /* light red */
}

.btn-primary{background:#0d6efd;color:#fff;}
.btn-primary:hover{background:#084298;}
.btn-info{background:#17a2b8;color:#fff;}
.btn-info:hover{background:#117a8b;}
.btn-success{background:#28a745;color:#fff;}
.btn-success:hover{background:#1e7e34;}
.btn-warning{background:#ffc107;color:#000;}
.btn-warning:hover{background:#e0a800;}
.btn-secondary{background:#6c757d;color:#fff;}
.btn-danger { background:#dc3545;color:#fff; }
.btn-secondary:hover{background:#5a6268;}
/* ===== FEATURES ===== */
/* Flex container */
.features{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start; /* left aligned */
  gap:20px;
  margin-top:30px;
}

/* Feature card */
.feature{
  background:#fff;
  border-radius:12px;
  box-shadow:0 3px 3px rgba(0,0,0,0.08);
  padding:20px 18px;
  flex:1 1 calc(25% - 20px); /* 4 per row */
  max-width:250px;
  text-align:left;
  border-top:4px solid;
  transition:all 0.3s ease;
  cursor:pointer;
}

/* Hover lift effect */
.feature:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* Heading & icon */
.feature h4{ 
  margin-bottom:12px; 
  font-size:1.15rem; 
  display:flex;
  align-items:center;
}

.feature h4 i{
  color:#ff6f61;
  margin-right:8px;
  font-size:22px;
  transition:transform 0.3s ease;
}

.feature:hover h4 i{
  transform:scale(1.2);
}

/* Sub-points list */
.feature ul{
  margin-top:10px;
  padding-left:20px;
}

.feature li{
  margin-bottom:6px;
  list-style:none;
  display:flex;
  align-items:center;
}

.feature li i{
  color:#0d6efd;
  margin-right:8px;
  font-size:14px;
  flex-shrink:0;
}

/* Card colors */
.feature-primary { border-color:#0d6efd; background:#e7f1ff; }
.feature-success { border-color:#28a745; background:#e9f7ef; }
.feature-info    { border-color:#17a2b8; background:#e8f9fc; }
.feature-warning { border-color:#ffc107; background:#fff8e1; }
.feature-danger  { border-color:#dc3545; background:#fdecea; }
.feature-secondary { border-color:#6c757d; background:#f1f3f5; }

/* Responsive adjustments */
@media(max-width:1200px){
  .feature{ flex:1 1 calc(50% - 20px); }
}

@media(max-width:768px){
  .feature{ flex:1 1 100%; }
  .feature h4{ font-size:1.1rem; }
  .feature li i{ font-size:13px; }
}
/* ===== CONTACT ===== */
#contact p i{
  margin-right:6px;
  color:#ff6f61;
}

/* ===== FOOTER ===== */
footer {
  width: 100%;
  background:#ff6f61;
  color:#fff;
  padding:10px 0;      /* 🔥 reduced height */
  text-align:center;
  line-height:1.3;    /* tighter text */
}

footer p {
  margin:0;           /* ❗ removes extra space */
  font-size:0.9rem;   /* slightly smaller text */
}

/* ===== RESPONSIVE ===== */
@media(max-width:992px){
  .feature{ flex:1 1 45%; max-width:none; }
}
@media(max-width:768px){
  #navbar{ display:none; width:100%; position:absolute; top:60px; left:0; flex-direction:column; background:#1e3c72; padding:15px 0; }
  #navbar.active{ display:flex; }
  #navbar a{ margin:8px 20px; }
  .pricing-card, .feature{ flex:1 1 100%; max-width:100%; }
  section{ padding:0px 15px; }
  .menu-toggle{ display:flex; }
}
/* ===== PRICING RESPONSIVE FIX ===== */

/* Tablet */
@media (max-width: 992px) {
  .col-md-3 {
    flex:1 1 calc(50% - 20px);   /* 2 cards */
    max-width:calc(50% - 20px);
  }
}

/* Mobile */
@media (max-width: 576px) {
  .col-md-3 {
    flex:1 1 100%;   /* 1 card */
    max-width:100%;
  }

  .pricing-card {
    padding:16px;
  }

  .pricing-card h3 {
    font-size:1.1rem;
  }

  .pricing-card span {
    font-size:1.1rem;
  }

  .pricing-card ul li {
    font-size:0.9rem;
  }

  .pricing-card a.btn {
    padding:8px 0;
    font-size:0.9rem;
  }
}
@media (max-width:768px){
  #hero{
    height:auto;
    padding:80px 20px 50px;
  }

  #hero h2{
    font-size:2rem;
  }

  #hero p{
    font-size:1rem;
  }
}