/* adjusting font sizes as per the required for the screens for all texts */

/* Additional changes of mobile screen to fit all content smoothly */
@media only screen and (min-width:200px) and (max-width:575px){
      html,
      body {
            overflow-x: hidden;
      }


      .branch-hero {
            min-height: 280px;
            height: 42vh;
      }

      .branch-hero-content {
            padding: 0 12px;
      }

      .branch-hero-kicker {
            font-size: 10px;
            margin-bottom: 6px;
      }

      .branch-hero-title {
            font-size: clamp(26px, 10vw, 40px);
      }

      .desktop-hero-img {
            display: none;
      }

      .mobile-hero-img {
            display: block;
      }
      .branchCard {
            margin-bottom: 14px;
            border-radius: 20px;
      }

      .branchCard-media {
            padding: 8px 8px 0;
      }

      .branchCard img {
            height: 170px;
      }

      .branchBody {
            padding: 12px 12px 14px;
      }

      .branchBody h5 {
            font-size: 16px;
      }

      .branchBody-top {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
      }

      .branch-chip {
            margin-top: 4px;
      }

      .branch-feature-pill {
            width: 100%;
            padding: 8px 10px;
      }

      .branch-meta-grid {
            display: flex;
            gap: 6px;
            margin: 8px 0 8px;
      }

      .branch-social-row {
            justify-content: flex-start;
            margin: 6px 0 8px;
      }

      .btn-branch {
            padding: 10px 0;
            font-size: 14px;
      }

      .branch-details-card {
            padding: 10px;
      }

      .branch-details-header {
            align-items: flex-start;
            flex-direction: column;
      }

      .expand-map {
            height: 170px;
      }
}

/* Additional changes of tabs (sm> and <lg) screen to fit all content smoothly */
@media only screen and (min-width:576px) and (max-width:991px){
      .branch-hero {
            padding: 85px 0;
      }

      
}

@media (min-width: 1400px) {
      .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-width: 1400px;
      }
}