*{ margin: 0; padding: 0; font-family: sans-serif; } .container{ height: 100vh; max-width:100%; background-image: url(../media/image.png); background-size: cover; background-position: center; position: relative; } .logo{ position: relative; font-size: 35px; color: #fff; font-weight: 700; font-style: italic; z-index: 999; transition: .3s; } .logo:hover{ color: #C1E4DE; } .navbar-toggler{ background-color: #fff; color: #5f5f5f; } .menu-icon{ width: 30px; color: #5f5f5f; } .logo::before{ content: ''; position: absolute; top: -40px; left: 50px; border: 50px solid ; border-color: transparent transparent #FACDC6 transparent; border-radius: 10px; z-index: -1; transform: skewX(15deg); } .navColor ul li a{ color: #5f5f5f; text-transform: uppercase; font-size: 15px; text-decoration: none; } .navColor ul li a:hover{ color: #ECA8A7; } .content{ width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 80px; } .left{ margin-left: 6%; } .left h1{ font-size: 70px; color: #fff; line-height: 80px; } .right{ margin-right: 6%; display: flex; align-items: center; } .right p{ color: #5f5f5f; margin-bottom: 0; font-size: 18px; font-weight: 400; margin-right: 10px; } #icon{ width: 80px; cursor: pointer; } @media(max-width:767px){ .left{ margin-left: 0; } .left h1{ font-size: 40px; line-height: 70px } .right{ display: flex; flex-direction: column; gap: 20px; margin-right:0; } } @media(min-width:992px){ .flex-end{ display: flex; justify-content: flex-end; align-items: center; } .nav{ margin: 10px 50px; } }