@media only screen and (max-width: 1220px) {

    .developer-btn{
        display: flex;
        flex-direction: column;
    }
    .media{
      display: grid;
      grid-template-columns:1fr 1fr 1fr;
      gap: 30px;
    }
      nav .nav-btn{
          display: none;
      }
      .heading{
         font-size: 1.5rem;
      }
      .hero-header p{
        font-size: 14px;
        
      }
      .request-btn a{
          width: 45%;
          padding: 1rem 1.5rem;
      font-size: 15px;
      font-weight: 600;
      }
    .page1{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
     
      .developer-header h1{
          font-size: 2.5rem;
      }
      .page1-header p{
          width: 70%;
          font-size: 15px;
      }
      .footer-parts p{
          font-size: 12px;
      }
      .footer-parts a{
          font-size: 13px;
      }
  }
  


  @media only screen and (max-width: 950px){
    .Explore-btn{
        align-items: start;
        p
    }

    .developer-btn{
        display: flex;
        flex-direction: column;
    }
    .middle{
        display:flex;
        flex-direction: column;

    }
    .newEpisode{
        display: flex;
        
    }
    .weeks-container,img-1,img-2{

        flex-direction: row;
    }
    .weeks-container, .content{
        flex-direction: column-reverse;
    }
    

.page1{
    display: flex;
    flex-direction: column;

}
.page1 img{
    width: 112%;
   padding-left: 3rem;
   
    height: 39rem;
}
.page1 p{
    font-size: 1.2rem;
}
.page1 h1{
    font-size: 3rem;
}
.content{
    display: flex;
    flex-direction: column;
}



.Explore-btn{
   

    font-size: 1rem;
    width: 100%;
}

      .hero nav ul{
          display: none;
      }
      .hamburger{
        display: block;
    
     }
      .logo{
          width: 50%;
          padding-right: 1rem;
      }
      .heading {
          font-size: 1.1rem;
          line-height: 2.5rem;
        }
        .hero-header p{
          font-size: 13px;
          line-height: 1.2rem;
        }
        .request-btn a{
          width: 70%;
      }
       
      
        .developer-header h1 {
          font-size: 2.3rem;
          line-height: 2rem;
          margin-bottom: 1rem;
        }
        .developer-header p{
          width: 80%;
          font-size: 14px;
        }
        .developer{
          width: 46%;
        }
        .developer-btn a{
          padding: 1rem;
          font-size: 13px;
        }
        .footer-all-section{
           display: flex;
           flex-direction: column;
        }
  
        .tech-logo a{
          padding: .9rem 1rem;
        }
        .footer-parts{
            width: 80%;
        }
        .footer-certificate{
           width: 50%;
        }
      }
  @media only screen and (max-width: 550px){

    
    .middle{
      width: 100%;
        display:flex;
        flex-direction: column;

    }
    .rightpart img{
        width: 110%
    }
    

    
    .newEpisode{
        display: flex;
        
    }
    .weeks-container{
        
        flex-direction: column;
    }
    

.page1{
    display: flex;
    flex-direction: column;

}
.page1 h1{
    font-size: 2.5rem;
    
}
.page1 p{
    font-size: 1rem;
    line-height: 1.2rem;
    
}
.page1 img{
    height: 90%;
}
.Explore-btn a{
  width: 90%;
    font-size: 1rem;
   
}
.rightflex{
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .media{
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
    }
      .hero{
          padding-right: 20px;
      }
      .hero-header{
          width: 100%;
          margin: 30px 0px;
      }
    
      .developer {
          width: 400%;
          display: flex;
       
          flex-direction: column;
      
          margin-right: rem;

      
        }
      
        .developer-image{
          width: 25rem;
         align-items:start
         text-align: start
         
        }
       
        .testimonial-developer-profile {
          width: 100%;
          position: absolute;
         
          
        }
        
        .tech-logo a{
          padding: .9rem 1rem;
        }
        .footer-parts{
            width: 80%;
        }
        .footer-certificate{
           width: 50%;
        }
      }
  }