diff --git a/faq.html b/faq.html index 9a22f2a8..096fd3fa 100644 --- a/faq.html +++ b/faq.html @@ -1,11 +1,11 @@ - FAQ + FAQ - RapiDoc - + @@ -27,6 +27,14 @@ + + + + + @@ -107,46 +115,6 @@ } } - - .answers.show { - display: block; /* show answers when the show class is present */ -} - - .main-heading { - display: flex; - margin-top: 30px; - padding: 20px; - background: #102723; - border-radius: 5px; - box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px; - cursor: pointer; - } - - .main-heading h3 { - margin-left: 30px; - color: white; - word-spacing: 1px; - letter-spacing: 1px; - font-weight: 600; - font-size: 18px; - } - .main-heading p { - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - } - - .answers { - padding: 30px 20px 40px 20px; - font-size: 16px; - font-weight: 500; - background: #1c413b; - color: rgb(192, 192, 192); - border-radius: 0 0 5px 5px; - display: none; - } - body.dark .answers { color: rgb(40, 37, 53); } @@ -166,31 +134,27 @@ } /* Base Styles for Hamburger Menu */ -.hamburger-menu { - display: none; - flex-direction: column; - cursor: pointer; - padding: 10px; + .hamburger { + display: none; + flex-direction: column; + cursor: pointer; + padding: 10px; } -.hamburger-menu .bar { - width: 25px; - height: 3px; - background-color: white; - margin: 3px 0; - transition: 0.3s; + +#site-name { + font-size: 32px; /* Adjust size as needed */ + color: #00FF00; /* Light green color */ + margin-left: 10px; /* Space between the text and hamburger menu */ + display: none; /* Hidden by default */ } -/* Responsive Styles for Navbar */ -/* Base Styles for Hamburger Menu */ +/* Styles for the Hamburger Menu */ .hamburger-menu { display: none; flex-direction: column; cursor: pointer; padding: 10px; - position: absolute; - top: 15px; /* Adjust if necessary */ - left: 15px; /* Move to the left side */ } .hamburger-menu .bar { @@ -201,11 +165,31 @@ transition: 0.3s; } + /* Responsive Styles for Navbar */ @media screen and (max-width: 768px) { - img{ - display: none; - } + .img #rd-logo { + display: none; /* Hide image */ + } + + #site-name { + display: block; /* Show text */ + } + + .logo-text{ + color: #3fbcc0; + font-size: large; + font-weight: bold; + } + + .hamburger-menu { + display: flex; + } + + .header-content { + justify-content: flex-start; /* Align items to the start (left) */ + } + .nav_menu { display: none; position: absolute; @@ -214,13 +198,13 @@ width: 100%; background-color: #022a2d; flex-direction: column; - align-items: flex-start; /* Align items to the left */ - padding: 10px; /* Optional: Adjust padding as needed */ + align-items: flex-start; + padding: 10px; z-index: 1000; } .nav_menu.show { - display: flex; + display: flex !important; } .nav_link { @@ -233,12 +217,9 @@ .nav_link li { margin: 10px 0; } +} - .hamburger-menu { - display: flex; - } -} /* Styles for the Hamburger Menu when Opened */ .hamburger-menu.active .bar:nth-child(1) { @@ -483,6 +464,228 @@ } } + /* Base Styles for Hamburger Menu */ + .hamburger-menu { + display: none; + flex-direction: column; + cursor: pointer; + padding: 10px; +} + +.hamburger-menu .bar { + width: 25px; + height: 3px; + background-color: white; + margin: 3px 0; + transition: 0.3s; +} + +/* Responsive Styles for Navbar */ +/* Base Styles for Hamburger Menu */ +.hamburger-menu { + display: none; + flex-direction: column; + cursor: pointer; + padding: 10px; + position: absolute; + top: 15px; /* Adjust if necessary */ + left: 15px; /* Move to the left side */ +} + +.hamburger-menu .bar { + width: 25px; + height: 3px; + background-color: white; + margin: 3px 0; + margin-left: -220px !important; + transition: 0.3s; +} + +/* Responsive Styles for Navbar */ +@media screen and (max-width: 768px) { + img{ + display: none; + } + .nav_menu { + display: none; + position: absolute; + top: 85px; /* Adjust according to your header height */ + left: 0; + width: 100%; + background-color: #022a2d; + flex-direction: column; + align-items: flex-start; /* Align items to the left */ + padding: 10px; /* Optional: Adjust padding as needed */ + z-index: 1000; + } + + .nav_menu.show { + display: flex; + } + + .nav_link { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + } + + .nav_link li { + margin: 10px 0; + } + + .hamburger-menu { + display: flex; + } + +} + +/* Responsive Styles for Navbar */ +@media screen and (max-width: 768px) { + .img #rd-logo { + display: none; /* Hide image */ + } + + #site-name { + display: block; /* Show text */ + } + + .logo-text{ + color: #3fbcc0; + font-size: large; + font-weight: bold; + } + + .hamburger-menu { + display: flex; + } + + .header-content { + justify-content: flex-start; /* Align items to the start (left) */ + } + + .nav_menu { + display: none; + position: absolute; + top: 85px; /* Adjust according to your header height */ + left: 0; + width: 100%; + background-color: #022a2d; + flex-direction: column; + align-items: flex-start; + padding: 10px; + z-index: 1000; + } + + .nav_menu.show { + display: flex; + } + + .nav_link { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + } + + .nav_link li { + margin: 10px 0; + } +} + + +.hamburger .line { + margin-left: -100px; +} + +.nav_link { + list-style: none; + margin-top: 365px; + } + + .header_container { + display: flex; + justify-content:space-around !important; + align-items: center; + padding: 10px 20px; + background-color: #022a2d; + color: #fff; + position: relative; + } + + .header_container .img img { + width: 90px; + height: auto; + margin-top: 20px !important; + margin-right: 160px !important; + position: relative; + right: 30px; + } + + @media screen and (max-width: 768px) { + .nav_menu { + display: none; /* Hide original nav menu */ + position: absolute; + top: 85px; /* Adjust according to your header height */ + left: 0; + width: 100%; + background-color: #022a2d; + flex-direction: column; + align-items: flex-start; + padding: 10px; + z-index: 1000; + } + + .nav_menu.show { + display: flex; /* Show when active */ + } + + .nav_link { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + } + + .nav_link.active { + display: flex; /* Show links when active */ + } + + .nav_link li { + margin: 10px 0; + } + + .hamburger-menu { + display: flex; /* Show hamburger on mobile */ + } + .nav_link.active { + display: flex; + margin-top: -73px !important; + gap: 31px; + } +} + +/* Styles for the Hamburger Menu when Opened */ +.hamburger-menu.active .bar:nth-child(1) { + transform: rotate(-45deg) translate(-5px, 6px); +} + +.hamburger-menu.active .bar:nth-child(2) { + opacity: 0; +} + +.hamburger-menu.active .bar:nth-child(3) { + transform: rotate(45deg) translate(-5px, -6px); +} + +.header-content{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + + + /* Base Styles for Header */ .header_container { background-color: #022a2d; @@ -495,7 +698,10 @@ padding: 15px; z-index: 555; } - +.hamburger { + display: flex; + margin-left: -211px; + } /* Header Content Wrapper */ .header-content { display: flex; @@ -524,21 +730,6 @@ display: none; /* Hidden by default */ } -/* Styles for the Hamburger Menu */ -.hamburger-menu { - display: none; - flex-direction: column; - cursor: pointer; - padding: 10px; -} - -.hamburger-menu .bar { - width: 25px; - height: 3px; - background-color: white; - margin: 3px 0; - transition: 0.3s; -} /* Responsive Styles for Navbar */ @media screen and (max-width: 768px) { @@ -588,12 +779,201 @@ margin: 0; } - .nav_link li { + .nav_link.active { margin: 10px 0; } } + .header_container p { + /* margin-left: 10px; */ + font-size: 1.5em; + font-weight: bold; + margin-right: 25px; + } + + .nav_menu { + display: flex; + align-items: center; + width: 100%; + } + + .nav_link { + display: flex; + align-items: center; + /* gap: 15px; */ + list-style: none; + margin: 0; + } + + .nav_link li a { + color: #fff; + gap: 2.2px; + text-decoration: none; + padding: 10px; + display: flex; + align-items: center; + transition: background-color 0.3s; + } + + button { + background-color: #55a5ea; + color: white; + padding: 15px 20px; + border-radius: 2rem; + cursor: pointer; + margin-left: 8px; + } + + .nav_link li a:hover { + /* background-color: #555; */ + } + + + @media (max-width: 768px) { + .nav_link { + display: none; + position: absolute; + top: 85px; + left: 0; + width: 100%; + background-color: #022a2d; + flex-direction: column; + align-items: flex-start; /* Align items to the left */ + padding: 10px; /* Optional: Adjust padding as needed */ + z-index: 1000; + } + .header_container .img img{ + display: none; + } + + .nav_link.active { + display: flex; /* Show links when active */ + } + .nav_link li { + font-size: 14px; + display: flex; + flex-direction: row; + padding: 0px; + height: 5px; + margin-left: -5px; + } + + button { + background-color: #55a5ea; + color: white; + padding: 15px 20px; + border-radius: 2rem; + cursor: pointer; + margin-left: 8px; + } + + .nav_link.active { + display: flex; + margin-top: -6px; + gap: 31px; + } + + .hamburger { + display: flex; + margin-left: -711px !important; + } + + .social-links i { + font-size: 1rem !important; + } + + .header_container p { + margin-left: 115px; + font-size: 1.5em; + font-weight: bold; + margin-top: 11px; + } + + .sec-img { + transform-style: preserve-3d; + will-change: transform; + margin-left: -52px !important; + } + + +.mb-5{ + width: 213px; + margin-left: 58px; + margin-top: 30px; +} + } + + .social-links { + display: inline-flex; + gap: -2rem !important; + align-items: center; + margin-left: -100px; + } + + + + /* Ensure the hero heading is centered */ +.img-h1 { + text-align: center; + padding: 20px; + background-color: #022a2d00; /* Adjust based on your design */ +} + +.hero-heading { + font-size: 65px; + color: white; + margin: 0; +} + +.highlight { + color: #55a5ea; + display: inline; +} + +.sec-img { + display: block; + margin: 20px auto; + height: 402px; + margin-top: -65px; + margin-bottom: -79px; + width: auto; +} + +/* Container styles */ +.container-service { + padding: 0; /* Remove default padding */ +} + +.container-service .container { + padding: 0 15px; /* Adjust padding for responsiveness */ +} + +.content-wrapper { + max-width: 600px; + margin: 0 auto; /* Center content */ +} + +/* Responsive Design */ +@media (max-width: 768px) { + .hero-heading { + font-size: 50px; /* Reduce font size for smaller screens */ + } + .sec-img { + height: 80px; /* Adjust image size for smaller screens */ + } +} + +@media (max-width: 576px) { + .hero-heading { + font-size: 40px; /* Further reduce font size for very small screens */ + } + .sec-img { + height: 426px; + margin-top: -56px; + margin-bottom: -111px; + } +} @@ -611,128 +991,338 @@ }; - + +
+
+ + + +
-
-
- - Rapidoc -
- -
+ - +
+