1  // Header.module.scss
 2  
 3  .header {
 4    display: flex;
 5    justify-content: space-between; /* Adjusted to space between the two containers */
 6    align-items: center;
 7    padding: 20px 40px;
 8    font-size: 24px;
 9    color: #ffffff;
10  
11    @media screen and (max-width: 768px) {
12      padding: 20px 20px;
13    }
14  }
15  
16  .searchContainer {
17    display: flex;
18    align-items: center;
19    margin: auto;
20  }
21  
22  .buttonsContainer {
23    display: flex;
24    align-items: center;
25  }
26  
27  .button {
28    padding: 0 25px;
29    line-height: 39px;
30    font-size: 14px;
31    border-radius: 30px;
32    cursor: pointer;
33    outline: none;
34    border: 1px solid transparent;
35    transition: 0.1s ease-in-out;
36    transition-property: color, background-color, border-color;
37  
38    @media screen and (max-width: 768px) {
39      margin-left: 15px;
40      margin-right: 15px;
41      padding: 0 15px;
42      line-height: 39px;
43    }
44  }
45  
46  .button__primary {
47    background: #ffffff;
48    color: #012060;
49  
50    &:hover {
51      box-shadow: 0 10px 40px #1e87f0;
52    }
53  }
54  
55  .button__secondary {
56    background-color: transparent;
57    color: rgba(255, 255, 255, 0.8);
58    border: 1px solid #e5e5e5;
59    border-color: rgba(255, 255, 255, 0.6);
60  
61    &:hover {
62      border-color: #ffffff;
63      color: #ffffff;
64    }
65  }