.page__header{
   background: url(../images/images\ student\ in\ class.jpeg) center center/cover;
  
}
.about__container{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8rem;
   padding: 3rem 0;
   margin-bottom: 5rem;


}
.about__image{
   height: 30rem;
   border-radius: 7rem ;
   overflow: hidden;
   box-shadow: 0 1.5rem 0 var(--color-gray-100);
}
.about__image:hover{
   box-shadow: none;
}
.about__story h2 span{
  color: var(--color-primary);
}
.about__story p{
   margin-top: 1rem;
}
   /*===========OUR EXPERTISE============*/

.our-expertise{
   background: var(--color-gray-100);
   padding: 6rem 0;
}

.expertise__container{
   max-width: 1200px;
   margin: 0 auto;
}

.expertise__container h2{
   text-align: center;
   font-size: 2.5rem;
   color: var(--color-gray-900);
   margin-bottom: 1.5rem;
   font-weight: 700;
}

.expertise__container h2 span{
   color: var(--color-primary);
}

.expertise__intro{
   text-align: center;
   font-size: 1.15rem;
   color: var(--color-gray-600);
   max-width: 750px;
   margin: 0 auto 4rem;
   line-height: 1.8;
}

.expertise__grid{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2.5rem;
   margin-top: 4rem;
}

.expertise__item{
   background: white;
   border-radius: 1.5rem;
   padding: 3rem 2rem;
   text-align: center;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   position: relative;
   overflow: hidden;
}

.expertise__item::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--color-primary), var(--color-primary-varient));
   transform: scaleX(0);
}

.expertise__item:hover::before{
   transform: scaleX(1);
}

.expertise__item:hover{
   transform: translateY(-10px);
   box-shadow: 0 16px 35px rgba(0, 0, 0, 0.15);
}

.expertise__item i{
   font-size: 3rem;
   color: var(--color-primary);
   margin-bottom: 1.5rem;
   display: inline-block;
}

.expertise__item:hover i{
   transform: scale(1.1);
}

.expertise__item h4{
   color: var(--color-gray-900);
   font-size: 1.4rem;
   font-weight: 700;
   margin-bottom: 1rem;
}

.expertise__item p{
   color: var(--color-gray-600);
   font-size: 1rem;
   line-height: 1.7;
}
/*=======media quries=======*/

/* Tablet */
@media screen and (min-width: 601px) and (max-width: 1024px) {
   .about__container{
      gap: 5rem;
   }
   .our-expertise{
      padding: 5rem 0;
   }
   .expertise__container h2{
      font-size: 2.2rem;
   }
   .expertise__grid{
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
   }
}

/* Mobile */
@media screen and (max-width:600px){
   .our-expertise{
      padding: 4rem 0;
   }
   .expertise__container{
      padding: 0 1rem;
   }
   .expertise__container h2{
      font-size: 1.8rem;
      margin-bottom: 0.8rem;
   }
   .expertise__intro{
      font-size: 1rem;
      margin-bottom: 3rem;
      padding: 0 0.5rem;
   }
   .about__container{
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 2rem 0;
   }
   .about__image{
      border-radius: var(--radius-6);
      box-shadow: none;
      height: 22rem;
   }
   .about__story h2{
      font-size: 1.5rem;
   }
   .about__story p{
      font-size: 0.9rem;
      line-height: 1.7;
   }
   .expertise__grid{
      gap: 2rem;
      grid-template-columns: 1fr;
   }
   .expertise__item{
      padding: 2.5rem 1.5rem;
   }
   .expertise__item i{
      font-size: 2.5rem;
   }
   .expertise__item h4{
      font-size: 1.2rem;
   }
   .expertise__item p{
      font-size: 0.95rem;
   }
}

/* Extra Small Mobile */
@media screen and (max-width: 400px){
   .expertise__container h2{
      font-size: 1.6rem;
   }
   .expertise__item{
      padding: 2rem 1.5rem;
   }
   .expertise__item i{
      font-size: 2.2rem;
   }
   .expertise__item h4{
      font-size: 1.1rem;
   }
}