.navBar{ width:100%; display: flex; align-items: center; justify-content: center; background-color: white; box-shadow:0px 0px 28px rgba(0,0,0,0.15); height:90px; vertical-align: middle; } .header { width: 90%; display: flex; justify-content: space-between; margin-bottom: 250px; direction:rtl; font-family:'IRAN SANS'; font-size: 13px; align-items: center; position: fixed; top: 0; margin:0; vertical-align: middle; padding: 15px 0px; } .header .logo-container { height: 100%; display: flex; align-items: center; justify-content: center; vertical-align:middle; width:25%; } .header .logo-container p{ display: flex; flex-direction: column; padding-right: 8px; color:#132F52; } .logoTitle{ font-size: 15px; } .logoDes{ font-size: 8px; } .header .logo-container .logo{ height: 100%; } .header .options { width: 35%; height: 100%; display: flex; align-items: center; justify-content: space-between; } .header .options .option { padding: 10px 15px; cursor: pointer; color: rgba(19, 47,82, 0.66); font-weight: bold; } .headerButtons{ display: flex; justify-content: center; width:25%; } .headerButtons div{ margin: 0px 30px; } @media only screen and (min-width:1000px) { .nav-signin-mob{ display: none; } .signInBtn{ border:2px solid #8e44ad; border-radius:15px; color:#8e44ad; } .signInBtn:hover{ background:#8e44ad; color:white; } } @media only screen and (max-width:1000px) { .nav-signin-mob{ display: flex; } .nav-signin-mob img{ width:35px; } .nav-signin-desk{ display: none; } .signInBtn{ border:0px solid #8e44ad; border-radius:15px; color:#8e44ad; } .signInBtn:hover{ background:none; color:white; } }