/*-------------------------------------------------*/
/* 1. MOBILE VIEW RESPONSIVE
/*-------------------------------------------------*/

/*-------------------------------------------------------*/
/* When the browser is 1200px to all small screens,below css will be applied.
/*-------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    .abt-student-img {
      width: 100%;
      left: 0;
      margin-top: 80px;
    }
  
    .abt-student-img .student-img,
    .abt-student-img .student-img1,
    .abt-student-img .student-img2 {
      position: relative;
      width: 50%;
      padding: 10px;
    }
  
    .abt-student-img .student-img {
      left: 0;
      display: block;
    }
  
    .abt-student-img .student-img1 {
      float: right;
      position: absolute;
    }
  
    .abt-student-img .student-img2 {
      top: -20px;
      left: 0;
    }
  
    .abt-student-img .back-shape,
    .abt-student-img:after {
      top: 0;
    }
  
    .about-us {
      padding: 50px 0 0 0;
      overflow: hidden;
    }
    .about-content {
      width: 100%;
      padding: 0;
    }
  
    .team-member:before {
      opacity: 0;
    }
  
    .clint-img {
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  
    .services-rhs li {
      padding: 15px;
    }
  
    .ser-inner h2 {
      display: block;
    }
  }
  
  /*-------------------------------------------------------*/
  /* When the browser is 992 to all small screens,below css will be applied.
  /*-------------------------------------------------------*/
  
  @media screen and (max-width: 992px) {
    .ser-inner p {
      padding-bottom: 0;
    }
    .tab-showcase {
      display: block;
    }
    .footer {
      padding: 100px 0 70px 0;
    }
    .faq .comm-heading {
      margin: 0 0 30px 0;
    }
    .fun-fact {
      margin: 0;
    }
    .services-box .comm-heading {
      text-align: center !important;
    }
    .ban-img {
      display: inline-block;
      margin-top: 50px;
    }
  
    .group-img {
      justify-content: center;
      width: 100%;
    }
    .about-us {
      padding: 60px 15px 0 15px;
    }
    .about-content {
      width: 100%;
      padding: 0;
    }
  
    .contact-us {
      padding: 80px 0 0 0;
    }
    .case-img {
      margin: 15px 0;
    }
    .team-name {
      padding-top: 30px;
    }
  
    .team-img img {
      height: auto;
    }
  
    .con-det {
      padding: 40px 0 0 0;
    }
  
    .post-left {
      margin-top: 35px;
    }
  
    .post-right li {
      margin-bottom: 30px;
    }
  
    .our-team {
      padding-bottom: 30px;
      padding-top: 80px;
    }
  
    .followers {
      margin-bottom: 30px;
    }
  
    .project-one-hover {
      width: 100%;
    }
  
 
  
    .project-one-hover a {
      font-size: 14px;
    }
  
    .case-img img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  
    .ser-inner {
      padding: 0;
    }
  
    .services {
      padding: 0 0 80px 0;
    }
  
    .services-box-inner {
      margin-bottom: 30px;
    }
  
    .services-box {
      margin-top: 60px;
      padding-bottom: 60px;
    }
  
    .auther-in-im {
      width: auto;
    }
  
    .showcase .act2 {
      transform: none;
      padding: 0;
    }
  
    .work-showcase {
      padding: 80px 0 0px 0;
      margin-bottom: -15px;
    }
  
    /*-------------------------*/
    .menu a:hover {
      color: #fff;
    }
  
    .top-cl-fun {
      padding: 0 25px;
    }
  
    .side-bar.act {
      width: 100%;
    }
  
    .nav .row {
      align-items: center;
    }
  
    .nav {
      background: #fff;
      padding: 35px 0;
    }
  
    .side-bar-right i {
      width: 35px;
      height: 35px;
      font-size: 15px;
    }
  
    .logo img {
      max-width: 128px;
    }
  
    .nav-inner .menu {
      position: fixed;
      left: -500px;
      top: 0;
      overflow-y: auto;
      height: 100vh;
      width: 300px;
      background: #16243d;
      padding: 31px 20px 20px 20px;
      z-index: 99;
      transition: all 0.5s ease;
    }
  
    .menu ul li:first-child {
      display: block;
    }
  
    .menu li {
      width: 100%;
      padding-bottom: 13px;
    }
  
    .menu a {
      color: #fff !important;
      width: 100%;
      border-bottom: 1px solid #908484;
      padding-bottom: 17px;
    }
  
    .menu img {
      width: 120px;
      filter: invert(1);
      margin-bottom: 24px;
    }
  
    .menu ul li:last-child {
      border: 0;
    }
  
    .nav-inner .side-bar-right {
      position: absolute;
      right: 15px;
    }
  
    .logo {
      position: absolute;
      transform: scale(0.8);
    }
  
    .menu-bar {
      display: block;
      position: absolute;
      left: 15px;
    }
  
    .menu ul {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .menu span {
      position: absolute;
      right: 20px;
      top: 0;
      background: red;
      color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      cursor: pointer;
    }
  
    .menu.menuact {
      left: 0;
    }
    /*-------------------------*/
  
    .work-showcase::before,
    .work-showcase::after {
      display: none;
    }
  
    .blog-det-inn h3 {
      padding: 15px 0 18px 0;
    }
  
    .blg-rhs {
      margin-top: 60px;
    }
  
    .blog-deatiles {
      padding: 90px 0;
    }
  
    .img-aera {
      margin-top: 50px;
    }
  
    .cpy-right-top .cpy {
      flex-direction: column;
      display: flex;
      align-items: center;
      margin: 10px 0;
    }
  
    .foo-deati {
      margin-top: 10px;
    }
  
    .team-member {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  
    .ban-inn {
      display: block;
      text-align: center;
    }
  
    .banner .ban-lhs .comm-btn {
      justify-content: center;
      margin-top: 30px;
    }
  
    .ban-lhs h1 {
      padding: 0;
    }
  
    .ban-lhs p {
      border-left: 0;
      padding-right: 0;
      padding-bottom: 25px;
    }
  
    .banner {
      padding-bottom: 30px;
      padding-top: 90px;
    }
  
    .post-right {
      margin-top: 25px;
    }
  
    .small-img img {
      width: 100%;
    }
  }
  
  /*-------------------------------------------------------*/
  /* When the browser is 768px to all small screens,below css will be applied.
  /*-------------------------------------------------------*/
  
  @media screen and (max-width: 767px) {
    .collect-inner {
      padding: 40px;
    }
    .collect-wallet {
      width: 100%;
      height: 100vh;
      z-index: 999;
    }
    .collect-inner h3 {
      font-size: 21px;
    }
    .collect-inner i {
      right: 20px;
      top: 20px;
    }
    .abt-benefits h6 {
      line-height: 29px;
    }
    .abt-benefits li {
      width: 100%;
    }
    .fun-fact-inner li::after {
      display: none;
    }
    .services-rhs li {
      padding: 25px;
      margin-left: 16px;
    }
    .fun-fact-inner li {
      width: 100%;
      padding: 15px 0 15px 0;
    }
    .services-box-inner {
      width: 100%;
    }
    .tab-showcase {
      display: block;
    }
    .commen-banner {
      padding: 164px 0 92px 22px;
    }
  
    .ban-lhs h1::before {
      display: none;
    }
  
    .footer::before,
    .footer::after {
      display: none;
    }
  
    .tag-share {
      justify-content: flex-start;
      margin-top: 20px;
    }
  
    .tags-share {
      flex-direction: column;
    }
  
    .foo-deati a {
      padding-left: 0;
    }
  
    .foo-deati {
      margin-top: 30px;
    }
  
    .post-content {
      padding: 25px;
    }
  
    .services-rhs li {
      width: 100%;
      padding-left: 0;
    }
  }
  
  /*-------------------------------------------------------*/
  /* When the browser is 576px to all small screens,below css will be applied.
  /*-------------------------------------------------------*/
  @media screen and (max-width: 576px) {
    .abt-student-img {
      margin-top: 53px;
    }
  
    .abt-student-img .student-img1 {
      position: relative;
      top: -25px;
      height: 275px;
    }
  
    .abt-student-img .student-img2 {
      top: -25px;
    }
  
    .post-left img {
      height: 400px;
    }
  
    .services-rhs {
      margin-top: 30px;
    }
  
    .contact-following {
      display: none;
    }
  
    .ban-lhs h1::before {
      display: none;
    }
  
    .painting,
    .painting1,
    .tab::before,
    .tab::after {
      display: none;
    }
  
    .comm-heading {
      width: 100%;
    }
  
    .our-team {
      padding-top: 80px;
    }
  
    .blog-post {
      padding-top: 0;
      padding-bottom: 50px;
    }
  
    .footer {
      padding-top: 100px;
      padding-bottom: 80px;
    }
  
    .inner-text h3 {
      font-size: 40px;
      line-height: 55px;
    }
  
    .inner-text span:after,
    .abt-img:after {
      display: none;
    }
  
    .post-right li {
      flex-direction: column;
    }
  
    .post-content-1 {
      padding: 20px 0 0 0;
    }
    .abt-student-img .student-img,
    .abt-student-img .student-img1,
    .abt-student-img .student-img2 {
      width: 100%;
    }
  }
  
  @media screen and (max-width: 480px) {
    .services-box::before,
    .services-box::after {
      display: none;
    }
    .fun-fact-inner li {
      width: 100%;
    }
  
    .ban-lhs h1 {
      font-size: 40px;
      line-height: 52px;
    }
  
    .showcase li {
      float: left;
      margin: 0 16px 16px 0;
    }
  
    .banner .ban-lhs .comm-btn {
      flex-direction: column;
    }
  
    .comm-btn .bg-none {
      margin-top: 25px;
    }
  
    .text-des:after {
      display: none;
    }
  
    .abt-text i {
      font-size: 23px;
      text-align: left;
    }
  }