/* CSS Reset */

*{
    margin :0px;
    padding :0px;        
    font-family: 'Roboto', sans-serif;
}

header{
    background :#006cfe;          
}


#logo{
    height :90px;
    padding :25px 20px 20px 120px;  
}

.navigation{
    display :flex;
    justify-content :space-between;  
    align-items :center; 
}

#add{
    font-size :45px;
    text-decoration :none;
    padding :0px;
    margin:30px;
    color: white;
    background: #006cfe;
    border: 0px solid black;
}

#cart{
    font-size :45px;
    text-decoration :none;
    padding :0px;
    margin:30px;
}

#login{
    color : white;
    font-size :40px;
    display :bold;
    text-decoration :none;
    padding :0px;
    margin:30px;
}
        
              /* Sidebar */

#sidebar{
      position: absolute;
      top: 0px;
      left: -800px;      
      width: 800px;
      height: 3000px;
      background: white;      
      z-index: 2;
      transition: left 250ms linear; 
}

#sidebar.active{    
    left: 0px;    
    position: fixed;   
}

            /* Dim Background */



               /* side bar  */

#sidebar_toggle_btn{
      position: absolute;
      top: 0px;
      left: 0px; 
      z-index: 1;                          
}       

#sidebar_toggle_btn i{
       font-size: 50px;
       padding: 40px 0px 0px 30px;              
}

.sign_up {
  display: flex;
  align-items: center;
  background: #006cfe;
}


.left-content {
  display: flex;
  align-items: center;
  font-size: 35px; 
  text-decoration: none;
  color: white;
  padding: 30px 0px 30px 50px;
}

.left-content i{
   margin-right: 10px;
   padding: 8px; 
}

.right-content {
  margin-left: auto; 
  height: 50px;
  padding: 30px 40px 30px 50px;  
}

.links{
   padding-top: 20px; 
}

#sidebar .links a{
      display: block;
      text-decoration: none;
      color: black;
      padding: 25px;
      margin-left: 30px;      
      font-size: 35px;         
}

#sidebar .links i{        
      color: gray;      
      padding: 0px 15px 0px 0px;           
}

#sidebar .links hr{        
      border: 2px solid #d4d4d4;           
}

#new{
    background: red;
    border: 0px solid red;
    border-radius: 5px;
    color: white;
    font-size: 33px;
    margin-left: 10px;
    padding: 9px 25px 9px 25px ;
} 


 
 
 
 
               /* search box */
                
#search_input{
    width :87%;
    text-align :left;
    padding :30px;
    margin :20px 25px 20px 28px;        
    font-size: 35px;  
}

             /* slider 01  */
             
.slider-container { 
       position: relative; 
       width: 100%;  
       height: 220px;
      overflow: hidden;
      padding: 5px 0px 0px 0px; 
     
 }
  
.slider-items {
        display: flex; 
     transition: transform 0.5s ease-in-out;      
 }
  
 .slider-item { 
     flex: 0 0 20%; 
    padding: 10px;     
 } 
 
.content { 
    text-align: center;  
 } 
 
.caption {
     margin-top: 10px;     
 } 
 .content_text {      
     font-size: 30px;
     font-weight: 600;  
     pointer: cursor;
 }
        
             /* slider 02 */
             
.slider_02 {
    display: block;   
    max-width: 100%;
    padding: 0px;
}

.slider_02 img {
    display: block;    
    max-width: 100%;       
}

.slick-dots {
  display: flex; 
  justify-content: center;    
}

.slick-dots li button {
  width: 10px;
  height: 10px;
  background-color: #fff; 
  border: none;
  border-radius: 50%;
  outline: none;
  box-shadow: none;  
  
}

.slick-dots li.slick-active button {
  background-color: #000;   
}
 
             /* Section 01 */
 
.section_01{
    display: flex;
    flex-direction: row;
    justify-content :space-between;     
    margin: 60px 25px 60px 25px;    
    margin-top: 50px;   
}    

.section_01 .card_image{
    width: 280px;
    border-bottom: 2px solid gray;
    border-radius: 13px 13px 0px 0px;       
} 

.section_01 > .card{    
    border: 2px solid gray;
    border-radius: 15px;            
} 

.section_01 .card_text{
    font-size: 30px;
    text-align: center;
    padding: 25px;
    background: #aadfffbf;
    border: 0px solid gray;
    border-radius: 0px 0px 13px 13px; 
    line-height: 1.2;         
}

.No_underline{
    text-decoration: none; 
    color: black;
}
 
                /* Section 02 */
                
.section_02{
      background-image: url('https://images.unsplash.com/photo-1559311745-a57f6233488e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=948&q=80');
      background-repeat: no-repeat; 
      background-size: cover;  
      padding-bottom: 30px;     
}


.Essentials{
      display: flex;
      justify-content: space-between;       
      margin: 30px;
      margin-bottom: 0px;
      padding: 50px;         
}

.Essentials_text{
      font-size: 46px;      
      font-weight: 420;           
}

.Essentials_arrow{       
       font-size: 70px;       
       color:  #4063ff;                          
}

.arrow_css{
    text-decoration: none; 
    color:  #4063ff;    
}

.section_02 > .group_01 > .card{    
    border: 0px solid black;        
    margin: 12px; 
    border-radius: 15px;
    background: white;      
} 

.section_02 > .group_02 > .card{    
    border: 0px solid black;      
    margin: 12px;  
    border-radius: 15px;    
    background: white;          
} 

.section_02 .card_image{
    width: 360px;  
    padding: 30px;      
} 

.group_01{
    display: flex;
    justify-content: row;    
    margin: 0px 30px 0px 40px;   
}

.group_02{
    display: flex;
    justify-content: row;  
    margin: 0px 30px 0px 40px;        
}

.section_02 .card_text{
    font-size: 25px;
    font-weight: 450;
    margin: 0px 0px 30px 30px;
} 

.highlight{
    font-size: 37px;
    font-weight: 650;
    color: #4c984e;
}

             /* Section 03  */
             
.Sponsored{    
    padding: 60px 0px 60px 40px; 
    font-size: 45px; 
    font-weight: 480;     
}

.section_03 .card_image{
    width: 280px;
    border: 0px solid gray;           
    border-radius: 15px 15px 0px 0px;   
}

.section_03 .card{
    margin: 40px 10px 40px 10px;  
    border: 1px solid gray;           
    border-radius: 15px;               
}

.section_03 .card_text{
    font-size: 30px;
    font-weight: 400;
    text-align: center;     
    margin: 15px 0px 15px 0px;        
    line-height: 1.4;    
} 

.Sponsored_R1{
    display: flex;
    justify-content: space-between;  
    border: 2px solid gray;          
    padding: 0px 20px 0px 12px;    
}

.Sponsored_R2{
    display: flex;
    justify-content: space-between;         
   padding: 0px 20px 0px 12px;    
   border: 2px solid gray;   
   border-top: none;
}

             /* Section 04 */
             
.hot_deals{
    display: flex;
    justify-content: space-between;         
    background: #ffeb31;
    
}

.hot_deals_head{
    font-size: 55px;
    font-weight: 450;
    padding: 40px 0px 40px 40px;

}    

.time{
    font-size: 40px;
    font-weight: 350;
    margin: 50px 0px 0px 10px;
   color: #1333e7f1;    
}

.hot_deals_R1{
    display: flex;
    justify-content: space-between;              
    padding: 0px 20px 0px 12px;
    background: #ffeb31;    
    
}

.hot_deals_R2{
    display: flex;
    justify-content: space-between;         
    padding: 0px 20px 20px 12px; 
    background: #ffeb31;   
}

.section_04 .card{
    margin: 40px 10px 40px 10px;  
    border: 0px solid gray;           
    border-radius: 15px;
    background: white;               
}

.section_04 .card_image{
    width: 240px;
    border: 0px solid gray;           
    border-radius: 15px 15px 0px 0px;   
    padding: 30px;
}

.section_04 .card_text{
    font-size: 30px;
    font-weight: 400;
    text-align: center;     
    margin: 15px 0px 15px 0px;     
    line-height: 1.5;      
} 


              /* Section 05 */

.vacay{
      display: flex;
      justify-content: space-between;       
      margin: 0px;
      margin-bottom: 0px;
      padding: 50px;             
}

.section_05{
      background-image: url('https://png.pngtree.com/background/20210714/original/pngtree-cartoon-airplane-white-cloud-sky-background-picture-image_1211199.jpg');
      background-repeat: no-repeat; 
      background-size: cover;  
      padding-bottom: 30px;     
}
  
.section_05 > .group_01 > .card{    
    border: 0px solid black;        
    margin: 12px; 
    border-radius: 15px;
    background: white;      
} 

.section_05 > .group_02 > .card{    
    border: 0px solid black;      
    margin: 12px;  
    border-radius: 15px;    
    background: white;          
} 

.section_05 .card_image{
    width: 360px;  
    padding: 30px;      
} 

.section_05 .card_text{
    font-size: 25px;
    font-weight: 450;
    margin: 0px 0px 30px 30px;
}          
  
               /* Section 06 */
               
.section_06{
      height: 500px;
}

.recommended{
    display: flex;
    justify-content: space-between;
    padding: 25px 30px 20px 20px;
    border-bottom: 2px solid #cecece;
}
  
.big_text{
       font-size: 45px;
      font-weight: 650; 
      margin: 10px 0px 20px 35px;
      
}    

.small_text{
       font-size: 25px; 
     margin-left: 38px; 
     color: gray;
}

.img_text{
    display: flex;
   align-items: center;
   margin-left: 20px;   
}

.right_btn{
     display: flex;
  align-items: center;
} 
 
.btn_01{
    padding: 17px 28px 17px 28px;
    color: white;
    background: #2b6dff;
    border: 0px solid black;
    border-radius: 10px; 
    font-size: 35px;       
} 

.recommended_items{
      display: flex;  
      justify-content: space-between;        
}

.left_card{
      flex: 5;      
      padding: 50px 80px 30px 150px;
      border: 2px  solid #cecece; 
      border-top: none;
}

.right_cards{
      flex: 1;      
      padding: 20px;         
      flex-direction: column;             
}

.right_card{      
      padding: 40px 0px 20px 60px; 
      border-bottom: 2px solid #cecece;                      
}

.recommended_items p{
      font-size: 20px;
      margin: 18px 20px 0px 0px;      
      text-align: center;    
      line-height: 1.4;   
}

.section_06 s{
    color: gray;
}
 
              /* Section 07 */

.section_07{    
    display: flex;
    align-items: space-between;
    border-bottom: 2px solid #cecece;     
}

.login_01{
    padding: 0px 0px 30px 40px;    
}

.login_02{
    padding: 65px 10px 50px 70px;    
}

.login_02 p{
    font-size: 35px;
    font-weight: 400;
}

.btn_02{
    padding: 22px 60px 23px 60px;
    color: white;
    background: #ff6915;
    border: 0px solid black;
    border-radius: 5px; 
    font-size: 35px;       
} 

                /* Creater */

.creater {
   display: flex;
   justify-content: space-between;   
   height: 120px;
}

.creater p1{
   font-size: 25px;
   padding: 20px;
   margin-left: 20px;
}

.creater p2{
   font-size: 28px;      
   margin-right: 40px;
}

.creater_left {
   margin-left: 30px;  
}

                /* Pop Up */

.popup{
     position: absolute;
     top: 70px;
     left: 65%;
     transform: translate(-50%,-50%)         
                 scale(0.07);
     width: 95%;  
     height: 450px;  
     background: #252f36;
     border: 0px Solid black;
     border-radius: 38px;   
     visibility: hidden;   
     transition: transform 500ms, top 500ms,     
                 left 500ms ;   
}

.open_popup{
    visibility: visible;  
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)         
                 scale(1);
    position: fixed;    
              
} 
  
 
.popup h1{
    font-size: 60px; 
    font-weight: 400;   
    color: white;
    margin: 50px 0px 20px 70px;           
}

.website_name{
    display: flex;
    align-items: center;    
}

.website_name img{
    width: 90px;
    padding: 25px;
    margin: 30px 30px 0px 40px;    
} 

.website_name h2{
    font-size: 45px;
    color: white;    
    display: inline;
    font-weight: 400;             
    line-height: 1.0;  
    margin-top: 48px;           
} 

.website_name small{
    font-size: 26px;
    color: #9a9a9a;  
    font-weight: 400;  
} 

.btn_03{
    font-size: 38px; 
    color: white;
    display: inline;
    padding: 20px;
    float: right;
    margin-right: 80px;  
    color: #87cffb;  
    curser: pointer;    
}              

.btn_04{
    font-size: 38px; 
    color: white;
    display: inline;
    padding: 20px;
    float: right;
    margin-right: 10px; 
    color: #87cffb;   
    curser: pointer;            
}              

.blur-effect {
  filter: blur(4px);
}