@media (max-width:1280px) {
    .hero-content {
        display: block;
    }
    .hero-header {
        margin: 20px 0 0 0;
        width: 100%;
    }
}
@media (max-width:1300px) {
    .all-payment-right-content {
        margin: 0 30px;
    }
}
@media (max-width:1100px) {
    .description-content{
        display: block;
    }
    .description-left {
        width: 100%;
        box-shadow: unset;
        margin-bottom: 30px;
    }
    .description-right {
        width: 100%;
    }
    .student-testimony-left {
        width: 100%;
    }
}
@media (max-width:1000px) {
    .benefits-content {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
    .about-content{
        display:grid;
        align-items: center;
        grid-template-areas: "about-right" "about-left";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .about-left {
        grid-area: about-left;
        width: 100%;
    }
    .about-right {
        grid-area: about-right;
        width: 100%;
    }
    .space-content{
        display:grid;
        align-items: center;
        grid-template-areas: "about-right" "about-left";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .space-right {
        padding: unset;
    }
    .space-left {
        grid-area: about-left;
        width: 100%;
    }
    .space-right {
        grid-area: about-right;
        width: 100%;
    }
    .plan-content {
        display: grid;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        grid-template-columns: repeat(2, 1fr);
    }
    .space-image {
        display: none;
    }
    .space-1 img {
        width: 100%;
    }
        .explore-content {
        display:grid;
        align-items:center;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
        justify-self: left;
    }
    .straight-line {
        display: none;
    }
}
  @media (max-width:800px) {
        .all-payment-left {
            display: none;
        }
        .all-payment-right {
            width: 100%;
        }
    }
@media (max-width:900px) {
    .pay-right {
        display: none;
    }
    .pay-left {
        width: 100%;
    }
    .course-content {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .nav-right {
        display: none;
    }
    #bars {
        cursor: pointer;
        display: block;
    }
    #sidebar {
        position: fixed;
        top: 0;
        left: -1000px;
        height: 100vh;
        background-color:var(--light);
        width: 40%;
        border: 1px solid #ddd;
        padding:10px 15px;
        color: var(--main);
        transition: left 1s ease;
        display: block;
        z-index: 10000;
    }
    .enroll-content{
        display:grid;
        align-items: center;
        grid-template-areas: "about-right" "about-left";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .enroll-left {
        grid-area: about-left;
        width: 100%;
    }
    .enroll-right {
        grid-area: about-right;
        width: 100%;
    }
    .testimonial-right {
        display: none;
    }
    .testimony-left {
        width: 100%;
        margin-top: 0px;
    }
    .footer-content{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 30px;
    }
    .all-copy-right{
        display: block; 
        justify-items: center;
    }
      .partner-wrapper {
        overflow: hidden;
        padding: 10px 0;
        position: relative;
      }
      
      .partner-track {
        display: flex;
        animation: scroll 10s linear infinite;
        width: max-content;
        gap: 30px;
      }
      .partner-logo{
        display: block;
    }
      .partner {
        display: flex;
        gap: 30px;
      }
      
      .partner img {
        height: 50px;
        object-fit: contain;
        flex-shrink: 0;
      }
      
      @keyframes scroll {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-50%);
        }
      }
}
@media (max-width:700px) {
    .explore-content {
        display:grid;
        align-items:center;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    }
    .explore-item img{
        width: 50px;
        border-radius:100%;
    }
    .explore-text p span{
        font-size: 15px;
        display: unset;
    }
    .all-explore{
        background:var(--main);
        padding:25px;
        width: 100%;
    }
}
@media (max-width:620px) {
    .hero-cta{
        display: block;
    }
    .hero-cta :nth-child(1) {
        margin-bottom: 15px;
    }
    .hero-btn {
        padding: 25px 50px;
        width: 100%;
    }
    .hero-btn-2 {
        padding: 25px 50px;
        width: 100%;
    }
}
@media (max-width:660px) {
    .review-content {
        border: 1px solid #e0e0e0;
        padding: 40px;
        border-radius: 10px;
        margin:0 4%;
        width: unset;
    }
    .hero-header h1 span{
        font-size: 60px;
    }
    .benefits-content {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    }
    .footer-content{
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: 30px;
    }
    .course-back-content h1 {
        font-size: 55px;
    }
    .describe-left-head h1 {
        font-size: 35px ;
    }
    .learn{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .feedback-content {
        display: block;
    }
    .feedback-left {
        margin-bottom: 20px;
        display: block;
        justify-self: center;
        text-align: center;
    }
    .outer-bar {
        width: 100%;
        height: 10px;
        background-color:#edebeb;
    }
    .inner-bar-1 {
        width: 90%;
        height: 10px;
        background-color:#00db22;
        animation: fillBar-1 2s forwards;
    }
    .inner-bar-2 {
        width: 75%;
        height: 10px;
        background-color:#ffb800;
        animation: fillBar-2 2s forwards;
    }
    .inner-bar-3 {
        width: 50%;
        height: 10px;
        background-color:#0dcaf0;
        animation: fillBar-3 2s forwards;
    }
    .inner-bar-4 {
        width: 10%;
        height: 10px;
        background-color:red;
        animation: fillBar-4 2s forwards;
    }
    .inner-bar-5 {
        width: 30%;
        height: 10px;
        background-color:#ffb800;
        animation: fillBar-5 2s forwards;
    }
    .rate {
        margin-bottom:unset;
    }
    .plan-content {
        display: grid;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width:560px) {
    .hero-header h1 span{
        font-size: 45px;
    }
    .pay-cancel-cta{
         flex-direction: column;
    }
    
    .about-background h1{
        font-size: 55px;
    }
    .about-background p span{
        font-size: 20px;
        display: unset;
    }
    #sidebar {
        width: 50%;
    }
    .enroll {
        width: 70%;
    }
    .first-course {
        background:var(--secondary);
        padding: 30px 20px 35px 20px;
        border-radius: 20px;
        width: 100%;
    }

}
@media (max-width:500px) {
    .review-content {
        padding: 20px;
    }
    .about-background h1{
        font-size: 45px;
    }
    .pay-cancel-cta {
        display: block; 
    }
    .pay-cancel-cta button:nth-child(1){
        margin-bottom: 17px;
    }
}
@media (max-width:470px) {
    .packages {
        display: block;
    }
    .opening {
        display: block;
        justify-items: right;
        margin-bottom: 15px;
    }
    .hero-btn {
        padding: 25px 20px;
        width: 100%;
    }
    .hero-btn-2 {
        padding: 25px 20px;
        width: 100%;
    }
    .all-copy-right{
        display: block; 
        text-align: center;
    }
    .copy-right{
        display: none;
    }
    .all-about {
        padding: 20px 0;
    }
    .card-1-btn {
        border: none;
        outline: none;
        background-color:var(--light);
        color: var(--main);
        box-shadow: 4px 4px #a2a2a7;
        padding: 13px 19px;
        border-radius: 7px;
    }
    .about-1-btn {
        border: none;
        outline: none;
        background:var(--btn);
        color: var(--light);
        padding: 14px 20px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
}
@media (max-width:420px) {
    .about-background h1{
        font-size: 45px;
    }
    .about-background{
        padding: 50px 0 ;
    }
    .nav-left img{
        width: 100px;
    }
    .footer-left img{
        width: 150px;
    }
    .hero-btn {
        padding: 15px 30px;
        font-size: 18px;
    }
    .hero-header h1 span{
        font-size: 40px;
        display: unset;
    }
    .about-right h1{
        font-size: 40px;
        display: unset;
    }
    .hero-header p span{
        color: var(--light);
        font-size: 15px;
        display: unset;
    }
    .course-title h1{
        font-size: 30px;
    }
    .course-title p{
        font-size: 15px;
    }
    .enroll {
        width: 100%;
    }
    #sidebar {
        width: 70%;
    }
    .course-back-content h1 {
        font-size: 35px;
    }
    .describe-left-head h1 {
        font-size: 23px ;
    }
    .feedback-left h1{
        font-size: 50px;
    }
    .all-input {
     flex-direction: column;
    }
}