diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..06146092 --- /dev/null +++ b/faq.html @@ -0,0 +1,185 @@ + + + + + + FAQ-Know More! + + + +
+ + +
+
+
+
+

Our Working Process

+
How we work! Know more about us!
+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index a92b7759..a0ceb73a 100644 --- a/index.html +++ b/index.html @@ -258,6 +258,9 @@
  • Contact
    • +
  • + FAQ +
    • diff --git a/src/css/faq.css b/src/css/faq.css new file mode 100644 index 00000000..e5e4c241 --- /dev/null +++ b/src/css/faq.css @@ -0,0 +1,398 @@ +/* font */ +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap"); + +* { + padding: 0px; + margin: 0px; + border: 0px; +} +*, +*:before, +*:after { + box-sizing: border-box; +} +html, +body { + height: 700px; + min-width: 320px; + font-size: 16px; +} +body { + line-height: 1; + font-family: "Space Grotesk", sans-serif; + /* text-rendering: optimizeLegibility; */ + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +input, +button, +textarea { + font-size: inherit; + line-height: inherit; +} +button { + cursor: pointer; + color: inherit; + background-color: transparent; +} +a { + color: inherit; + text-decoration: none; +} +ul li { + list-style: none; +} +img { + vertical-align: top; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; + font-size: inherit; +} + +/* Container */ +[class*="__container"] { + max-width: 1240px; + margin: 0 auto; + padding: 0 15px; +} + +/* common blocks */ +.intro { + display: flex; + align-items: center; + gap: 2rem; +} +@media (max-width: 767.98px) { + .intro { + flex-direction: column; + align-items: flex-start; + gap: 0.8rem; + } +} + +.title { + font-size: 40px; + font-weight: 500; + line-height: 127.5%; + position: relative; + text-transform: capitalize; + display: inline-flex; + font-family: Space Grotesk; + padding: 0 7px 0 7px; +} +@media (max-width: 767.98px) { + .title { + font-size: 36px; + } +} + +.title::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background-color: #056200; + border-radius: 0.4375rem; +} + +.text { + font-size: 18px; + line-height: 127%; /* 23/18 */ +} +@media (max-width: 479.98px) { + .text { + font-size: 16px; + } +} + +.process { + padding: 70px 0 70px 0; + font-family: Space Grotesk; +} +@media (max-width: 767.98px) { + .process { + padding: 30px 0 30px 0; + } +} + +.process__intro { + margin-bottom: 80px; +} +@media (max-width: 991.98px) { + .process__intro { + margin-bottom: 32px; + } +} + +.process__title { + flex-shrink: 0; +} + +/* .process__text { + max-width: 18.25rem; +} */ + +.accordions__list { + display: flex; + flex-direction: column; + gap: 1.8rem; +} +@media (max-width: 479.98px) { + .accordions__list { + gap: 1.25rem; + } +} + +.accordions__item { + background-color: #f3f3f3; + border-radius: 2.8rem; + overflow: hidden; + transition: 0.5s cubic-bezier(0.65, 0.2, 0.65, 1); + box-shadow: 0px 0.3125rem 0px 0px #191a23; + border: 0.0625rem solid #191a23; +} +@media (max-width: 479.98px) { + .accordions__item { + border-radius: 1.5rem; + } +} + +.accordions__control { + display: flex; + align-items: center; + padding: 40px 60px; + width: 100%; + position: relative; +} +@media (max-width: 767.98px) { + .accordions__control { + padding: 30px; + } +} +@media (max-width: 479.98px) { + .accordions__control { + padding: 20px; + } +} + +.accordions__number { + font-size: 60px; + font-family: Space Grotesk; + padding-right: 1.5625rem; + font-weight: 500; +} +@media (max-width: 767.98px) { + .accordions__number { + font-size: 40px; + padding-right: 0.625rem; + } +} +@media (max-width: 479.98px) { + .accordions__number { + font-size: 20px; + } +} + +.accordions__title { + font-family: Space Grotesk; + font-size: 30px; + font-weight: 500; + text-transform: capitalize; + flex: 1 1 auto; + display: flex; + line-height: 120%; + padding-right: 1.25rem; + justify-content: flex-start; + text-align: left; +} +@media (max-width: 767.98px) { + .accordions__title { + font-size: 20px; + } +} + +.accordions__icon { + flex: 0 0 58px; + display: flex; + width: 58px; + height: 58px; + background-color: #f3f3f3; + border: 1px solid #191a23; + border-radius: 50%; + position: relative; + transition: 0.5s cubic-bezier(0.65, 0.2, 0.65, 1); +} +@media (max-width: 479.98px) { + .accordions__icon { + flex: 0 0 32px; + display: flex; + width: 32px; + height: 32px; + } +} + +.accordions__icon::before { + content: ""; + width: 1.5625rem; + height: 0.3125rem; + background-color: #191a23; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +@media (max-width: 479.98px) { + .accordions__icon::before { + width: 15px; + height: 2px; + } +} + +.accordions__icon::after { + content: ""; + width: 1.5625rem; + height: 0.3125rem; + background-color: #191a23; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(90deg); +} +@media (max-width: 479.98px) { + .accordions__icon::after { + width: 15px; + height: 2px; + } +} + +.accordions__content { + padding: 0 60px 0 60px; + max-height: 0; + overflow: hidden; + will-change: max-height; + transition: 0.5s cubic-bezier(0.65, 0.2, 0.65, 1); + box-sizing: content-box; + position: relative; + z-index: 5; +} +@media (max-width: 767.98px) { + .accordions__content { + padding: 0 30px 0 30px; + } +} +@media (max-width: 479.98px) { + .accordions__content { + padding: 0 20px 0 20px; + } +} + +.open .accordions__content { + padding: 20px 60px 40px 60px; +} +@media (max-width: 767.98px) { + .open .accordions__content { + padding: 20px 30px; + } +} +@media (max-width: 479.98px) { + .open .accordions__content { + padding: 0px 20px 20px 20px; + } +} + +.open { + color: #fff; + background-color: #000000; +} + +.open .accordions__icon { + transform: rotate(225deg); +} +/* Theme and back button CSS */ +.header-buttons { + display: flex; + justify-content: space-between; + padding: 10px; + position: fixed; + width: 100%; + top: 0; + left: 0; + background-color: transparent; /* Set to transparent */ + z-index: 1000; +} + +#back-button, +#theme-toggle-button { + padding: 10px 20px; + border: none; + cursor: pointer; + font-size: 16px; +} + +#back-button { + background-color: #007bff; + color: white; +} + +#theme-toggle-button { + background-color: #6c757d; + color: white; +} + +body.dark-theme { + background-color: #121212; + color: #ffffff; +} + +body.dark-theme .header-buttons { + background-color: transparent; /* Ensure it remains transparent in dark theme */ +} + +body.dark-theme #back-button { + background-color: #007bff; +} + +body.dark-theme #theme-toggle-button { + background-color: #6c757d; +} +/* Dark theme Fix */ +.accordions__content.text { + color: black; /* Default text color */ + transition: color 0.3s ease; + .accordions__control[aria-expanded="false"] + .accordions__content.text { + color: black; /* Text color when not expanded */ + } + .accordions__control[aria-expanded="true"] + .accordions__content.text { + color: white; /* Text color when expanded */ + } +} + +/* ProcessTitle and Text */ +.process__intro { + display: flex; + flex-direction: column; + /* text-align: left; */ +} + +.process__title { + margin-top: 100px; + font-size: 3.75rem; + color: #333; +} + +.process__text { + font-size: 1.75rem; + color: #666; +}