*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}


body{
   font-family: 'Poppins', sans-serif;
}

a{
    text-decoration: none;
    color: black;
}

li{
    list-style: none;

}
button{
    border: none;
    background: none;
    outline: none;
    transition: 0.5s;
    cursor: pointer;
}

.toggle-btn{
    width:35px;
    position: absolute;
    right: 80px;
    top:40px;
    display: none;
}

.toggle-btn span{
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: black;
    float:left;
    margin-bottom: 8px;

}

.navbar .button{
    padding: 8px 14px;
    height: 30px;
    color: whitesmoke;
    background-color:black;
    border-radius: 35px;
}

.navbar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top:30px ;
    margin-bottom: 20px;
}

.navbar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top:30px ;
    margin-bottom: 20px;
}
.navbar div ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.navbar input{
    background-color: lightgray;
    width: 350px;
    height: 40px;
    border-radius: 30px;
    border: 0px;
    padding-left: 10px;
    
}
#cont{
    display: flex;
    gap: 15px;
}
.navbar button{
    padding: 8px 14px;
    height: 30px;
    color: whitesmoke;
    background-color:black;
    border-radius: 35px;
}


 .top-section{
    padding-top: 20px;
    width: 55%;
    margin: auto;
    display: flex;
    flex-wrap:wrap ;
    margin-bottom: 50px;
    text-align: center;
}

.top-section h1{
 font-size: 70px;
 text-align: center;
}

.top-section p{
    font-size: 18px;
    text-align: center;
    font-weight: lighter;
   }

.top-section img{
    width: 95%;
    padding-top: 30px;
    padding-left: 100px;
    text-align: center;
}   

#offers{    
    width: 85%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:  10px;
}
#offers img{
    width: 500px;
    border-radius: 30px;
}
#offers div{
  display: grid;
  grid-template-columns: repeat(2,1fr);

}


 #offers .right-side{
    width: 100%;
 }

#offers div div{
    width: 100%;
    display:grid; 
   grid-template-columns: repeat(1,1fr);   
   padding-right: 10px;
}
#offers button{
    background-color: black;
    color: whitesmoke;
    width: 130px;
    height: 35px;
    border-radius: 30px;
    font-size: 14px;
}

.mid-page{
    width: 90%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-bottom: 50px;
    gap: 30px;
    padding-left: 40px;
    text-align: left;
} 
/* .mid-page div{
    width: 40%;

} */

.mid-page h1{
    font-size: 50px;
}

.mid-page> .left > img{
    width: 600px;
  }

  .mid-page> .right-side{
    width: 100%;
    padding-left: 150px;
     padding-top: 130px;
  }

.mid-page img{
    width: 100%;
    border-radius: 30px;
}
.mid-page > .left{
  padding-top: 130px;
  width: 80%;
}

.mid-page p{
    font-size: 17px;
}



.membership{
    width: 80%;
    margin: auto;
    height:430px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    
}
.membership div{
    color: white;
    background-color: black;
    border-radius: 30px;
    padding: 30px;
    
}

.membership div button{
  background-color: white;
  width: 250px;
  height: 50px;
  font-weight: bold;
  border-radius: 30px;
  font-size: 17px;
  margin-left: 26px;

}

.bottom{
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap: 25px;
     margin-top: 40px;
    
    }
    
    .bottom img{
      width: 26px;
    }

    .bottom > .left-phase{
        width: 90%;
        font-size: 15px;
        color: rgb(150, 146, 146);
    }
   .bottom > .left-phase > div{
    margin-top: 33px;
    margin-left: 50px;
   }

   .bottom > .right-phase{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 140px;
    padding-left:280px;
   }


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

   header{
    display: flex;
    justify-content: space-between;
    
   }

   header #logo{
    margin-left: 40px;

   }
    .toggle-btn{
        display: block;

    }

    #nav-links{
       display: none;
       width: 100%;
       border-top: 1px solid black;
       padding-top: 20px;
       margin-top: 30px;

    }
     #nav-links.show{
        display: block;
     }

     #nav-links ul li{
        padding: 15px 0px;
        width: 100%;
     }

     #login.show{
        display: block;
     }
     #login{
        display: none;
        width: 100%;
        border-top: 1px solid black;
        padding-top: 20px;
        padding-left: 20px;
        margin-top: 30px;
     }

     #login li{
        padding: 15px 0px;
        width: 100%;
     }

     .top-section h1{
        font-size: 27px;
        text-align: center;
       }
      

       .top-section img{
        width: 230px;
        margin: auto;
        padding-top: 30px;
        padding-left: 30px;
        text-align: center;
    }   
    
    #offers{    
        width: 75%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap:  10px;
    }
    #offers img{
        width: 280px;
        height: 350px;
        border-radius: 30px;
        margin-left: 1px;
    }
    #offers div{
      display: grid;
      grid-template-columns: repeat(1,1fr);
      gap: 10px;
    
    }
    
     #offers .right-side{
        width: 100%;
     }
    
    #offers div div{
        width: 100%;
        display:grid; 
       grid-template-columns: repeat(1,1fr);   
       padding-right: 10px;
    }
    #offers button{
        background-color: black;
        color: whitesmoke;
        width: 130px;
        height: 35px;
        border-radius: 30px;
        font-size: 14px;
    }
    
    .mid-page{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        margin-bottom: 20px;
        gap: 10px;
        padding-left: 40px;
        text-align: left;
    } 
    /* .mid-page div{
        width: 40%;
    
    } */
    
    .mid-page h1{
        font-size: 35px;
    }

    .mid-page> .left > img{
      width: 300px;
      margin-left: 1px;
    }

    .mid-page> .right> img{
        width: 300px;
        margin-left: 1px;
      }

      
    
    .mid-page img{
        width: 90%;
        border-radius: 30px;
    }
    .mid-page > .left{
      padding-top: 20px;
      width: 80%;
      margin-bottom: 30px;
    }
    
    .mid-page p{
        font-size: 16px;
        width: 120%;
    }

    .mid-page> .right-side{
        width: 100%;
        padding-left: 10px;
         padding-top: 20px;
      }

      .mid-page> .right-side > p{
        width: 85%;
      }
    
    
    
    
    .membership{
        width: 90%;
        margin: auto;
        height:280px;
        display:grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
        
    }
    .membership div{
        width: 80%;
        height:380px;
        color: white;
        background-color: black;
        border-radius: 30px;
        padding: 20px;
        margin-left: 20px;
        
    }
    
    .membership div button{
      background-color: white;
      width: 160px;
      height: 50px;
      font-weight: bold;
      border-radius: 30px;
      font-size: 17px;
      margin-left: 26px;
    
    }
    
    .bottom{
         display: grid;
         grid-template-columns: repeat(1,1fr);
         gap: 25px;
         margin-top: 1000px;
        
        }
        
        .bottom img{
          width: 26px;
        }
    
        .bottom > .left-phase{
            width: 90%;
            font-size: 15px;
            color: rgb(150, 146, 146);
        }
       .bottom > .left-phase > div{
        margin-top: 33px;
        margin-left: 50px;
       }

       .bottom > .left-phase > div > p{
        width: 75%;
       font-size: 12px;
    }
    
       .bottom > .right-phase{
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 140px;
        padding-left:60px;
       }


  }


  @media screen and (min-width: 481px) and (max-width: 980px) {

    header{
     display: flex;
     justify-content: space-between;
     
    }
 
    header #logo{
     margin-left: 65px;
 
    }
     .toggle-btn{
         display: block;
 
     }
 
     #nav-links{
        display: none;
        width: 100%;
        border-top: 1px solid black;
        padding-top: 20px;
        margin-top: 30px;
 
     }
      #nav-links.show{
         display: block;
      }
 
      #nav-links ul li{
         padding: 15px 0px;
         width: 100%;
      }
 
      #login.show{
         display: block;
      }
      #login{
         display: none;
         width: 100%;
         border-top: 1px solid black;
         padding-top: 20px;
         padding-left: 20px;
         margin-top: 30px;
      }
 
      #login li{
         padding: 15px 0px;
         width: 100%;
      }
 
      .top-section h1{
         font-size: 40px;
         text-align: center;
        }

        .top-section p{
            font-size: 25px;
            text-align: center;
           }
       
 
        .top-section img{
         width: 450px;
         margin: auto;
         padding-top: 30px;
         padding-left: 50px;
         text-align: center;
     }   
     
     #offers{    
         width: 75%;
         margin: auto;
         display: grid;
         grid-template-columns: repeat(1,1fr);
         gap:  10px;
     }
     #offers img{
         width: 650px;
         height: 550px;
         border-radius: 30px;
         margin-left: 1px;
     }
     #offers div{
       display: grid;
       grid-template-columns: repeat(2,1fr);
       gap: 10px;
     
     }
     
      #offers .right-side{
         width: 100%;
      }
     
     #offers div div{
         width: 100%;
         display:grid; 
        grid-template-columns: repeat(1,1fr);   
        padding-right: 10px;
     }
     #offers button{
         background-color: black;
         color: whitesmoke;
         width: 130px;
         height: 35px;
         border-radius: 30px;
         font-size: 14px;
     }
     
     .mid-page{
         width: 90%;
         display: grid;
         grid-template-columns: repeat(1,1fr);
         margin-bottom: 20px;
         gap: 10px;
         padding-left: 160px;
         text-align: center;
     } 
     /* .mid-page div{
         width: 40%;
     
     } */
     
     .mid-page h1{
        width: 120%;
         font-size: 35px;
       
     }
 
     .mid-page> .left > img{
       width: 450px;
       margin-left: 10px;
       border-radius: 30px;


     }
 
     .mid-page> .right> img{
         width: 450px;
         margin-left: 0px;
         border-radius: 30px;
       }
    
     .mid-page > .left{
       padding-top: 20px;
       width: 80%;
       margin-bottom: 30px;
     }
     
     .mid-page p{
         font-size: 16px;
         width: 120%;
     }
 
     .mid-page> .right-side{
         width: 80%;
         padding-left:0 px;
          padding-top: 20px;
        
       }
 
       .mid-page> .right-side > p{
         width: 120%;
       }
     
     
     
     
     .membership{
         width: 50%;
         margin: auto;
         height:450px;
         display:grid;
         grid-template-columns: repeat(1,1fr);
         gap: 20px;
         
     }
     .membership div{
         width: 80%;
         height:380px;
         color: white;
         background-color: black;
         border-radius: 30px;
         padding: 20px;
         margin-left: 20px;
         
     }
     
     .membership div button{
       background-color: white;
       width: 160px;
       height: 50px;
       font-weight: bold;
       border-radius: 30px;
       font-size: 17px;
       margin-left: 55px;
     
     }
     
     .bottom{
          display: grid;
          grid-template-columns: repeat(1,1fr);
          gap: 25px;
          margin-top: 800px;
         
         }
         
         .bottom img{
           width: 26px;
         }
     
         .bottom > .left-phase{
             width: 90%;
             font-size: 15px;
             color: rgb(150, 146, 146);
         }
        .bottom > .left-phase > div{
         margin-top: 33px;
         margin-left: 50px;
        }
 
        .bottom > .left-phase > div > p{
         width: 75%;
        font-size: 12px;
     }
     
        .bottom > .right-phase{
         display: flex;
         flex-direction: column;
         gap: 15px;
         padding: 140px;
         padding-left:60px;
        }
 
 
   }