/* 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){
      header {
            position: fixed !important;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1200;
            width: 100%;
      }

      .fullNav {
            position: static;
            top: 0;
            z-index: auto;
      }

      html,
      body {
            overflow-x: hidden;
      }

      body {
            padding-top: 65px;
      }

      .fullNav .container-fluid {
            padding-left: .75rem !important;
            padding-right: .75rem !important;
      }

      .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
            justify-content: space-between;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 8px;
      }
      .navbar-brand.navLogo {
            flex: 1 1.5 auto;
            min-width: 0;
            max-width: calc(100% - 60px);
      }
      .navbar-brand.navLogo .row {
            --bs-gutter-x: .4rem;
            margin: 0;
            width: 100%;
            flex-wrap: nowrap;
            align-items: center;
      }
      .navbar-brand.navLogo .col-2 {
            width: auto;
            flex: 0 0 auto;
            padding-right: 0;
      }
      .navbar-brand.navLogo .col-10 {
            width: auto;
            flex: 1 1 auto;
            min-width: 0;
            padding-left: 6px;
      }
      .navLogo h2{
            font-size: clamp(14px, 4.2vw, 20px);
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
      }
      .navLogo p{
            /* display: none; */
            font-size: 8px;
            padding-left: 4px;
      }
      .navLogo {
            margin: 0;
      }     
      .navLogo img{
            width: 42px;
            margin-left: 0px;
      }
      .navbar-toggler {
            position: static !important;
            right: auto;
            margin-left: auto;
            flex: 0 0 auto;
            padding: 4px 6px !important;
      }
      /* Hide desktop footer columns */
      .footer-top{
            display:none;
      }
      /* MOBILE */
      .main-footer{
            padding:20px 15px;
            padding-bottom: 60px;
      }
      .footer-mobile{
            padding:0;
      }

      .footer-accordion-item{
            border-bottom:1px solid #ffffff22;
            margin-bottom:8px;
      }

      .footer-accordion-btn{
            width:100%;
            background:none;
            border:none;
            color:#fff;
            text-align:left;
            padding:12px 0;
            font-size:15px;
            font-weight:500;
            display:flex;
            justify-content:space-between;
            align-items:center;
      }

      .footer-accordion-btn i{
            transition:.3s ease;
      }

      .footer-accordion-content{
            padding-bottom:10px;
            display:flex;
            flex-direction:column;
      }

      .footer-accordion-content a{
            color:#ffffffcc;
            text-decoration:none;
            font-size:13px;
            padding:5px 0 5px 10px;
      }

      .footer-accordion-content a:hover{
            color:#fff;
      }

      /* Compact Contact */
      .footer-contact-mobile p{
            font-size:13px;
            margin:4px 0;
      }

      .footer-social-mobile a{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            width:32px;
            height:32px;
            background:#ffffff22;
            border-radius:50%;
            margin:8px 6px 0;
            color:#fff;
            font-size:13px;
      }

      .footer-social-mobile a:hover{
            background:#fff;
            color:#0f6b3e;
      }
      #smartScrollWrapper{
            right:14px;
            bottom:80px; /* thumb reach */
      }
}

@media only screen and (max-width:360px){
      .navLogo h2{
            font-size: 18px;
      }
      .navLogo img{
            width: 36px;
      }
}

/* Additional changes of tabs (sm> and <lg) screen to fit all content smoothly */
@media only screen and (min-width:575px) and (max-width:1199px){
      .navLogo h2{
            font-size: 28px;
      }
      .navLogo p{
            font-size: 14px;
      }
}

@media (max-width: 991.98px) {
  /* Top header brand text (next to toggler) */
  .navbar-brand.navLogo h2 {
    font-size: 0.95rem;
    line-height: 1.2;
    margin-bottom: 0;
  }

  .navbar-brand.navLogo p {
    font-size: 0.62rem;
    line-height: 1.2;
    margin-bottom: 0;
  }

  /* Mobile offcanvas menu header school name */
  .offcanvas .navLogo h2 {
    font-size: 15px;
    line-height: 1.2;
    margin-top: 17px;
    margin-bottom: 0;
    white-space: normal;
  }
}

@media (min-width: 1400px) {

}
