/* ==========================================================================
   BRAVO THEME - Responsive Styles (Mobile-First Breakpoints)
   ========================================================================== */

/* ==================================================================
   BREAKPOINT: sm (≥576px)
   ================================================================== */
@media (min-width: 576px) {
  .bravo-container {
    padding-left: var(--bravo-space-8);
    padding-right: var(--bravo-space-8);
  }
}


/* ==================================================================
   BREAKPOINT: md (≥768px)
   ================================================================== */
@media (min-width: 768px) {
  /* Ecosystem: from 2 cols to 3 */
  .section-ecosystem__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About slider: show 2 slides */
  .section-about__slide {
    flex: 0 0 calc(50% - var(--bravo-space-3));
  }

  /* Results: side by side */
  .section-results__grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==================================================================
   BREAKPOINT: lg (≥1024px)
   ================================================================== */
@media (min-width: 1024px) {
  /* Services: 2 column layout */
  .section-services__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Ecosystem: full 5 columns */
  .section-ecosystem__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Why us: full 4-column layout */
  .section-why-us__item {
    grid-template-columns: auto 1fr auto 1fr;
  }

  /* About header: 2 columns */
  .section-about__header {
    grid-template-columns: 1fr 1fr;
  }

  /* Testimonials: side by side */
  .section-testimonials__grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==================================================================
   BREAKPOINT: xl (≥1280px)
   ================================================================== */
@media (min-width: 1280px) {
  .bravo-container {
    padding-left: var(--bravo-space-6);
    padding-right: var(--bravo-space-6);
  }

  /* About slider: show 3 slides on large screens */
  .section-about__slide {
    flex: 0 0 calc(33.333% - var(--bravo-space-4));
  }
}


/* ==================================================================
   MOBILE OVERRIDES (max-width)
   These handle cases that are better expressed as "below breakpoint"
   ================================================================== */

/* Below lg: stack to single column */
@media (max-width: 1023px) {
  .section-services__grid {
    grid-template-columns: 1fr;
    gap: var(--bravo-space-8);
  }

  .section-why-us__item {
    grid-template-columns: auto 1fr;
    gap: var(--bravo-space-4);
  }

  .section-why-us__arrow {
    display: none;
  }

  .section-why-us__description {
    grid-column: 1 / -1;
  }

  .section-about__header {
    grid-template-columns: 1fr;
  }

  .section-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .section-testimonials__image {
    min-height: 300px;
    order: -1;
  }
}

/* Below md: single column everything */
@media (max-width: 767px) {
  .bravo-section {
    padding-top: var(--bravo-space-12);
    padding-bottom: var(--bravo-space-12);
  }

  .bravo-section-title {
    margin-bottom: var(--bravo-space-8);
  }

  .bravo-section-title__heading {
    font-size: var(--bravo-fs-3xl);
  }

  .section-ecosystem__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bravo-space-4);
  }

  .section-results__grid {
    grid-template-columns: 1fr;
    gap: var(--bravo-space-8);
    text-align: center;
  }

  .section-about__slide {
    flex: 0 0 85%;
  }

  .section-about__slide img {
    height: 220px;
  }

  .section-partners__logos {
    gap: var(--bravo-space-6);
  }

  .section-partners__logo img {
    height: 30px;
  }

  /* Footer mobile */
  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--bravo-space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom__links {
    justify-content: center;
  }

  /* Hero content */
  .bravo-hero__title {
    font-size: var(--bravo-fs-4xl);
  }

  .bravo-hero__actions {
    flex-direction: column;
    align-items: center;
  }
	.brand-section {
		width: 100%;
		margin: auto;
		padding: 0;
	}
	.brand-header {
		grid-template-columns: 1fr 50px;
	}
	.brand-header h2 {
		font-size: 2rem;
	}
	.custom-services .sv-title {
		font-size: 2rem;
	}
	.brand-slider {
		margin-top: 20px;
	}
	.brand-right {
		gap: 5px;
	}
	.image-pill {
		border-radius: 20px;
		border: 2px solid rgba(255, 255, 255, .8);
		width: 32%;
		height: 190px;
	}
	.stack-3, .stack-2, .stack-1, .active {
		transform: translateX(0);
	}
	.brand-card {
		display: grid;
		padding: 10px;
		grid-template-rows: auto 1fr;
	}
	.number {
		font-size: 4rem;
	}
	.subtitle {
		font-size: 1.2rem;
		margin-top: -20px;
	}
	.btn-detail {
		margin-top: 35px;
		padding: 10px 25px;
	}
	.brand-content > p {
		font-size: 1rem !important;
	}
	.custom-services.border-custom {
		width: 100% !important;
		padding: 5px;
		border-radius: 15px !important;
	}
	h2.sv-title {
		display: ruby;
	}
	.custom-services .sv-description {
		font-size: 1.1rem;
	}
	.orbit-item h3 {
		font-size: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 5px;
	}
	.orbit-item h3 > svg {
		width: 30px;
		padding: 4px;
		border-radius: 50%;
		display: block;
	}
	.orbit-item.right, .orbit-item.left {
		flex-direction: row;
		text-align: left;
		transform: none;
	}
	.orbit-item {
        margin-top: 5px;
    }
	.center-image img:nth-child(1) {
		margin-top: auto;
	}
	nav#main-navigation.is-active {
		background: #a61c23d6;
        right: 0;
        top: 0;
        width: 100%;
	}
	.timeline-sticky > .brand-header {
		width: 100%;
		margin: 5% auto 5% auto;
	}
	.timeline-card {
		width: 100%;
		grid-template-columns: none;
	}
	.timeline-card p {
		margin: 0;
	}
	.timeline-sticky {
		top: 70px;
	}
	.timeline-track {
		padding: 0;
	}
	.timeline-card h3 {
		margin: 20px 0;
		font-size: 1rem;
	}
	.custom-services {
		flex-direction: column !important;
		width: 100% !important;
		height: max-content;
	}
	.white-content * {
		padding: 0;
	}
	.stack-slider {
		height: 370px !important;
	}
	.stack-slider .stack-card {
		height: 400px;
	}
	.stack-slider .stack-card.is-active {
		transform: translateX(11px) scale(1);
	}
	.stack-slider .stack-card.is-1 {
		transform: translateX(1px) scale(0.97);
	}
	.stack-slider .stack-card.is-2 {
		transform: translateX(-10px) scale(0.94);
	}
	.stack-slider .stack-card.is-3 {
		transform: translateX(-21px) scale(0.91);
	}
	.stack-card p.dg-title {
		font-size: 1.2rem;
		line-height: 1.5rem;
	}
	.custom-grid {
		padding: 0;
	}
	.section-header > img {
		width: 2rem;
	}
	.section-header > h3 {
		font-size: 1.5rem;
	}
	.custom-grid > div > * {
		grid-column: span 2;
	}
	.detail-service .elementor-icon-box-wrapper {
		display: grid !important;
		grid-template-columns: auto 1fr;
	}
	.detail-service h4.elementor-icon-box-title {
		font-size: 1rem;
		text-align: left;
		margin-bottom: 5px;
	}
	div#logo-custom figure > img {
		width: 40px;
	}
	div#logo-custom figure > figcaption {
		font-size: 24px;
	}
	/* Gioi thieu */
	.gt-header-3 > h3 {
		font-size: 1.5rem;
	}
	.gt-header-3 > img {
		width: 60%;
	}
	.gt-style-1 h4.gt-item-title {
		font-size: 1.2rem;
	}
	.gt-header-3 {
		margin-top: 10%;
		margin-bottom: -10px;
	}
	.gt-style-1 p.gt-item-desc, .gt-style-2 p {
		font-size: 1rem;
	}
	.gt-style-2 {
		gap: 20px;
	}
	.lh-form-contact {
		padding: 10px;
	 }

	 a.link-dv {
		font-size: 1.5rem;
		line-height: 1.5rem;
	 }
	.bg-posts-grid {
		grid-template-columns: 1fr;
	}
}

/* Below sm: extra small */
@media (max-width: 575px) {
  .bravo-container {
    padding-left: var(--bravo-space-4);
    padding-right: var(--bravo-space-4);
  }

  .section-ecosystem__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-testimonials__card {
    padding: var(--bravo-space-6);
  }

  .section-results__card {
    padding: var(--bravo-space-6);
  }
}