This is the CSS design from My Second website and I like it the design i got here i am not liking Take it as an example and provide me entire CSS again "/* Main Menu - Smaller Compact Black Buttons */

#ast-hf-menu-1.main-header-menu {

    display: flex;

    justify-content: center; /* Centers the menu */

    align-items: center;

}



/* Reduce the size of the black boxes */

#ast-hf-menu-1.main-header-menu > li {

    margin: 0 5px; /* Adds small space between menu items */

    position: relative; /* Needed for dropdown */

}



#ast-hf-menu-1.main-header-menu > li > a {

    background-color: black;

    color: white;

    padding: 4px 10px; /* Reduced padding for smaller boxes */

    border-radius: 4px;

    font-size: 13px; /* Slightly smaller text */

    font-weight: 500;

    display: inline-block;

    transition: all 0.3s ease;

    text-align: center;

    white-space: nowrap; /* Prevents text from breaking */

    line-height: 1.2; /* Makes text fit better */

}



/* Hover effect */

#ast-hf-menu-1.main-header-menu > li > a:hover {

    color: orange;

    background-color: #222; /* Subtle hover effect */

}



/* Dropdown Menu - Also Small & Compact */

#ast-hf-menu-1.main-header-menu .sub-menu {

    background-color: black;

    border-radius: 4px;

    padding: 3px 0; /* Less padding inside dropdown */

    min-width: 130px; /* Keeps dropdown narrow */

    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}



/* Show dropdown on hover */

#ast-hf-menu-1.main-header-menu > li:hover .sub-menu {

    opacity: 1;

    visibility: visible;

}



/* Dropdown items */

#ast-hf-menu-1.main-header-menu .sub-menu li a {

    color: white;

    padding: 5px 10px; /* Smaller padding */

    font-size: 12px; /* Compact font size */

    display: block;

    transition: all 0.3s ease;

    text-align: center;

}



/* Dropdown hover effect */

#ast-hf-menu-1.main-header-menu .sub-menu li a:hover {

    color: orange;

    background-color: #222;

}



/* Mobile Menu - Adjustments for Responsiveness */

@media (max-width: 768px) {

    #ast-hf-menu-1.main-header-menu {

        flex-direction: column;

    }



    #ast-hf-menu-1.main-header-menu > li {

        margin-bottom: 3px;

    }

}



















/* Form Container (Background Card Style) */

.hosteebox-form {

  max-width: 520px;

  margin: auto;

  padding: 25px 22px;

  background: #ffffff;

  border-radius: 14px;

  box-shadow: 0 8px 30px rgba(0,0,0,0.08);

}



/* Labels - tighter spacing */

.hosteebox-form label {

  font-size: 13px;

  font-weight: 600;

  color: #333;

  margin-bottom: 3px;

  display: block;

}



/* Input + Textarea */

.form-input,

.form-textarea {

  width: 100%;

  padding: 10px 12px;

  border-radius: 8px;

  border: 1px solid #e2e2e2;

  background: #f7f8fb;

  font-size: 13px;

  transition: all 0.25s ease;

  margin-bottom: 12px; /* 👈 reduced spacing */

}



/* Focus effect (clean, not over-glow) */

.form-input:focus,

.form-textarea:focus {

  border-color: #4f46e5;

  background: #fff;

  box-shadow: 0 0 0 2px rgba(79,70,229,0.08);

  outline: none;

}



/* Textarea smaller */

.form-textarea {

  height: 60px; /* 👈 more control than rows */

  resize: none;

}



/* Dropdown */

select.form-input {

  appearance: none;

}



/* Button (NOT full width now) */

.form-button {

  display: inline-block;

  background: #4f46e5;

  color: #fff;

  padding: 10px 22px;

  border-radius: 8px;

  font-size: 14px;

  font-weight: 600;

  border: none;

  cursor: pointer;

  transition: 0.25s ease;

}



/* Button hover */

.form-button:hover {

  background: #3730a3;

  transform: translateY(-1px);

}



/* Align button nicely */

.hosteebox-form .wpcf7-submit {

  width: auto !important;

}



/* Remove extra paragraph spacing (IMPORTANT FIX) */

.hosteebox-form p {

  margin-bottom: 8px;

}





















/* ============================= */

/* JOB TAG BUTTONS (FINAL WORKING)

/* ============================= */



.job-taxonomies,

.job-taxonomies-loop {

    margin-top: 12px;

}



/* LABEL */

.job-taxonomies strong,

.job-taxonomies-loop strong {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin: 10px 0 8px;

}



/* WRAPPER */

.job-type,

.job-location {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 12px;

    align-items: center;

}



/* BUTTON */

.job-type a,

.job-location a {

    padding: 7px 14px;

    font-size: 12px;

    font-weight: 500;



    background: #f4f6f8;

    border: 1px solid #e2e6ea;

    border-radius: 999px;



    text-decoration: none;

    color: #222;



    transition: 0.25s ease;

    white-space: nowrap;

}



/* HOVER */

.job-type a:hover,

.job-location a:hover {

    background: #00c853;

    color: #fff;

    border-color: #00c853;



    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 8px 18px rgba(0,200,83,0.25);

}



/* MOBILE */

@media (max-width: 768px) {

    .job-type a,

    .job-location a {

        font-size: 11px;

        padding: 6px 10px;

    }

}"