/* ===========================
   Page Title Section
=========================== */

.page-title {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  background-image: url("../img//Projects/Project1.jpg"); /* change image path */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}


/* Transparent Overlay */

.page-title .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* transparency */
}


/* Content */

.page-title .container {
  z-index: 2;
  text-align: center;
}


.page-title h1 {
  color: #ffffff;
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: 1px;
}


/* Breadcrumb */

.breadcrumbs ol {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}


.breadcrumbs li {
  color: #ffffff;
  font-size: 16px;
}


.breadcrumbs a {
  color: #F3920F;
  text-decoration: none;
  transition: 0.3s;
}


.breadcrumbs a:hover {
  color: #ffffff;
}


.breadcrumbs .current {
  color: #ffffff;
}


/* Responsive */

@media(max-width:768px){

  .page-title{
    height:250px;
  }

  .page-title h1{
    font-size:36px;
  }

}
/*------------------------------------------
# GrowSun Featured Services Section
------------------------------------------*/
/* ===========================
   Services Section
=========================== */

.services {
  padding: 80px 0;
  background: #f8faf7;
}


.services .section-title h2 {
  color: #F3920F;
  font-size: 36px;
  font-weight: 800;
}


.services .section-title p {
  color: #555;
  max-width: 700px;
  margin: auto;
}


/* Service Card */

.service-box {
  background: #ffffff;
  padding: 35px 25px;
  text-align: center;
  border-radius: 15px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  border-bottom: 4px solid transparent;
}


.service-box:hover {
  transform: translateY(-10px);
  border-bottom: 4px solid #F3920F;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}


/* Icon */

.service-box .icon {
  width: 75px;
  height: 75px;
  margin: 0 auto 20px;
  background: #F3920F;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}


.service-box .icon i {
  font-size: 35px;
}


.service-box:hover .icon {
  transform: rotateY(360deg);
  background: #0D4F5A;
}


.service-box h3 {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin-bottom: 15px;
}


.service-box p {
  color: #666;
  line-height: 1.7;
  font-size: 15px;
}


/* Mobile */

@media(max-width:768px){

.services {
  padding:50px 0;
}

.services .section-title h2 {
  font-size:30px;
}

}
  
/* ===========================
   Why Choose Us Section
=========================== */

.why-us {
  padding: 80px 0;
  background: #f8faf7;
}


/* Section Heading */

.why-us .section-title h2 {

  font-size:36px;

  font-weight:800;

  color:#F3920F;

  position:relative;

  display:inline-block;

  letter-spacing:0.5px;

}


.why-us .section-title p {

  margin-top:20px;

  color:#666;

  font-size:16px;

}



/* Cards */

.why-box {

  background:#ffffff;
  padding:35px 25px;
  text-align:center;
  border-radius:18px;
  height:100%;
  border:1px solid #e8eee8;
  box-shadow:
  0 8px 25px rgba(13,79,90,0.08);
  transition:0.4s ease;
  position:relative;
  overflow:hidden;

}



/* Icon */

.why-box .icon {
 width:70px;
 height:70px;
 margin:0 auto 20px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#0D4F5A;
 color:#ffffff;
 font-size:32px;
 transition:0.4s ease;
 box-shadow:
 0 8px 20px rgba(13,79,90,0.25);

}



.why-box:hover .icon {

 background:#F3920F;
 color:#0D4F5A;
 transform:translateY(-8px) rotate(8deg);

}



/* Title */

.why-box h4 {

 font-size:22px;
 font-weight:700;
 color:#0D4F5A;
 margin-bottom:15px;

}



/* Text */

.why-box p {
 color:#666;
 line-height:1.7;

}



/* Hover Effect */

.why-box:hover {
 transform:translateY(-10px);
 border-color:#F3920F;
 box-shadow:
 0 18px 40px rgba(13,79,90,0.20);
}



/* Smooth Animation */

.why-box,
.why-box .icon {
 transition:all .4s ease;

}