/* ==========================================================================
   RESPONSIVE STYLES
   Typography and section spacing scale FLUIDLY via clamp() inside style.css
   (min 60px for all vertical section spacing, scaling continuously from
   320px up to 1600px - no sudden jumps at any width).
   This file only holds STRUCTURAL changes clamp() cannot do: layout
   switches (flex/grid), showing/hiding elements, and fixed widths/heights.
   Breakpoints used, matching the requested device tiers:
     320px  - 480px   Small mobile
     481px  - 767px   Large mobile / small tablets
     768px  - 991px   Tablets
     992px  - 1199px  Small laptops
     1200px - 1599px  Desktops
     1600px and above Large desktops / TVs
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE STYLES
   Typography and section spacing scale FLUIDLY via clamp() inside style.css
   (min 60px for all vertical section spacing, scaling continuously from
   320px up to 1600px - no sudden jumps at any width).
   This file only holds STRUCTURAL changes clamp() cannot do: layout
   switches (flex/grid), showing/hiding elements, and fixed widths/heights.
   Breakpoints used, matching the requested device tiers:
     320px  - 480px   Small mobile
     481px  - 767px   Large mobile / small tablets
     768px  - 991px   Tablets
     992px  - 1199px  Small laptops
     1200px - 1599px  Desktops
     1600px and above Large desktops / TVs
   ========================================================================== */



/* ============ 1600px and above - Large desktops / TVs ============
   No overrides needed: style.css clamp() values reach their maximum
   and hold steady here. */

/* ============ 1200px - 1599px - Desktops ============
   No structural overrides needed: layout matches large desktop,
   only font-size/spacing taper via the fluid clamp() in style.css. */

/* ============ 1200px - 1599px - Desktops ============ */
@media (max-width: 1599px) {}

/* ============ Below 1300px - all sections get a 20px side gutter ============ */
@media (max-width: 1300px) {

  .about,
  .testimonial,
  .faq,
  .pricing__inner,
  .mission,
  .stats-grid-section,
  .philosophy,
  .process-workflow-section,
  .team,
  .awards,
  .services-page-wrap,
  .pricing-page-wrap,
  .projects-page-wrap,
  .blog-wrap,
  .contact-info-section,
  .contact-form-section,
  .single-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============ 992px - 1199px - Small laptops ============ */
@media (max-width: 1199px) {
  .logos {
    grid-template-columns: repeat(4, 1fr);
  }

  .process-workflow-grid {
    grid-template-columns: 1fr 400px;
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }
}

/* ============ 768px - 991px - Tablets ============ */
@media (max-width: 991px) {

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

  .contact-info-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .pricing-page-grid {
    flex-direction: column;
  }

  .pricing-standalone-card.dark-card {
    max-width: 100%;
  }

  .hero__bg {
    background-image: linear-gradient(#0006, #0006), url('../assets/new-banner.jpg');
  }

  .process-workflow-grid {
    grid-template-columns: 1fr 350px;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .work-split {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about {
    flex-direction: column;
  }

  .work-split-left {
    position: static;
    height: auto;
    padding: 40px 0;
  }

  .work-split-left-content {
    width: 100%;
    margin-left: 30px;
  }

  .work-split-right {
    width: 100%;
    margin-left: 0;
  }

  .work-right-item {
    margin-bottom: 20px;
    margin-top: 20px;
  }



  .heading-block {}

  .hline:not(:first-child) {
    padding-left: 0;
  }

  .we-label {
    display: none;
  }

  .partners {
    gap: 20px;
  }

  .logos {
    grid-template-columns: repeat(3, 1fr);
  }

  .video-wrap {
    aspect-ratio: 4/5;
    border-radius: 12px;
  }

  .video-caption {
    white-space: normal;
    text-align: center;
    width: 80%;
  }

  .hero__header {
    padding: 24px 22px 0;
  }

  .hero__content {
    left: 22px;
    right: 22px;
    bottom: 230px;
    width: auto;
    max-width: none;
  }

  .stat-card {
    right: 16px;
    bottom: 16px;
    width: min(260px, 62vw);
    min-height: 180px;
    padding: 20px;
  }

  .service-item {
    flex-direction: column;
    gap: 24px;
  }



  .service-right {
    width: 100%;
    max-width: none;
    height: 220px;
  }

  .price-card {
    grid-template-columns: 1fr 1fr;
  }

  .price-card .plan {
    grid-column: 1 / -1;
  }

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

  .footer__grid {}

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



  .projects-grid-row {
    grid-template-columns: 1fr;
    gap: 0px;
    margin-bottom: 0px;
  }

  .projects-grid-main .work-item-inner,
  .projects-grid-row .work-item-inner {
    height: 400px;
  }

  .services-page-card {
    flex-direction: column;
    max-height: none;
    height: auto;
    min-height: 300px;
  }

  .services-page-image {
    min-height: 300px;
    max-height: 400px;
  }

  .feature-row {
    flex-direction: column;
    height: auto;
  }

  .feature-card {
    min-height: 400px;
  }

  .feature-row:hover .feature-card {
    flex-grow: 1;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-section-heading {
    margin-top: 60px;
  }

  .more-service-grid {
    grid-template-columns: 1fr;
  }

  .project-meta-row {
    display: flex;
    gap: 20px;
  }

  .project-meta-item,
  .project-meta-item:first-child,
  .project-meta-item:last-child {
    border-right: none;
    padding: 0;
    padding-bottom: 16px;
    margin-bottom: 0;
    align-items: flex-start;
    text-align: left;
  }



  .service-item {
    top: 100px;
  }

  .about-banner-content-area {
    margin-top: 40px;
  }

  .about-banner {
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
  }

  .stats-card {
    padding: 30px;
  }

  .stats-cards-grid {
    gap: 20px;
  }

  .about-hero,
  .about-hero-2 {
    min-height: 300px;
    height: auto;
  }

  .phil-card h3 {
    margin-bottom: 10px;
  }

  .services-page-card {
    padding: 20px;
  }

  .delivery-time-row {
    margin-top: 20px;
  }

  .pricing-standalone-card.light-card {
    padding: 20px;
  }

  .pricing-standalone-card.dark-card {
    padding: 20px;
  }

  .f-tag {
    top: 20px;
    left: 20px;
  }
}

@media (min-width: 992px) {
  .phil-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .footer-content-area {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 30px;
  }

  .footer__desc {
    max-width: 100%;
  }

  .partners {
    gap: 20px;
  }

  .logos {
    grid-template-columns: repeat(3, 1fr);
  }

  .video-wrap {
    aspect-ratio: 4/5;
    border-radius: 12px;
  }

  .video-caption {
    white-space: normal;
    text-align: center;
    width: 80%;
  }

  .hero__header {
    padding: 24px 22px 0;
  }

  .hero__content {
    left: 22px;
    right: 22px;
    bottom: 230px;
    width: auto;
    max-width: none;
  }

  .stat-card {
    right: 16px;
    bottom: 16px;
    width: min(260px, 62vw);
    min-height: 180px;
    padding: 20px;
  }

  .service-item {
    flex-direction: column;
    gap: 24px;
  }



  .service-right {
    width: 100%;
    max-width: none;
    height: 220px;
  }

  .price-card {
    grid-template-columns: 1fr 1fr;
  }

  .price-card .plan {
    grid-column: 1 / -1;
  }

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

  .footer__grid {}

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



  .projects-grid-row {
    grid-template-columns: 1fr;
  }

  .projects-grid-main .work-item-inner,
  .projects-grid-row .work-item-inner {
    height: 400px;
  }

  .services-page-card {
    flex-direction: column;
    max-height: none;
    height: auto;
    min-height: 300px;
  }

  .services-page-image {
    min-height: 300px;
    max-height: 400px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-section-heading {
    margin-top: 60px;
  }

  .more-service-grid {
    grid-template-columns: 1fr;
  }

  .project-meta-item,
  .project-meta-item:first-child,
  .project-meta-item:last-child {
    border-right: none;
    padding: 0;
    padding-bottom: 16px;
    margin-bottom: 0;
    align-items: flex-start;
    text-align: left;
  }

  .footer__main {
    flex-direction: column;
  }

  .footer__right {
    max-width: 100%;
  }

  .footer__right img {
    min-height: 0;
    height: clamp(200px, 40vw, 400px);
  }

  .service-item {
    top: 100px;
  }

  .about-banner-content-area {
    margin-top: 40px;
  }

  .about-banner {
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
  }

  .stats-card {
    padding: 30px;
  }

  .stats-cards-grid {
    gap: 20px;
  }

  .about-hero,
  .about-hero-2 {
    min-height: 300px;
    height: auto;
  }

  .phil-card h3 {
    margin-bottom: 10px;
  }

  .services-page-card {
    padding: 20px;
  }

  .delivery-time-row {
    margin-top: 20px;
  }

  .pricing-standalone-card.light-card {
    padding: 20px;
  }

  .pricing-standalone-card.dark-card {
    padding: 20px;
  }

  .contact-info-card {
    padding: 35px 40px;
  }

  .contact-card-content {
    padding: 0px 0px;
  }

  .feature-row {
    margin-bottom: 100px;
  }


}



/* ============ 481px - 767px - Large mobile / small tablets ============ */
@media (max-width: 767px) {
  .feature-row {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }

  .feature-card {
    flex: none !important;
    min-height: 250px;
  }


  .light-card-left {
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-right: 0;
    padding-top: 30px;
  }

  .more-service-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-card:nth-child(3) {
    grid-column: auto;
  }

  .contact-page-form {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-field label {
    margin-bottom: 10px;
  }

  .team-member {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .about-banner-content-area {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .mission-grid {
    flex-direction: column;
    gap: 20px;
  }

  .about-banner-photo {
    max-width: 100%;
  }

  .stats-cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stats-cards-grid .image-card {
    grid-column: 1 / -1;
  }



  .phil-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
  }

  .stats-card:not(.image-card) {
    height: auto;
    padding-bottom: 40px;
  }



  .footer__desc {
    max-width: none;
  }

  .footer__bottom {
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .testimonial__list {
    grid-template-columns: 1fr;
  }

  .services-page-image {
    min-height: 300px;
    max-height: 350px;
  }

  .testimonial-card:hover .testimonial-overlay {
    top: 15px;
    left: 15px;
    width: 85px;
    height: 85px;
    border-radius: 8px;
    z-index: 1;
  }

  .faq-area {
    flex-direction: column;
  }

  .faq-cta-area {
    width: 100%;
    max-width: none;
    height: auto;
    gap: 100px;
  }



  .service-right {
    height: 300px;
    max-height: 300px;
  }

  .service-item {
    top: 80px;
  }

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

  .process-workflow-grid {
    grid-template-columns: 1fr;
  }

  .process-workflow-intro {
    position: relative;
    top: 0;
  }

  .process-workflow-sticky {
    position: relative;
    top: 0;
  }

  .process-workflow-section {
    height: auto;
  }

  .process-step-content {
    max-height: none !important;
  }

  .process-step-content-inner {
    opacity: 1 !important;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-page-form {
    grid-template-columns: 1fr;
  }

  .stats-card {
    padding: 20px;
  }

  .contact-info-card {
    padding: 20px;
  }

  .more-service-card-body {
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 20px;
  }

  .more-service-card-body p {
    margin-top: 10px;
  }

  .single-hero-img {
    min-height: 250px;
  }

  .feature-row {
    margin-bottom: 80px;
  }
}

/* ============ Below 610px ============ */
@media (max-width: 610px) {
  .price-card {
    grid-template-columns: 1fr;
  }

  .cta__form {
    grid-template-columns: 1fr;
  }
}

/* ============ Below 510px ============ */
@media (max-width: 510px) {
  .footer__left h2 {
    font-size: 70px;
  }

  .project-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* ============ 320px - 480px - Small mobile ============ */
@media (max-width: 480px) {
  .more-service-card-img {
    height: 400px;
  }

  .work-item-inner {
    height: auto !important;
    overflow: visible !important;
  }

  .projects-grid-main .work-item-inner img,
  .projects-grid-row .work-item-inner img,
  .work-item-inner img {
    height: 260px;
    border-radius: 0 !important;
    clip-path: inset(0 round clamp(10px, 1.4vw, 20px)) !important;
    transition: transform 0.5s ease, clip-path 0.5s ease !important;
  }

  .work-item-inner:hover img {
    transform: scale(1.05) !important;
    clip-path: inset(2.38% round clamp(10px, 1.4vw, 20px)) !important;
  }

  .work-hover-group {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px !important;
  }

  .work-hover-main {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .work-hover-main h4 {
    background: transparent;
    box-shadow: none;
    padding: 0;
    white-space: normal;
    max-width: none;
    color: #000;
  }

  .work-hover-arrow {
    display: none;
  }

  .work-hover-group p {
    color: rgb(93, 93, 93);
    margin: 3px 0 0 0;
  }

  .team-member {
    width: 100%;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .stats-cards-grid {
    grid-template-columns: 1fr;
  }

  .phil-grid {
    grid-template-columns: 1fr;
  }

  .logos {
    grid-template-columns: 1fr;
  }

  .hero {
    width: calc(100% - 20px);
    margin: 10px auto;
    border-radius: 14px;
    height: calc(100vh - 20px);
    min-height: 640px;
  }

  .hero__headline {
    margin-bottom: 16px;
  }

  .service-tags span {
    font-size: 16px;
    padding: 10px 12px;
  }

  .stat-card {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 16px;
  }

  .service-item {
    top: 60px;
  }



  .faq__item {
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 0;
  }

  .faq__body {
    display: contents;
  }

  .faq__body h3 {
    flex: 1;
  }

  .faq__icon {
    width: 50px;
    height: 50px;
  }

  .faq__answer-wrapper {
    width: 100%;
  }

  .footer__left h2 {
    font-size: clamp(32px, 14vw, 80px);
  }

  .footer__bottom {
    font-size: 16px;
  }

  .footer__grid a {
    margin-bottom: 10px;
  }

  .footer__grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .award-card-wrap.year,

  .field input,
  .field select {
    text-align: left;
    direction: ltr;
  }

  .about-banner-title-wrap p {
    margin-top: 10px;
  }

  .stats-card {
    padding: 15px;
  }

  .f-tag {
    top: 10px;
    left: 10px;
  }

  .contact-info-card {
    padding: 20px;
  }

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

  .feature-row {
    margin-bottom: 60px;
  }
}

/* ============ Accessibility ============ */
@media (prefers-reduced-motion: reduce) {

  .hero__content,
  .stat-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .nav-pill,
  .pages-dropdown,
  .toggle-btn,
  .button-arrow-wrap {
    transition: none;
  }
}

@media (max-width: 767px) {
  .light-card-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
  }

  .light-card-left {
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-right: 0;
    padding-top: 30px;
  }

  .award-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }

  .award-card {
    min-width: 700px;
  }
}

@media (max-width: 480px) {
  .team-member {
    width: 100%;
  }

  .stats-cards-grid {
    grid-template-columns: 1fr;
  }

  .phil-grid {
    grid-template-columns: 1fr;
  }

  .logos {
    grid-template-columns: 1fr;
  }

  .hero {
    width: calc(100% - 20px);
    margin: 10px auto;
    border-radius: 14px;
    height: calc(100vh - 20px);
    min-height: 640px;
  }

  .hero__headline {
    margin-bottom: 16px;
  }

  .service-tags span {
    font-size: 16px;
    padding: 10px 12px;
  }

  .stat-card {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 16px;
  }

  .service-item {
    top: 60px;
  }



  .faq__item {
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 0;
  }

  .faq__body {
    display: contents;
  }

  .faq__body h3 {
    flex: 1;
  }

  .faq__icon {
    width: 50px;
    height: 50px;
  }

  .faq__answer-wrapper {
    width: 100%;
  }

  .footer__bottom {
    font-size: 16px;
  }

  .footer__grid a {
    margin-bottom: 10px;
  }

  .footer__grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .award-card-wrap.year,

  .field input,
  .field select {
    text-align: left;
    direction: ltr;
  }

  .about-banner-title-wrap p {
    margin-top: 10px;
  }

  .stats-card {
    padding: 15px;
  }
}

/* ============ Accessibility ============ */
@media (prefers-reduced-motion: reduce) {

  .hero__content,
  .stat-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .nav-pill,
  .pages-dropdown,
  .toggle-btn,
  .button-arrow-wrap {
    transition: none;
  }
}

@media (max-width: 767px) {
  .light-card-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
  }

  .light-card-left {
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-right: 0;
    padding-top: 30px;
  }

  .award-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }

  .award-card {
    min-width: 700px;
  }

  .award-card-wrap.year {
    max-width: 20%;
  }

  .award-card-wrap.nomination {
    max-width: 30%;
  }
}

@media (max-width: 480px) {

  .feature-card,
  .blog-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto !important;
    aspect-ratio: auto;
    margin: 0;
    width: 100%;
  }

  .feature-card .img-wrapper,
  .blog-card .img-wrapper {
    position: relative;
    height: 250px;
    min-height: 250px;
    flex-shrink: 0;
    width: 100%;
    border-radius: clamp(10px, 1.4vw, 20px);
  }

  .feature-card .f-content,
  .blog-card .c-content {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    opacity: 1;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 20px 0 0 0;
  }

  .feature-card .f-content p,
  .blog-card .c-content p {
    color: #000;
  }

  .feature-card .f-content .arrow-btn,
  .blog-card .c-content .arrow-btn {
    filter: none;
    background: #080203;
  }

  .feature-card .f-content .arrow-btn img,
  .blog-card .c-content .arrow-btn img,
  .feature-card .f-content .arrow-btn svg,
  .blog-card .c-content .arrow-btn svg {
    filter: brightness(0) invert(1);
  }

  .feature-card:hover .f-content,
  .blog-card:hover .c-content {
    transform: none;
  }

  .f-tag,
  .c-tag {
    top: 20px;
    left: 20px;
  }
}

@media (max-width: 991px) {

  /* 1. Mobile Menu Toggle Button */
  .toggle-btn {
    padding: 0;
    justify-content: center;
    min-width: 50px;
    min-height: 50px;
  }

  .logo {
    margin-left: 0px;
  }

  .toggle-btn__label-closed,
  .toggle-btn__label-open,
  .nav-group.is-open .toggle-btn__label-closed,
  .nav-group.is-open .toggle-btn__label-open {
    display: none !important;
  }

  /* 2. Vertical Dropdown Menu */
  .nav-group {
    position: static;
  }

  .nav-pill {
    position: absolute;
    top: calc(100% + 15px);
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: flex-start;
    width: auto !important;
    gap: 20px;
    background: var(--white);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    max-width: none !important;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  .nav-group.is-open .nav-pill {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-width: none !important;
    padding: 20px !important;
    gap: 15px;
  }

  /* Override text color */
  .nav-pill a,
  .nav-pill .nav-pill__pages {
    color: var(--black);
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
    white-space: normal;
  }

  .nav-pill a.is-active,
  .nav-pill a:hover,
  .nav-pill .nav-pill__pages:hover,
  .nav-pill .nav-pill__pages.is-active {
    color: var(--primary) !important;
  }

  .nav-pill .nav-pill__pages.is-active svg path {
    stroke: var(--primary);
  }

  /* 3. Nested "Pages" Dropdown */
  .pages-dropdown {
    position: static;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 15px;
    padding: 0px 10px;
  }

  .pages-dropdown.is-open {
    display: flex;
  }

  .pages-dropdown a {
    color: var(--black);
    font-weight: 500;
    padding: 0px;
  }

  .single-header .pages-dropdown {
    background: none;
    box-shadow: none;
    border: none;
  }
}


/* Fix for mobile menu being clipped by banner overflow */
@media (max-width: 991px) {

  .hero,
  .about-banner {
    overflow: visible !important;
  }

  .hero__bg,
  .about-hero__bg,
  .about-hero-2__bg {
    border-radius: inherit;
    overflow: hidden;
  }

  .toggle-btn {
    border: none !important;
    outline: none !important;
  }
}

@media (max-width: 767px) {
  .stats-card:not(.image-card) {
    min-height: 0;
  }
}

/* ============================================================
   404 ERROR PAGE RESPONSIVE
   ============================================================ */
@media screen and (max-width: 991px) {
  .error-title {
    font-size: 200px;
  }

  .error-subtitle {
    font-size: 40px;
  }

  .error-page-wrap {
    padding: 120px 20px 100px;
  }
}

@media screen and (max-width: 767px) {
  .error-title {
    font-size: 150px;
  }

  .error-subtitle {
    font-size: 32px;
  }
}

@media screen and (max-width: 479px) {
  .error-title {
    font-size: 100px;
  }

  .error-subtitle {
    font-size: 24px;
  }
}

/* ============================================================
   SINGLE-HEADER MOBILE MENU FIX
   ============================================================ */
@media screen and (max-width: 991px) {
  .single-header .nav-pill {
    background: #111;
  }
  
  .single-header .nav-pill a,
  .single-header .nav-pill .nav-pill__pages,
  .single-header .pages-dropdown a {
    color: var(--white) !important;
  }

  .single-header .nav-pill a.is-active,
  .single-header .nav-pill a:hover,
  .single-header .nav-pill .nav-pill__pages:hover,
  .single-header .nav-pill .nav-pill__pages.is-active,
  .single-header .pages-dropdown a:hover {
    color: var(--primary) !important;
  }

  .single-header .nav-pill .nav-pill__pages svg path {
    stroke: var(--white) !important;
  }

  .single-header .nav-pill .nav-pill__pages.is-active svg path,
  .single-header .nav-pill .nav-pill__pages:hover svg path {
    stroke: var(--primary) !important;
  }
}

@media (max-width: 991px) {
    .hero__header {
        padding: 90px 40px 0;
    }

    .nav-group.is-open .nav-pill {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 479px) {
    .hero__header {
        padding: 80px 30px 0;
    }
}