.container1{
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 96px;
}

@media (max-width: 1279px) {
    .container1 {
        padding: 0 48px;
    }
}

@media (max-width: 1023px) {
    .container1 {
        padding: 0 32px;
    }
}

@media (max-width: 767px) {
    .container1 {
        padding: 0 16px;
    }
}

.active-gradient-border-wrapper {
    border-radius: 9999px; /* fully rounded */
    padding: 1px; /* thickness of the gradient border */
    background: linear-gradient(90deg, rgba(108, 61, 142, 0.7) 0%, rgba(234, 91, 33, 0.7) 100%);
    display: inline-block;
}

.active-gradient-border-inner {
    border-radius: 9999px;
    background-color: white;
    padding: 0.5rem 1.5rem; /* matches px-6 py-2 */
    font-weight: 500;
    display: block;
    text-align: center;
    transition: all 0.3s;
}

.nav-link{
    font-family: Plus Jakarta Sans, sans-serif;
}
.product-text{
    font-family: Inter, sans-serif;
}

.fontJakarta{
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.fontInter{
    font-family: 'Inter', sans-serif;
}

.fontPoppins{
    font-family: 'Poppins', sans-serif;
}

.rounded-gradient-border {
    position: relative;
    background: white;
    border-radius: 9999px; /* fully rounded */
}
.rounded-gradient-border::before {
    content: '';
    position: absolute;
    inset: -1.5px; /* border thickness */
    z-index: -1;
    border-radius: 9999px; /* fully rounded */
    background: linear-gradient(90deg, #6C3D8E 0%, #EA5B21 100%);
}

/* Section styles are defined in media queries below */

/* Default styles for all screen sizes */
.why-section, .quote-section, .real-time, .journey-section {
    padding-left: 16px;
    padding-right: 16px;
}

/* Specific range for container1 effects (1280px to 1340px) */
@media(min-width: 1280px) and (max-width: 1340px) {
    .container1 {
        padding: 0 96px;
    }
    .why-section{
        padding-left: calc((100vw - 1512px) / 2 + 96px);
        padding-right: 96px;
    }
    .quote-section{
        padding-left: 96px;
        padding-right: calc((100vw - 1512px) / 2 + 96px);
    }
    .real-time {
        padding-left: calc((100vw - 1512px) / 2 + 96px);
        padding-right: 96px;
    }
    .journey-section{
        padding-left: calc((100vw - 1512px) / 2 + 96px);
        padding-right: 96px;
    }
}

/* Large screens (above 1340px) - Standard padding without complex calculations */
@media(min-width: 1341px) {
    .container1 {
        padding: 0 96px;
        max-width: 1340px;
        margin: 0 auto;
    }
    .why-section{
        padding-left: 96px;
        padding-right: 96px;
        max-width: 1340px;
        margin: 0 auto;
    }
    .quote-section{
        padding-left: 96px;
        padding-right: 96px;
        max-width: 1340px;
        margin: 0 auto;
    }
    .real-time {
        padding-left: 96px;
        padding-right: 96px;
        max-width: 1340px;
        margin: 0 auto;
    }
    .journey-section{
        padding-left: 96px;
        padding-right: 96px;
        max-width: 1340px;
        margin: 0 auto;
    }
}
/* Mobile styles (below 768px) */
@media (max-width: 767px) {
    .container1 {
        padding: 0 16px;
    }
    .why-section{
        padding-left: 16px;
        padding-right: 16px;
    }
    .quote-section{
        padding-left: 16px;
        padding-right: 16px;
    }
    .real-time {
        padding-left: 16px;
        padding-right: 16px;
    }
    .journey-section{
        padding-left: 16px;
        padding-right: 16px;
    }
    .quotes-grid{
        padding-left: 16px;
    }
}

/* Tablet styles (768px - 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
    .container1 {
        padding: 0 48px;
    }
    .why-section{
        padding-left: 48px;
        padding-right: 48px;
    }
    .quote-section{
        padding-left: 48px;
        padding-right: 48px;
    }
    .real-time {
        padding-left: 48px;
        padding-right: 48px;
    }
    .journey-section{
        padding-left: 48px;
        padding-right: 48px;
    }
    .quotes-grid{
        padding-left: 48px;
    }
}

/* Remove this media query as it's now handled by the tablet breakpoint above */

.active-tab {
    border-top: 2px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(to right, #fb923c, #9333ea); /* orange-400 to purple-600 */
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    /* The margin-bottom pulls the tab down to cover the container's bottom border */
    margin-bottom: -1px;
}

.border-box{
    border: 1px solid transparent;
  border-radius: 10px;
  background-image: 
    linear-gradient(white, white), /* inner background */
    linear-gradient(
      45deg,
      rgba(223, 223, 223, 0.7) 22.4%,
      rgba(184, 184, 184, 0.7) 47.08%,
      rgba(223, 223, 223, 0.7) 73.73%
    ); /* gradient border */
  background-origin: border-box;
  background-clip: content-box, border-box;
}