/*
Table of Content:
@Custom Breakpoints
  (min-width: 2000px)
  (max-width: 1700px)
  (max-width: 1600px)
  (max-width: 1500px)
  (max-width: 1400px)
  (max-width: 1300px)
  (max-width: 1200px)
  (max-width: 1100px)
  (max-width: 1024px)
  (max-width: 1050px) -> start of mobile menu
  (max-width: 400px)
  (max-height: 800px) -> for sticky sections on small height screen
@Bootstrap Breakpoints
  xl: (max-width: 1199px)
  lg: (max-width: 991px)
  md: (max-width: 767px)
  sm: (max-width: 575px)
*/

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1440px;
    padding: 0 2vmax;
  }
}

@media (max-width: 1199px) {
  :root {
    --font-size-h1: 3.75rem;
    --font-size-h2: 3rem;
    --font-size-h3: 2.2rem;
    --font-size-h4: 1.875rem;
    --font-size-h5: 1.3rem;
    --font-size-h6: 1.05rem;
  }

  .hero-sec {
    padding: 40px 0;
  }

  section {
    padding: 60px 0;
  }

  .left-col {
    padding-right: 0;
  }

  .left-image-right-text-sec .right-col {
    padding-left: 0;
  }

  .container.container-narrow {
    padding: 0 20px;
  }

  .text-scroll h2 {
    font-size: 40px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl,
  .container.container-narrow {
    max-width: 95%;
  }
}

@media (max-width: 991px) {
  /* Don’t use hover to open on mobile */
  .navbar ul.menu li.menu-item-has-children:hover ul.sub-menu {
    display: none;
  }

  /* JS toggles this class */
  .navbar ul.menu li.menu-item-has-children.is-open > ul.sub-menu {
    display: flex;
  }

  .navbar ul.menu li.menu-item-has-children:hover > a:before {
    transform: rotate(-45deg);
    margin-top: -7px;
  }

  .navbar ul.menu li.menu-item-has-children.is-open > a:before {
    transform: rotate(135deg);
    margin-top: -3px;
  }

  .mobile-only {
    display: block;
  }

  .banner-img {
    /* animation: none; */
    /* transform: scale(1); */
    /* opacity: 1; */
    border-top-left-radius: 140px;
  }

  .navbar {
    position: fixed;
    left: -100%;
    height: 100%;
    top: 61px;
    z-index: 99;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: auto;
    justify-content: center;
    align-content: flex-start;
    width: 100%;
    max-width: 100%;
    background: var(--color-dark);
    padding: 10px 20px 20px;
    /* transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s; */
  }

  .header_top_bar .col-12.head {
    padding-left: 0px;
  }

  .menu-main-menu-navigation-container {
    width: 100%;
  }

  .hero-btns a {
    font-size: 0.75em;
  }

  .header_left {
    margin-left: auto;
    margin-right: 0px;
  }

  .top_right {
    display: flex;
    align-items: center;
  }

  .open .navbar {
    left: 0;
  }

  .menu_icon,
  .close_icon {
    display: block;
  }

  .navbar ul {
    flex-wrap: wrap;
  }

  .header_top_bar {
    padding: 20px 5px;
  }

  .navbar ul li {
    float: left;
    margin-left: 0;
    width: 100%;
    text-align: left;
    padding: 5px 0;
    line-height: 1;
  }

  .navbar ul li a {
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0;
    text-align: left;
    padding: 7px 0;
  }

  .navbar ul li a:before {
    left: 0;
    margin-left: 0;
  }

  .menu_icon {
    position: relative;
    top: 0;
    right: 0;
    display: flex;
    float: right;
    order: 2;
  }

  .top_right a.btn-design {
    display: none;
  }

  .navbar .only-mobile {
    width: 100%;
    padding-top: 15px;
  }

  .navbar .only-mobile p {
    margin-bottom: 10px;
  }

  .only-mobile {
    display: block;
  }

  .navbar ul.menu ul.sub-menu {
    position: relative;
    transform: none;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
    background: none;
    padding: 0px 10px 0px;
    border: none;
  }

  .navbar ul.menu ul.sub-menu li a {
    color: var(--color-white);
    text-transform: unset;
    letter-spacing: 0px;
    padding: 7px 0px;
    font-size: 1.3em;
    opacity: 0.65;
  }

  .navbar ul ul.sub-menu li {
    padding: 1px 15px;
  }

  section.accordion-sec.accordion {
    margin-top: 0;
  }

  .testimonials-items .left-col {
    padding-top: 20px;
  }

  section.cards {
    /* padding-top: 0; */
  }

  .right-image-left-text-sec .right-col {
    padding-top: 20px;
    padding-right: 0px;
  }

  section.projects-details-sec {
    padding-top: 20px;
  }

  .client-info {
    padding: 15px 0;
  }

  .footer-contact-info,
  #menu-footer-menu-navigation > li > a {
    font-size: 0.9rem;
  }

  .project-grid-item {
    max-width: 100%;
  }


}

@media (max-width: 767px) {
  :root {
    --font-size-h1: 2.75rem;
    --font-size-h2: 2.4rem;
    --font-size-h3: 2.2rem;
    --font-size-h4: 1.675rem;
    --font-size-h5: 1.5rem;
    --font-size-h6: 1rem;
  }

  .accordion-slider {
    flex-direction: column;
    height: auto;
  }

  .accordion-slider-items {
    height: 150px;
    transition: none !important;
  }

  .accordion-slider-items.active {
    height: 300px;
  }

  .arrow {
    top: unset;
    bottom: 15px;
    transform: none;
  }

  .arrow.left {
    left: calc(50% - 70px);
  }

  .arrow.right {
    right: calc(50% - 70px);
  }

  .accordion-body {
    width: 100%;
  }

  .banner-img {
    /* padding: 45%; */
    /* border-radius: 75px 0 0; */
    /* margin-top: 30px; */
  }

  .show-image-text-hover {
    padding-top: 40px;
  }

  .image-show-effect_hover img {
    position: relative;
    transform: none;
    left: 0;
    top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    max-width: 100%;
    width: 100%;
    height: 100px;
    object-fit: cover;
    margin: 15px 0 10px;
  }

  .show-image-text-hover-img {
    position: static;
    transform: none;
    width: 100%;
  }
  .show-image-text-hover-img .img-outer:after {
    width: 100%;
    height: auto;
  }

  .industries-we-serve h2.image-show-effect_hover {
    padding-left: 5%;
    padding-right: 5%;
    margin: 0px -5%;
  }

  .industries-we-serve h2.image-show-effect_hover img {
    width: 100%;
    height: 130px;
    object-fit: cover;
  }

  .show-image-text-hover img {
    filter: none;
  }

  /* .industries-we-serve > .container {
    width: 100%;
    max-width: 100%;
    padding: 0px;
  } */

  .show-image-text-hover-col h2:before {
    top: 30px;
    opacity: 1;
    transform: none;
    width: 40px;
    right: 5%;
  }

  .show-image-text-hover-col h2 {
    color: var(--color-white);
    padding: 16px 0;
  }

  .what-we-do .cta-card-col:after {
    opacity: 0;
  }

  .left-image-right-text-sec img,
  .right-image-left-text-sec img {
    margin-bottom: 20px;
  }

  .text-scroll h2 {
    font-size: var(--font-size-h2);
  }

  .accordion-wrapper {
    padding-top: 30px;
  }

  .site_footer .row {
    flex-direction: column-reverse;
  }

  .footer-contact-info {
    border-left: none;
    padding-left: 0;
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .footer-nav li {
    width: 100%;
  }

  .footer-nav ul {
    gap: 15px;
    margin-bottom: 25px;
  }

  .footer-contact-info,
  #menu-footer-menu-navigation > li > a {
    font-size: 1.1rem;
  }

  .accord-progress-bar {
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
  }
  .accordion-slider-btn-mobile {
    display: inline-block;
    margin-bottom: 0.75rem;
  }
  .accordion-wrapper {
    display: flex;
    flex-direction: column;
    padding-left: 0px;
    padding-right: 0px;
  }

  .accordion-slider-sec.projects-slider > .container {
    padding-left: 0px;
    padding-right: 0px;
  }
  .accordion-slider .cta-card-col {
    border: none;
    min-height: 400px;
  }

  .accordion-slider {
    order: 1;
  }

  .accord-progress-bar {
    order: 2;
    margin-top: 20px;
    /* Optional spacing */
  }

  .progress {
    margin-top: 20px;
    width: 100%;
  }

  .testimonials-slider.slick-custom-arrow button.slick-arrow.slick-next {
    left: calc(50% + 7px);
  }

  .testimonials-slider.slick-custom-arrow button.slick-arrow.slick-prev {
    right: calc(50% + 7px);
    left: auto;
  }

  .accord-progress-bar a.btn-design {
    display: none;
  }

  .project-details-left {
    margin-bottom: 30px;
  }

  .col-12.text-center.mb-5.accordion-project-slider-btn {
    display: block;
  }

  .inner-hero-title {
    min-height: 60px;
  }

  section.ag-character-sec,
  section.cards {
    padding-top: 60px !important;
  }

  section.cards {
    /* padding-top: 0px !important; */
  }

  /* Careers */
  .cta_grid_list_mobile {
    display: block;
  }

  .cta_grid_list_desktop {
    display: none;
  }

  .left-image-right-text-sec .left-col,
  .right-image-left-text-sec .left-col {
    padding-left: 0px;
    padding-right: 0px;
  }

  .filter-select {
    float: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
  }

  .filter-select select {
    font-size: 0.75em;
    margin-right: 5px;
    margin-left: 0px;
    width: 100%;
    max-width: 100%;
  }

  .left-sticky-rightscroll-sec h5 {
    font-size: 28px;
    max-width: 310px;
  }

  .cta-card-col:before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 1, 0.6) 35%,
      rgba(21, 21, 21, 1) 100%
    );
  }

  .cta-card-col {
    padding: 40% 16px 16px;
  }

  .accordion-slider-items.active .card-content h4 {
    white-space: normal;
  }

  .projects-slider .card-content p {
    max-height: unset !important;
  }

  .accordion-slider-items.active .card-content {
    bottom: 20px;
    left: 20px;
  }

  .what-we-do .card-content p {
    max-height: unset !important;
  }

  .image-show-effect_hover .show-image-text-hover-img {
    position: unset;
    transform: unset;
  }

  .team-col-popup img {
    margin-bottom: 2rem;
    margin-top: 3rem;
  }

  /* Services */
  .show-image-text-hover-img .img-outer:after {
    display: none;
  }

  .image-show-effect_hover:hover {
    border-color: var(--color-gray) !important;
  }

  /* Hero Industries */
  .hero-industries {
    margin-bottom: 0;
  }

  .hero-industries .inner-hero-img {
    display: none;
  }

  /* Project Page - Image Slider */
  .project-gallery-sec .slick-custom-arrow button.slick-arrow {
    left: 50%;
    /* transform: translateX(-50%); */
    right: auto;
  }

  .project-gallery-sec .slick-custom-arrow button.slick-prev {
    transform: translateX(calc(-60px + -50%));
  }

  .project-gallery-sec .slick-custom-arrow button.slick-next {
    transform: translateX(calc(60px + -50%));
  }

  /* Animate Arrow */
  .arrow-animate-btn a span:not(.arrow-animate-btn-icon) {
    flex-grow: 1;
  }

  .arrow-animate-btn a span.arrow-animate-btn-icon {
    left: calc(100% - 100px) !important;
    width: 75px;
  }

  .arrow-animate-btn a:hover {
    border-color: var(--color-gray);
  }

  /* Hero Home */
  #hero-video,
  #homepage-hero-animation .banner-image-container {
    height: 200px !important;
  }

  #homepage-hero-animation .banner-img.video-bg {
    max-height: 200px !important;
  }
}

@media (max-width: 412px) {
  .hero-btns a {
    display: inline-block;
    margin: 0 3px 8px 0;
    padding: 5px 10px;
    font-size: 0.6em;
    letter-spacing: 0.3px;
  }
}