@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
     font-family: "Roboto", sans-serif;
 }

h1{
    font-weight: 600;
    font-size: 42px;
}

body,html{
    
    width: 100%;
}



a{
    text-decoration: none;
}

nav a h5{
    font-weight: 750;
    padding: 0.5rem 1rem ;
    background-color: #a05908;
    color: whitesmoke;
    border-radius: 19px;
    cursor: pointer;
    transition: 0.4s;
    text-decoration: none;
    
}

nav a h5:hover{
  background-color: #1e1102;
}

span{
    color: #807e7e;
}

 /* Container styling */
.dropdown-container {
     display: grid;
    gap: 8px;
    max-width: 500px;
   
    
}
nav{
    justify-content: space-between;
    display: flex;
    padding: 2rem 3rem;
    width: 100%;
}

nav img{
    width: 130px;
    height: 15px;
    
}

h6{
    padding: 5px;
    background-color: #4a4035;
    color: #e4e3e3;
    max-width: 100px;
    text-align: center;
    margin: auto;
    margin-bottom: 1rem;
    border-radius: 19px;
}

.main{
    display: grid;
    place-items: center;
    gap: 0.6rem;
    height: 100vh;
   margin-top: -0.5rem;
}

form{
    margin-top: -2rem;
    display: grid;
    gap: 0.8rem;
    padding: 0 20px;
}

.headers{
    text-align: center;
}

.options1{
    max-width: 500px;
}

form input{
        padding: 10px;
    font-size: 16px;
    border: 1px solid #e4e3e3;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    appearance: none; /* Remove default browser styling */
    
}

.options1{
    display: flex;
    gap: 1rem;
}

.width{
    padding-right: 54%;
}

#width{
    padding-right: 15rem;
}


.list1{
    display: flex;
    gap: 1rem;
}

h3{
    font-weight: 600;
}

/* Label styling */
label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-top: 0.7rem;
}

.width1{
    width: 50%;
}

/* Select dropdown styling */
select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #e4e3e3;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    appearance: none; /* Remove default browser styling */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E"); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* Hover and focus effects */
select:hover, select:focus {
    border-color: #e48c2a;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

h4{
    margin-bottom: 0.4rem;
}

input:hover, input:focus {
    border-color:#e48c2a;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

/* Disabled option styling */
select option:disabled {
  color: #999;
}

.button1{
    padding: 0.7rem 0;
    border: 1px solid #a05908;
    color: #e4e3e3;
    border-radius: 9px;
    font-weight: 700;
    background-color: #a05908;
    transition: 0.4s;
}

.button2{
    padding: 0.7rem 0;
    border: 1px solid #a05908;
    color: #e4e3e3;
    border-radius: 9px;
    font-weight: 700;
    background-color: #a05908;
    transition: 0.4s;
    
}

.button3{
    padding: 0.7rem 0;
    border: 1px solid #a05908;
    color: #e4e3e3;
    border-radius: 9px;
    font-weight: 700;
    background-color: #a05908;
    transition: 0.4s;
    
}

.display{
    display: none;
}


.button1:hover{
    background-color: #fff;
    border: 1px solid #a05908;
    color: #333;
}

.button3:hover{
    background-color: #fff;
    border: 1px solid #a05908;
    color: #333;
}

.button2:hover{
    background-color: #fff;
    border: 1px solid #a05908;
    color: #333;
}



 @media screen and (max-width: 500px){
    nav a h5{
        margin-left: 2rem;
        float: right;
    }
    form{
        margin-top: -4rem;
    }
 }