.contact { width: 100vw; max-width: 1250px; margin: 0px auto; padding: 0px 10px; direction: rtl; min-height: calc(100vh - 288px); overflow-x: hidden; &__forms { width: 100%; justify-content: space-between; margin-top: 30px; margin-bottom: 80px; &--right { width: 45%; .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #cecece !important; border-width: 1px !important; color: green !important; font-size: calc(100vw / 85) !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 20px 14px !important; font-size: calc(100vw / 85) !important; } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 10px; top: 12px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } .MuiInputLabel-shrink { text-align: right !important; display: inline; position: absolute; right: -5px; top: -8px; transform: translate(0px, 0px) scale(0.75) !important; padding-right: 15px !important; } label { background-color: white; max-width: 120px; text-align: center; font-size: calc(100vw / 85) !important; color: #797979 !important; letter-spacing: -1px; } .Mui-focused { color: rgba(0, 0, 0, 0.54) !important; border-color: #c4c4c5 !important; } h1 { letter-spacing: -2px; color: #6cbe44; font-family: numeralBold; font-size: calc(100vw / 40); } p { font-family: numeralLight; font-size: calc(100vw / 95); color: #6f7074; } button { align-self: flex-start; margin-top: 30px; font-family: numeralLight; text-decoration: none; color: white; background-color: #6cbe44; border-radius: 6px; padding: 5px 25px; font-size: calc(100vw / 90); max-width: 110px; border: 0px; &:hover { color: white; } } textarea { width: 350px; font-family: numeralLight; border-radius: 10px; font-size: calc(100vw / 90); margin-top: 20px; border: 1px solid #c4c4c5; padding: 10px 8px; color: #6f7074; &::placeholder { color: #797979; } &:focus { outline: 0px; } } .MuiFormControl-root { select { font-family: numeralLight; height: 100%; direction: rtl; border: 1px solid #cecece !important; text-align: center !important; border-radius: 10px !important; font-size: calc(100vw / 85); color: #76797e !important; &:focus { background-color: white !important; } option { font-size: calc(100vw / 80) !important; padding: 5px !important; } } .MuiNativeSelect-icon { display: none; } .MuiNativeSelect-select { padding: 8px 10px 8px 100px !important; } } } &--left { width: 45%; height: 100%; p { font-family: numeralLight; font-size: calc(100vw / 95); margin-bottom: 0px; color: #6f7074; } span { font-family: numeralLight; font-size: calc(100vw / 95); margin-bottom: 0px; color: #6f7074; margin-right: 5px; } .contact__map { width: 100%; height: 430px; border-radius: 20px; } } } }