/* START MEDIA 991PX */
@media (max-width: 1199px) {
  .all-services .item-service:nth-child(1) .image {
    transform: translateY(85px);
  }
  .banner-vid .image-shape {
    width: 35%;
  }
}

@media screen and (max-width: 991px) {
  /* ===================================
  START SECTION SERVICES
  ======================================== */
  .all-services .item-service:nth-child(1) .image {
    transform: translateY(25px);
  }
  /* =======================================
  END SECTION SERVICES
  ==========================================*/
  /* ========================================
  START BANNER SECTION 
  ===============================================*/
  .banner-vid .all-content-banner .info {
    width: 67%;
  }
  .banner-vid .all-content-banner .info :is(.text-head-1, .text, .title) {
    width: 100%;
  }
  /* ========================================
  END BANNER SECTION 
  ===============================================*/
  /* ==========================================
  START SECTION COUNTER 
  ==========================================*/
  .counter-section .counter-one {
    width: 170px;
    height: 170px;
  }
  /* ==========================================
  END SECTION COUNTER 
  ==========================================*/
  /* ===================================
  START SECTION PRINCIPLES
  ====================================*/
  .cards-boxes .all-boxes::after {
    display: none;
  }
  /* ================================
  END SECTION PRINCIPLES
  ================================*/
}
/* START MEDIA 768PX */
@media screen and (max-width: 768px) {
  .modal .modal-content {
    width: 98%;
  }
  /* ================================
  START MENU BAR 
  ===================================*/
  .menu-bar :is(.all-menu-bar, .top-head-menu) {
    padding: 15px 20px;
  }
  .menu-bar .all-menu-bar {
    padding: 50px 20px;
  }
  .menu-bar .all-menu-bar .nav-item-menu .nav-link-menu {
    font-size: 22px;
  }
  /* ================================
  END MENU BAR 
  ===================================*/
  /* ==========================
  START SECTION COUNTER
  =============================*/
  .counter-section .all-counter {
    gap: 25px;
  }
  .counter-section .counter-one {
    width: 120px;
    height: 120px;
    margin: 0;
  }
  .counter-section .counter-one {
    font-size: 28px;
  }
  .counter-section .counter-one .text-counter {
    font-size: 14px !important;
  }

  /* ==================================
  END SECTION COUNTER
  ==================================*/
  /* =============================
  START CARD TEAM INFO 
  ================================*/
  .card-main-one .image-card-team img {
    height: 280px;
  }
  /* =============================
  END CARD TEAM INFO 
  ================================*/
  /* ============================
  START SECTION PROJECT STEPS
  ==================================*/
  .project-steps .filter-content .link-one-filter {
    font-size: 12px;
  }
  .project-steps .filter-content .link-one-filter:not(:last-child)::after {
    display: none;
  }
  .project-steps .filter-content .link-one-filter.active-link-filter::before {
    right: 0;
  }
  .project-steps .filter-content .link-one-filter {
    width: auto;
  }
  .project-steps .filter-content .list-filter {
    flex-wrap: wrap;
    gap: 30px !important;
  }
  /* ============================
  END SECTION PROJECT STEPS
  ==================================*/
  /* =================================
  START SECTION BANNER VIDEO 
  ======================================*/

  .banner-vid .all-content-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 40px 0;
  }
  .banner-vid .image-shape {
    display: none;
  }
  .banner-vid .all-content-banner .info {
    width: 100%;
    margin: 0 30px;
  }
  .banner-vid .all-content-banner .info .title {
    font-size: 16px;
  }
  .banner-vid .all-content-banner .info .text {
    font-size: 14px;
  }
  .banner-vid .all-content-banner .info :is(.text-head-1, .text, .title) {
    width: 100%;
  }
  /* =================================
  END SECTION BANNER VIDEO 
  ======================================*/

  /* ===================================
  START SECTION PRINCIPLES
  ====================================*/
  .principles-section .all-principles .principle-one .image-principle img {
    width: 100% !important;
  }
  /* ================================
  END SECTION PRINCIPLES
  ================================*/
}

/* START MEDIA 480PX */
@media screen and (max-width: 480px) {
  .navbar-head .logo img {
    width: 115px !important;
    height: auto !important;
  }

  .container {
    padding: 0 15px;
  }
  .btn-main {
    font-size: 14px;
  }
  /* ===========================
    START TITLE SECTION
    ============================*/
  .title-section .title-info {
    font-size: 20px;
  }
  .left-info-section {
    text-align: center !important;
  }
  /* =======================
    END TITLE SECTION
    ===========================*/
  /* ===========================
    START SECTION RATE
    ============================= */
  .rates-clients .all-rates .rate-one .main-rate {
    flex-direction: column-reverse;
  }
  .rates-clients .all-rates .rate-one .main-rate .text {
    font-size: 13px;
  }
  /* ===========================
    END SECTION RATE
    ============================= */

  /* ============================
    START SECTION TEAM SYN
    =================================*/
  .team-syn :is(.swiper-slide, .swiper-team-syn) {
    width: 100%;
  }

  /* ============================
    END SECTION TEAM SYN
    =================================*/

  /* =============================
    START SECTION TEAM INFO
    ==============================*/
  .team-info .content-team-info .title {
    font-size: 25px;
  }
  /* =============================
    END SECTION TEAM INFO
    ==============================*/
  /* ==========================
  START SECTION COUNTER
  =============================*/
  .counter-section .counter-one {
    font-size: 22px;
  }
  .counter-section .counter-one .text-counter {
    font-size: 14px !important;
  }

  /* ==================================
  END SECTION COUNTER
  ==================================*/

  .bg-border-color {
    padding: 25px 12px;
  }

  .font-16 {
    font-size: 13px;
  }
  .font-18 {
    font-size: 15px;
  }
  .font-20 {
    font-size: 17px;
  }
  .font-24 {
    font-size: 19px;
  }
}