*{
	margin: 0;
	padding: 0;
}
body {
  overflow-x: hidden;  
}
header {
background-image: url('img/a1.png');     
background-size: cover;	                  
background-position: center;           
background-repeat: no-repeat;          
height: 95vh;   
position: relative;                  
background-color: white;             
font-weight: bold;      
}

.topbar {
  background-color: cover;             
  display: flex;                       
  justify-content: space-between;      
  align-items: center;                
  padding: 10px 30px;                  
  position: fixed;                     
  top: 0;                              
  left: 0;                             
  width: 100%;                        
  z-index: 9999;                      
}
.title {
  display: flex;                       
  align-items: center;                 
  gap: 10px;                          
  color: black;                     
  
}

.title img {
  width: 100px;                        
  height: auto;                        
  display: block;
  border-radius: 50px;
}

.slogan {
  font-size: 30px;                     
  color: black;                        
}

nav {
  display: flex;                       
  align-items: center;                
  gap: 15px;                           
}

nav a {
  text-decoration: none;
  font-size: 20px;                     
  border: 1px solid black;             
  padding: 8px 15px;            
  border-radius: 10px;                
  color: black;                        
  background-color: white;             
  transition: 0.3s;                   
  margin-left: 15px
}

nav a:hover {
  color: green;                        
  border-color: green;                 
}

.left-menu {
  display: flex;                      
  align-items: center;                 
  gap: 10px;                           
  margin-right: 60px;   
}

.search-box {
  display: flex;                       
  align-items: center;                
  background: white;                   
  padding: 5px;                        
  border-radius: 10px;                  
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-left: 15px;                   
}

.search-box input {
  padding: 6px 10px;                   
  border: 1px solid #ccc;             
  border-radius: 10px;                 
  
}

.search-box button {
  margin-left: 5px;                    
  padding: 6px 10px;                
  background-color: #2ecc71;          
  color: white;                        
  border: none;                         
  border-radius: 5px;                  
  cursor: pointer;    
}

.search-box button:hover {
  background-color: #27ae60;           
}

footer {	
  background-color: #2ecc71;           
  color: white;                        
  text-align: center;                  
  padding: 5px;                        
  display: flex;                       
  justify-content: center;             
  align-items: center;                 
  height: 25px;                        
  font-weight: bold;                  
  font-size: 20px;                  
  width: 100%;                        
}


@media (max-width: 768px) {
  .topbar {
    flex-direction: column;          
    align-items: flex-start;         
  }

  nav {
    flex-wrap: wrap;                   
  }

  .search-box {
    margin-top: 10px;                  
  }
}