/* ========================== 
  HERO SECTION DESIGN
========================== */
.hero{
  padding: 6.25rem 0;
}

.hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  margin-bottom: .4rem;
  text-shadow: 0 1px 30px rgb(231, 231, 231);
}
.hero p.lead {
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
}

.search-bar .form-control,
#subscribeForm .form-control{
  border-radius: 40px;
  padding: 0.9rem 1.25rem;
  border: var(--form-border);
  box-shadow: var(--soft-shadow);
}
.search-bar .form-control:focus{
  border: 1px solid var(--accent-color);
}

.btn-primary-custom{
  background: var(--accent-color);
  color: var(--light-text);
  padding: .99rem 1.2rem;
  border-radius: 50px;
  transition: var(--transition);
}
.btn-primary-custom:hover{
  background: var(--primary-color);
  color: var(--light-text);
}
.btn-outline-custom{
  background: transparent;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  padding: .78rem 1.2rem;
  border-radius: 50px;
  transition: var(--transition);
}
.btn-outline-custom:hover{
  background: var(--primary-color);
  color: var(--light-text);
}

.tag-pill{
  border: 1px solid rgba(191, 191, 191, 0.259);
  padding: .35rem .8rem;
  background: var(--light-text);
  border-radius: 50px;
  font-size: .98rem;
  cursor: pointer;
}
.tag-pill.active{
  background-color: var(--accent-color);
  color: var(--light-text);
}


/* projects card style  */
#projects{
  background: linear-gradient(120deg, rgb(255, 255, 255), rgb(255, 255, 255));
}
.project-card{
  border-radius: var(--radius);
  background-color: rgb(255, 255, 255);
  padding: 1rem;
  border: 1px solid rgb(245, 245, 245);
  transition: var(--transition);
  box-shadow: 0px 2px 20px rgba(194, 194, 194, 0.12);
  transition: var(--transition);
}

.project-card:hover{
  transform: translateY(2px);
}

.card-img-top{
  height: 120px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(120deg,#e6f0ff,#f7fbff);
}
.project-meta{
  font-size: 0.78rem;
}
.project-title{
  font-weight: 700;
}
.small-muted{
  font-size: 0.92rem;
}


.newsletter{
  background: linear-gradient(180deg, #f5f8ff, #fbfdff);
  padding: 1.25rem;
  border-radius: 16px;
}



/* ========================== 
    About Section
==========================  */



/* ========================== 
      Services
  ==========================  */


/* ========================== 
    Projects Section
  ==========================  */

/* ========================== 
    Testimonials quote
==========================  */