/*===============***
* 
*DEVICE RESPONSIVENESS START*
*
**===============*/
/*=============== BREAKPOINTS ===============*/


/* -- Small Devices Start -- */
@media screen and (max-width:320px){
    .container{
      margin-inline: var(--mb-1-6);
    }
  
    .dropdown__group {
      padding-left: 1.5rem;
    }

    .card__data{
      padding: 1rem;
    }
  }
  /* -- Small Devices End -- */
  @media screen and (max-width:320px) {

    .container{
      margin-left:var(--mb-1-6);
      margin-right: var(--mb-1-6);
  }

  }

  @media (width <= 575px) {
    .button__icon{
      display: inline-block;
      padding: 6px;
      background-color: var(--primary-color);
      color: var(--container-color);
      border-radius: 50px;
    }
  
    .button__icon:hover{
      background-color: var(--primary-color-lighten);
      color: var(--primary-color);
    }
  }
  
  /* -- Medium Devices Start -- */
  @media screen and (min-width:576px){
    .stats__container, .teaching__containe{
      grid-template-columns: repeat(3,1fr);
    }

    .teaching__container{
      display: grid;
      grid-template-columns: 26rem 1fr 1fr;
      gap: 2rem;
    }



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

  

  }
  
  @media screen and (min-width:767px){
    body{
      margin:0;
    }
    .container {
      margin-inline: auto;
      padding-inline: 1.5rem;
    }



    .nav{
      height:calc(var(--header-height) +3.2rem);
      column-gap: 4.8rem;
    }
  
    .nav__toggle,
    .nav__close{
      display: none;
    }
  
    .nav__list{
      flex-direction: row;
      column-gap: 3.2rem;
      align-items: center;
    }
  
    .nav__menu{
      margin-inline-start: auto;
    }
  
    .about__container, .admimissionSection__container, .fp_container, .campusInfo__container, .fp_container, .degreeOptions__container, .hero_container{
      grid-template-columns: repeat(2,1fr);
      gap: 3rem;
    }

    .fp_container{
      gap: 0;
    }

    .about__data{
      padding-inline-end: 40rem;
    }

    .degreeOptions__data{
      justify-content: center;
    }

    .alumni__container{
      grid-template-columns: 2fr 3fr;
    }

    

    .scholarship__container{
      display: grid;
      grid-template-columns: 1fr 48rem 1fr;
      align-items: start;
      justify-content: center;
      gap: 3rem;
    }

    .student__container{
      grid-template-columns: 1fr 400px 1fr;
    }

   


  }
  /* -- Medium Devices End -- */
  
  /* -- Large Devices Start -- */
  
  @media screen and (min-width:992px){

    
    .section{
      padding: 12.8rem 0 1.6rem;
    }
  
    .section__title{
      font-size: var(--h1-font-size);
    }
  
    .about__img__box{
      width: 100%;
      background-size: cover;
    }

    .campusInfo__img{
      width: 100%;
    }

    .campusInfo__container, .admimissionSection__container,.sports__container{
      grid-template-columns: repeat(2,1fr);
      gap: 6rem;
    }



    .facility{
      padding-top: 6rem;
    }

    .scholarship{
      padding-block: 8rem;
    }

    .alumni__info,
    .alumni__data{
      padding-inline: 4.2rem;
      padding-block: 5rem;
    }

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

    .news__container{
      grid-template-columns: 2fr 3fr;
    }

    .footer__container{
      grid-template-columns: 1fr 2fr;
    }

    .footer__list{
      grid-template-columns: repeat(4,1fr);
    }

  }
  
  @media screen and (min-width: 1024px) {
    :root{
      --big-font-size:5.6rem;
      --h1-font-size:3.6rem;
      --h2-font-size:2.4rem;
      --h3-font-size:2rem;
      --normal-font-size:1.6rem;
      --small-font-size:1.4rem;
      --smaller-font-size:1.2rem;
  }

  .hero__box{
    padding-block-start: 18rem;
  }

  .degreeOptions__data-right{
    border-left: 1px solid #999;
  }


  }
  
  
  @media screen and (min-width: 1200px) {
  
    /* -- Nav Start -- */
    .nav {
      height: calc(var(--header-height) + 2rem);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--smaller-font-size);
    }
    .nav__toggle {
      display: none;
    }
    .nav__list {
      display: flex;
      column-gap: 1.2rem;
      height: 100%;
    }
    .nav li {
      display: flex;
    }
    .nav__link {
      padding: 0;
    }
    .nav__link:hover {
      background-color: initial;
    }
    /* Dropdown */
    .dropdown__button {
      column-gap: 0.25rem;
      pointer-events: none;
    }
    .dropdown__container {
      height: max-content;
      position: absolute;
      left: 0;
      right: 0;
      top: 6.5rem;
      background-color: var(--body-color);
      box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
      pointer-events: none;
      opacity: 0;
      transition: top 0.4s, opacity 0.3s;
    }
    .dropdown__content {
      grid-template-columns: repeat(4, max-content);
      column-gap: 6rem;
      max-width: 1120px;
      margin-inline: auto;
    }
    .dropdown__group {
      padding: 4rem 0;
      align-content: baseline;
      row-gap: 1.25rem;
    }
    .dropdown__group:first-child, .dropdown__group:last-child {
      margin: 0;
    }
    .dropdown__list {
      row-gap: 0.75rem;
    }
    .dropdown__icon {
      width: 60px;
      height: 60px;
      background-color: var(--primary-color-lighten);
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin-bottom: 1rem;
    }
    .dropdown__icon i {
      font-size: 2rem;
    }
    .dropdown__title {
      font-size: var(--normal-font-size);
    }
    .dropdown__link {
      font-size: var(--small-font-size);
    }
    .dropdown__link:hover {
      color: var(--text-color-light);
    }
    .dropdown__item {
      cursor: pointer;
    }
    .dropdown__item:hover .dropdown__arrow {
      transform: rotate(180deg);
    }
    .dropdown__item:hover > .dropdown__container {
      top: 5.5rem;
      opacity: 1;
      pointer-events: initial;
      cursor: initial;
    }
    /* Dropdown End*/
    /* -- Nav End -- */  
  
  
  
    .about__container,.history__container, .teaching__container{
      column-gap: 4.2rem;
      align-items: center;
    }

    .admimissionSection__container{
      grid-template-columns: repeat(2,1fr);
    }
    
    .about__img{
      width: 550px;
    }
    
    .scrollup{
      left: 4.8rem;
    }
  }