* { margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif; } html, body { scroll-behavior: smooth; height: 100%; width: 100%; } /***HEADER***/ .header { position: fixed; align-items: center; top: 0; left: 0; width: 100%; height: 90px; display: flex; transition: 0.6s; justify-content: space-between; background-color: #272727; z-index: 100000; padding: 0 10px; } .logo { width: 130px; font-size: 0; } .logo img { width: 100%; } .navbar a { color: white; font-size: 15px; text-decoration: none; padding-right: 20px; transition: 0.3s; } .freeconsultation { background-color: #FFC436; color: #272727; border: none; font-size: 15px; font-weight: bolder; border-radius: 5px; cursor: pointer; align-items: center; padding: 10px 10px; margin-right: 20px; } .freeconsultation:hover { scale: 1.05; } .navbar a:hover { color: #FFC436 } .navicon { color: #FFC436; font-size: 30px; font-weight: 800; cursor: pointer; display: none; } .mobile-header { display: none; align-items: center; flex-direction: row; } section { padding: 10px; } .navbar .navicon { display: none; } .mobile-btn { display: none; } /***WRAPPER***/ .wrapper { max-width: 60%; margin: auto; margin-top: 100px; } .wrapper > p, .wrapper > h1 { margin: 20px 0; text-align: center; } .accordion { background-color: white; color:#272727; cursor: pointer; font-size: 18px; width: 100%; padding: 1rem 1.5rem; border: none; outline: none; transition: 0.4s; display: flex; justify-content: space-between; align-items: center; font-weight: 500; } .accordion i { font-size: 1rem; } .active, .accordion:hover { background-color: #FFC436; } .pannel { padding: 1rem 2rem 1.5rem 1rem; background-color: white; overflow: hidden; background-color: #F4F0EF; display: none; } .pannel p { color: #272727; font-size: 16px; line-height: 1.4; } .faq { margin: 10px 0; border: 1px solid; } .faq.active { border: none; } /**whatsapp**/ .whatsappbtn { position: fixed; width: 50px; height: 50px; bottom: 3px; right: 10px; text-decoration: none; z-index: 1; } /**responsive faqs**/ @media only screen and (max-width: 1000px) { .wrapper { max-width: 80%; } } @media only screen and (max-width: 700px) { .wrapper { max-width: 95%; } }