/* ==========================
   PAGE TITLE / BANNER
========================== */

.page-title {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

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

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

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

.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;
}

.breadcrumbs .current {
  color: #ffffff;
}


/* Mobile */
@media (max-width: 768px) {

  .page-title {
    height: 220px;
  }

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

}
/* ABOUT IMAGE */

.about-image-box img{

    width:100%;
    height:600px;
    object-fit:cover;

}



/* LEFT SMALL BOX */

.about-mini-box{

    margin-top:25px;
    padding:30px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);

}


.about-mini-box h4{

    color:#0e4e5b;
    font-size:24px;
    font-weight:700;

}


.about-mini-box p{

    color:#666;
    line-height:1.7;

}



/* RIGHT ABOUT BOX */

.about-text-box{

    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.about-tag{

    color:#F3920F;
    font-weight:700;

}


.about-text-box h2{

    font-size:38px;
    color:#0F5B6A;
    font-weight:700;

}


.about-text-box h2 span{

    color:#F3920F;

}


.about-text-box ul{

    list-style:none;
    padding:0;

}


.about-text-box li{

    margin:15px 0;
    color:#555;
    display:flex;
    gap:10px;

}


.about-text-box i{

    color:#F3920F;

}



/* BOTTOM GROWSUN BOX */

.growsun-box{

    margin-top:25px;
    background:#0e4e5b;
    padding:35px;
    border-radius:20px;
    color:white;

}


.growsun-box h3{

    color:#F3920F;
    font-size:30px;

}


.growsun-box p{

    line-height:1.8;

}


/* BUTTON */

.growsun-btn-area{

    display:flex;
    gap:15px;
    margin-top:25px;

}


.g-btn{

    background:#F3920F;
    padding:14px 30px;
    border-radius:50px;
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;

}


.g-btn:hover{

    background:white;
    color:#0e4e5b;

}


.g-btn.second{

    background:white;
    color:#0e4e5b;

}


.g-btn.second:hover{

    background:#F3920F;
    color:white;

}



/* MOBILE */

@media(max-width:991px){

.about-image-box img{

height:400px;

}


.about-text-box h2{

font-size:30px;

}


.growsun-btn-area{

flex-direction:column;

}

}
/*--------------------------------
# About Section
---------------------------------*/
.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}
.about-tag{
  display:inline-block;
  background:rgba(243,146,15,0.12);
  color:#F3920F;
  padding:8px 18px;
  border-radius:30px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:15px;
}

.about-title{
  font-size:42px;
  font-weight:800;
  line-height:1.3;
  margin-bottom:20px;
  color:#163300;
}

.about-title span{
  color:#F3920F;
  position:relative;
}

.about-intro{
  color:#666;
  font-size:17px;
  line-height:1.8;
}

.about-img{
  transition:0.5s;
}

.about-img:hover{
  transform:scale(1.05);
}


.about ul li{
  margin-bottom:15px;
  transition:.3s;
}

.about ul li:hover{
  transform:translateX(8px);
}

.about ul li i{
  color:#F3920F;
}

/* ===========================
   Stats Section
=========================== */

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


/* Stats Card */

.stats .stats-item {
  background: #ffffff;
  padding: 35px 20px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  transition: 0.4s ease;
}


/* Top Line Effect */

.stats .stats-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 0%;
  background: #F3920F;
  transition: 0.4s;
}


.stats .stats-item:hover::before {
  width: 100%;
}


/* Hover */

.stats .stats-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(243,146,15,0.25);
}


/* Number */

.stats .purecounter {
  display: block;
  font-size: 45px;
  font-weight: 800;
  color: #F3920F;
  margin-bottom: 10px;
}


/* Text */

.stats p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #333;
}


/* Responsive */

@media(max-width:768px){

.stats {
  padding: 50px 0;
}

.stats .purecounter {
  font-size: 36px;
}

}

/* ===========================
   Testimonials Section
=========================== */

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


/* Card */

.testimonial-item {
  background: #ffffff;
  text-align: center;
  padding: 40px 35px;
  border-radius: 20px;
  margin: 20px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.08);
  transition: 0.4s ease;
  position: relative;
  overflow: hidden;
}


/* Hover Effect */

.testimonial-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(243,146,15,0.25);
}


/* Top Border */

.testimonial-item::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:#F3920F;
}


/* Stars */

.testimonial-item .stars {
  margin-bottom:20px;
}


.testimonial-item .stars i {
  color:#F3920F;
  font-size:20px;
  margin:0 2px;
}


/* Review Text */

.testimonial-item p {
  font-size:16px;
  line-height:1.8;
  color:#555;
}


/* Quote Icons */

.quote-icon-left,
.quote-icon-right {
  color:#F3920F;
  font-size:22px;
}


/* Client Name */

.testimonial-item h3 {
  margin-top:25px;
  font-size:20px;
  font-weight:700;
  color:#0e4e5b;
}


.testimonial-item h4 {
  font-size:15px;
  color:#777;
}
/* ==========================
   GROWSUN PAGE ANIMATIONS
========================== */
/* Image Hover Zoom */

.about-image-box{
    overflow:hidden;
    border-radius:25px;
}


.about-image-box img{
    transition:0.6s ease;
}


.about-image-box:hover img{
    transform:scale(1.08);
}



/* About Tag Animation */

.about-tag{

    animation: slideDown .8s ease;

}


@keyframes slideDown{

    from{
        opacity:0;
        transform:translateY(-30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}



/* Title Animation */

.about-title{

    animation:titleMove 1s ease;

}


@keyframes titleMove{

    from{
        opacity:0;
        transform:translateX(50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}
/* Why GrowSun Card Animation */


.info-block{

    animation: cardUp .8s ease;

}



@keyframes cardUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }


    to{

        opacity:1;
        transform:translateY(0);

    }

}




/* Stats Number Animation */

.stats-item .purecounter{

    animation:pulseNumber 2s infinite;

}


@keyframes pulseNumber{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



/* Testimonial Card Animation */


.testimonial-item{

    animation: testimonialMove 1s ease;

}



@keyframes testimonialMove{


from{

    opacity:0;
    transform:translateY(50px);

}


to{

    opacity:1;
    transform:translateY(0);

}


}



/* Page Banner Zoom */


.page-title{

    animation: bannerZoom 1.5s ease;

}



@keyframes bannerZoom{


from{

    background-size:120%;

}


to{

    background-size:100%;

}


}



/* Mobile Disable Heavy Animation */

@media(max-width:768px){

.about-image-box img{

    animation:none;

}


.about-title{

    animation:none;

}


}


/* ==========================
   WHY GROWSUN ANIMATION
========================== */

.why-growsun .info-block {
    position: relative;
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.5s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}


/* Orange border animation */
.why-growsun .info-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #F3920F;
    transform: scaleY(0);
    transition: 0.5s ease;
}


.why-growsun .info-block:hover::before {
    transform: scaleY(1);
}


/* Hover Effect */
.why-growsun .info-block:hover {
    transform: translateY(-12px);
    box-shadow: 
    0 20px 45px rgba(243,146,15,0.25);
}


/* Heading animation */
.why-growsun .info-block h4 {
    color: #0e4e5b;
    font-size: 24px;
    font-weight: 700;
    transition: 0.4s;
}


.why-growsun .info-block:hover h4 {
    color: #F3920F;
    transform: translateX(8px);
}


/* Paragraph animation */
.why-growsun .info-block p {
    color: #555;
    line-height: 1.8;
    transition: 0.4s;
}


.why-growsun .info-block:hover p {
    color: #333;
}



/* Heading animation */
.about-title span {
    color: #F3920F;
    position: relative;
}


.about-title span::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:3px;
    background:#F3920F;
    transform:scaleX(0);
    transform-origin:left;
    transition:0.5s;
}


.about-title:hover span::after {
    transform:scaleX(1);
}
/* Underline */
.why-growsun .info-block h4::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:#F3920F;
  margin-top:10px;
  border-radius:10px;
  transition:.4s;
}