/* ======================== Main Content ======================== */
.sub-hero-container {
    background: var(--body-background);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    z-index: 1;
    position: relative;
    
}

.sub-hero-page {
    max-width: var(--container-width);
    width: 90%;
    margin: 0 auto;
    padding: 12% 0 6%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    
}

/* ======================== breadcrumbs ======================= */


.breadcrumb {
  font-size: var(--font-p-body);

  color: var(--text-color-light);
  cursor: pointer;
}

.breadcrumb a {
  color: var(--text-color-light);
  text-decoration: none;
  transition: color .2s;

}

.breadcrumb span:hover,
.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 0.3rem;
  color: var(--text-color-light);
}

/* ======================== breadcrumbs Ends ======================= */


.sub-hero-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.sub-hero-title {
    font-size: var(--font-p-heading2);
    line-height: normal;
    
}

.sub-hero-left p {
    
    font-size: 1rem;
    color: var(--text-color-light);
   
    
}


.sub-hero-right {
    width: 50%;
}

.sub-hero-right img {
    width: 100%;
    height: auto;
    object-fit: contain;
}



/* ======================== Tablet & Below (≤ 768px) ======================== */
@media (max-width: 768px) {
    .sub-hero-page {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30% 0 10%;
        gap: 2rem;
    }

    .sub-hero-left,
    .sub-hero-right {
        width: 100%;
       
    }

    .sub-hero-left p {
        max-width: 100%;
    }

    .sub-hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

    .sub-hero-page-review {
        display: flex;
        justify-content: center;
        
        gap: 1rem;
    }
}

/* ======================== Mobile Phones (≤ 480px) ======================== */
@media (max-width: 480px) {
    .sub-hero-page {
        padding: 35% 0 10%;
        gap: 2rem;
    }

    .review-tab {
        width: 100%;
        justify-content: center;
    }  
}