@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; } .about-wrapper { display: flex; flex-wrap: wrap; min-height: 100vh; } .about-left { background-color: #21D4FD; background: linear-gradient(to right, #000000, #434343); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50%; color: #fff; padding: 2rem; } .about-left h2{ color: white; border-bottom: 2px solid #434343; width: 50%; margin: 0 auto; text-align: center; } .about-left-content > div { background: linear-gradient(to right, #232526, #414345); padding: 2rem; text-align: center; border-radius: 12px 12px 0 0; } .about-left-content { box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39); border-radius: 12px; width: 100%; } .about-img { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; } .about-img img { width: 100%; height: auto; display: block; } .Back{ border: none; font-size: 0.9rem; text-transform: uppercase; border: 2px solid #fff; padding: 0.55rem 0; width: 130px; font-weight: 600; background: transparent; margin: 0 0.5rem; cursor: pointer; color:#fff; margin-top: 20px; } a{ text-decoration: none; } .credit a { color: white; } .icons { display: flex; justify-content: center; padding: 0.8rem 0; border-radius: 0 0 12px 12px; } .icons li { list-style-type: none; color: #fff; width: 40px; height: 40px; margin: 0 0.5rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; cursor: pointer; transition: all 0.5s ease-in-out; } .icons li:hover { background: #edffec; color: #000; } .about-right { background: linear-gradient(to right, #232526, #414345); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50%; color: #fff; padding: 2rem; text-align: center; } .about-right h1 { font-size: 3rem; text-transform: uppercase; } .about-right h1 span { color: rgb(37, 35, 35); } .about-right h2 { font-weight: 600; font-size: 1.5rem; } .about-btns { display: flex; justify-content: center; margin: 1rem 0; } .btn { border: none; font-size: 0.9rem; text-transform: uppercase; border: 2px solid #fff; border-radius: 20px; padding: 0.55rem; width: 130px; font-weight: 600; background: transparent; margin: 0 0.5rem; cursor: pointer; color: #fff; } .about-para p { font-weight: 300; padding: 0.5rem; opacity: 0.8; } @media screen and (max-width: 992px) { .about-wrapper { flex-direction: column; } .about-left, .about-right { width: 100%; } .about-right h1 { font-size: 2.5rem; } .about-right h2 { font-size: 1.2rem; } .about-left-content > div { padding: 2rem; } } @media screen and (max-width: 768px) { .about-left { padding: 1rem; } .about-right { padding: 1rem; } .about-right h1 { font-size: 2rem; } .about-right h2 { font-size: 1rem; } .about-para p { font-size: 0.9rem; } } @media screen and (max-width: 576px) { .about-right h1 { font-size: 1.8rem; } .about-right h2 { font-size: 1rem; } .about-btns { flex-direction: column; } .btn { margin-bottom: 0.5rem; width: 100%; } .about-left-content > div { padding: 1.5rem; } } @media screen and (min-width: 992px) { .about-wrapper { grid-template-rows: 1fr; } }