├── .env.sample
├── .prettierrc.json
├── css
    ├── fonts
    │   ├── LineIcons.eot
    │   ├── LineIcons.ttf
    │   ├── LineIcons.woff
    │   └── LineIcons.woff2
    ├── tiny-slider.min.css
    ├── lineicons.css
    └── main.css
├── public
    ├── images
    │   ├── team
    │   │   └── team-1.png
    │   ├── common-bg.svg
    │   └── testimonial
    │   │   └── testimonial-bg.svg
    └── favicon.svg
├── components
    ├── human-date.js
    ├── landing-page-sections
    │   ├── missing-section.js
    │   ├── testimonial.js
    │   ├── feature.js
    │   ├── features.js
    │   ├── hero.js
    │   ├── landing-page-section.js
    │   ├── testimonials.js
    │   └── two-column-with-image.js
    ├── main-menu
    │   ├── main-menu-link.js
    │   └── main-menu.js
    ├── author-card.js
    ├── blog
    │   ├── categories-widget.js
    │   ├── search-widget.js
    │   ├── posts-list.js
    │   ├── post-preview-condensed.js
    │   ├── blog.js
    │   └── post-preview.js
    ├── preloader.js
    ├── scroll-to-top-button.js
    ├── missing-token-section.js
    ├── header-section.js
    └── footer-section.js
├── pages
    ├── missing-token.js
    ├── _document.js
    ├── 404.js
    ├── blog
    │   ├── search.js
    │   ├── tag
    │   │   └── [slug].js
    │   ├── category
    │   │   └── [slug].js
    │   └── [slug].js
    ├── blog.js
    ├── landing-page
    │   └── [slug].js
    └── _app.js
├── jsconfig.json
├── .gitignore
├── app.json
├── .eslintrc.json
├── next.config.js
├── package.json
├── lib
    └── api.js
└── README.md


/.env.sample:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_BUTTER_CMS_API_KEY=your_auth_token


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 80,
3 |   "singleAttributePerLine": true
4 | }
5 | 


--------------------------------------------------------------------------------
/css/fonts/LineIcons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ButterCMS/nextjs-starter-buttercms/HEAD/css/fonts/LineIcons.eot


--------------------------------------------------------------------------------
/css/fonts/LineIcons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ButterCMS/nextjs-starter-buttercms/HEAD/css/fonts/LineIcons.ttf


--------------------------------------------------------------------------------
/css/fonts/LineIcons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ButterCMS/nextjs-starter-buttercms/HEAD/css/fonts/LineIcons.woff


--------------------------------------------------------------------------------
/css/fonts/LineIcons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ButterCMS/nextjs-starter-buttercms/HEAD/css/fonts/LineIcons.woff2


--------------------------------------------------------------------------------
/public/images/team/team-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ButterCMS/nextjs-starter-buttercms/HEAD/public/images/team/team-1.png


--------------------------------------------------------------------------------
/components/human-date.js:
--------------------------------------------------------------------------------
1 | import { format, parseISO } from "date-fns";
2 | 
3 | export default function HumanDate({ dateString }) {
4 |   const date = parseISO(dateString);
5 |   return <time dateTime={dateString}>{format(date, "MMM	d, yyyy")}</time>;
6 | }
7 | 


--------------------------------------------------------------------------------
/components/landing-page-sections/missing-section.js:
--------------------------------------------------------------------------------
1 | export default function MissingSection({ type }) {
2 |   return (
3 |     <div>
4 |       <h3>Missing a template for {type}</h3>
5 |       <p>Check console for component details</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/missing-token.js:
--------------------------------------------------------------------------------
 1 | import MissingTokenSection from "@/components/missing-token-section";
 2 | 
 3 | export default function MissingToken() {
 4 |   return <MissingTokenSection />;
 5 | }
 6 | 
 7 | export async function getStaticProps() {
 8 |   return {
 9 |     props: {},
10 |   };
11 | }
12 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/components/*": [
 6 |         "components/*"
 7 |       ],
 8 |       "@/lib/*": [
 9 |         "lib/*"
10 |       ],
11 |       "@/css/*": [
12 |         "css/*"
13 |       ]
14 |     }
15 |   }
16 | }


--------------------------------------------------------------------------------
/components/main-menu/main-menu-link.js:
--------------------------------------------------------------------------------
 1 | export default function MainMenuLink({ active, callbackOnClick, label, url }) {
 2 |   return (
 3 |     <li
 4 |       className="nav-item"
 5 |       onClick={callbackOnClick}
 6 |     >
 7 |       <a
 8 |         className={`page-scroll ${active ? "active" : ""}`}
 9 |         href={`/${url}`}
10 |       >
11 |         {label}
12 |       </a>
13 |     </li>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Head, Html, Main, NextScript } from "next/document";
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html>
 6 |       <Head>
 7 |         <link
 8 |           href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap"
 9 |           rel="stylesheet"
10 |         />
11 |       </Head>
12 |       <body>
13 |         <Main />
14 |         <NextScript />
15 |       </body>
16 |     </Html>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/components/landing-page-sections/testimonial.js:
--------------------------------------------------------------------------------
 1 | export default function Testimonial({ name, quote, title }) {
 2 |   return (
 3 |     <div className="single-testimonial">
 4 |       <div className="quote">
 5 |         <i className="lni lni-quotation"></i>
 6 |       </div>
 7 |       <div className="content">
 8 |         <p>{quote}</p>
 9 |       </div>
10 |       <div className="info">
11 |         <h6>{name}</h6>
12 |         <p>{title}</p>
13 |       </div>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components/author-card.js:
--------------------------------------------------------------------------------
 1 | export default function AuthorCard({ author }) {
 2 |   const authorAvatar = author.profile_image
 3 |     ? author.profile_image
 4 |     : "/images/team/team-1.png";
 5 |   return (
 6 |     <a>
 7 |       {/* eslint-disable-next-line @next/next/no-img-element */}
 8 |       <img
 9 |         alt={`Profile image ${author.first_name} ${author.last_name}`}
10 |         src={authorAvatar}
11 |       />
12 |       {author.first_name} {author.last_name}
13 |     </a>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/public/images/common-bg.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="701" viewBox="0 0 1440 701" width="1440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="720.435" x2="720.435" y1="791.976" y2="42.5723"><stop offset="0" stop-color="#c2fbff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><path d="m.435883 649.737c486.403117-274.293 312.179117 121.413 1440.004117 0 1127.82-121.413 0-649.595215 0-649.595215h-1440.004117s-486.402883 923.887215 0 649.595215z" fill="url(#a)"/></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 
37 | .vscode


--------------------------------------------------------------------------------
/components/blog/categories-widget.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function CategoriesWidget({ categories }) {
 4 |   return (
 5 |     <div className="widget categories-widget">
 6 |       <h5 className="widget-title">Categories</h5>
 7 |       <ul className="categories-list">
 8 |         {categories.map((category) => (
 9 |           <li key={category.slug}>
10 |             <Link href={`/blog/category/${category.slug}`}>
11 |               {category.name}
12 |             </Link>
13 |           </li>
14 |         ))}
15 |       </ul>
16 |     </div>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/components/preloader.js:
--------------------------------------------------------------------------------
 1 | export default function Preloader() {
 2 |   return (
 3 |     <div className="preloader">
 4 |       <div className="loader">
 5 |         <div className="spinner">
 6 |           <div className="spinner-container">
 7 |             <div className="spinner-rotator">
 8 |               <div className="spinner-left">
 9 |                 <div className="spinner-circle"></div>
10 |               </div>
11 |               <div className="spinner-right">
12 |                 <div className="spinner-circle"></div>
13 |               </div>
14 |             </div>
15 |           </div>
16 |         </div>
17 |       </div>
18 |     </div>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ButterCMS NextJS Starter Project ",
 3 |     "description": "Drop-in proof-of-concept NextJs app, fully integrated with your ButterCMS account.",
 4 |     "repository": "https://github.com/ButterCMS/nextjs-starter-buttercms",
 5 |     "logo": "https://cdn.buttercms.com/R3fbtvoRT2CqEQSmk8hb",
 6 |     "keywords": ["Next.js", "buttercms", "cms", "blog"],
 7 |     "buildpacks": [
 8 |         {
 9 |           "url": "heroku/nodejs"
10 |         }
11 |     ],
12 |     "env": {
13 |         "NEXT_PUBLIC_BUTTER_CMS_API_KEY": {
14 |             "description": "The API token of your ButterCMS account",
15 |             "value": ""
16 |         }
17 |     }
18 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true
 5 |   },
 6 |   "extends": [
 7 |     "next/core-web-vitals",
 8 |     "eslint:recommended",
 9 |     "plugin:prettier/recommended"
10 |   ],
11 |   "rules": {
12 |     "react/jsx-max-props-per-line": ["error", { "maximum": 1 }],
13 |     "react/jsx-sort-props": ["error"],
14 |     "sort-imports": [
15 |       "error",
16 |       {
17 |         "ignoreCase": false,
18 |         "ignoreDeclarationSort": false,
19 |         "ignoreMemberSort": false,
20 |         "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
21 |         "allowSeparatedGroups": true
22 |       }
23 |     ]
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/components/blog/search-widget.js:
--------------------------------------------------------------------------------
 1 | export default function SearchWidget() {
 2 |   return (
 3 |     <div className="sidebar blog-grid-page">
 4 |       <div className="widget search-widget">
 5 |         <h5 className="widget-title">Search This Site</h5>
 6 |         <form
 7 |           action={"/blog/search"}
 8 |           method="get"
 9 |         >
10 |           <input
11 |             name="query"
12 |             placeholder="Search Here..."
13 |             type="text"
14 |           />
15 |           <button type="submit">
16 |             <i className="lni lni-search-alt"></i>
17 |           </button>
18 |         </form>
19 |       </div>
20 |     </div>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/components/landing-page-sections/feature.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function Feature({ description, headline, icon }) {
 4 |   return (
 5 |     <div className="col-lg-6 col-md-6">
 6 |       <div className="single-feature">
 7 |         <div className="feature-icon">
 8 |           {icon && (
 9 |             <Image
10 |               alt=""
11 |               fill
12 |               sizes="100vw"
13 |               src={icon}
14 |               style={{
15 |                 objectFit: "cover",
16 |               }}
17 |             />
18 |           )}
19 |         </div>
20 |         <div className="feature-content">
21 |           <h4>{headline}</h4>
22 |           <p>{description}</p>
23 |         </div>
24 |       </div>
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/components/blog/posts-list.js:
--------------------------------------------------------------------------------
 1 | import PostsPreview from "./post-preview";
 2 | 
 3 | export default function PostsList({ posts }) {
 4 |   return (
 5 |     <div className="col-12 col-lg-8 blog-roll-cards">
 6 |       <div className="row">
 7 |         {posts.map((post) => (
 8 |           <PostsPreview
 9 |             author={post.author}
10 |             coverImage={post.featuredImage}
11 |             coverImageAlt={post.featuredImageAlt}
12 |             date={post.published}
13 |             excerpt={post.summary}
14 |             key={post.slug}
15 |             slug={post.slug}
16 |             tags={post.tags}
17 |             title={post.title}
18 |           />
19 |         ))}
20 |         {!posts.length && <div>No blog posts found.</div>}
21 |       </div>
22 |     </div>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/components/scroll-to-top-button.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export default function ScrollToButtonButton() {
 4 |   const [hasScrollToTopButton, setHasScrollToTopButton] = useState(false);
 5 | 
 6 |   function toggleScrollTopButton() {
 7 |     setHasScrollToTopButton(
 8 |       document.body.scrollTop > 50 || document.documentElement.scrollTop > 50,
 9 |     );
10 |   }
11 | 
12 |   useEffect(() => {
13 |     window.addEventListener("scroll", toggleScrollTopButton);
14 | 
15 |     return () => {
16 |       window.removeEventListener("scroll", toggleScrollTopButton);
17 |     };
18 |   }, []);
19 | 
20 |   return (
21 |     <>
22 |       {hasScrollToTopButton && (
23 |         <a
24 |           className="scroll-top btn-hover"
25 |           href="#"
26 |         >
27 |           <i className="lni lni-chevron-up"></i>
28 |         </a>
29 |       )}
30 |     </>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   trailingSlash: true,
 3 |   reactStrictMode: true,
 4 |   async rewrites() {
 5 |     return [
 6 |       {
 7 |         source: "/",
 8 |         destination: "/landing-page/landing-page-with-components",
 9 |       }
10 |     ];
11 |   },
12 |   redirects() {
13 |     const sourcesRequiringAuthToken = [
14 |       "/", "/landing-page/:slug*", "/blog/:path*"
15 |     ]
16 | 
17 |     return process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY ? [
18 |       {
19 |         source: "/missing-token",
20 |         destination: "/",
21 |         permanent: false
22 |       }
23 |     ] : sourcesRequiringAuthToken.map(source => ({
24 |       source: source,
25 |       destination: "/missing-token",
26 |       permanent: false
27 |     })
28 |     )
29 |   },
30 |   images: {
31 |     remotePatterns: [
32 |       {
33 |         protocol: 'https',
34 |         hostname: 'cdn.buttercms.com',
35 |         pathname: '**',
36 |       },
37 |     ],
38 |     dangerouslyAllowSVG: true,
39 |   },
40 | };
41 | 
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-starter-buttercms",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint",
 9 |     "lint:fix": "next lint --fix"
10 |   },
11 |   "dependencies": {
12 |     "@popperjs/core": "^2.11.8",
13 |     "acorn": "^8.11.3",
14 |     "bootstrap": "^5.3.2",
15 |     "buttercms": "^3.0.0",
16 |     "camelcase-keys": "^9.1.2",
17 |     "date-fns": "^3.3.1",
18 |     "next": "^14.1.0",
19 |     "react": "^18.2.0",
20 |     "react-dom": "^18.2.0",
21 |     "sharp": "^0.33.2",
22 |     "tiny-slider": "^2.9.4",
23 |     "typescript": "^5.3.3"
24 |   },
25 |   "devDependencies": {
26 |     "eslint": "^8.57.0",
27 |     "eslint-config-next": "^14.1.0",
28 |     "eslint-config-prettier": "^10.1.5",
29 |     "eslint-plugin-prettier": "^5.5.1",
30 |     "glob": "^10.3.10",
31 |     "prettier": "^3.6.1",
32 |     "rimraf": "^5.0.5"
33 |   },
34 |   "engines": {
35 |     "node": ">=20.18.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/public/images/testimonial/testimonial-bg.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="578" viewBox="0 0 1440 578" width="1440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#c2fbff"/><stop offset="1" stop-color="#f5feff" stop-opacity=".31"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="777.675" x2="645.554" xlink:href="#a" y1="676.738" y2="-98.2904"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="777.675" x2="645.687" xlink:href="#a" y1="676.537" y2="-98.1128"/><mask id="d" height="578" maskUnits="userSpaceOnUse" width="1441" x="-1" y="0"><path d="m-.612061 334.103c0-184.436 149.514061-333.950168 333.950061-333.950168h1106.662v243.583168c0 184.436-149.51 333.95-333.95 333.95h-1106.662061z" fill="url(#c)"/></mask><path d="m-.612061 333.953c0-184.435 149.514061-333.94958203 333.950061-333.94958203h1106.662v243.88158203c0 184.436-149.51 333.95-333.95 333.95h-1106.662061z" fill="url(#b)"/><g fill="#37c2cc" mask="url(#d)"><circle cx="1302.88" cy="681.916" r="270.878"/><circle cx="1389.24" cy="603.881" opacity=".1" r="270.878"/></g></svg>


--------------------------------------------------------------------------------
/components/landing-page-sections/features.js:
--------------------------------------------------------------------------------
 1 | import Feature from "./feature";
 2 | 
 3 | export default function Features({
 4 |   features,
 5 |   headline,
 6 |   scrollAnchorId,
 7 |   subheadline,
 8 | }) {
 9 |   return (
10 |     <section
11 |       className="feature-section"
12 |       id={scrollAnchorId}
13 |     >
14 |       <div className="container">
15 |         <div className="row">
16 |           <div className="col-lg-5 col-md-10">
17 |             <div className="section-title mb-60">
18 |               <h2 className="mb-20">{headline}</h2>
19 |               <p>{subheadline}</p>
20 |             </div>
21 |           </div>
22 | 
23 |           <div className="col-lg-7">
24 |             <div className="row">
25 |               {features.map((feature, index) => (
26 |                 <Feature
27 |                   description={feature.description}
28 |                   headline={feature.headline}
29 |                   icon={feature.icon}
30 |                   key={index}
31 |                 />
32 |               ))}
33 |             </div>
34 |           </div>
35 |         </div>
36 |       </div>
37 |     </section>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/components/blog/post-preview-condensed.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | 
 4 | export default function PostPreviewCondensed({
 5 |   coverImage,
 6 |   coverImageAlt,
 7 |   excerpt,
 8 |   slug,
 9 |   title,
10 | }) {
11 |   return (
12 |     <div className="col-lg-4 col-md-8 col-sm-10">
13 |       <div className="single-blog">
14 |         {coverImage && (
15 |           <div className="blog-header">
16 |             <Image
17 |               alt={coverImageAlt}
18 |               fill
19 |               sizes="100vw"
20 |               src={coverImage}
21 |               style={{
22 |                 objectFit: "cover",
23 |               }}
24 |             />
25 |           </div>
26 |         )}
27 |         <div className="blog-body">
28 |           <h5 className="package-name">
29 |             <Link href={`/blog/${slug}`}>{title}</Link>
30 |           </h5>
31 |           <p>{excerpt}</p>
32 |         </div>
33 |         <div className="blog-footer">
34 |           <Link
35 |             className="main-btn btn-hover"
36 |             href={`/blog/${slug}`}
37 |           >
38 |             Read More
39 |           </Link>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="#19ccda" r="20"/><path d="m12.9092 11.3252c.944 0 1.8066.1302 2.5879.3906.7812.2604 1.4404.5615 1.9775.9033v3.3448c-.5859-.3581-1.2126-.6918-1.8799-1.001-.6673-.3093-1.4241-.4639-2.2705-.4639-.4232 0-.8463.0651-1.2695.1953-.4069.1302-.7487.3256-1.0254.586-.2604.2604-.3906.594-.3906 1.0009 0 .5372.236.9441.708 1.2208.472.2766 1.0498.5533 1.7334.83l2.0019.8301c1.1394.4883 1.9776 1.0824 2.5147 1.7822.5371.6999.8056 1.4974.8056 2.3926 0 .9766-.2848 1.8392-.8544 2.5879-.5534.7324-1.3021 1.3102-2.2461 1.7334-.9278.4232-1.9613.6348-3.1006.6348-.9603 0-1.8799-.1628-2.75882-.4883-.8789-.3255-1.64388-.7243-2.29492-1.1963v-3.3447c.71615.5208 1.50553.9603 2.36816 1.3183.86268.3581 1.78228.5371 2.75878.5371.6836 0 1.2695-.1302 1.7578-.3906.4883-.2767.7324-.6836.7324-1.2207 0-.4232-.2034-.765-.6103-1.0254-.3906-.2767-.8219-.5045-1.2939-.6836l-2.5147-.9765c-1.26953-.4883-2.13216-1.1231-2.58789-1.9043-.43945-.7976-.65918-1.6765-.65918-2.6368 0-.9928.26856-1.8554.80567-2.5878.55338-.7487 1.26953-1.3265 2.1484-1.7334.8789-.4232 1.8311-.6348 2.8565-.6348zm17.7002 13.623v3.0518h-8.9112v-3.0518h2.7588v-10.2539h-2.7588v-3.0517h8.9112v3.0517h-2.7588v10.2539z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/pages/404.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function Custom404() {
 4 |   console.error(
 5 |     "Your Butter token might be set to an invalid value. Please verify your token is correct.",
 6 |   );
 7 | 
 8 |   return (
 9 |     <section
10 |       className="hero-section"
11 |       id="home"
12 |     >
13 |       <div className="container">
14 |         <div className="row align-items-center">
15 |           <div className="col-xl-6 col-lg-6 col-md-10">
16 |             <div className="hero-content">
17 |               <h1>404 Page not found</h1>
18 |               <p>
19 |                 Check that your API token is correct or that the requested URL
20 |                 is valid.
21 |               </p>
22 |             </div>
23 |           </div>
24 |           <div className="col-xxl-6 col-xl-6 col-lg-6">
25 |             <Image
26 |               alt="Logo"
27 |               height={45}
28 |               src="https://cdn.buttercms.com/9bPtzdJ6QSWkySNjlmyR"
29 |               style={{
30 |                 height: "auto",
31 |                 maxWidth: "300px",
32 |               }}
33 |               width={180}
34 |             />
35 |             <div className="hero-image text-center text-lg-end"></div>
36 |           </div>
37 |         </div>
38 |       </div>
39 |     </section>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/components/missing-token-section.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function MissingTokenSection() {
 4 |   return (
 5 |     <section
 6 |       className="hero-section"
 7 |       id="home"
 8 |     >
 9 |       <div className="container">
10 |         <div className="row align-items-center">
11 |           <div className="col-xl-6 col-lg-6 col-md-10">
12 |             <div className="hero-content">
13 |               <h1>Configure your ButterCMS API Token</h1>
14 |               <p>
15 |                 Please add your API token to <code>.env</code> file as{" "}
16 |                 <code>NEXT_PUBLIC_BUTTER_CMS_API_KEY</code>.
17 |               </p>
18 |               <a
19 |                 className="main-btn btn-hover"
20 |                 href="https://buttercms.com/join/"
21 |                 rel="noreferrer"
22 |                 target="_blank"
23 |               >
24 |                 Get your free API token
25 |               </a>
26 |             </div>
27 |           </div>
28 |           <div className="col-xxl-6 col-xl-6 col-lg-6">
29 |             <Image
30 |               alt=""
31 |               height={300}
32 |               src="https://cdn.buttercms.com/9bPtzdJ6QSWkySNjlmyR"
33 |               style={{
34 |                 height: "auto",
35 |                 maxWidth: "100%",
36 |               }}
37 |               width={300}
38 |             />
39 |             <div className="hero-image text-center text-lg-end"></div>
40 |           </div>
41 |         </div>
42 |       </div>
43 |     </section>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/components/landing-page-sections/hero.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function Hero({
 4 |   buttonLabel,
 5 |   buttonUrl,
 6 |   headline,
 7 |   image,
 8 |   scrollAnchorId,
 9 |   subheadline,
10 | }) {
11 |   return (
12 |     <section
13 |       className="hero-section"
14 |       id={scrollAnchorId}
15 |     >
16 |       <div className="container">
17 |         <div className="row align-items-center">
18 |           <div className="col-xl-6 col-lg-6 col-md-10">
19 |             <div className="hero-content">
20 |               <h1>{headline}</h1>
21 |               <p>{subheadline}</p>
22 | 
23 |               <a
24 |                 className="main-btn btn-hover"
25 |                 href={buttonUrl}
26 |               >
27 |                 {buttonLabel}
28 |               </a>
29 |               <a href="https://buttercms.com/join/">Need an account?</a>
30 |             </div>
31 |           </div>
32 |           {image && (
33 |             <div className="col-xxl-6 col-xl-6 col-lg-6">
34 |               <div className="hero-image text-center text-lg-end">
35 |                 <Image
36 |                   alt=""
37 |                   height={400}
38 |                   sizes="100vw"
39 |                   src={image}
40 |                   style={{
41 |                     height: "auto",
42 |                     width: "100%",
43 |                   }}
44 |                   width={400}
45 |                 />
46 |               </div>
47 |             </div>
48 |           )}
49 |         </div>
50 |       </div>
51 |     </section>
52 |   );
53 | }
54 | 


--------------------------------------------------------------------------------
/components/blog/blog.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | import PostPreviewCondensed from "./post-preview-condensed";
 4 | 
 5 | export default function Blog({ posts }) {
 6 |   return (
 7 |     <section
 8 |       className="blog-section"
 9 |       id="blog"
10 |     >
11 |       <div className="container">
12 |         <div className="row justify-content-center">
13 |           <div className="col-lg-6 col-md-10">
14 |             <div className="section-title text-center">
15 |               <h2>Latest Blog Posts</h2>
16 |               <p>
17 |                 Butter also has a built in blog engine which makes it dead
18 |                 simple to launch a new company blog.
19 |               </p>
20 |               <p>
21 |                 <Link
22 |                   className="main-btn btn-hover mt-5"
23 |                   href={"/blog"}
24 |                 >
25 |                   View All Blog Posts
26 |                 </Link>
27 |               </p>
28 |             </div>
29 |           </div>
30 |         </div>
31 |         <div className="row justify-content-center">
32 |           {posts.map((post) => (
33 |             <PostPreviewCondensed
34 |               author={post.author}
35 |               coverImage={post.featuredImage}
36 |               coverImageAlt={post.featuredImageAlt}
37 |               date={post.published}
38 |               excerpt={post.summary}
39 |               key={post.slug}
40 |               slug={post.slug}
41 |               title={post.title}
42 |             />
43 |           ))}
44 |         </div>
45 |       </div>
46 |     </section>
47 |   );
48 | }
49 | 


--------------------------------------------------------------------------------
/components/landing-page-sections/landing-page-section.js:
--------------------------------------------------------------------------------
 1 | import camelcaseKeys from "camelcase-keys";
 2 | import dynamic from "next/dynamic";
 3 | 
 4 | import Preloader from "@/components/preloader";
 5 | 
 6 | import MissingSection from "./missing-section";
 7 | 
 8 | export default function LandingPageSection({ sectionData, type }) {
 9 |   const sectionsComponentPaths = () => ({
10 |     features: dynamic(
11 |       () =>
12 |         import("@/components/landing-page-sections/features").catch(
13 |           () => () => MissingSection,
14 |         ),
15 |       {
16 |         loading: Preloader,
17 |       },
18 |     ),
19 |     hero: dynamic(
20 |       () =>
21 |         import("@/components/landing-page-sections/hero").catch(
22 |           () => () => MissingSection,
23 |         ),
24 |       {
25 |         loading: Preloader,
26 |       },
27 |     ),
28 |     testimonials: dynamic(
29 |       () =>
30 |         import("@/components/landing-page-sections/testimonials").catch(
31 |           () => () => MissingSection,
32 |         ),
33 |       {
34 |         loading: Preloader,
35 |       },
36 |     ),
37 |     two_column_with_image: dynamic(
38 |       () =>
39 |         import(
40 |           "@/components/landing-page-sections/two-column-with-image"
41 |         ).catch(() => () => MissingSection),
42 |       {
43 |         loading: Preloader,
44 |       },
45 |     ),
46 |   });
47 |   const SectionComponent = sectionsComponentPaths()[type] || MissingSection;
48 | 
49 |   return (
50 |     <SectionComponent
51 |       type={type}
52 |       {...camelcaseKeys(sectionData)}
53 |     />
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/components/header-section.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | import { useEffect, useRef, useState } from "react";
 4 | 
 5 | import MainMenu from "./main-menu/main-menu";
 6 | 
 7 | export default function HeaderSection({ mainMenu }) {
 8 |   const [isNavbarSticky, setIsNavbarSticky] = useState(false);
 9 |   const navbarAreaEl = useRef(null);
10 | 
11 |   function fixNavBar() {
12 |     if (navbarAreaEl.current) {
13 |       setIsNavbarSticky(window.scrollY > navbarAreaEl.current.offsetTop);
14 |     }
15 |   }
16 | 
17 |   useEffect(() => {
18 |     window.addEventListener("scroll", fixNavBar);
19 | 
20 |     return () => {
21 |       window.removeEventListener("scroll", fixNavBar);
22 |     };
23 |   }, []);
24 | 
25 |   return (
26 |     <header className="header">
27 |       <div
28 |         className={`navbar-area ${isNavbarSticky ? "sticky" : ""}`}
29 |         ref={navbarAreaEl}
30 |       >
31 |         <div className="container">
32 |           <div className="row align-items-center">
33 |             <div className="col-lg-12">
34 |               <nav className="navbar navbar-expand-lg">
35 |                 <a
36 |                   className="navbar-brand"
37 |                   href="/"
38 |                 >
39 |                   <Image
40 |                     alt="Logo"
41 |                     height={45}
42 |                     src="https://cdn.buttercms.com/PBral0NQGmmFzV0uG7Q6"
43 |                     style={{
44 |                       height: "auto",
45 |                       maxWidth: "100%",
46 |                     }}
47 |                     width={180}
48 |                   />
49 |                 </a>
50 |                 <MainMenu mainMenuLinks={mainMenu} />
51 |               </nav>
52 |             </div>
53 |           </div>
54 |         </div>
55 |       </div>
56 |     </header>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/components/landing-page-sections/testimonials.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | 
 3 | import Testimonial from "./testimonial";
 4 | 
 5 | export default function Testimonials({
 6 |   headline,
 7 |   scrollAnchorId,
 8 |   testimonial: testimonials,
 9 | }) {
10 |   useEffect(() => {
11 |     import("tiny-slider").then(({ tns }) => {
12 |       tns({
13 |         autoplay: true,
14 |         autoplayButtonOutput: false,
15 |         autoplayTimeout: 5000,
16 |         container: ".testimonial-active",
17 |         controls: true,
18 |         controlsText: [
19 |           '<i class="lni lni-chevron-left"></i>',
20 |           '<i class="lni lni-chevron-right"></i>',
21 |         ],
22 |         gutter: 0,
23 |         items: 1,
24 |         mouseDrag: true,
25 |         nav: false,
26 |         navPosition: "bottom",
27 |       });
28 |     });
29 |   });
30 | 
31 |   return (
32 |     <section
33 |       className="testimonial-section mt-100"
34 |       id={scrollAnchorId}
35 |     >
36 |       <div className="container">
37 |         <div className="row justify-content-center">
38 |           <div className="col-xl-7 col-lg-9">
39 |             <div className="testimonial-active-wrapper">
40 |               <div className="section-title text-center">
41 |                 <h2 className="mb-20">{headline}</h2>
42 |               </div>
43 | 
44 |               <div className="testimonial-active">
45 |                 {testimonials.map((testimonial, index) => (
46 |                   <Testimonial
47 |                     key={index}
48 |                     name={testimonial.name}
49 |                     quote={testimonial.quote}
50 |                     title={testimonial.title}
51 |                   />
52 |                 ))}
53 |               </div>
54 |             </div>
55 |           </div>
56 |         </div>
57 |       </div>
58 |     </section>
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------
/css/tiny-slider.min.css:
--------------------------------------------------------------------------------
1 | .tns-outer{padding:0!important}.tns-outer [hidden]{display:none!important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s,opacity 0s;-moz-transition:transform 0s,opacity 0s;transition:transform 0s,opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto!important}.tns-gallery>.tns-moving{-webkit-transition:all .25s;-moz-transition:all .25s;transition:all .25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity .6s;-moz-transition:opacity .6s;transition:opacity .6s;opacity:.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;z-index:0}.tns-fadeOut,.tns-normal{opacity:0;z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}


--------------------------------------------------------------------------------
/pages/blog/search.js:
--------------------------------------------------------------------------------
 1 | import camelcaseKeys from "camelcase-keys";
 2 | 
 3 | import Link from "next/link";
 4 | 
 5 | import { getCategories, searchPosts } from "@/lib/api";
 6 | 
 7 | import CategoriesWidget from "@/components/blog/categories-widget";
 8 | import PostsList from "@/components/blog/posts-list";
 9 | import SearchWidget from "@/components/blog/search-widget";
10 | 
11 | export default function Search({ categories, posts, query }) {
12 |   return (
13 |     <>
14 |       <section
15 |         className="blog-roll-nav"
16 |         id="blog-roll"
17 |       >
18 |         <div className="container">
19 |           <div className="row justify-content-center">
20 |             <div className="col-12">
21 |               <div className="section-title text-center">
22 |                 <h2>Search Results</h2>
23 |                 <ul className="breadcrumb-nav">
24 |                   <li>
25 |                     <Link href="/">Home</Link>
26 |                   </li>
27 |                   <li>
28 |                     <Link href="/blog">Blog</Link>
29 |                   </li>
30 |                   <li>Search: &#34;{query}&#34;</li>
31 |                 </ul>
32 |               </div>
33 |             </div>
34 |           </div>
35 |         </div>
36 |       </section>
37 | 
38 |       <section className="blog-posts">
39 |         <div className="container">
40 |           <div className="row justify-content-center">
41 |             <PostsList posts={posts || []} />
42 |             <aside className="col-12 col-lg-4">
43 |               <SearchWidget />
44 |               <CategoriesWidget categories={categories || []} />
45 |             </aside>
46 |           </div>
47 |         </div>
48 |       </section>
49 |     </>
50 |   );
51 | }
52 | 
53 | export async function getServerSideProps({ query: { query } }) {
54 |   const [blogPosts, categories] = await Promise.all([
55 |     searchPosts({ query }),
56 |     getCategories(),
57 |   ]);
58 | 
59 |   return {
60 |     props: { categories, posts: camelcaseKeys(blogPosts), query },
61 |   };
62 | }
63 | 


--------------------------------------------------------------------------------
/components/blog/post-preview.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | 
 4 | import AuthorCard from "@/components/author-card";
 5 | import HumanDate from "@/components/human-date";
 6 | 
 7 | export default function PostsPreview({
 8 |   author,
 9 |   coverImage,
10 |   coverImageAlt,
11 |   date,
12 |   excerpt,
13 |   slug,
14 |   tags,
15 |   title,
16 | }) {
17 |   return (
18 |     <div className="col-12 col-lg-6">
19 |       <div className="blog-roll-card">
20 |         <div className="blog-roll-card-meta">
21 |           <h2 className="blog-roll-card-header">
22 |             <Link href={`/blog/${slug}`}>{title}</Link>
23 |           </h2>
24 |           <ul className="blog-roll-card-meta-info">
25 |             <li>
26 |               <AuthorCard author={author} />
27 |             </li>
28 |             <li>
29 |               <i className="lni lni-calendar"></i>{" "}
30 |               <HumanDate dateString={date} />
31 |             </li>
32 |             {tags.map((tag) => (
33 |               <li key={tag.slug}>
34 |                 <Link href={`/blog/tag/${tag.slug}`}>
35 |                   <i className="lni lni-tag"></i> {tag.name}
36 |                 </Link>
37 |               </li>
38 |             ))}
39 |           </ul>
40 |         </div>
41 |         {coverImage && (
42 |           <div className="single-post-thumbnail">
43 |             <Image
44 |               alt={coverImageAlt}
45 |               fill
46 |               sizes="100vw"
47 |               src={coverImage}
48 |               style={{
49 |                 objectFit: "cover",
50 |               }}
51 |             />
52 |           </div>
53 |         )}
54 |         <div
55 |           className="blog-roll-card-body prose"
56 |           dangerouslySetInnerHTML={{ __html: excerpt }}
57 |         ></div>
58 |         <div className="blog-roll-card-footer text-center">
59 |           <Link
60 |             className="main-btn btn-hover"
61 |             href={`/blog/${slug}`}
62 |           >
63 |             Read More
64 |           </Link>
65 |         </div>
66 |       </div>
67 |     </div>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/pages/blog.js:
--------------------------------------------------------------------------------
 1 | import camelcaseKeys from "camelcase-keys";
 2 | 
 3 | import Link from "next/link";
 4 | 
 5 | import { getCategories, getPostsData } from "@/lib/api";
 6 | 
 7 | import CategoriesWidget from "@/components/blog/categories-widget";
 8 | import PostsList from "@/components/blog/posts-list";
 9 | import SearchWidget from "@/components/blog/search-widget";
10 | 
11 | export default function Blog({ categories, posts }) {
12 |   return (
13 |     <>
14 |       <section
15 |         className="blog-roll-nav"
16 |         id="blog-roll"
17 |       >
18 |         <div className="container">
19 |           <div className="row justify-content-center">
20 |             <div className="col-12">
21 |               <div className="section-title text-center">
22 |                 <h2>All Blog Posts</h2>
23 |                 <ul className="breadcrumb-nav">
24 |                   <li>
25 |                     <Link href="/">Home</Link>
26 |                   </li>
27 |                   <li>All blog posts</li>
28 |                 </ul>
29 |               </div>
30 |             </div>
31 |           </div>
32 |         </div>
33 |       </section>
34 | 
35 |       <section className="blog-posts">
36 |         <div className="container">
37 |           <div className="row justify-content-center">
38 |             <PostsList posts={posts} />
39 |             <aside className="col-12 col-lg-4">
40 |               <SearchWidget />
41 |               <CategoriesWidget categories={categories} />
42 |             </aside>
43 |           </div>
44 |         </div>
45 |       </section>
46 |     </>
47 |   );
48 | }
49 | 
50 | export async function getStaticProps() {
51 |   const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
52 | 
53 |   if (butterToken) {
54 |     try {
55 |       const [blogPosts, categories] = await Promise.all([
56 |         getPostsData(),
57 |         getCategories(),
58 |       ]);
59 |       return { props: { categories, posts: camelcaseKeys(blogPosts.posts) } };
60 |     } catch (e) {
61 |       console.log("Could not get posts", e);
62 | 
63 |       return {
64 |         props: { categories: [], posts: [] },
65 |       };
66 |     }
67 |   }
68 | 
69 |   return { props: { categories: [], posts: [] } };
70 | }
71 | 


--------------------------------------------------------------------------------
/components/landing-page-sections/two-column-with-image.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | 
 4 | export default function TwoColumnWithImage({
 5 |   buttonLabel,
 6 |   buttonUrl,
 7 |   headline,
 8 |   image,
 9 |   imagePosition,
10 |   scrollAnchorId,
11 |   subheadline,
12 | }) {
13 |   return (
14 |     <section
15 |       className="cta-section"
16 |       id={scrollAnchorId}
17 |     >
18 |       <div className="container">
19 |         <div className="row">
20 |           {image && imagePosition === "left" && (
21 |             <div className="col-lg-6 order-last order-lg-first">
22 |               <div className="left-image cta-image ">
23 |                 <Image
24 |                   alt=""
25 |                   height={400}
26 |                   sizes="100vw"
27 |                   src={image}
28 |                   style={{
29 |                     height: "auto",
30 |                     width: "100%",
31 |                   }}
32 |                   width={600}
33 |                 />
34 |               </div>
35 |             </div>
36 |           )}
37 |           <div className="col-lg-6">
38 |             <div className="cta-content-wrapper">
39 |               <div className="section-title">
40 |                 <h2 className="mb-20">{headline}</h2>
41 |                 <div dangerouslySetInnerHTML={{ __html: subheadline }} />
42 |               </div>
43 |               <Link
44 |                 className="main-btn btn-hover border-btn mt-30"
45 |                 href={buttonUrl}
46 |               >
47 |                 {buttonLabel}
48 |               </Link>
49 |             </div>
50 |           </div>
51 |           {image && imagePosition === "right" && (
52 |             <div className="col-lg-6">
53 |               <div className="right-image cta-image text-lg-end">
54 |                 <Image
55 |                   alt=""
56 |                   height={400}
57 |                   sizes="100vw"
58 |                   src={image}
59 |                   style={{
60 |                     height: "auto",
61 |                     width: "100%",
62 |                   }}
63 |                   width={600}
64 |                 />
65 |               </div>
66 |             </div>
67 |           )}
68 |         </div>
69 |       </div>
70 |     </section>
71 |   );
72 | }
73 | 


--------------------------------------------------------------------------------
/pages/blog/tag/[slug].js:
--------------------------------------------------------------------------------
 1 | import camelcaseKeys from "camelcase-keys";
 2 | 
 3 | import Link from "next/link";
 4 | 
 5 | import { getCategories, getPostsData, getTags } from "@/lib/api";
 6 | 
 7 | import CategoriesWidget from "@/components/blog/categories-widget";
 8 | import PostsList from "@/components/blog/posts-list";
 9 | import SearchWidget from "@/components/blog/search-widget";
10 | 
11 | export default function Tag({ categories, posts, slug }) {
12 |   return (
13 |     <>
14 |       <section
15 |         className="blog-roll-nav"
16 |         id="blog-roll"
17 |       >
18 |         <div className="container">
19 |           <div className="row justify-content-center">
20 |             <div className="col-12">
21 |               <div className="section-title text-center">
22 |                 <h2>Blog Posts by Tag</h2>
23 |                 <ul className="breadcrumb-nav">
24 |                   <li>
25 |                     <Link href="/">Home</Link>
26 |                   </li>
27 |                   <li>
28 |                     <Link href="/blog">Blog</Link>
29 |                   </li>
30 |                   <li>Tag: {slug}</li>
31 |                 </ul>
32 |               </div>
33 |             </div>
34 |           </div>
35 |         </div>
36 |       </section>
37 | 
38 |       <section className="blog-posts">
39 |         <div className="container">
40 |           <div className="row justify-content-center">
41 |             <PostsList posts={posts || []} />
42 |             <aside className="col-12 col-lg-4">
43 |               <SearchWidget />
44 |               <CategoriesWidget categories={categories || []} />
45 |             </aside>
46 |           </div>
47 |         </div>
48 |       </section>
49 |     </>
50 |   );
51 | }
52 | 
53 | export async function getStaticProps({ params: { slug } }) {
54 |   try {
55 |     const blogPosts = (await getPostsData({ tag: slug })).posts;
56 |     const categories = await getCategories();
57 | 
58 |     return {
59 |       props: { categories, posts: camelcaseKeys(blogPosts), slug },
60 |       revalidate: 1,
61 |     };
62 |   } catch (e) {
63 |     return {
64 |       notFound: true,
65 |     };
66 |   }
67 | }
68 | 
69 | export async function getStaticPaths() {
70 |   const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
71 |   if (butterToken) {
72 |     try {
73 |       const tags = await getTags();
74 | 
75 |       return {
76 |         fallback: true,
77 |         paths: tags.map((tag) => `/blog/tag/${tag.slug}`),
78 |       };
79 |     } catch (e) {
80 |       console.error("Couldn't load tags.", e);
81 | 
82 |       return {
83 |         fallback: false,
84 |         paths: [],
85 |       };
86 |     }
87 |   }
88 | 
89 |   return {
90 |     fallback: false,
91 |     paths: [],
92 |   };
93 | }
94 | 


--------------------------------------------------------------------------------
/pages/landing-page/[slug].js:
--------------------------------------------------------------------------------
 1 | import camelcaseKeys from "camelcase-keys";
 2 | 
 3 | import ErrorPage from "next/error";
 4 | import Head from "next/head";
 5 | import { useRouter } from "next/router";
 6 | 
 7 | import { getLandingPage, getLandingPages, getPostsData } from "@/lib/api";
 8 | 
 9 | import Blog from "@/components/blog/blog";
10 | import LandingPageSection from "@/components/landing-page-sections/landing-page-section";
11 | import Preloader from "@/components/preloader";
12 | 
13 | export default function LandingPage({ blogPosts, page }) {
14 |   const router = useRouter();
15 |   if (router.isFallback) {
16 |     return <Preloader />;
17 |   }
18 | 
19 |   if (!page) {
20 |     return <ErrorPage statusCode={404} />;
21 |   }
22 | 
23 |   return (
24 |     <>
25 |       <Head>
26 |         <meta charSet="utf-8" />
27 |         <meta
28 |           content="ie=edge"
29 |           httpEquiv="x-ua-compatible"
30 |         />
31 |         <title>{page.fields.seo.title}</title>
32 |         <meta
33 |           content={page.fields.seo.description}
34 |           name="description"
35 |         />
36 |         <meta
37 |           content="width=device-width, initial-scale=1"
38 |           name="viewport"
39 |         />
40 |         <link
41 |           href="https://buttercms.com/static/v2/images/favicon.png"
42 |           rel="shortcut icon"
43 |           type="image/x-icon"
44 |         />
45 |       </Head>
46 | 
47 |       {page.fields.body.map(({ fields: sectionData, type }, index) => (
48 |         <LandingPageSection
49 |           key={index}
50 |           sectionData={sectionData}
51 |           type={type}
52 |         />
53 |       ))}
54 |       <Blog posts={blogPosts} />
55 |     </>
56 |   );
57 | }
58 | 
59 | export async function getStaticProps({ params }) {
60 |   try {
61 |     const page = await getLandingPage(params.slug);
62 |     const blogPosts = (await getPostsData({ page: 1, pageSize: 2 })).posts;
63 | 
64 |     return {
65 |       props: { blogPosts: camelcaseKeys(blogPosts), page: camelcaseKeys(page) },
66 |     };
67 |   } catch (e) {
68 |     console.error(`Couldn't load content for Landing page ${params.slug}.`, e);
69 | 
70 |     return {
71 |       notFound: true,
72 |     };
73 |   }
74 | }
75 | 
76 | export async function getStaticPaths() {
77 |   const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
78 | 
79 |   if (butterToken) {
80 |     try {
81 |       const landingPages = await getLandingPages();
82 | 
83 |       return {
84 |         fallback: true,
85 |         paths: landingPages.map((page) => `/landing-page/${page.slug}`),
86 |       };
87 |     } catch (e) {
88 |       console.error("Couldn't load content for Landing pages.", e);
89 |     }
90 | 
91 |     return {
92 |       fallback: "blocking",
93 |       paths: [],
94 |     };
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/pages/blog/category/[slug].js:
--------------------------------------------------------------------------------
 1 | import camelcaseKeys from "camelcase-keys";
 2 | 
 3 | import Link from "next/link";
 4 | 
 5 | import { getCategories, getPostsData } from "@/lib/api";
 6 | 
 7 | import CategoriesWidget from "@/components/blog/categories-widget";
 8 | import PostsList from "@/components/blog/posts-list";
 9 | import SearchWidget from "@/components/blog/search-widget";
10 | 
11 | export default function Category({ categories, posts, slug }) {
12 |   return (
13 |     <>
14 |       <section
15 |         className="blog-roll-nav"
16 |         id="blog-roll"
17 |       >
18 |         <div className="container">
19 |           <div className="row justify-content-center">
20 |             <div className="col-12">
21 |               <div className="section-title text-center">
22 |                 <h2>Blog Posts by Category</h2>
23 |                 <ul className="breadcrumb-nav">
24 |                   <li>
25 |                     <Link href="/">Home</Link>
26 |                   </li>
27 |                   <li>
28 |                     <Link href="/blog">Blog</Link>
29 |                   </li>
30 |                   <li>Category: {slug}</li>
31 |                 </ul>
32 |               </div>
33 |             </div>
34 |           </div>
35 |         </div>
36 |       </section>
37 | 
38 |       <section className="blog-posts">
39 |         <div className="container">
40 |           <div className="row justify-content-center">
41 |             <PostsList posts={posts || []} />
42 |             <aside className="col-12 col-lg-4">
43 |               <SearchWidget />
44 |               <CategoriesWidget categories={categories || []} />
45 |             </aside>
46 |           </div>
47 |         </div>
48 |       </section>
49 |     </>
50 |   );
51 | }
52 | 
53 | export async function getStaticProps({ params: { slug } }) {
54 |   try {
55 |     const [blogPosts, categories] = await Promise.all([
56 |       getPostsData({ category: slug }),
57 |       getCategories(),
58 |     ]);
59 | 
60 |     return {
61 |       props: { categories, posts: camelcaseKeys(blogPosts.posts), slug },
62 |       revalidate: 1,
63 |     };
64 |   } catch (e) {
65 |     return {
66 |       notFound: true,
67 |     };
68 |   }
69 | }
70 | 
71 | export async function getStaticPaths() {
72 |   const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
73 | 
74 |   if (butterToken) {
75 |     try {
76 |       const categories = await getCategories();
77 | 
78 |       return {
79 |         fallback: true,
80 |         paths: categories.map((category) => `/blog/category/${category.slug}`),
81 |       };
82 |     } catch (e) {
83 |       console.error("Couldn't load categories.", e);
84 | 
85 |       return {
86 |         fallback: false,
87 |         paths: [],
88 |       };
89 |     }
90 |   }
91 | 
92 |   return {
93 |     fallback: false,
94 |     paths: [],
95 |   };
96 | }
97 | 


--------------------------------------------------------------------------------
/components/footer-section.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function FooterSection({ mainMenu }) {
 4 |   const links = mainMenu.map((link) => ({
 5 |     ...link,
 6 |     url: link.url[0] === "#" ? `/${link.url}` : link.url,
 7 |   }));
 8 | 
 9 |   return (
10 |     <footer className="footer pt-120">
11 |       <div className="container">
12 |         <div className="row">
13 |           <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
14 |             <div className="footer-widget">
15 |               <div className="logo">
16 |                 <a href="/">
17 |                   <Image
18 |                     alt="logo"
19 |                     height={50}
20 |                     src="https://cdn.buttercms.com/PBral0NQGmmFzV0uG7Q6"
21 |                     style={{
22 |                       height: "auto",
23 |                       maxWidth: "100%",
24 |                     }}
25 |                     width={200}
26 |                   />
27 |                 </a>
28 |               </div>
29 |               <p className="desc">
30 |                 ButterCMS is your content backend. Build better with Butter.
31 |               </p>
32 |               <ul className="social-links">
33 |                 <li>
34 |                   <a href="#0">
35 |                     <i className="lni lni-facebook"></i>
36 |                   </a>
37 |                 </li>
38 |                 <li>
39 |                   <a href="#0">
40 |                     <i className="lni lni-linkedin"></i>
41 |                   </a>
42 |                 </li>
43 |                 <li>
44 |                   <a href="#0">
45 |                     <i className="lni lni-instagram"></i>
46 |                   </a>
47 |                 </li>
48 |                 <li>
49 |                   <a href="#0">
50 |                     <i className="lni lni-twitter"></i>
51 |                   </a>
52 |                 </li>
53 |               </ul>
54 |             </div>
55 |           </div>
56 |           <div className="col-xl-5 col-lg-4 col-md-12 col-sm-12 offset-xl-1">
57 |             <div className="footer-widget">
58 |               <h3>About Us</h3>
59 |               <ul className="links">
60 |                 {links.map((navLink) => (
61 |                   <li key={navLink.url}>
62 |                     <a href={navLink.url}>{navLink.label}</a>
63 |                   </li>
64 |                 ))}
65 |               </ul>
66 |             </div>
67 |           </div>
68 | 
69 |           <div className="col-xl-3 col-lg-4 col-md-6">
70 |             <div className="footer-widget">
71 |               <h3>Subscribe Newsletter</h3>
72 |               <form action="#">
73 |                 <input
74 |                   placeholder="Email"
75 |                   type="email"
76 |                 />
77 |                 <button className="main-btn btn-hover">Subscribe</button>
78 |               </form>
79 |             </div>
80 |           </div>
81 |         </div>
82 |       </div>
83 |     </footer>
84 |   );
85 | }
86 | 


--------------------------------------------------------------------------------
/components/main-menu/main-menu.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useState } from "react";
 2 | 
 3 | import MainMenuLink from "./main-menu-link";
 4 | 
 5 | export default function ManiMenu({ mainMenuLinks }) {
 6 |   const [activeMenuLink, setActiveMenuLink] = useState(
 7 |     mainMenuLinks.length ? mainMenuLinks[0].url : "",
 8 |   );
 9 | 
10 |   function highlightLinks() {
11 |     const sections = document.querySelectorAll(".page-scroll");
12 |     const scrollPos =
13 |       window.scrollY ||
14 |       document.documentElement.scrollTop ||
15 |       document.body.scrollTop;
16 | 
17 |     sections.forEach((currLink) => {
18 |       const val = currLink.getAttribute("href").slice(1);
19 |       if (val[0] !== "#") {
20 |         return;
21 |       }
22 |       const refElement = document.querySelector(val);
23 | 
24 |       if (!refElement) {
25 |         return;
26 |       }
27 | 
28 |       const scrollTopMinus = scrollPos + 73;
29 | 
30 |       if (
31 |         refElement.offsetTop <= scrollTopMinus &&
32 |         refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
33 |       ) {
34 |         setActiveMenuLink(val);
35 |       }
36 |     });
37 |   }
38 | 
39 |   useEffect(() => {
40 |     window.addEventListener("scroll", highlightLinks);
41 | 
42 |     return () => {
43 |       window.removeEventListener("scroll", highlightLinks);
44 |     };
45 |   }, []);
46 | 
47 |   const [isMenuActive, setMenuActive] = useState(false);
48 |   const menuLinksEl = useRef(null);
49 | 
50 |   function inactivateMenu() {
51 |     setMenuActive(false);
52 |     if (menuLinksEl.current) {
53 |       menuLinksEl.current.classList.remove("show");
54 |     }
55 |   }
56 | 
57 |   return (
58 |     <>
59 |       <button
60 |         aria-controls="navbarSupportedContent"
61 |         aria-expanded="false"
62 |         aria-label="Toggle navigation"
63 |         className={`navbar-toggler ${isMenuActive ? "active" : ""}`}
64 |         data-bs-target="#navbarSupportedContent"
65 |         data-bs-toggle="collapse"
66 |         onClick={() => setMenuActive(!isMenuActive)}
67 |         type="button"
68 |       >
69 |         <span className="toggler-icon"></span>
70 |         <span className="toggler-icon"></span>
71 |         <span className="toggler-icon"></span>
72 |       </button>
73 | 
74 |       <div
75 |         className="collapse navbar-collapse sub-menu-bar"
76 |         id="navbarSupportedContent"
77 |         ref={menuLinksEl}
78 |       >
79 |         <div className="ms-auto">
80 |           <ul
81 |             className="navbar-nav ms-auto"
82 |             id="nav"
83 |           >
84 |             {mainMenuLinks.map((navLink) => (
85 |               <MainMenuLink
86 |                 active={navLink.url === activeMenuLink}
87 |                 callbackOnClick={inactivateMenu}
88 |                 key={navLink.url}
89 |                 label={navLink.label}
90 |                 url={navLink.url}
91 |               />
92 |             ))}
93 |           </ul>
94 |         </div>
95 |       </div>
96 |     </>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
  1 | import App from "next/app";
  2 | import Head from "next/head";
  3 | import Router from "next/router";
  4 | 
  5 | import { useEffect, useState } from "react";
  6 | import { useRouter } from "next/router";
  7 | 
  8 | import FooterSection from "@/components/footer-section";
  9 | import HeaderSection from "@/components/header-section";
 10 | import Preloader from "@/components/preloader";
 11 | import ScrollToButtonButton from "@/components/scroll-to-top-button";
 12 | import { getMainMenu } from "@/lib/api";
 13 | 
 14 | import "bootstrap/dist/css/bootstrap.css";
 15 | 
 16 | import "@/css/lineicons.css";
 17 | import "@/css/tiny-slider.min.css";
 18 | import "@/css/main.css";
 19 | 
 20 | function MyApp({ Component, mainMenu, pageProps }) {
 21 |   const [isLoading, setIsLoading] = useState(false);
 22 |   const router = useRouter();
 23 |   const authToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
 24 | 
 25 |   useEffect(() => {
 26 |     import("bootstrap/dist/js/bootstrap.js");
 27 | 
 28 |     const showLoader = () => {
 29 |       setIsLoading(true);
 30 |     };
 31 | 
 32 |     const removeLoader = () => {
 33 |       setIsLoading(false);
 34 |     };
 35 | 
 36 |     Router.events.on("routeChangeStart", showLoader);
 37 |     Router.events.on("routeChangeComplete", removeLoader);
 38 |     Router.events.on("routeChangeError", removeLoader);
 39 | 
 40 |     return () => {
 41 |       Router.events.off("routeChangeStart", showLoader);
 42 |       Router.events.off("routeChangeComplete", removeLoader);
 43 |       Router.events.off("routeChangeError", removeLoader);
 44 |     };
 45 |   }, [authToken, router]);
 46 | 
 47 |   const pageLayout = authToken ? (
 48 |     <>
 49 |       <HeaderSection mainMenu={mainMenu} />
 50 |       <Component {...pageProps} />
 51 |       <FooterSection mainMenu={mainMenu} />
 52 |       <ScrollToButtonButton />
 53 |     </>
 54 |   ) : (
 55 |     <Component {...pageProps} />
 56 |   );
 57 | 
 58 |   return (
 59 |     <>
 60 |       <Head>
 61 |         <meta charSet="utf-8" />
 62 |         <meta
 63 |           content="ie=edge"
 64 |           httpEquiv="x-ua-compatible"
 65 |         />
 66 |         <title>
 67 |           Sample Landing Page with Components - powered by ButterCMS
 68 |         </title>
 69 |         <meta
 70 |           content="Sample Landing Page with Components - powered by ButterCMS"
 71 |           name="description"
 72 |         />
 73 |         <meta
 74 |           content="width=device-width, initial-scale=1"
 75 |           name="viewport"
 76 |         />
 77 |         <link
 78 |           href="https://buttercms.com/static/v2/images/favicon.png"
 79 |           rel="shortcut icon"
 80 |           type="image/x-icon"
 81 |         />
 82 |       </Head>
 83 | 
 84 |       {isLoading && <Preloader></Preloader>}
 85 | 
 86 |       {!isLoading && pageLayout}
 87 |     </>
 88 |   );
 89 | }
 90 | 
 91 | MyApp.getInitialProps = async (appContext) => {
 92 |   const appProps = await App.getInitialProps(appContext);
 93 |   const authToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
 94 |   let mainMenu = [];
 95 | 
 96 |   if (authToken) {
 97 |     try {
 98 |       mainMenu = await getMainMenu();
 99 |     } catch (e) {
100 |       console.error("Couldn't load main menu links.", e);
101 |     }
102 |   }
103 | 
104 |   return { ...appProps, mainMenu };
105 | };
106 | 
107 | export default MyApp;
108 | 


--------------------------------------------------------------------------------
/lib/api.js:
--------------------------------------------------------------------------------
  1 | import Butter from "buttercms";
  2 | 
  3 | let butter;
  4 | 
  5 | const previewSetting = process.env.PREVIEW;
  6 | // make preview mode by default
  7 | // eslint-disable-next-line prettier/prettier
  8 | const preview = previewSetting === "true" || previewSetting === undefined ? 1 : 0;
  9 | 
 10 | try {
 11 |   // Updated initialization with proper typing
 12 |   butter = Butter(process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY, { preview });
 13 | } catch (err) {
 14 |   console.log(err);
 15 | }
 16 | 
 17 | const defaultPageSize = 100;
 18 | const defaultPostCount = 10;
 19 | 
 20 | function getErrorMessage(err) {
 21 |   return err?.cause?.data?.detail || "Unexpected error occurred";
 22 | }
 23 | 
 24 | export async function getLandingPage(slug) {
 25 |   try {
 26 |     const page = await butter.page.retrieve("landing-page", slug);
 27 | 
 28 |     return page?.data?.data;
 29 |   } catch (err) {
 30 |     throw getErrorMessage(err);
 31 |   }
 32 | }
 33 | 
 34 | export async function getLandingPages() {
 35 |   let paginatedLandingPages = [];
 36 |   let currentPage = 1;
 37 |   while (currentPage) {
 38 |     const landingPagesData = await getLandingPagesData(currentPage);
 39 |     paginatedLandingPages.push(...landingPagesData.pages);
 40 |     currentPage = landingPagesData.nextPage;
 41 |   }
 42 | 
 43 |   return paginatedLandingPages;
 44 | }
 45 | 
 46 | async function getLandingPagesData(page, pageSize = defaultPageSize) {
 47 |   try {
 48 |     const params = {
 49 |       page,
 50 |       page_size: pageSize,
 51 |     };
 52 |     const response = await butter.page.list("landing-page", params);
 53 | 
 54 |     return {
 55 |       nextPage: response?.data?.meta.next_page,
 56 |       pages: response?.data?.data,
 57 |       prevPage: response?.data?.meta.previous_page,
 58 |     };
 59 |   } catch (err) {
 60 |     throw getErrorMessage(err);
 61 |   }
 62 | }
 63 | 
 64 | export async function getPostsData(
 65 |   { category, page, pageSize, tag } = { page: 1, pageSize: defaultPostCount },
 66 | ) {
 67 |   try {
 68 |     // https://buttercms.com/docs/api/node?javascript#get-your-blog-posts
 69 |     const params = {
 70 |       page: page || 1,
 71 |       page_size: pageSize || defaultPostCount,
 72 |     };
 73 | 
 74 |     if (tag) {
 75 |       params.tag_slug = tag;
 76 |     }
 77 | 
 78 |     if (category) {
 79 |       params.category_slug = category;
 80 |     }
 81 |     const response = await butter.post.list(params);
 82 | 
 83 |     return {
 84 |       nextPage: response?.data?.meta.next_page,
 85 |       posts: response?.data?.data,
 86 |       prevPage: response?.data?.meta.previous_page,
 87 |     };
 88 |   } catch (err) {
 89 |     throw getErrorMessage(err);
 90 |   }
 91 | }
 92 | 
 93 | export async function getPost(slug) {
 94 |   try {
 95 |     const response = await butter.post.retrieve(slug);
 96 | 
 97 |     return response?.data?.data;
 98 |   } catch (err) {
 99 |     throw getErrorMessage(err);
100 |   }
101 | }
102 | 
103 | export async function getMainMenu() {
104 |   try {
105 |     const response = await butter.content.retrieve(["navigation_menu"]);
106 | 
107 |     const mainMenu = response?.data?.data?.navigation_menu.find(
108 |       (menu) => menu.name == "Main menu",
109 |     );
110 | 
111 |     return mainMenu ? mainMenu.menu_items : [];
112 |   } catch (err) {
113 |     throw getErrorMessage(err);
114 |   }
115 | }
116 | 
117 | export async function getCategories() {
118 |   try {
119 |     const response = await butter.category.list();
120 | 
121 |     return response?.data?.data;
122 |   } catch (err) {
123 |     throw getErrorMessage(err);
124 |   }
125 | }
126 | 
127 | export async function getTags() {
128 |   try {
129 |     const response = await butter.tag.list();
130 | 
131 |     return response?.data?.data;
132 |   } catch (err) {
133 |     throw getErrorMessage(err);
134 |   }
135 | }
136 | 
137 | export async function searchPosts({ query }) {
138 |   try {
139 |     const response = await butter.post.search(query);
140 | 
141 |     return response?.data?.data;
142 |   } catch (err) {
143 |     throw getErrorMessage(err);
144 |   }
145 | }
146 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Next.js + ButterCMS Starter Project
 2 | ![recommended node version](https://img.shields.io/badge/node-v20-green)
 3 | 
 4 | Live Demo: https://nextjs-starter-buttercms.vercel.app/
 5 | 
 6 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fnextjs-starter-buttercms&env=NEXT_PUBLIC_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=nextjs-starter-buttercms&repo-name=nextjs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Next.js%20Starter&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=https%3A%2F%2Fnextjs-starter-buttercms.vercel.app%2F&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY&repository-name=nextjs-starter-buttercms)
 7 | 
 8 | [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ButterCMS/nextjs-starter-buttercms&env%5BNEXT_PUBLIC_BUTTER_CMS_API_KEY%5D=check%20https://buttercms.com/settings)
 9 | 
10 | This Next.js starter project fully integrates with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, all with a beautiful, custom theme with already-implemented search functionality. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.
11 | 
12 | A copy of this starter project can be easily and quickly deployed to Vercel or Heroku with the click of a button.
13 | ## 1) Installation
14 | 
15 | First, install the dependencies by cloning the repo and running one of the following commands, depending on your current setup:
16 | ```bash
17 | git clone https://github.com/ButterCMS/nextjs-starter-buttercms.git
18 | cd nextjs-starter-buttercms
19 | npm install # or yarn install
20 | ```
21 | 
22 | ## 2) Set API Token
23 | 
24 | To fetch your ButterCMS content, add your API token as an environment variable.
25 | 
26 | ```bash
27 | $ echo 'NEXT_PUBLIC_BUTTER_CMS_API_KEY=<Your API Token>' >> .env
28 | ```
29 | 
30 | ## 3) Run the local server
31 | 
32 | To view the app in a browser, you'll need to run the local development server:
33 | 
34 | ```bash
35 | npm run dev # or yarn dev
36 | ```
37 | 
38 | Congratulations! Your starter project is now live: [http://localhost:3000](http://localhost:3000).
39 | 
40 | ## 4) Deploy
41 | 
42 | Deploy your Butterized proof of concept app and spread your love of Butter, to either 
43 | Vercel, the creators of Next.js, or to Heroku. With the click of a button, you'll create a copy of our starter project in your Git provider account, instantly deploy it, and institute a full content workflow connected to your ButterCMS account. Smooth.
44 | 
45 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fnextjs-starter-buttercms&env=NEXT_PUBLIC_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=nextjs-starter-buttercms&repo-name=nextjs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Next.js%20Starter&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=https%3A%2F%2Fnextjs-starter-buttercms.vercel.app%2F&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY&repository-name=nextjs-starter-buttercms)
46 | 
47 | [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ButterCMS/nextjs-starter-buttercms&env%5BNEXT_PUBLIC_BUTTER_CMS_API_KEY%5D=check%20https://buttercms.com/settings)
48 | 
49 | ## 5) Previewing
50 | 
51 | Your starter project is automatically configured to show draft changes saved in your Butter account when run locally or deployed to a hosting provider. To disable this behavior, set the following value in your .env file: PREVIEW=false.
52 | 


--------------------------------------------------------------------------------
/pages/blog/[slug].js:
--------------------------------------------------------------------------------
  1 | import camelcaseKeys from "camelcase-keys";
  2 | 
  3 | import ErrorPage from "next/error";
  4 | import Head from "next/head";
  5 | import Image from "next/image";
  6 | import Link from "next/link";
  7 | 
  8 | import { getCategories, getPost, getPostsData } from "@/lib/api";
  9 | 
 10 | import { useRouter } from "next/router";
 11 | 
 12 | import AuthorCard from "@/components/author-card";
 13 | import CategoriesWidget from "@/components/blog/categories-widget";
 14 | import HumanDate from "@/components/human-date";
 15 | import Preloader from "@/components/preloader";
 16 | import SearchWidget from "@/components/blog/search-widget";
 17 | 
 18 | export default function BlogPost({ categories, post }) {
 19 |   const router = useRouter();
 20 |   if (router.isFallback) {
 21 |     return <Preloader />;
 22 |   }
 23 | 
 24 |   if (!post) {
 25 |     return <ErrorPage statusCode={404} />;
 26 |   }
 27 | 
 28 |   return (
 29 |     <>
 30 |       <Head>
 31 |         <meta charSet="utf-8" />
 32 |         <meta
 33 |           content="ie=edge"
 34 |           httpEquiv="x-ua-compatible"
 35 |         />
 36 |         <title>{post.seoTitle}</title>
 37 |         <meta
 38 |           content={post.metaDescription}
 39 |           name="description"
 40 |         />
 41 |         <meta
 42 |           content="width=device-width, initial-scale=1"
 43 |           name="viewport"
 44 |         />
 45 |         <link
 46 |           href="https://buttercms.com/static/v2/images/favicon.png"
 47 |           rel="shortcut icon"
 48 |           type="image/x-icon"
 49 |         />
 50 | 
 51 |         <meta
 52 |           content="website"
 53 |           property="og:type"
 54 |         />
 55 |         <meta
 56 |           content={post.url}
 57 |           property="og:url"
 58 |         />
 59 |         <meta
 60 |           content={post.seoTitle}
 61 |           property="og:title"
 62 |         />
 63 |         <meta
 64 |           content={post.featuredImage}
 65 |           property="og:image"
 66 |         />
 67 |         <meta
 68 |           content={post.metaDescription}
 69 |           property="og:description"
 70 |         />
 71 |         <meta
 72 |           content="@ButterCMS"
 73 |           name="twitter:site"
 74 |         />
 75 |         <meta
 76 |           content="@ButterCMS"
 77 |           name="twitter:creator"
 78 |         />
 79 |         <meta
 80 |           content="ButterCMS Blog"
 81 |           name="twitter:title"
 82 |         />
 83 |         <meta
 84 |           content={post.metaDescription}
 85 |           name="twitter:description"
 86 |         />
 87 |       </Head>
 88 |       <section
 89 |         className="single-post-nav"
 90 |         id="blog-header"
 91 |       >
 92 |         <div className="container">
 93 |           <div className="row justify-content-center">
 94 |             <div className="col-12">
 95 |               <div className="section-title text-center">
 96 |                 <h2>{post.title}</h2>
 97 |                 <ul className="breadcrumb-nav">
 98 |                   <li>
 99 |                     <Link href="/">Home</Link>
100 |                   </li>
101 |                   <li>
102 |                     <Link href="/blog">Blog</Link>
103 |                   </li>
104 |                   <li>{post.title}</li>
105 |                 </ul>
106 |               </div>
107 |             </div>
108 |           </div>
109 |         </div>
110 |       </section>
111 | 
112 |       <section className="blog-post">
113 |         <div className="container">
114 |           <div className="row justify-content-center">
115 |             <div className="col-lg-8 col-md-12 col-12">
116 |               <div className="single-post">
117 |                 <div className="single-post-meta">
118 |                   <h2 className="single-post-header">{post.title}</h2>
119 |                   <ul className="single-post-meta-info">
120 |                     <li>
121 |                       <AuthorCard author={post.author} />
122 |                     </li>
123 |                     <li>
124 |                       <a>
125 |                         <i className="lni lni-calendar"></i>{" "}
126 |                         <HumanDate dateString={post.published} />
127 |                       </a>
128 |                     </li>
129 |                     {post.tags.map((tag) => (
130 |                       <li key={tag.slug}>
131 |                         <Link href={`/blog/tag/${tag.slug}`}>
132 |                           <i className="lni lni-tag"></i> {tag.name}
133 |                         </Link>
134 |                       </li>
135 |                     ))}
136 |                   </ul>
137 |                 </div>
138 |                 {post.featuredImage && (
139 |                   <div className="single-post-thumbnail">
140 |                     <Image
141 |                       alt={post.featuredImageAlt}
142 |                       fill
143 |                       sizes="100vw"
144 |                       src={post.featuredImage}
145 |                       style={{
146 |                         objectFit: "cover",
147 |                       }}
148 |                     />
149 |                   </div>
150 |                 )}
151 |                 <div
152 |                   className="single-post-body prose"
153 |                   dangerouslySetInnerHTML={{ __html: post.body }}
154 |                 ></div>
155 |               </div>
156 |             </div>
157 | 
158 |             <aside className="col-12 col-lg-4">
159 |               <SearchWidget />
160 |               <CategoriesWidget categories={categories || []} />
161 |             </aside>
162 |           </div>
163 |         </div>
164 |       </section>
165 |     </>
166 |   );
167 | }
168 | 
169 | export async function getStaticProps({ params }) {
170 |   try {
171 |     const [post, categories] = await Promise.all([
172 |       getPost(params.slug),
173 |       getCategories(),
174 |     ]);
175 |     return { props: { categories, post: camelcaseKeys(post) } };
176 |   } catch (e) {
177 |     console.error("Couldn't load post or categories data.", e);
178 | 
179 |     return {
180 |       notFound: true,
181 |     };
182 |   }
183 | }
184 | 
185 | export async function getStaticPaths() {
186 |   const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
187 | 
188 |   if (butterToken) {
189 |     try {
190 |       const posts = (await getPostsData()).posts;
191 | 
192 |       return {
193 |         fallback: true,
194 |         paths: posts.map((post) => `/blog/${post.slug}`),
195 |       };
196 |     } catch (e) {
197 |       console.error("Couldn't load posts.", e);
198 |     }
199 |   }
200 | 
201 |   return {
202 |     fallback: false,
203 |     paths: [],
204 |   };
205 | }
206 | 


--------------------------------------------------------------------------------
/css/lineicons.css:
--------------------------------------------------------------------------------
   1 | /*--------------------------------
   2 | 
   3 | LineIcons Web Font
   4 | Author: lineicons.com
   5 | 
   6 | -------------------------------- */
   7 | @font-face {
   8 |   font-family: 'LineIcons';
   9 |   src: url('fonts/LineIcons.eot');
  10 |   src: url('fonts/LineIcons.eot') format('embedded-opentype'), url('fonts/LineIcons.woff2') format('woff2'), url('fonts/LineIcons.woff') format('woff'), url('fonts/LineIcons.ttf') format('truetype'), url('fonts/LineIcons.svg') format('svg');
  11 |   font-weight: normal;
  12 |   font-style: normal;
  13 | }
  14 | /*------------------------
  15 | 	base class definition
  16 | -------------------------*/
  17 | .lni {
  18 |   display: inline-block;
  19 |   font: normal normal normal 1em/1 'LineIcons';
  20 |   color: inherit;
  21 |   flex-shrink: 0;
  22 |   speak: none;
  23 |   text-transform: none;
  24 |   line-height: 1;
  25 |   vertical-align: -.125em;
  26 |   /* Better Font Rendering */
  27 |   -webkit-font-smoothing: antialiased;
  28 |   -moz-osx-font-smoothing: grayscale;
  29 | }
  30 | /*------------------------
  31 |   change icon size
  32 | -------------------------*/
  33 | /* relative units */
  34 | .lni-sm {
  35 |   font-size: 0.8em;
  36 | }
  37 | .lni-lg {
  38 |   font-size: 1.2em;
  39 | }
  40 | /* absolute units */
  41 | .lni-16 {
  42 |   font-size: 16px;
  43 | }
  44 | .lni-32 {
  45 |   font-size: 32px;
  46 | }
  47 | 
  48 | /*------------------------
  49 |   spinning icons
  50 | -------------------------*/
  51 | .lni-is-spinning {
  52 |   animation: lni-spin 1s infinite linear;
  53 | }
  54 | @keyframes lni-spin {
  55 |   0% {
  56 |     transform: rotate(0deg);
  57 |   }
  58 |   100% {
  59 |     transform: rotate(360deg);
  60 |   }
  61 | }
  62 | /*------------------------
  63 |   rotated/flipped icons
  64 | -------------------------*/
  65 | .lni-rotate-90 {
  66 |   transform: rotate(90deg);
  67 | }
  68 | .lni-rotate-180 {
  69 |   transform: rotate(180deg);
  70 | }
  71 | .lni-rotate-270 {
  72 |   transform: rotate(270deg);
  73 | }
  74 | .lni-flip-y {
  75 |   transform: scaleY(-1);
  76 | }
  77 | .lni-flip-x {
  78 |   transform: scaleX(-1);
  79 | }
  80 | /*------------------------
  81 | 	icons
  82 | -------------------------*/
  83 | 
  84 | .lni-500px::before {
  85 |   content: "\ea03";
  86 | }
  87 | 
  88 | .lni-add-files::before {
  89 |   content: "\ea01";
  90 | }
  91 | 
  92 | .lni-adobe::before {
  93 |   content: "\ea06";
  94 | }
  95 | 
  96 | .lni-agenda::before {
  97 |   content: "\ea02";
  98 | }
  99 | 
 100 | .lni-airbnb::before {
 101 |   content: "\ea07";
 102 | }
 103 | 
 104 | .lni-alarm-clock::before {
 105 |   content: "\ea08";
 106 | }
 107 | 
 108 | .lni-alarm::before {
 109 |   content: "\ea04";
 110 | }
 111 | 
 112 | .lni-amazon-original::before {
 113 |   content: "\ea05";
 114 | }
 115 | 
 116 | .lni-amazon-pay::before {
 117 |   content: "\ea09";
 118 | }
 119 | 
 120 | .lni-amazon::before {
 121 |   content: "\ea0a";
 122 | }
 123 | 
 124 | .lni-ambulance::before {
 125 |   content: "\ea0b";
 126 | }
 127 | 
 128 | .lni-amex::before {
 129 |   content: "\ea0c";
 130 | }
 131 | 
 132 | .lni-anchor::before {
 133 |   content: "\ea0d";
 134 | }
 135 | 
 136 | .lni-android-original::before {
 137 |   content: "\ea0e";
 138 | }
 139 | 
 140 | .lni-android::before {
 141 |   content: "\ea0f";
 142 | }
 143 | 
 144 | .lni-angellist::before {
 145 |   content: "\ea10";
 146 | }
 147 | 
 148 | .lni-angle-double-down::before {
 149 |   content: "\ea11";
 150 | }
 151 | 
 152 | .lni-angle-double-left::before {
 153 |   content: "\ea12";
 154 | }
 155 | 
 156 | .lni-angle-double-right::before {
 157 |   content: "\ea13";
 158 | }
 159 | 
 160 | .lni-angle-double-up::before {
 161 |   content: "\ea14";
 162 | }
 163 | 
 164 | .lni-angular::before {
 165 |   content: "\ea15";
 166 | }
 167 | 
 168 | .lni-apartment::before {
 169 |   content: "\ea16";
 170 | }
 171 | 
 172 | .lni-app-store::before {
 173 |   content: "\ea17";
 174 | }
 175 | 
 176 | .lni-apple-music::before {
 177 |   content: "\ea18";
 178 | }
 179 | 
 180 | .lni-apple-pay::before {
 181 |   content: "\ea19";
 182 | }
 183 | 
 184 | .lni-apple::before {
 185 |   content: "\ea1a";
 186 | }
 187 | 
 188 | .lni-archive::before {
 189 |   content: "\ea1f";
 190 | }
 191 | 
 192 | .lni-arrow-down-circle::before {
 193 |   content: "\ea1b";
 194 | }
 195 | 
 196 | .lni-arrow-down::before {
 197 |   content: "\ea1c";
 198 | }
 199 | 
 200 | .lni-arrow-left-circle::before {
 201 |   content: "\ea1d";
 202 | }
 203 | 
 204 | .lni-arrow-left::before {
 205 |   content: "\ea1e";
 206 | }
 207 | 
 208 | .lni-arrow-right-circle::before {
 209 |   content: "\ea20";
 210 | }
 211 | 
 212 | .lni-arrow-right::before {
 213 |   content: "\ea21";
 214 | }
 215 | 
 216 | .lni-arrow-top-left::before {
 217 |   content: "\ea22";
 218 | }
 219 | 
 220 | .lni-arrow-top-right::before {
 221 |   content: "\ea23";
 222 | }
 223 | 
 224 | .lni-arrow-up-circle::before {
 225 |   content: "\ea24";
 226 | }
 227 | 
 228 | .lni-arrow-up::before {
 229 |   content: "\ea25";
 230 | }
 231 | 
 232 | .lni-arrows-horizontal::before {
 233 |   content: "\ea26";
 234 | }
 235 | 
 236 | .lni-arrows-vertical::before {
 237 |   content: "\ea27";
 238 | }
 239 | 
 240 | .lni-atlassian::before {
 241 |   content: "\ea28";
 242 | }
 243 | 
 244 | .lni-aws::before {
 245 |   content: "\ea29";
 246 | }
 247 | 
 248 | .lni-azure::before {
 249 |   content: "\ea2a";
 250 | }
 251 | 
 252 | .lni-backward::before {
 253 |   content: "\ea2b";
 254 | }
 255 | 
 256 | .lni-baloon::before {
 257 |   content: "\ea2c";
 258 | }
 259 | 
 260 | .lni-ban::before {
 261 |   content: "\ea2d";
 262 | }
 263 | 
 264 | .lni-bar-chart::before {
 265 |   content: "\ea2e";
 266 | }
 267 | 
 268 | .lni-basketball::before {
 269 |   content: "\ea2f";
 270 | }
 271 | 
 272 | .lni-behance-original::before {
 273 |   content: "\ea30";
 274 | }
 275 | 
 276 | .lni-behance::before {
 277 |   content: "\ea31";
 278 | }
 279 | 
 280 | .lni-bi-cycle::before {
 281 |   content: "\ea32";
 282 | }
 283 | 
 284 | .lni-bitbucket::before {
 285 |   content: "\ea33";
 286 | }
 287 | 
 288 | .lni-bitcoin::before {
 289 |   content: "\ea34";
 290 | }
 291 | 
 292 | .lni-blackboard::before {
 293 |   content: "\ea35";
 294 | }
 295 | 
 296 | .lni-blogger::before {
 297 |   content: "\ea36";
 298 | }
 299 | 
 300 | .lni-bluetooth-original::before {
 301 |   content: "\ea37";
 302 | }
 303 | 
 304 | .lni-bluetooth::before {
 305 |   content: "\ea38";
 306 | }
 307 | 
 308 | .lni-bold::before {
 309 |   content: "\ea39";
 310 | }
 311 | 
 312 | .lni-bolt-alt::before {
 313 |   content: "\ea3a";
 314 | }
 315 | 
 316 | .lni-bolt::before {
 317 |   content: "\ea40";
 318 | }
 319 | 
 320 | .lni-book::before {
 321 |   content: "\ea3b";
 322 | }
 323 | 
 324 | .lni-bookmark-alt::before {
 325 |   content: "\ea3c";
 326 | }
 327 | 
 328 | .lni-bookmark::before {
 329 |   content: "\ea3d";
 330 | }
 331 | 
 332 | .lni-bootstrap::before {
 333 |   content: "\ea3e";
 334 | }
 335 | 
 336 | .lni-bricks::before {
 337 |   content: "\ea3f";
 338 | }
 339 | 
 340 | .lni-bridge::before {
 341 |   content: "\ea41";
 342 | }
 343 | 
 344 | .lni-briefcase::before {
 345 |   content: "\ea42";
 346 | }
 347 | 
 348 | .lni-brush-alt::before {
 349 |   content: "\ea43";
 350 | }
 351 | 
 352 | .lni-brush::before {
 353 |   content: "\ea44";
 354 | }
 355 | 
 356 | .lni-btc::before {
 357 |   content: "\ea45";
 358 | }
 359 | 
 360 | .lni-bubble::before {
 361 |   content: "\ea46";
 362 | }
 363 | 
 364 | .lni-bug::before {
 365 |   content: "\ea47";
 366 | }
 367 | 
 368 | .lni-bulb::before {
 369 |   content: "\ea48";
 370 | }
 371 | 
 372 | .lni-bullhorn::before {
 373 |   content: "\ea49";
 374 | }
 375 | 
 376 | .lni-burger::before {
 377 |   content: "\ea4a";
 378 | }
 379 | 
 380 | .lni-bus::before {
 381 |   content: "\ea4b";
 382 | }
 383 | 
 384 | .lni-cake::before {
 385 |   content: "\ea4c";
 386 | }
 387 | 
 388 | .lni-calculator::before {
 389 |   content: "\ea4d";
 390 | }
 391 | 
 392 | .lni-calendar::before {
 393 |   content: "\ea4e";
 394 | }
 395 | 
 396 | .lni-camera::before {
 397 |   content: "\ea4f";
 398 | }
 399 | 
 400 | .lni-candy-cane::before {
 401 |   content: "\ea50";
 402 | }
 403 | 
 404 | .lni-candy::before {
 405 |   content: "\ea51";
 406 | }
 407 | 
 408 | .lni-capsule::before {
 409 |   content: "\ea52";
 410 | }
 411 | 
 412 | .lni-car-alt::before {
 413 |   content: "\ea53";
 414 | }
 415 | 
 416 | .lni-car::before {
 417 |   content: "\ea54";
 418 | }
 419 | 
 420 | .lni-caravan::before {
 421 |   content: "\ea55";
 422 | }
 423 | 
 424 | .lni-cart-full::before {
 425 |   content: "\ea56";
 426 | }
 427 | 
 428 | .lni-cart::before {
 429 |   content: "\ea57";
 430 | }
 431 | 
 432 | .lni-certificate::before {
 433 |   content: "\ea58";
 434 | }
 435 | 
 436 | .lni-check-box::before {
 437 |   content: "\ea59";
 438 | }
 439 | 
 440 | .lni-checkmark-circle::before {
 441 |   content: "\ea5a";
 442 | }
 443 | 
 444 | .lni-checkmark::before {
 445 |   content: "\ea5b";
 446 | }
 447 | 
 448 | .lni-chef-hat::before {
 449 |   content: "\ea5c";
 450 | }
 451 | 
 452 | .lni-chevron-down-circle::before {
 453 |   content: "\ea5d";
 454 | }
 455 | 
 456 | .lni-chevron-down::before {
 457 |   content: "\ea5e";
 458 | }
 459 | 
 460 | .lni-chevron-left-circle::before {
 461 |   content: "\ea5f";
 462 | }
 463 | 
 464 | .lni-chevron-left::before {
 465 |   content: "\ea60";
 466 | }
 467 | 
 468 | .lni-chevron-right-circle::before {
 469 |   content: "\ea61";
 470 | }
 471 | 
 472 | .lni-chevron-right::before {
 473 |   content: "\ea62";
 474 | }
 475 | 
 476 | .lni-chevron-up-circle::before {
 477 |   content: "\ea63";
 478 | }
 479 | 
 480 | .lni-chevron-up::before {
 481 |   content: "\ea64";
 482 | }
 483 | 
 484 | .lni-chrome::before {
 485 |   content: "\ea65";
 486 | }
 487 | 
 488 | .lni-chromecast::before {
 489 |   content: "\ea66";
 490 | }
 491 | 
 492 | .lni-circle-minus::before {
 493 |   content: "\ea67";
 494 | }
 495 | 
 496 | .lni-circle-plus::before {
 497 |   content: "\ea68";
 498 | }
 499 | 
 500 | .lni-clipboard::before {
 501 |   content: "\ea69";
 502 | }
 503 | 
 504 | .lni-close::before {
 505 |   content: "\ea6a";
 506 | }
 507 | 
 508 | .lni-cloud-check::before {
 509 |   content: "\ea6b";
 510 | }
 511 | 
 512 | .lni-cloud-download::before {
 513 |   content: "\ea6c";
 514 | }
 515 | 
 516 | .lni-cloud-network::before {
 517 |   content: "\ea6d";
 518 | }
 519 | 
 520 | .lni-cloud-sync::before {
 521 |   content: "\ea6e";
 522 | }
 523 | 
 524 | .lni-cloud-upload::before {
 525 |   content: "\ea6f";
 526 | }
 527 | 
 528 | .lni-cloud::before {
 529 |   content: "\ea70";
 530 | }
 531 | 
 532 | .lni-cloudflare::before {
 533 |   content: "\ea71";
 534 | }
 535 | 
 536 | .lni-cloudy-sun::before {
 537 |   content: "\ea72";
 538 | }
 539 | 
 540 | .lni-code-alt::before {
 541 |   content: "\ea73";
 542 | }
 543 | 
 544 | .lni-code::before {
 545 |   content: "\ea74";
 546 | }
 547 | 
 548 | .lni-codepen::before {
 549 |   content: "\ea75";
 550 | }
 551 | 
 552 | .lni-coffee-cup::before {
 553 |   content: "\ea76";
 554 | }
 555 | 
 556 | .lni-cog::before {
 557 |   content: "\ea77";
 558 | }
 559 | 
 560 | .lni-cogs::before {
 561 |   content: "\ea78";
 562 | }
 563 | 
 564 | .lni-coin::before {
 565 |   content: "\ea79";
 566 | }
 567 | 
 568 | .lni-comments-alt::before {
 569 |   content: "\ea7a";
 570 | }
 571 | 
 572 | .lni-comments-reply::before {
 573 |   content: "\ea7b";
 574 | }
 575 | 
 576 | .lni-comments::before {
 577 |   content: "\ea7c";
 578 | }
 579 | 
 580 | .lni-compass::before {
 581 |   content: "\ea7d";
 582 | }
 583 | 
 584 | .lni-connectdevelop::before {
 585 |   content: "\ea7e";
 586 | }
 587 | 
 588 | .lni-construction-hammer::before {
 589 |   content: "\ea7f";
 590 | }
 591 | 
 592 | .lni-construction::before {
 593 |   content: "\ea80";
 594 | }
 595 | 
 596 | .lni-consulting::before {
 597 |   content: "\ea81";
 598 | }
 599 | 
 600 | .lni-control-panel::before {
 601 |   content: "\ea82";
 602 | }
 603 | 
 604 | .lni-cool::before {
 605 |   content: "\ea83";
 606 | }
 607 | 
 608 | .lni-cpanel::before {
 609 |   content: "\ea84";
 610 | }
 611 | 
 612 | .lni-creative-commons::before {
 613 |   content: "\ea85";
 614 | }
 615 | 
 616 | .lni-credit-cards::before {
 617 |   content: "\ea86";
 618 | }
 619 | 
 620 | .lni-crop::before {
 621 |   content: "\ea87";
 622 | }
 623 | 
 624 | .lni-cross-circle::before {
 625 |   content: "\ea88";
 626 | }
 627 | 
 628 | .lni-crown::before {
 629 |   content: "\ea89";
 630 | }
 631 | 
 632 | .lni-css3::before {
 633 |   content: "\ea8a";
 634 | }
 635 | 
 636 | .lni-cup::before {
 637 |   content: "\ea8b";
 638 | }
 639 | 
 640 | .lni-customer::before {
 641 |   content: "\ea8c";
 642 | }
 643 | 
 644 | .lni-cut::before {
 645 |   content: "\ea8d";
 646 | }
 647 | 
 648 | .lni-dashboard::before {
 649 |   content: "\ea8e";
 650 | }
 651 | 
 652 | .lni-database::before {
 653 |   content: "\ea8f";
 654 | }
 655 | 
 656 | .lni-delivery::before {
 657 |   content: "\ea90";
 658 | }
 659 | 
 660 | .lni-dev::before {
 661 |   content: "\ea91";
 662 | }
 663 | 
 664 | .lni-diamond-alt::before {
 665 |   content: "\ea92";
 666 | }
 667 | 
 668 | .lni-diamond::before {
 669 |   content: "\ea93";
 670 | }
 671 | 
 672 | .lni-digitalocean::before {
 673 |   content: "\ea94";
 674 | }
 675 | 
 676 | .lni-diners-club::before {
 677 |   content: "\ea95";
 678 | }
 679 | 
 680 | .lni-dinner::before {
 681 |   content: "\ea96";
 682 | }
 683 | 
 684 | .lni-direction-alt::before {
 685 |   content: "\ea97";
 686 | }
 687 | 
 688 | .lni-direction-ltr::before {
 689 |   content: "\ea98";
 690 | }
 691 | 
 692 | .lni-direction-rtl::before {
 693 |   content: "\ea99";
 694 | }
 695 | 
 696 | .lni-direction::before {
 697 |   content: "\ea9a";
 698 | }
 699 | 
 700 | .lni-discord::before {
 701 |   content: "\ea9b";
 702 | }
 703 | 
 704 | .lni-discover::before {
 705 |   content: "\ea9c";
 706 | }
 707 | 
 708 | .lni-display-alt::before {
 709 |   content: "\ea9d";
 710 | }
 711 | 
 712 | .lni-display::before {
 713 |   content: "\ea9e";
 714 | }
 715 | 
 716 | .lni-docker::before {
 717 |   content: "\ea9f";
 718 | }
 719 | 
 720 | .lni-dollar::before {
 721 |   content: "\eaa0";
 722 | }
 723 | 
 724 | .lni-domain::before {
 725 |   content: "\eaa1";
 726 | }
 727 | 
 728 | .lni-download::before {
 729 |   content: "\eaa2";
 730 | }
 731 | 
 732 | .lni-dribbble::before {
 733 |   content: "\eaa3";
 734 | }
 735 | 
 736 | .lni-drop::before {
 737 |   content: "\eaa4";
 738 | }
 739 | 
 740 | .lni-dropbox-original::before {
 741 |   content: "\eaa5";
 742 | }
 743 | 
 744 | .lni-dropbox::before {
 745 |   content: "\eaa6";
 746 | }
 747 | 
 748 | .lni-drupal-original::before {
 749 |   content: "\eaa7";
 750 | }
 751 | 
 752 | .lni-drupal::before {
 753 |   content: "\eaa8";
 754 | }
 755 | 
 756 | .lni-dumbbell::before {
 757 |   content: "\eaa9";
 758 | }
 759 | 
 760 | .lni-edge::before {
 761 |   content: "\eaaa";
 762 | }
 763 | 
 764 | .lni-empty-file::before {
 765 |   content: "\eaab";
 766 | }
 767 | 
 768 | .lni-enter::before {
 769 |   content: "\eaac";
 770 | }
 771 | 
 772 | .lni-envato::before {
 773 |   content: "\eaad";
 774 | }
 775 | 
 776 | .lni-envelope::before {
 777 |   content: "\eaae";
 778 | }
 779 | 
 780 | .lni-eraser::before {
 781 |   content: "\eaaf";
 782 | }
 783 | 
 784 | .lni-euro::before {
 785 |   content: "\eab0";
 786 | }
 787 | 
 788 | .lni-exit-down::before {
 789 |   content: "\eab1";
 790 | }
 791 | 
 792 | .lni-exit-up::before {
 793 |   content: "\eab2";
 794 | }
 795 | 
 796 | .lni-exit::before {
 797 |   content: "\eab3";
 798 | }
 799 | 
 800 | .lni-eye::before {
 801 |   content: "\eab4";
 802 | }
 803 | 
 804 | .lni-facebook-filled::before {
 805 |   content: "\eab5";
 806 | }
 807 | 
 808 | .lni-facebook-messenger::before {
 809 |   content: "\eab6";
 810 | }
 811 | 
 812 | .lni-facebook-original::before {
 813 |   content: "\eab7";
 814 | }
 815 | 
 816 | .lni-facebook-oval::before {
 817 |   content: "\eab8";
 818 | }
 819 | 
 820 | .lni-facebook::before {
 821 |   content: "\eab9";
 822 | }
 823 | 
 824 | .lni-figma::before {
 825 |   content: "\eaba";
 826 | }
 827 | 
 828 | .lni-files::before {
 829 |   content: "\eabb";
 830 | }
 831 | 
 832 | .lni-firefox-original::before {
 833 |   content: "\eabc";
 834 | }
 835 | 
 836 | .lni-firefox::before {
 837 |   content: "\eabd";
 838 | }
 839 | 
 840 | .lni-fireworks::before {
 841 |   content: "\eabe";
 842 | }
 843 | 
 844 | .lni-first-aid::before {
 845 |   content: "\eabf";
 846 | }
 847 | 
 848 | .lni-flag-alt::before {
 849 |   content: "\eac0";
 850 | }
 851 | 
 852 | .lni-flag::before {
 853 |   content: "\eac1";
 854 | }
 855 | 
 856 | .lni-flags::before {
 857 |   content: "\eac2";
 858 | }
 859 | 
 860 | .lni-flickr::before {
 861 |   content: "\eac3";
 862 | }
 863 | 
 864 | .lni-flower::before {
 865 |   content: "\eac4";
 866 | }
 867 | 
 868 | .lni-folder::before {
 869 |   content: "\eac5";
 870 | }
 871 | 
 872 | .lni-forward::before {
 873 |   content: "\eac6";
 874 | }
 875 | 
 876 | .lni-frame-expand::before {
 877 |   content: "\eac7";
 878 | }
 879 | 
 880 | .lni-fresh-juice::before {
 881 |   content: "\eac8";
 882 | }
 883 | 
 884 | .lni-friendly::before {
 885 |   content: "\eac9";
 886 | }
 887 | 
 888 | .lni-full-screen::before {
 889 |   content: "\eaca";
 890 | }
 891 | 
 892 | .lni-funnel::before {
 893 |   content: "\eacb";
 894 | }
 895 | 
 896 | .lni-gallery::before {
 897 |   content: "\eacc";
 898 | }
 899 | 
 900 | .lni-game::before {
 901 |   content: "\eacd";
 902 | }
 903 | 
 904 | .lni-gatsby::before {
 905 |   content: "\eace";
 906 | }
 907 | 
 908 | .lni-gift::before {
 909 |   content: "\eacf";
 910 | }
 911 | 
 912 | .lni-git::before {
 913 |   content: "\ead0";
 914 | }
 915 | 
 916 | .lni-github-original::before {
 917 |   content: "\ead1";
 918 | }
 919 | 
 920 | .lni-github::before {
 921 |   content: "\ead2";
 922 | }
 923 | 
 924 | .lni-goodreads::before {
 925 |   content: "\ead3";
 926 | }
 927 | 
 928 | .lni-google-drive::before {
 929 |   content: "\ead4";
 930 | }
 931 | 
 932 | .lni-google-pay::before {
 933 |   content: "\ead5";
 934 | }
 935 | 
 936 | .lni-google-wallet::before {
 937 |   content: "\ead6";
 938 | }
 939 | 
 940 | .lni-google::before {
 941 |   content: "\ead7";
 942 | }
 943 | 
 944 | .lni-graduation::before {
 945 |   content: "\ead8";
 946 | }
 947 | 
 948 | .lni-graph::before {
 949 |   content: "\ead9";
 950 | }
 951 | 
 952 | .lni-grid-alt::before {
 953 |   content: "\eada";
 954 | }
 955 | 
 956 | .lni-grid::before {
 957 |   content: "\eadb";
 958 | }
 959 | 
 960 | .lni-grow::before {
 961 |   content: "\eadc";
 962 | }
 963 | 
 964 | .lni-hacker-news::before {
 965 |   content: "\eadd";
 966 | }
 967 | 
 968 | .lni-hammer::before {
 969 |   content: "\eade";
 970 | }
 971 | 
 972 | .lni-hand::before {
 973 |   content: "\eadf";
 974 | }
 975 | 
 976 | .lni-handshake::before {
 977 |   content: "\eae0";
 978 | }
 979 | 
 980 | .lni-happy::before {
 981 |   content: "\eae1";
 982 | }
 983 | 
 984 | .lni-harddrive::before {
 985 |   content: "\eae2";
 986 | }
 987 | 
 988 | .lni-headphone-alt::before {
 989 |   content: "\eae3";
 990 | }
 991 | 
 992 | .lni-headphone::before {
 993 |   content: "\eae4";
 994 | }
 995 | 
 996 | .lni-heart-filled::before {
 997 |   content: "\eae5";
 998 | }
 999 | 
1000 | .lni-heart-monitor::before {
1001 |   content: "\eae6";
1002 | }
1003 | 
1004 | .lni-heart::before {
1005 |   content: "\eae7";
1006 | }
1007 | 
1008 | .lni-helicopter::before {
1009 |   content: "\eae8";
1010 | }
1011 | 
1012 | .lni-helmet::before {
1013 |   content: "\eae9";
1014 | }
1015 | 
1016 | .lni-help::before {
1017 |   content: "\eaea";
1018 | }
1019 | 
1020 | .lni-highlight-alt::before {
1021 |   content: "\eaeb";
1022 | }
1023 | 
1024 | .lni-highlight::before {
1025 |   content: "\eaec";
1026 | }
1027 | 
1028 | .lni-home::before {
1029 |   content: "\eaed";
1030 | }
1031 | 
1032 | .lni-hospital::before {
1033 |   content: "\eaee";
1034 | }
1035 | 
1036 | .lni-hourglass::before {
1037 |   content: "\eaef";
1038 | }
1039 | 
1040 | .lni-html5::before {
1041 |   content: "\eaf0";
1042 | }
1043 | 
1044 | .lni-image::before {
1045 |   content: "\eaf1";
1046 | }
1047 | 
1048 | .lni-imdb::before {
1049 |   content: "\eaf2";
1050 | }
1051 | 
1052 | .lni-inbox::before {
1053 |   content: "\eaf3";
1054 | }
1055 | 
1056 | .lni-indent-decrease::before {
1057 |   content: "\eaf4";
1058 | }
1059 | 
1060 | .lni-indent-increase::before {
1061 |   content: "\eaf5";
1062 | }
1063 | 
1064 | .lni-infinite::before {
1065 |   content: "\eaf6";
1066 | }
1067 | 
1068 | .lni-information::before {
1069 |   content: "\eaf7";
1070 | }
1071 | 
1072 | .lni-instagram-filled::before {
1073 |   content: "\eaf8";
1074 | }
1075 | 
1076 | .lni-instagram-original::before {
1077 |   content: "\eaf9";
1078 | }
1079 | 
1080 | .lni-instagram::before {
1081 |   content: "\eafa";
1082 | }
1083 | 
1084 | .lni-invention::before {
1085 |   content: "\eafb";
1086 | }
1087 | 
1088 | .lni-invest-monitor::before {
1089 |   content: "\eafc";
1090 | }
1091 | 
1092 | .lni-investment::before {
1093 |   content: "\eafd";
1094 | }
1095 | 
1096 | .lni-island::before {
1097 |   content: "\eafe";
1098 | }
1099 | 
1100 | .lni-italic::before {
1101 |   content: "\eaff";
1102 | }
1103 | 
1104 | .lni-java::before {
1105 |   content: "\eb00";
1106 | }
1107 | 
1108 | .lni-javascript::before {
1109 |   content: "\eb01";
1110 | }
1111 | 
1112 | .lni-jcb::before {
1113 |   content: "\eb02";
1114 | }
1115 | 
1116 | .lni-joomla-original::before {
1117 |   content: "\eb03";
1118 | }
1119 | 
1120 | .lni-joomla::before {
1121 |   content: "\eb04";
1122 | }
1123 | 
1124 | .lni-jsfiddle::before {
1125 |   content: "\eb05";
1126 | }
1127 | 
1128 | .lni-juice::before {
1129 |   content: "\eb06";
1130 | }
1131 | 
1132 | .lni-key::before {
1133 |   content: "\eb07";
1134 | }
1135 | 
1136 | .lni-keyboard::before {
1137 |   content: "\eb08";
1138 | }
1139 | 
1140 | .lni-keyword-research::before {
1141 |   content: "\eb09";
1142 | }
1143 | 
1144 | .lni-laptop-phone::before {
1145 |   content: "\eb0a";
1146 | }
1147 | 
1148 | .lni-laptop::before {
1149 |   content: "\eb0b";
1150 | }
1151 | 
1152 | .lni-laravel::before {
1153 |   content: "\eb0c";
1154 | }
1155 | 
1156 | .lni-layers::before {
1157 |   content: "\eb0d";
1158 | }
1159 | 
1160 | .lni-layout::before {
1161 |   content: "\eb0e";
1162 | }
1163 | 
1164 | .lni-leaf::before {
1165 |   content: "\eb0f";
1166 | }
1167 | 
1168 | .lni-library::before {
1169 |   content: "\eb10";
1170 | }
1171 | 
1172 | .lni-license::before {
1173 |   content: "\eb11";
1174 | }
1175 | 
1176 | .lni-lifering::before {
1177 |   content: "\eb12";
1178 | }
1179 | 
1180 | .lni-line-dashed::before {
1181 |   content: "\eb13";
1182 | }
1183 | 
1184 | .lni-line-dotted::before {
1185 |   content: "\eb14";
1186 | }
1187 | 
1188 | .lni-line-double::before {
1189 |   content: "\eb15";
1190 | }
1191 | 
1192 | .lni-line-spacing::before {
1193 |   content: "\eb16";
1194 | }
1195 | 
1196 | .lni-line::before {
1197 |   content: "\eb17";
1198 | }
1199 | 
1200 | .lni-lineicons-alt::before {
1201 |   content: "\eb18";
1202 | }
1203 | 
1204 | .lni-lineicons::before {
1205 |   content: "\eb19";
1206 | }
1207 | 
1208 | .lni-link::before {
1209 |   content: "\eb1a";
1210 | }
1211 | 
1212 | .lni-linkedin-original::before {
1213 |   content: "\eb1b";
1214 | }
1215 | 
1216 | .lni-linkedin::before {
1217 |   content: "\eb1c";
1218 | }
1219 | 
1220 | .lni-list::before {
1221 |   content: "\eb1d";
1222 | }
1223 | 
1224 | .lni-lock-alt::before {
1225 |   content: "\eb1e";
1226 | }
1227 | 
1228 | .lni-lock::before {
1229 |   content: "\eb1f";
1230 | }
1231 | 
1232 | .lni-magento::before {
1233 |   content: "\eb20";
1234 | }
1235 | 
1236 | .lni-magnet::before {
1237 |   content: "\eb21";
1238 | }
1239 | 
1240 | .lni-magnifier::before {
1241 |   content: "\eb22";
1242 | }
1243 | 
1244 | .lni-mailchimp::before {
1245 |   content: "\eb23";
1246 | }
1247 | 
1248 | .lni-map-marker::before {
1249 |   content: "\eb24";
1250 | }
1251 | 
1252 | .lni-map::before {
1253 |   content: "\eb25";
1254 | }
1255 | 
1256 | .lni-markdown::before {
1257 |   content: "\eb26";
1258 | }
1259 | 
1260 | .lni-mashroom::before {
1261 |   content: "\eb27";
1262 | }
1263 | 
1264 | .lni-mastercard::before {
1265 |   content: "\eb28";
1266 | }
1267 | 
1268 | .lni-medium::before {
1269 |   content: "\eb29";
1270 | }
1271 | 
1272 | .lni-menu::before {
1273 |   content: "\eb2a";
1274 | }
1275 | 
1276 | .lni-mic::before {
1277 |   content: "\eb2b";
1278 | }
1279 | 
1280 | .lni-microphone::before {
1281 |   content: "\eb2c";
1282 | }
1283 | 
1284 | .lni-microscope::before {
1285 |   content: "\eb2d";
1286 | }
1287 | 
1288 | .lni-microsoft-edge::before {
1289 |   content: "\eb2e";
1290 | }
1291 | 
1292 | .lni-microsoft::before {
1293 |   content: "\eb2f";
1294 | }
1295 | 
1296 | .lni-minus::before {
1297 |   content: "\eb30";
1298 | }
1299 | 
1300 | .lni-mobile::before {
1301 |   content: "\eb31";
1302 | }
1303 | 
1304 | .lni-money-location::before {
1305 |   content: "\eb32";
1306 | }
1307 | 
1308 | .lni-money-protection::before {
1309 |   content: "\eb33";
1310 | }
1311 | 
1312 | .lni-more-alt::before {
1313 |   content: "\eb34";
1314 | }
1315 | 
1316 | .lni-more::before {
1317 |   content: "\eb35";
1318 | }
1319 | 
1320 | .lni-mouse::before {
1321 |   content: "\eb36";
1322 | }
1323 | 
1324 | .lni-move::before {
1325 |   content: "\eb37";
1326 | }
1327 | 
1328 | .lni-music::before {
1329 |   content: "\eb38";
1330 | }
1331 | 
1332 | .lni-netlify::before {
1333 |   content: "\eb39";
1334 | }
1335 | 
1336 | .lni-network::before {
1337 |   content: "\eb3a";
1338 | }
1339 | 
1340 | .lni-night::before {
1341 |   content: "\eb3b";
1342 | }
1343 | 
1344 | .lni-nodejs-alt::before {
1345 |   content: "\eb3c";
1346 | }
1347 | 
1348 | .lni-nodejs::before {
1349 |   content: "\eb3d";
1350 | }
1351 | 
1352 | .lni-notepad::before {
1353 |   content: "\eb3e";
1354 | }
1355 | 
1356 | .lni-npm::before {
1357 |   content: "\eb3f";
1358 | }
1359 | 
1360 | .lni-offer::before {
1361 |   content: "\eb40";
1362 | }
1363 | 
1364 | .lni-opera::before {
1365 |   content: "\eb41";
1366 | }
1367 | 
1368 | .lni-package::before {
1369 |   content: "\eb42";
1370 | }
1371 | 
1372 | .lni-page-break::before {
1373 |   content: "\eb43";
1374 | }
1375 | 
1376 | .lni-pagination::before {
1377 |   content: "\eb44";
1378 | }
1379 | 
1380 | .lni-paint-bucket::before {
1381 |   content: "\eb45";
1382 | }
1383 | 
1384 | .lni-paint-roller::before {
1385 |   content: "\eb46";
1386 | }
1387 | 
1388 | .lni-pallet::before {
1389 |   content: "\eb47";
1390 | }
1391 | 
1392 | .lni-paperclip::before {
1393 |   content: "\eb48";
1394 | }
1395 | 
1396 | .lni-patreon::before {
1397 |   content: "\eb49";
1398 | }
1399 | 
1400 | .lni-pause::before {
1401 |   content: "\eb4a";
1402 | }
1403 | 
1404 | .lni-paypal-original::before {
1405 |   content: "\eb4b";
1406 | }
1407 | 
1408 | .lni-paypal::before {
1409 |   content: "\eb4c";
1410 | }
1411 | 
1412 | .lni-pencil-alt::before {
1413 |   content: "\eb4d";
1414 | }
1415 | 
1416 | .lni-pencil::before {
1417 |   content: "\eb4e";
1418 | }
1419 | 
1420 | .lni-phone-set::before {
1421 |   content: "\eb4f";
1422 | }
1423 | 
1424 | .lni-phone::before {
1425 |   content: "\eb50";
1426 | }
1427 | 
1428 | .lni-php::before {
1429 |   content: "\eb51";
1430 | }
1431 | 
1432 | .lni-pie-chart::before {
1433 |   content: "\eb52";
1434 | }
1435 | 
1436 | .lni-pilcrow::before {
1437 |   content: "\eb53";
1438 | }
1439 | 
1440 | .lni-pin::before {
1441 |   content: "\eb54";
1442 | }
1443 | 
1444 | .lni-pinterest::before {
1445 |   content: "\eb55";
1446 | }
1447 | 
1448 | .lni-pizza::before {
1449 |   content: "\eb56";
1450 | }
1451 | 
1452 | .lni-plane::before {
1453 |   content: "\eb57";
1454 | }
1455 | 
1456 | .lni-play-store::before {
1457 |   content: "\eb58";
1458 | }
1459 | 
1460 | .lni-play::before {
1461 |   content: "\eb59";
1462 | }
1463 | 
1464 | .lni-playstation::before {
1465 |   content: "\eb5a";
1466 | }
1467 | 
1468 | .lni-plug::before {
1469 |   content: "\eb5b";
1470 | }
1471 | 
1472 | .lni-plus::before {
1473 |   content: "\eb5c";
1474 | }
1475 | 
1476 | .lni-pointer-down::before {
1477 |   content: "\eb5d";
1478 | }
1479 | 
1480 | .lni-pointer-left::before {
1481 |   content: "\eb5e";
1482 | }
1483 | 
1484 | .lni-pointer-right::before {
1485 |   content: "\eb5f";
1486 | }
1487 | 
1488 | .lni-pointer-top::before {
1489 |   content: "\eb60";
1490 | }
1491 | 
1492 | .lni-pointer::before {
1493 |   content: "\eb61";
1494 | }
1495 | 
1496 | .lni-popup::before {
1497 |   content: "\eb62";
1498 | }
1499 | 
1500 | .lni-postcard::before {
1501 |   content: "\eb63";
1502 | }
1503 | 
1504 | .lni-pound::before {
1505 |   content: "\eb64";
1506 | }
1507 | 
1508 | .lni-power-switch::before {
1509 |   content: "\eb65";
1510 | }
1511 | 
1512 | .lni-printer::before {
1513 |   content: "\eb66";
1514 | }
1515 | 
1516 | .lni-producthunt::before {
1517 |   content: "\eb67";
1518 | }
1519 | 
1520 | .lni-protection::before {
1521 |   content: "\eb68";
1522 | }
1523 | 
1524 | .lni-pulse::before {
1525 |   content: "\eb69";
1526 | }
1527 | 
1528 | .lni-pyramids::before {
1529 |   content: "\eb6a";
1530 | }
1531 | 
1532 | .lni-python::before {
1533 |   content: "\eb6b";
1534 | }
1535 | 
1536 | .lni-question-circle::before {
1537 |   content: "\eb6c";
1538 | }
1539 | 
1540 | .lni-quora::before {
1541 |   content: "\eb6d";
1542 | }
1543 | 
1544 | .lni-quotation::before {
1545 |   content: "\eb6e";
1546 | }
1547 | 
1548 | .lni-radio-button::before {
1549 |   content: "\eb6f";
1550 | }
1551 | 
1552 | .lni-rain::before {
1553 |   content: "\eb70";
1554 | }
1555 | 
1556 | .lni-react::before {
1557 |   content: "\eb73";
1558 | }
1559 | 
1560 | .lni-reddit::before {
1561 |   content: "\eb71";
1562 | }
1563 | 
1564 | .lni-reload::before {
1565 |   content: "\eb72";
1566 | }
1567 | 
1568 | .lni-remove-file::before {
1569 |   content: "\eb74";
1570 | }
1571 | 
1572 | .lni-reply::before {
1573 |   content: "\eb75";
1574 | }
1575 | 
1576 | .lni-restaurant::before {
1577 |   content: "\eb76";
1578 | }
1579 | 
1580 | .lni-revenue::before {
1581 |   content: "\eb77";
1582 | }
1583 | 
1584 | .lni-road::before {
1585 |   content: "\eb78";
1586 | }
1587 | 
1588 | .lni-rocket::before {
1589 |   content: "\eb79";
1590 | }
1591 | 
1592 | .lni-rss-feed::before {
1593 |   content: "\eb7a";
1594 | }
1595 | 
1596 | .lni-ruler-alt::before {
1597 |   content: "\eb7b";
1598 | }
1599 | 
1600 | .lni-ruler-pencil::before {
1601 |   content: "\eb7c";
1602 | }
1603 | 
1604 | .lni-ruler::before {
1605 |   content: "\eb7d";
1606 | }
1607 | 
1608 | .lni-rupee::before {
1609 |   content: "\eb7e";
1610 | }
1611 | 
1612 | .lni-sad::before {
1613 |   content: "\eb7f";
1614 | }
1615 | 
1616 | .lni-save::before {
1617 |   content: "\eb80";
1618 | }
1619 | 
1620 | .lni-school-bench-alt::before {
1621 |   content: "\eb81";
1622 | }
1623 | 
1624 | .lni-school-bench::before {
1625 |   content: "\eb82";
1626 | }
1627 | 
1628 | .lni-scooter::before {
1629 |   content: "\eb83";
1630 | }
1631 | 
1632 | .lni-scroll-down::before {
1633 |   content: "\eb84";
1634 | }
1635 | 
1636 | .lni-search-alt::before {
1637 |   content: "\eb85";
1638 | }
1639 | 
1640 | .lni-search::before {
1641 |   content: "\eb86";
1642 | }
1643 | 
1644 | .lni-select::before {
1645 |   content: "\eb87";
1646 | }
1647 | 
1648 | .lni-seo::before {
1649 |   content: "\eb88";
1650 | }
1651 | 
1652 | .lni-service::before {
1653 |   content: "\eb89";
1654 | }
1655 | 
1656 | .lni-share-alt-1::before {
1657 |   content: "\eb8a";
1658 | }
1659 | 
1660 | .lni-share-alt::before {
1661 |   content: "\eb8b";
1662 | }
1663 | 
1664 | .lni-share::before {
1665 |   content: "\eb8c";
1666 | }
1667 | 
1668 | .lni-shield::before {
1669 |   content: "\eb8d";
1670 | }
1671 | 
1672 | .lni-shift-left::before {
1673 |   content: "\eb8e";
1674 | }
1675 | 
1676 | .lni-shift-right::before {
1677 |   content: "\eb8f";
1678 | }
1679 | 
1680 | .lni-ship::before {
1681 |   content: "\eb90";
1682 | }
1683 | 
1684 | .lni-shopify::before {
1685 |   content: "\eb91";
1686 | }
1687 | 
1688 | .lni-shopping-basket::before {
1689 |   content: "\eb92";
1690 | }
1691 | 
1692 | .lni-shortcode::before {
1693 |   content: "\eb93";
1694 | }
1695 | 
1696 | .lni-shovel::before {
1697 |   content: "\eb94";
1698 | }
1699 | 
1700 | .lni-shuffle::before {
1701 |   content: "\eb95";
1702 | }
1703 | 
1704 | .lni-signal::before {
1705 |   content: "\eb96";
1706 | }
1707 | 
1708 | .lni-sketch::before {
1709 |   content: "\eb97";
1710 | }
1711 | 
1712 | .lni-skipping-rope::before {
1713 |   content: "\eb98";
1714 | }
1715 | 
1716 | .lni-skype::before {
1717 |   content: "\eb99";
1718 | }
1719 | 
1720 | .lni-slack-line::before {
1721 |   content: "\eb9a";
1722 | }
1723 | 
1724 | .lni-slack::before {
1725 |   content: "\eb9b";
1726 | }
1727 | 
1728 | .lni-slice::before {
1729 |   content: "\eb9c";
1730 | }
1731 | 
1732 | .lni-slideshare::before {
1733 |   content: "\eb9d";
1734 | }
1735 | 
1736 | .lni-slim::before {
1737 |   content: "\eb9e";
1738 | }
1739 | 
1740 | .lni-smile::before {
1741 |   content: "\eb9f";
1742 | }
1743 | 
1744 | .lni-snapchat::before {
1745 |   content: "\eba0";
1746 | }
1747 | 
1748 | .lni-sort-alpha-asc::before {
1749 |   content: "\eba1";
1750 | }
1751 | 
1752 | .lni-sort-amount-asc::before {
1753 |   content: "\eba2";
1754 | }
1755 | 
1756 | .lni-sort-amount-dsc::before {
1757 |   content: "\eba3";
1758 | }
1759 | 
1760 | .lni-soundcloud-original::before {
1761 |   content: "\eba4";
1762 | }
1763 | 
1764 | .lni-soundcloud::before {
1765 |   content: "\eba5";
1766 | }
1767 | 
1768 | .lni-speechless::before {
1769 |   content: "\eba6";
1770 | }
1771 | 
1772 | .lni-spellcheck::before {
1773 |   content: "\eba7";
1774 | }
1775 | 
1776 | .lni-spinner-arrow::before {
1777 |   content: "\eba8";
1778 | }
1779 | 
1780 | .lni-spinner-solid::before {
1781 |   content: "\eba9";
1782 | }
1783 | 
1784 | .lni-spinner::before {
1785 |   content: "\ebaa";
1786 | }
1787 | 
1788 | .lni-spotify-original::before {
1789 |   content: "\ebab";
1790 | }
1791 | 
1792 | .lni-spotify::before {
1793 |   content: "\ebac";
1794 | }
1795 | 
1796 | .lni-spray::before {
1797 |   content: "\ebad";
1798 | }
1799 | 
1800 | .lni-sprout::before {
1801 |   content: "\ebae";
1802 | }
1803 | 
1804 | .lni-squarespace::before {
1805 |   content: "\ebaf";
1806 | }
1807 | 
1808 | .lni-stackoverflow::before {
1809 |   content: "\ebb0";
1810 | }
1811 | 
1812 | .lni-stamp::before {
1813 |   content: "\ebb1";
1814 | }
1815 | 
1816 | .lni-star-empty::before {
1817 |   content: "\ebb2";
1818 | }
1819 | 
1820 | .lni-star-filled::before {
1821 |   content: "\ebb3";
1822 | }
1823 | 
1824 | .lni-star-half::before {
1825 |   content: "\ebb4";
1826 | }
1827 | 
1828 | .lni-star::before {
1829 |   content: "\ebb5";
1830 | }
1831 | 
1832 | .lni-stats-down::before {
1833 |   content: "\ebb6";
1834 | }
1835 | 
1836 | .lni-stats-up::before {
1837 |   content: "\ebb7";
1838 | }
1839 | 
1840 | .lni-steam::before {
1841 |   content: "\ebb8";
1842 | }
1843 | 
1844 | .lni-sthethoscope::before {
1845 |   content: "\ebb9";
1846 | }
1847 | 
1848 | .lni-stop::before {
1849 |   content: "\ebba";
1850 | }
1851 | 
1852 | .lni-strikethrough::before {
1853 |   content: "\ebbb";
1854 | }
1855 | 
1856 | .lni-stripe::before {
1857 |   content: "\ebbc";
1858 | }
1859 | 
1860 | .lni-stumbleupon::before {
1861 |   content: "\ebbd";
1862 | }
1863 | 
1864 | .lni-sun::before {
1865 |   content: "\ebbe";
1866 | }
1867 | 
1868 | .lni-support::before {
1869 |   content: "\ebbf";
1870 | }
1871 | 
1872 | .lni-surf-board::before {
1873 |   content: "\ebc0";
1874 | }
1875 | 
1876 | .lni-suspect::before {
1877 |   content: "\ebc1";
1878 | }
1879 | 
1880 | .lni-swift::before {
1881 |   content: "\ebc2";
1882 | }
1883 | 
1884 | .lni-syringe::before {
1885 |   content: "\ebc3";
1886 | }
1887 | 
1888 | .lni-tab::before {
1889 |   content: "\ebc4";
1890 | }
1891 | 
1892 | .lni-tag::before {
1893 |   content: "\ebc5";
1894 | }
1895 | 
1896 | .lni-target-customer::before {
1897 |   content: "\ebc6";
1898 | }
1899 | 
1900 | .lni-target-revenue::before {
1901 |   content: "\ebc7";
1902 | }
1903 | 
1904 | .lni-target::before {
1905 |   content: "\ebc8";
1906 | }
1907 | 
1908 | .lni-taxi::before {
1909 |   content: "\ebc9";
1910 | }
1911 | 
1912 | .lni-teabag::before {
1913 |   content: "\ebca";
1914 | }
1915 | 
1916 | .lni-telegram-original::before {
1917 |   content: "\ebcb";
1918 | }
1919 | 
1920 | .lni-telegram::before {
1921 |   content: "\ebcc";
1922 | }
1923 | 
1924 | .lni-text-align-center::before {
1925 |   content: "\ebcd";
1926 | }
1927 | 
1928 | .lni-text-align-justify::before {
1929 |   content: "\ebce";
1930 | }
1931 | 
1932 | .lni-text-align-left::before {
1933 |   content: "\ebcf";
1934 | }
1935 | 
1936 | .lni-text-align-right::before {
1937 |   content: "\ebd0";
1938 | }
1939 | 
1940 | .lni-text-format-remove::before {
1941 |   content: "\ebd4";
1942 | }
1943 | 
1944 | .lni-text-format::before {
1945 |   content: "\ebd1";
1946 | }
1947 | 
1948 | .lni-thought::before {
1949 |   content: "\ebd2";
1950 | }
1951 | 
1952 | .lni-thumbs-down::before {
1953 |   content: "\ebd3";
1954 | }
1955 | 
1956 | .lni-thumbs-up::before {
1957 |   content: "\ebd5";
1958 | }
1959 | 
1960 | .lni-thunder-alt::before {
1961 |   content: "\ebd6";
1962 | }
1963 | 
1964 | .lni-thunder::before {
1965 |   content: "\ebd7";
1966 | }
1967 | 
1968 | .lni-ticket-alt::before {
1969 |   content: "\ebd8";
1970 | }
1971 | 
1972 | .lni-ticket::before {
1973 |   content: "\ebd9";
1974 | }
1975 | 
1976 | .lni-tiktok::before {
1977 |   content: "\ebda";
1978 | }
1979 | 
1980 | .lni-timer::before {
1981 |   content: "\ebdb";
1982 | }
1983 | 
1984 | .lni-tounge::before {
1985 |   content: "\ebdc";
1986 | }
1987 | 
1988 | .lni-train-alt::before {
1989 |   content: "\ebdd";
1990 | }
1991 | 
1992 | .lni-train::before {
1993 |   content: "\ebde";
1994 | }
1995 | 
1996 | .lni-trash-can::before {
1997 |   content: "\ebdf";
1998 | }
1999 | 
2000 | .lni-travel::before {
2001 |   content: "\ebe0";
2002 | }
2003 | 
2004 | .lni-tree::before {
2005 |   content: "\ebe1";
2006 | }
2007 | 
2008 | .lni-trees::before {
2009 |   content: "\ebe2";
2010 | }
2011 | 
2012 | .lni-trello::before {
2013 |   content: "\ebe3";
2014 | }
2015 | 
2016 | .lni-trowel::before {
2017 |   content: "\ebe4";
2018 | }
2019 | 
2020 | .lni-tshirt::before {
2021 |   content: "\ebe5";
2022 | }
2023 | 
2024 | .lni-tumblr::before {
2025 |   content: "\ebe6";
2026 | }
2027 | 
2028 | .lni-twitch::before {
2029 |   content: "\ebe7";
2030 | }
2031 | 
2032 | .lni-twitter-filled::before {
2033 |   content: "\ebe8";
2034 | }
2035 | 
2036 | .lni-twitter-original::before {
2037 |   content: "\ebe9";
2038 | }
2039 | 
2040 | .lni-twitter::before {
2041 |   content: "\ebea";
2042 | }
2043 | 
2044 | .lni-ubuntu::before {
2045 |   content: "\ebeb";
2046 | }
2047 | 
2048 | .lni-underline::before {
2049 |   content: "\ebec";
2050 | }
2051 | 
2052 | .lni-unlink::before {
2053 |   content: "\ebed";
2054 | }
2055 | 
2056 | .lni-unlock::before {
2057 |   content: "\ebee";
2058 | }
2059 | 
2060 | .lni-unsplash::before {
2061 |   content: "\ebef";
2062 | }
2063 | 
2064 | .lni-upload::before {
2065 |   content: "\ebf0";
2066 | }
2067 | 
2068 | .lni-user::before {
2069 |   content: "\ebf1";
2070 | }
2071 | 
2072 | .lni-users::before {
2073 |   content: "\ebf6";
2074 | }
2075 | 
2076 | .lni-ux::before {
2077 |   content: "\ebf2";
2078 | }
2079 | 
2080 | .lni-vector::before {
2081 |   content: "\ebf3";
2082 | }
2083 | 
2084 | .lni-video::before {
2085 |   content: "\ebf4";
2086 | }
2087 | 
2088 | .lni-vimeo::before {
2089 |   content: "\ebf5";
2090 | }
2091 | 
2092 | .lni-visa::before {
2093 |   content: "\ebf7";
2094 | }
2095 | 
2096 | .lni-vk::before {
2097 |   content: "\ebf8";
2098 | }
2099 | 
2100 | .lni-volume-high::before {
2101 |   content: "\ebf9";
2102 | }
2103 | 
2104 | .lni-volume-low::before {
2105 |   content: "\ebfa";
2106 | }
2107 | 
2108 | .lni-volume-medium::before {
2109 |   content: "\ebfb";
2110 | }
2111 | 
2112 | .lni-volume-mute::before {
2113 |   content: "\ebfc";
2114 | }
2115 | 
2116 | .lni-volume::before {
2117 |   content: "\ebfd";
2118 | }
2119 | 
2120 | .lni-wallet::before {
2121 |   content: "\ebfe";
2122 | }
2123 | 
2124 | .lni-warning::before {
2125 |   content: "\ebff";
2126 | }
2127 | 
2128 | .lni-website-alt::before {
2129 |   content: "\ec00";
2130 | }
2131 | 
2132 | .lni-website::before {
2133 |   content: "\ec01";
2134 | }
2135 | 
2136 | .lni-wechat::before {
2137 |   content: "\ec02";
2138 | }
2139 | 
2140 | .lni-weight::before {
2141 |   content: "\ec03";
2142 | }
2143 | 
2144 | .lni-whatsapp::before {
2145 |   content: "\ec04";
2146 | }
2147 | 
2148 | .lni-wheelbarrow::before {
2149 |   content: "\ec05";
2150 | }
2151 | 
2152 | .lni-wheelchair::before {
2153 |   content: "\ec06";
2154 | }
2155 | 
2156 | .lni-windows::before {
2157 |   content: "\ec07";
2158 | }
2159 | 
2160 | .lni-wordpress-filled::before {
2161 |   content: "\ec08";
2162 | }
2163 | 
2164 | .lni-wordpress::before {
2165 |   content: "\ec09";
2166 | }
2167 | 
2168 | .lni-world-alt::before {
2169 |   content: "\ec0a";
2170 | }
2171 | 
2172 | .lni-world::before {
2173 |   content: "\ec0c";
2174 | }
2175 | 
2176 | .lni-write::before {
2177 |   content: "\ec0b";
2178 | }
2179 | 
2180 | .lni-xbox::before {
2181 |   content: "\ec0d";
2182 | }
2183 | 
2184 | .lni-yahoo::before {
2185 |   content: "\ec0e";
2186 | }
2187 | 
2188 | .lni-ycombinator::before {
2189 |   content: "\ec0f";
2190 | }
2191 | 
2192 | .lni-yen::before {
2193 |   content: "\ec10";
2194 | }
2195 | 
2196 | .lni-youtube::before {
2197 |   content: "\ec13";
2198 | }
2199 | 
2200 | .lni-zip::before {
2201 |   content: "\ec11";
2202 | }
2203 | 
2204 | .lni-zoom-in::before {
2205 |   content: "\ec12";
2206 | }
2207 | 
2208 | .lni-zoom-out::before {
2209 |   content: "\ec14";
2210 | }
2211 | 
2212 | 


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | 
   3 | html {
   4 |   scroll-behavior: smooth;
   5 | }
   6 | 
   7 | body {
   8 |   font-family: "Sen", sans-serif;
   9 |   font-weight: normal;
  10 |   font-style: normal;
  11 |   color: rgba(0, 0, 0, 0.7);
  12 |   overflow-x: hidden;
  13 | }
  14 | 
  15 | * {
  16 |   margin: 0;
  17 |   padding: 0;
  18 |   -webkit-box-sizing: border-box;
  19 |   -moz-box-sizing: border-box;
  20 |   box-sizing: border-box;
  21 | }
  22 | 
  23 | a:focus,
  24 | input:focus,
  25 | textarea:focus,
  26 | button:focus,
  27 | .btn:focus,
  28 | .btn.focus,
  29 | .btn:not(:disabled):not(.disabled).active,
  30 | .btn:not(:disabled):not(.disabled):active {
  31 |   text-decoration: none;
  32 |   outline: none;
  33 |   -webkit-box-shadow: none;
  34 |   -moz-box-shadow: none;
  35 |   box-shadow: none;
  36 | }
  37 | 
  38 | a:hover {
  39 |   color: #37C2CC;
  40 | }
  41 | 
  42 | a {
  43 |   -webkit-transition: all 0.3s ease-out 0s;
  44 |   -moz-transition: all 0.3s ease-out 0s;
  45 |   -ms-transition: all 0.3s ease-out 0s;
  46 |   -o-transition: all 0.3s ease-out 0s;
  47 |   transition: all 0.3s ease-out 0s;
  48 | }
  49 | 
  50 | a,
  51 | a:focus,
  52 | a:hover {
  53 |   text-decoration: none;
  54 | }
  55 | 
  56 | i,
  57 | span,
  58 | a {
  59 |   display: inline-block;
  60 | }
  61 | 
  62 | audio,
  63 | canvas,
  64 | iframe,
  65 | img,
  66 | svg,
  67 | video {
  68 |   vertical-align: middle;
  69 | }
  70 | 
  71 | h1,
  72 | h2,
  73 | h3,
  74 | .single-post-header,
  75 | .blog-roll-card-header,
  76 | h4,
  77 | h5,
  78 | h6 {
  79 |   font-weight: 700;
  80 |   margin: 0px;
  81 | }
  82 | 
  83 | h1 a,
  84 | h2 a,
  85 | h3 a,
  86 | .single-post-header a,
  87 | .blog-roll-card-header a,
  88 | h4 a,
  89 | h5 a,
  90 | h6 a {
  91 |   color: inherit;
  92 | }
  93 | 
  94 | h1 {
  95 |   font-size: 55px;
  96 | }
  97 | 
  98 | h2 {
  99 |   font-size: 45px;
 100 | }
 101 | 
 102 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
 103 |   .section-title h2 {
 104 |     font-size: 38px;
 105 |   }
 106 | }
 107 | 
 108 | @media (max-width: 767px) {
 109 |   .section-title h2 {
 110 |     font-size: 38px;
 111 |   }
 112 | }
 113 | 
 114 | h3, .single-post-header, .blog-roll-card-header {
 115 |   font-size: 25px;
 116 | }
 117 | 
 118 | h4 {
 119 |   font-size: 20px;
 120 | }
 121 | 
 122 | h5 {
 123 |   font-size: 18px;
 124 | }
 125 | 
 126 | h6 {
 127 |   font-size: 16px;
 128 | }
 129 | 
 130 | ul,
 131 | ol {
 132 |   margin: 0px;
 133 |   padding: 0px;
 134 |   list-style-type: none;
 135 | }
 136 | 
 137 | p {
 138 |   font-size: 16px;
 139 |   font-weight: 400;
 140 |   line-height: 25px;
 141 |   margin: 0px;
 142 | }
 143 | 
 144 | .img-bg {
 145 |   background-position: center center;
 146 |   background-size: cover;
 147 |   background-repeat: no-repeat;
 148 |   width: 100%;
 149 |   height: 100%;
 150 | }
 151 | 
 152 | .gray-bg-1 {
 153 |   background-color: #fafafa;
 154 | }
 155 | 
 156 | .gray-bg-2 {
 157 |   background-color: #f2f2f2;
 158 | }
 159 | 
 160 | .error {
 161 |   color: orangered;
 162 | }
 163 | 
 164 | .success {
 165 |   color: green;
 166 | }
 167 | 
 168 | @media (max-width: 767px) {
 169 |   .container {
 170 |     padding: 0 30px;
 171 |   }
 172 | }
 173 | 
 174 | /*===== All Button Style =====*/
 175 | .main-btn {
 176 |   display: inline-block;
 177 |   font-weight: 400;
 178 |   text-align: center;
 179 |   white-space: nowrap;
 180 |   vertical-align: middle;
 181 |   -webkit-user-select: none;
 182 |   -moz-user-select: none;
 183 |   -ms-user-select: none;
 184 |   user-select: none;
 185 |   padding: 18px 28px;
 186 |   font-size: 18px;
 187 |   line-height: 1;
 188 |   border-radius: 10px;
 189 |   color: #fff;
 190 |   cursor: pointer;
 191 |   z-index: 5;
 192 |   transition: all 0.4s ease-in-out;
 193 |   border: 2px solid transparent;
 194 |   background: #37C2CC;
 195 |   overflow: hidden;
 196 | }
 197 | 
 198 | .main-btn:hover {
 199 |   color: #fff;
 200 | }
 201 | 
 202 | .main-btn.border-btn {
 203 |   border: 2px solid #37C2CC;
 204 |   background: transparent;
 205 |   color: #37C2CC;
 206 | }
 207 | 
 208 | .main-btn.border-btn:hover::after {
 209 |   background-color: rgba(55, 194, 204, 0.15);
 210 | }
 211 | 
 212 | .btn-hover {
 213 |   position: relative;
 214 |   overflow: hidden;
 215 | }
 216 | 
 217 | .btn-hover::after {
 218 |   content: "";
 219 |   position: absolute;
 220 |   width: 0%;
 221 |   height: 0%;
 222 |   border-radius: 50%;
 223 |   background: rgba(0, 0, 0, 0.05);
 224 |   top: 50%;
 225 |   left: 50%;
 226 |   padding: 50%;
 227 |   z-index: -1;
 228 |   -webkit-transition: all 0.3s ease-out 0s;
 229 |   -moz-transition: all 0.3s ease-out 0s;
 230 |   -ms-transition: all 0.3s ease-out 0s;
 231 |   -o-transition: all 0.3s ease-out 0s;
 232 |   transition: all 0.3s ease-out 0s;
 233 |   -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
 234 |   -moz-transform: translate3d(-50%, -50%, 0) scale(0);
 235 |   -ms-transform: translate3d(-50%, -50%, 0) scale(0);
 236 |   -o-transform: translate3d(-50%, -50%, 0) scale(0);
 237 |   transform: translate3d(-50%, -50%, 0) scale(0);
 238 | }
 239 | 
 240 | .btn-hover:hover::after {
 241 |   -webkit-transform: translate3d(-50%, -50%, 0) scale(1.3);
 242 |   -moz-transform: translate3d(-50%, -50%, 0) scale(1.3);
 243 |   -ms-transform: translate3d(-50%, -50%, 0) scale(1.3);
 244 |   -o-transform: translate3d(-50%, -50%, 0) scale(1.3);
 245 |   transform: translate3d(-50%, -50%, 0) scale(1.3);
 246 | }
 247 | 
 248 | .scroll-top {
 249 |   width: 45px;
 250 |   height: 45px;
 251 |   background: #37C2CC;
 252 |   display: flex;
 253 |   justify-content: center;
 254 |   align-items: center;
 255 |   font-size: 18px;
 256 |   color: #fff;
 257 |   border-radius: 5px;
 258 |   position: fixed;
 259 |   bottom: 30px;
 260 |   right: 30px;
 261 |   z-index: 9;
 262 |   cursor: pointer;
 263 |   -webkit-transition: all 0.3s ease-out 0s;
 264 |   -moz-transition: all 0.3s ease-out 0s;
 265 |   -ms-transition: all 0.3s ease-out 0s;
 266 |   -o-transition: all 0.3s ease-out 0s;
 267 |   transition: all 0.3s ease-out 0s;
 268 | }
 269 | 
 270 | .scroll-top:hover {
 271 |   color: #fff;
 272 |   background: rgba(55, 194, 204, 0.8);
 273 | }
 274 | 
 275 | @keyframes animation1 {
 276 |   0% {
 277 |     -webkit-transform: translateY(30px);
 278 |     -moz-transform: translateY(30px);
 279 |     -ms-transform: translateY(30px);
 280 |     -o-transform: translateY(30px);
 281 |     transform: translateY(30px);
 282 |   }
 283 | 
 284 |   50% {
 285 |     -webkit-transform: translateY(-30px);
 286 |     -moz-transform: translateY(-30px);
 287 |     -ms-transform: translateY(-30px);
 288 |     -o-transform: translateY(-30px);
 289 |     transform: translateY(-30px);
 290 |   }
 291 | 
 292 |   100% {
 293 |     -webkit-transform: translateY(30px);
 294 |     -moz-transform: translateY(30px);
 295 |     -ms-transform: translateY(30px);
 296 |     -o-transform: translateY(30px);
 297 |     transform: translateY(30px);
 298 |   }
 299 | }
 300 | 
 301 | @-webkit-keyframes animation1 {
 302 |   0% {
 303 |     -webkit-transform: translateY(30px);
 304 |     -moz-transform: translateY(30px);
 305 |     -ms-transform: translateY(30px);
 306 |     -o-transform: translateY(30px);
 307 |     transform: translateY(30px);
 308 |   }
 309 | 
 310 |   50% {
 311 |     -webkit-transform: translateY(-30px);
 312 |     -moz-transform: translateY(-30px);
 313 |     -ms-transform: translateY(-30px);
 314 |     -o-transform: translateY(-30px);
 315 |     transform: translateY(-30px);
 316 |   }
 317 | 
 318 |   100% {
 319 |     -webkit-transform: translateY(30px);
 320 |     -moz-transform: translateY(30px);
 321 |     -ms-transform: translateY(30px);
 322 |     -o-transform: translateY(30px);
 323 |     transform: translateY(30px);
 324 |   }
 325 | }
 326 | 
 327 | /*===== All Preloader Style =====*/
 328 | .preloader {
 329 |   /* Body Overlay */
 330 |   position: fixed;
 331 |   top: 0;
 332 |   left: 0;
 333 |   display: table;
 334 |   height: 100%;
 335 |   width: 100%;
 336 |   /* Change Background Color */
 337 |   background: #fff;
 338 |   z-index: 99999;
 339 | }
 340 | 
 341 | .preloader .loader {
 342 |   display: table-cell;
 343 |   vertical-align: middle;
 344 |   text-align: center;
 345 | }
 346 | 
 347 | .preloader .loader .spinner {
 348 |   position: absolute;
 349 |   left: 50%;
 350 |   top: 50%;
 351 |   width: 64px;
 352 |   margin-left: -32px;
 353 |   z-index: 18;
 354 |   pointer-events: none;
 355 | }
 356 | 
 357 | .preloader .loader .spinner .spinner-container {
 358 |   pointer-events: none;
 359 |   position: absolute;
 360 |   width: 100%;
 361 |   padding-bottom: 100%;
 362 |   top: 50%;
 363 |   left: 50%;
 364 |   margin-top: -50%;
 365 |   margin-left: -50%;
 366 |   -webkit-animation: spinner-linspin 1568.23529647ms linear infinite;
 367 |   -moz-animation: spinner-linspin 1568.23529647ms linear infinite;
 368 |   -o-animation: spinner-linspin 1568.23529647ms linear infinite;
 369 |   animation: spinner-linspin 1568.23529647ms linear infinite;
 370 | }
 371 | 
 372 | .preloader .loader .spinner .spinner-container .spinner-rotator {
 373 |   position: absolute;
 374 |   width: 100%;
 375 |   height: 100%;
 376 |   -webkit-animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 377 |   -moz-animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 378 |   -o-animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 379 |   animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 380 | }
 381 | 
 382 | .preloader .loader .spinner .spinner-container .spinner-rotator .spinner-left {
 383 |   position: absolute;
 384 |   top: 0;
 385 |   left: 0;
 386 |   bottom: 0;
 387 |   overflow: hidden;
 388 |   right: 50%;
 389 | }
 390 | 
 391 | .preloader .loader .spinner .spinner-container .spinner-rotator .spinner-right {
 392 |   position: absolute;
 393 |   top: 0;
 394 |   right: 0;
 395 |   bottom: 0;
 396 |   overflow: hidden;
 397 |   left: 50%;
 398 | }
 399 | 
 400 | .preloader .loader .spinner-circle {
 401 |   box-sizing: border-box;
 402 |   position: absolute;
 403 |   width: 200%;
 404 |   height: 100%;
 405 |   border-style: solid;
 406 |   /* Spinner Color */
 407 |   border-color: #37C2CC #37C2CC rgba(0, 0, 0, 0.1);
 408 |   border-radius: 50%;
 409 |   border-width: 6px;
 410 | }
 411 | 
 412 | .preloader .loader .spinner-left .spinner-circle {
 413 |   left: 0;
 414 |   right: -100%;
 415 |   border-right-color: rgba(0, 0, 0, 0.1);
 416 |   -webkit-animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 417 |   -moz-animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 418 |   -o-animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 419 |   animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 420 | }
 421 | 
 422 | .preloader .loader .spinner-right .spinner-circle {
 423 |   left: -100%;
 424 |   right: 0;
 425 |   border-left-color: rgba(0, 0, 0, 0.1);
 426 |   -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 427 |   -moz-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 428 |   -o-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 429 |   animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 430 | }
 431 | 
 432 | /* Preloader Animations */
 433 | @-webkit-keyframes spinner-linspin {
 434 |   to {
 435 |     -webkit-transform: rotate(360deg);
 436 |     -moz-transform: rotate(360deg);
 437 |     -ms-transform: rotate(360deg);
 438 |     -o-transform: rotate(360deg);
 439 |     transform: rotate(360deg);
 440 |   }
 441 | }
 442 | 
 443 | @keyframes spinner-linspin {
 444 |   to {
 445 |     -webkit-transform: rotate(360deg);
 446 |     -moz-transform: rotate(360deg);
 447 |     -ms-transform: rotate(360deg);
 448 |     -o-transform: rotate(360deg);
 449 |     transform: rotate(360deg);
 450 |   }
 451 | }
 452 | 
 453 | @-webkit-keyframes spinner-easespin {
 454 |   12.5% {
 455 |     -webkit-transform: rotate(135deg);
 456 |     -moz-transform: rotate(135deg);
 457 |     -ms-transform: rotate(135deg);
 458 |     -o-transform: rotate(135deg);
 459 |     transform: rotate(135deg);
 460 |   }
 461 | 
 462 |   25% {
 463 |     -webkit-transform: rotate(270deg);
 464 |     -moz-transform: rotate(270deg);
 465 |     -ms-transform: rotate(270deg);
 466 |     -o-transform: rotate(270deg);
 467 |     transform: rotate(270deg);
 468 |   }
 469 | 
 470 |   37.5% {
 471 |     -webkit-transform: rotate(405deg);
 472 |     -moz-transform: rotate(405deg);
 473 |     -ms-transform: rotate(405deg);
 474 |     -o-transform: rotate(405deg);
 475 |     transform: rotate(405deg);
 476 |   }
 477 | 
 478 |   50% {
 479 |     -webkit-transform: rotate(540deg);
 480 |     -moz-transform: rotate(540deg);
 481 |     -ms-transform: rotate(540deg);
 482 |     -o-transform: rotate(540deg);
 483 |     transform: rotate(540deg);
 484 |   }
 485 | 
 486 |   62.5% {
 487 |     -webkit-transform: rotate(675deg);
 488 |     -moz-transform: rotate(675deg);
 489 |     -ms-transform: rotate(675deg);
 490 |     -o-transform: rotate(675deg);
 491 |     transform: rotate(675deg);
 492 |   }
 493 | 
 494 |   75% {
 495 |     -webkit-transform: rotate(810deg);
 496 |     -moz-transform: rotate(810deg);
 497 |     -ms-transform: rotate(810deg);
 498 |     -o-transform: rotate(810deg);
 499 |     transform: rotate(810deg);
 500 |   }
 501 | 
 502 |   87.5% {
 503 |     -webkit-transform: rotate(945deg);
 504 |     -moz-transform: rotate(945deg);
 505 |     -ms-transform: rotate(945deg);
 506 |     -o-transform: rotate(945deg);
 507 |     transform: rotate(945deg);
 508 |   }
 509 | 
 510 |   to {
 511 |     -webkit-transform: rotate(1080deg);
 512 |     -moz-transform: rotate(1080deg);
 513 |     -ms-transform: rotate(1080deg);
 514 |     -o-transform: rotate(1080deg);
 515 |     transform: rotate(1080deg);
 516 |   }
 517 | }
 518 | 
 519 | @keyframes spinner-easespin {
 520 |   12.5% {
 521 |     -webkit-transform: rotate(135deg);
 522 |     -moz-transform: rotate(135deg);
 523 |     -ms-transform: rotate(135deg);
 524 |     -o-transform: rotate(135deg);
 525 |     transform: rotate(135deg);
 526 |   }
 527 | 
 528 |   25% {
 529 |     -webkit-transform: rotate(270deg);
 530 |     -moz-transform: rotate(270deg);
 531 |     -ms-transform: rotate(270deg);
 532 |     -o-transform: rotate(270deg);
 533 |     transform: rotate(270deg);
 534 |   }
 535 | 
 536 |   37.5% {
 537 |     -webkit-transform: rotate(405deg);
 538 |     -moz-transform: rotate(405deg);
 539 |     -ms-transform: rotate(405deg);
 540 |     -o-transform: rotate(405deg);
 541 |     transform: rotate(405deg);
 542 |   }
 543 | 
 544 |   50% {
 545 |     -webkit-transform: rotate(540deg);
 546 |     -moz-transform: rotate(540deg);
 547 |     -ms-transform: rotate(540deg);
 548 |     -o-transform: rotate(540deg);
 549 |     transform: rotate(540deg);
 550 |   }
 551 | 
 552 |   62.5% {
 553 |     -webkit-transform: rotate(675deg);
 554 |     -moz-transform: rotate(675deg);
 555 |     -ms-transform: rotate(675deg);
 556 |     -o-transform: rotate(675deg);
 557 |     transform: rotate(675deg);
 558 |   }
 559 | 
 560 |   75% {
 561 |     -webkit-transform: rotate(810deg);
 562 |     -moz-transform: rotate(810deg);
 563 |     -ms-transform: rotate(810deg);
 564 |     -o-transform: rotate(810deg);
 565 |     transform: rotate(810deg);
 566 |   }
 567 | 
 568 |   87.5% {
 569 |     -webkit-transform: rotate(945deg);
 570 |     -moz-transform: rotate(945deg);
 571 |     -ms-transform: rotate(945deg);
 572 |     -o-transform: rotate(945deg);
 573 |     transform: rotate(945deg);
 574 |   }
 575 | 
 576 |   to {
 577 |     -webkit-transform: rotate(1080deg);
 578 |     -moz-transform: rotate(1080deg);
 579 |     -ms-transform: rotate(1080deg);
 580 |     -o-transform: rotate(1080deg);
 581 |     transform: rotate(1080deg);
 582 |   }
 583 | }
 584 | 
 585 | @-webkit-keyframes spinner-left-spin {
 586 |   0% {
 587 |     -webkit-transform: rotate(130deg);
 588 |     -moz-transform: rotate(130deg);
 589 |     -ms-transform: rotate(130deg);
 590 |     -o-transform: rotate(130deg);
 591 |     transform: rotate(130deg);
 592 |   }
 593 | 
 594 |   50% {
 595 |     -webkit-transform: rotate(-5deg);
 596 |     -moz-transform: rotate(-5deg);
 597 |     -ms-transform: rotate(-5deg);
 598 |     -o-transform: rotate(-5deg);
 599 |     transform: rotate(-5deg);
 600 |   }
 601 | 
 602 |   to {
 603 |     -webkit-transform: rotate(130deg);
 604 |     -moz-transform: rotate(130deg);
 605 |     -ms-transform: rotate(130deg);
 606 |     -o-transform: rotate(130deg);
 607 |     transform: rotate(130deg);
 608 |   }
 609 | }
 610 | 
 611 | @keyframes spinner-left-spin {
 612 |   0% {
 613 |     -webkit-transform: rotate(130deg);
 614 |     -moz-transform: rotate(130deg);
 615 |     -ms-transform: rotate(130deg);
 616 |     -o-transform: rotate(130deg);
 617 |     transform: rotate(130deg);
 618 |   }
 619 | 
 620 |   50% {
 621 |     -webkit-transform: rotate(-5deg);
 622 |     -moz-transform: rotate(-5deg);
 623 |     -ms-transform: rotate(-5deg);
 624 |     -o-transform: rotate(-5deg);
 625 |     transform: rotate(-5deg);
 626 |   }
 627 | 
 628 |   to {
 629 |     -webkit-transform: rotate(130deg);
 630 |     -moz-transform: rotate(130deg);
 631 |     -ms-transform: rotate(130deg);
 632 |     -o-transform: rotate(130deg);
 633 |     transform: rotate(130deg);
 634 |   }
 635 | }
 636 | 
 637 | @-webkit-keyframes right-spin {
 638 |   0% {
 639 |     -webkit-transform: rotate(-130deg);
 640 |     -moz-transform: rotate(-130deg);
 641 |     -ms-transform: rotate(-130deg);
 642 |     -o-transform: rotate(-130deg);
 643 |     transform: rotate(-130deg);
 644 |   }
 645 | 
 646 |   50% {
 647 |     -webkit-transform: rotate(5deg);
 648 |     -moz-transform: rotate(5deg);
 649 |     -ms-transform: rotate(5deg);
 650 |     -o-transform: rotate(5deg);
 651 |     transform: rotate(5deg);
 652 |   }
 653 | 
 654 |   to {
 655 |     -webkit-transform: rotate(-130deg);
 656 |     -moz-transform: rotate(-130deg);
 657 |     -ms-transform: rotate(-130deg);
 658 |     -o-transform: rotate(-130deg);
 659 |     transform: rotate(-130deg);
 660 |   }
 661 | }
 662 | 
 663 | @keyframes right-spin {
 664 |   0% {
 665 |     -webkit-transform: rotate(-130deg);
 666 |     -moz-transform: rotate(-130deg);
 667 |     -ms-transform: rotate(-130deg);
 668 |     -o-transform: rotate(-130deg);
 669 |     transform: rotate(-130deg);
 670 |   }
 671 | 
 672 |   50% {
 673 |     -webkit-transform: rotate(5deg);
 674 |     -moz-transform: rotate(5deg);
 675 |     -ms-transform: rotate(5deg);
 676 |     -o-transform: rotate(5deg);
 677 |     transform: rotate(5deg);
 678 |   }
 679 | 
 680 |   to {
 681 |     -webkit-transform: rotate(-130deg);
 682 |     -moz-transform: rotate(-130deg);
 683 |     -ms-transform: rotate(-130deg);
 684 |     -o-transform: rotate(-130deg);
 685 |     transform: rotate(-130deg);
 686 |   }
 687 | }
 688 | 
 689 | /*=========================== 
 690 | 	NAVBAR CSS 
 691 | ============================= */
 692 | .navbar-area {
 693 |   position: absolute;
 694 |   top: 0;
 695 |   left: 0;
 696 |   width: 100%;
 697 |   z-index: 99;
 698 |   -webkit-transition: all 0.3s ease-out 0s;
 699 |   -moz-transition: all 0.3s ease-out 0s;
 700 |   -ms-transition: all 0.3s ease-out 0s;
 701 |   -o-transition: all 0.3s ease-out 0s;
 702 |   transition: all 0.3s ease-out 0s;
 703 | }
 704 | 
 705 | .sticky {
 706 |   position: fixed;
 707 |   z-index: 99;
 708 |   background-color: #fff;
 709 |   -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
 710 |   -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
 711 |   box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
 712 |   -webkit-transition: all 0.3s ease-out 0s;
 713 |   -moz-transition: all 0.3s ease-out 0s;
 714 |   -ms-transition: all 0.3s ease-out 0s;
 715 |   -o-transition: all 0.3s ease-out 0s;
 716 |   transition: all 0.3s ease-out 0s;
 717 | }
 718 | 
 719 | .sticky .navbar .navbar-nav .nav-item a {
 720 |   color: rgba(0, 0, 0, 0.9);
 721 | }
 722 | 
 723 | .sticky .navbar .navbar-nav .nav-item a.active, .sticky .navbar .navbar-nav .nav-item a:hover {
 724 |   color: #37C2CC;
 725 | }
 726 | 
 727 | .sticky .navbar .navbar-nav .nav-item a.active::before, .sticky .navbar .navbar-nav .nav-item a:hover::before {
 728 |   background: #37C2CC;
 729 | }
 730 | 
 731 | .sticky .navbar .header-btn .main-btn {
 732 |   color: #fff;
 733 | }
 734 | 
 735 | .sticky .navbar .navbar-toggler .toggler-icon {
 736 |   background: rgba(0, 0, 0, 0.9);
 737 | }
 738 | 
 739 | .navbar {
 740 |   border-radius: 5px;
 741 |   position: relative;
 742 |   -webkit-transition: all 0.3s ease-out 0s;
 743 |   -moz-transition: all 0.3s ease-out 0s;
 744 |   -ms-transition: all 0.3s ease-out 0s;
 745 |   -o-transition: all 0.3s ease-out 0s;
 746 |   transition: all 0.3s ease-out 0s;
 747 |   padding: 10px 0;
 748 | }
 749 | 
 750 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 751 |   .navbar {
 752 |     padding: 15px 0;
 753 |   }
 754 | }
 755 | 
 756 | .navbar-brand {
 757 |   padding: 0;
 758 |   display: flex;
 759 | }
 760 | 
 761 | .navbar-brand img {
 762 |   max-width: 180px;
 763 | }
 764 | 
 765 | .navbar-toggler {
 766 |   padding: 0;
 767 | }
 768 | 
 769 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 770 |   .navbar-toggler {
 771 |     position: absolute;
 772 |     right: 0;
 773 |     top: 22px;
 774 |   }
 775 | }
 776 | 
 777 | .navbar-toggler:focus {
 778 |   outline: none;
 779 |   -webkit-box-shadow: none;
 780 |   -moz-box-shadow: none;
 781 |   box-shadow: none;
 782 | }
 783 | 
 784 | .navbar-toggler .toggler-icon {
 785 |   width: 30px;
 786 |   height: 2px;
 787 |   background-color: rgba(0, 0, 0, 0.9);
 788 |   display: block;
 789 |   margin: 5px 0;
 790 |   position: relative;
 791 |   -webkit-transition: all 0.3s ease-out 0s;
 792 |   -moz-transition: all 0.3s ease-out 0s;
 793 |   -ms-transition: all 0.3s ease-out 0s;
 794 |   -o-transition: all 0.3s ease-out 0s;
 795 |   transition: all 0.3s ease-out 0s;
 796 | }
 797 | 
 798 | .navbar-toggler.active .toggler-icon:nth-of-type(1) {
 799 |   -webkit-transform: rotate(45deg);
 800 |   -moz-transform: rotate(45deg);
 801 |   -ms-transform: rotate(45deg);
 802 |   -o-transform: rotate(45deg);
 803 |   transform: rotate(45deg);
 804 |   top: 7px;
 805 | }
 806 | 
 807 | .navbar-toggler.active .toggler-icon:nth-of-type(2) {
 808 |   opacity: 0;
 809 | }
 810 | 
 811 | .navbar-toggler.active .toggler-icon:nth-of-type(3) {
 812 |   -webkit-transform: rotate(135deg);
 813 |   -moz-transform: rotate(135deg);
 814 |   -ms-transform: rotate(135deg);
 815 |   -o-transform: rotate(135deg);
 816 |   transform: rotate(135deg);
 817 |   top: -7px;
 818 | }
 819 | 
 820 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 821 |   .navbar-collapse {
 822 |     position: absolute;
 823 |     top: 100%;
 824 |     left: 0;
 825 |     width: 100%;
 826 |     background-color: #fff;
 827 |     z-index: 9;
 828 |     -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
 829 |     -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
 830 |     box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
 831 |     padding: 5px 12px;
 832 |   }
 833 | }
 834 | 
 835 | .navbar-nav .nav-item {
 836 |   position: relative;
 837 |   padding: 8px 0;
 838 | }
 839 | 
 840 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 841 |   .navbar-nav .nav-item {
 842 |     padding: 0px;
 843 |     margin-left: 20px;
 844 |   }
 845 | }
 846 | 
 847 | @media (max-width: 767px) {
 848 |   .navbar-nav .nav-item:first-child {
 849 |     margin-top: 20px;
 850 |   }
 851 | }
 852 | 
 853 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 854 |   .navbar-nav .nav-item:last-child {
 855 |     margin-bottom: 20px;
 856 |   }
 857 | }
 858 | 
 859 | .navbar-nav .nav-item a {
 860 |   color: rgba(0, 0, 0, 0.9);
 861 |   -webkit-transition: all 0.3s ease-out 0s;
 862 |   -moz-transition: all 0.3s ease-out 0s;
 863 |   -ms-transition: all 0.3s ease-out 0s;
 864 |   -o-transition: all 0.3s ease-out 0s;
 865 |   transition: all 0.3s ease-out 0s;
 866 |   padding: 8px 17px;
 867 |   position: relative;
 868 |   font-weight: 500;
 869 |   font-size: 18px;
 870 |   text-align: center;
 871 | }
 872 | 
 873 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 874 |   .navbar-nav .nav-item a {
 875 |     display: inline-block;
 876 |     padding: 6px 0px;
 877 |     color: rgba(0, 0, 0, 0.9);
 878 |   }
 879 | }
 880 | 
 881 | .navbar-nav .nav-item a:hover, .navbar-nav .nav-item a.active {
 882 |   color: #37C2CC;
 883 | }
 884 | 
 885 | @media (max-width: 767px) {
 886 |   .header-btn {
 887 |     display: none;
 888 |   }
 889 | }
 890 | 
 891 | @media only screen and (min-width: 550px) and (max-width: 767px) {
 892 |   .header-btn {
 893 |     display: flex;
 894 |   }
 895 | }
 896 | 
 897 | .header-btn .main-btn {
 898 |   color: #fff;
 899 |   background: #37C2CC;
 900 |   padding: 12px 22px;
 901 |   margin-left: 15px;
 902 | }
 903 | 
 904 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 905 |   .header-btn .main-btn {
 906 |     padding: 8px 20px;
 907 |     margin-right: 60px;
 908 |     margin-left: 0px;
 909 |   }
 910 | }
 911 | 
 912 | /* ====================
 913 | 		HERO CSS
 914 | ======================= */
 915 | .hero-section {
 916 |   position: relative;
 917 |   overflow: hidden;
 918 |   height: 780px;
 919 |   display: flex;
 920 |   align-items: center;
 921 |   background: linear-gradient(180deg, #C2FBFF 0%, rgba(255, 255, 255, 0) 93.47%);
 922 |   z-index: 1;
 923 | }
 924 | 
 925 | @media only screen and (min-width: 1200px) and (max-width: 1399px) {
 926 |   .hero-section {
 927 |     height: 650px;
 928 |   }
 929 | }
 930 | 
 931 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
 932 |   .hero-section {
 933 |     height: 640px;
 934 |   }
 935 | }
 936 | 
 937 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 938 |   .hero-section {
 939 |     height: auto;
 940 |     padding: 100px 0;
 941 |   }
 942 | }
 943 | 
 944 | .hero-section::after {
 945 |   content: "";
 946 |   position: absolute;
 947 |   width: 862px;
 948 |   height: 862px;
 949 |   border-radius: 50%;
 950 |   right: -150px;
 951 |   top: -150px;
 952 |   background: #99ECF2;
 953 |   z-index: -1;
 954 | }
 955 | 
 956 | @media only screen and (min-width: 1200px) and (max-width: 1399px) {
 957 |   .hero-section::after {
 958 |     width: 780px;
 959 |     height: 780px;
 960 |   }
 961 | }
 962 | 
 963 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
 964 |   .hero-section::after {
 965 |     width: 750px;
 966 |     height: 750px;
 967 |   }
 968 | }
 969 | 
 970 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 971 |   .hero-section::after {
 972 |     display: none;
 973 |   }
 974 | }
 975 | 
 976 | @media only screen and (min-width: 768px) and (max-width: 991px) {
 977 |   .hero-section .hero-content {
 978 |     padding-top: 50px;
 979 |   }
 980 | }
 981 | 
 982 | .hero-section .hero-content h1 {
 983 |   margin-bottom: 15px;
 984 | }
 985 | 
 986 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
 987 |   .hero-section .hero-content h1 {
 988 |     font-size: 50px;
 989 |   }
 990 | }
 991 | 
 992 | @media (max-width: 767px) {
 993 |   .hero-section .hero-content h1 {
 994 |     font-size: 45px;
 995 |   }
 996 | }
 997 | 
 998 | .hero-section .hero-content p {
 999 |   margin-bottom: 30px;
1000 |   color: rgba(0, 0, 0, 0.6);
1001 |   font-size: 18px;
1002 | }
1003 | 
1004 | @media only screen and (min-width: 1400px), only screen and (min-width: 1200px) and (max-width: 1399px) {
1005 |   .hero-section .hero-content p {
1006 |     padding-right: 115px;
1007 |   }
1008 | }
1009 | 
1010 | .hero-section .hero-image {
1011 |   padding-top: 50px;
1012 | }
1013 | 
1014 | @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
1015 |   .hero-section .hero-image img {
1016 |     width: 100%;
1017 |   }
1018 | }
1019 | 
1020 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
1021 |   .hero-section .hero-image img {
1022 |     max-width: 100%;
1023 |     margin: auto;
1024 |   }
1025 | }
1026 | 
1027 | /* ===============================
1028 |     FEATURE SECTION ONE CSS
1029 | ================================== */
1030 | .feature-section {
1031 |   position: relative;
1032 |   background-image: url("../public/images/common-bg.svg");
1033 |   background-size: cover;
1034 |   background-position: bottom center;
1035 |   padding-top: 180px;
1036 |   padding-bottom: 55px;
1037 | }
1038 | 
1039 | .single-feature {
1040 |   margin-bottom: 65px;
1041 | }
1042 | 
1043 | @media only screen and (min-width: 1400px) {
1044 |   .single-feature {
1045 |     padding-right: 65px;
1046 |   }
1047 | }
1048 | 
1049 | .single-feature:hover .feature-icon::before {
1050 |   background: #37C2CC;
1051 | }
1052 | 
1053 | .single-feature:hover .feature-icon i {
1054 |   color: #fff;
1055 | }
1056 | 
1057 | .single-feature .feature-icon {
1058 |   width: 62px;
1059 |   height: 66px;
1060 |   position: relative;
1061 |   z-index: 3;
1062 |   display: flex;
1063 |   align-items: center;
1064 |   justify-content: center;
1065 |   margin-bottom: 40px;
1066 | }
1067 | 
1068 | .single-feature .feature-icon img {
1069 |   width: 100%;
1070 |   height: auto;
1071 | }
1072 | 
1073 | .single-feature .feature-icon::before, .single-feature .feature-icon::after {
1074 |   content: "";
1075 |   position: absolute;
1076 |   width: 100%;
1077 |   height: 100%;
1078 |   border-radius: 8px;
1079 |   -webkit-transform: skew(-3deg);
1080 |   -moz-transform: skew(-3deg);
1081 |   -ms-transform: skew(-3deg);
1082 |   -o-transform: skew(-3deg);
1083 |   transform: skew(-3deg);
1084 | }
1085 | 
1086 | .single-feature .feature-icon::before {
1087 |   background: #D5F1F3;
1088 |   -webkit-transition: all 0.3s ease-out 0s;
1089 |   -moz-transition: all 0.3s ease-out 0s;
1090 |   -ms-transition: all 0.3s ease-out 0s;
1091 |   -o-transition: all 0.3s ease-out 0s;
1092 |   transition: all 0.3s ease-out 0s;
1093 |   z-index: -1;
1094 | }
1095 | 
1096 | .single-feature .feature-icon::after {
1097 |   background: transparent;
1098 |   border: 2px solid #D5F1F3;
1099 |   top: 8px;
1100 |   left: -8px;
1101 |   z-index: -2;
1102 | }
1103 | 
1104 | .single-feature .feature-icon i {
1105 |   font-size: 40px;
1106 |   color: black;
1107 |   -webkit-transition: all 0.3s ease-out 0s;
1108 |   -moz-transition: all 0.3s ease-out 0s;
1109 |   -ms-transition: all 0.3s ease-out 0s;
1110 |   -o-transition: all 0.3s ease-out 0s;
1111 |   transition: all 0.3s ease-out 0s;
1112 | }
1113 | 
1114 | .single-feature .feature-content h4 {
1115 |   margin-bottom: 15px;
1116 | }
1117 | 
1118 | /* ========================
1119 |     CTA SECTION CSS
1120 | =========================== */
1121 | .cta-section {
1122 |   position: relative;
1123 |   z-index: 1;
1124 |   padding-top: 220px;
1125 | }
1126 | 
1127 | @media only screen and (min-width: 1200px) and (max-width: 1399px) {
1128 |   .cta-section {
1129 |     padding-top: 150px;
1130 |   }
1131 | }
1132 | 
1133 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
1134 |   .cta-section {
1135 |     padding-top: 130px;
1136 |   }
1137 | }
1138 | 
1139 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
1140 |   .cta-section {
1141 |     padding-top: 0px;
1142 |   }
1143 | }
1144 | 
1145 | .cta-section .left-image {
1146 |   left: 0px;
1147 |   bottom: 0;
1148 | }
1149 | 
1150 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
1151 |   .cta-section .left-image {
1152 |     position: static;
1153 |     width: 100%;
1154 |     margin-top: 50px;
1155 |   }
1156 | }
1157 | 
1158 | .cta-section .left-image img {
1159 |   max-width: 100%;
1160 | }
1161 | 
1162 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
1163 |   .cta-section .left-image img {
1164 |     max-width: 100%;
1165 |     margin: auto;
1166 |   }
1167 | }
1168 | 
1169 | @media only screen and (min-width: 1400px) {
1170 |   .cta-section .cta-content-wrapper {
1171 |     padding-right: 100px;
1172 |   }
1173 | }
1174 | 
1175 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
1176 |   .cta-section .cta-image {
1177 |     margin-top: 50px;
1178 |   }
1179 | }
1180 | 
1181 | .cta-section .cta-image img {
1182 |   width: 100%;
1183 | }
1184 | 
1185 | /* =====================
1186 |     BLOG CSS
1187 | ======================== */
1188 | .blog-section {
1189 |   padding-top: 160px;
1190 |   background-image: url("../public/images/common-bg.svg");
1191 |   background-size: cover;
1192 |   background-position: bottom-center;
1193 | }
1194 | 
1195 | .blog-section .section-title {
1196 |   margin-bottom: 60px;
1197 | }
1198 | 
1199 | @media only screen and (min-width: 1400px), only screen and (min-width: 1200px) and (max-width: 1399px) {
1200 |   .blog-section .section-title {
1201 |     padding: 0px 40px;
1202 |   }
1203 | }
1204 | 
1205 | .blog-section .section-title h2 {
1206 |   margin-bottom: 15px;
1207 | }
1208 | 
1209 | .single-blog, .single-post, .blog-roll-card {
1210 |   background: #fff;
1211 |   box-shadow: 0px 0px 50px rgba(183, 199, 240, 0.25);
1212 |   border-radius: 14px;
1213 |   padding: 52px 30px;
1214 |   margin-bottom: 50px;
1215 |   position: relative;
1216 |   overflow: hidden;
1217 |   z-index: 1;
1218 | }
1219 | 
1220 | .single-blog .populer, .single-post .populer, .blog-roll-card .populer {
1221 |   position: absolute;
1222 |   right: 10px;
1223 |   top: 18px;
1224 |   color: #fff;
1225 |   z-index: 2;
1226 |   font-size: 16px;
1227 |   font-weight: 700;
1228 | }
1229 | 
1230 | .single-blog .blog-header, .single-post .blog-header, .blog-roll-card .blog-header {
1231 |   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1232 |   /* changes for Image tag */
1233 |   width: 100%;
1234 |   height: 200px;
1235 |   position: relative;
1236 |   /* end of changes for Image tag */
1237 | }
1238 | 
1239 | .single-blog .blog-header h5, .single-post .blog-header h5, .blog-roll-card .blog-header h5 {
1240 |   font-size: 18px;
1241 |   margin-bottom: 20px;
1242 | }
1243 | 
1244 | .single-blog .blog-header h2, .single-post .blog-header h2, .blog-roll-card .blog-header h2 {
1245 |   font-size: 40px;
1246 |   margin-bottom: 30px;
1247 | }
1248 | 
1249 | .single-blog .blog-header h2 span, .single-post .blog-header h2 span, .blog-roll-card .blog-header h2 span {
1250 |   font-size: 16px;
1251 |   color: rgba(0, 0, 0, 0.5);
1252 |   font-weight: 400;
1253 | }
1254 | 
1255 | .single-blog .blog-body, .single-post .blog-body, .blog-roll-card .blog-body {
1256 |   padding-top: 30px;
1257 |   padding-bottom: 25px;
1258 | }
1259 | 
1260 | .single-blog .blog-body ul li, .single-post .blog-body ul li, .blog-roll-card .blog-body ul li {
1261 |   display: flex;
1262 |   align-items: center;
1263 |   margin-bottom: 12px;
1264 | }
1265 | 
1266 | .single-blog .blog-body ul li span.bolet, .single-post .blog-body ul li span.bolet, .blog-roll-card .blog-body ul li span.bolet {
1267 |   width: 8px;
1268 |   height: 8px;
1269 |   border-radius: 50%;
1270 |   margin-right: 13px;
1271 |   background: rgba(0, 0, 0, 0.2);
1272 | }
1273 | 
1274 | .single-blog .blog-body ul li span.bolet.active, .single-post .blog-body ul li span.bolet.active, .blog-roll-card .blog-body ul li span.bolet.active {
1275 |   background: #37C2CC;
1276 | }
1277 | 
1278 | .single-blog .blog-body ul li p, .single-post .blog-body ul li p, .blog-roll-card .blog-body ul li p {
1279 |   margin-bottom: 0px;
1280 | }
1281 | 
1282 | .single-blog .blog-footer .main-btn, .single-blog .blog-roll-card-footer .main-btn, .single-post .blog-footer .main-btn, .single-post .blog-roll-card-footer .main-btn, .blog-roll-card .blog-footer .main-btn, .blog-roll-card .blog-roll-card-footer .main-btn {
1283 |   color: #37C2CC;
1284 |   background: #E3FDFF;
1285 | }
1286 | 
1287 | .single-blog .blog-footer .main-btn:hover, .single-blog .blog-roll-card-footer .main-btn:hover, .single-post .blog-footer .main-btn:hover, .single-post .blog-roll-card-footer .main-btn:hover, .blog-roll-card .blog-footer .main-btn:hover, .blog-roll-card .blog-roll-card-footer .main-btn:hover {
1288 |   color: #fff;
1289 | }
1290 | 
1291 | .single-blog .blog-footer .main-btn:hover::after, .single-blog .blog-roll-card-footer .main-btn:hover::after, .single-post .blog-footer .main-btn:hover::after, .single-post .blog-roll-card-footer .main-btn:hover::after, .blog-roll-card .blog-footer .main-btn:hover::after, .blog-roll-card .blog-roll-card-footer .main-btn:hover::after {
1292 |   background: #37C2CC;
1293 | }
1294 | 
1295 | .single-blog.standard::after, .standard.single-post::after, .standard.blog-roll-card::after {
1296 |   content: "";
1297 |   position: absolute;
1298 |   background: #37C2CC;
1299 |   border-radius: 50%;
1300 |   z-index: -1;
1301 |   width: 150px;
1302 |   height: 150px;
1303 |   top: -70px;
1304 |   right: -50px;
1305 | }
1306 | 
1307 | .single-blog.standard .blog-footer .main-btn, .single-blog.standard .blog-roll-card-footer .main-btn, .standard.single-post .blog-footer .main-btn, .standard.single-post .blog-roll-card-footer .main-btn, .standard.blog-roll-card .blog-footer .main-btn, .standard.blog-roll-card .blog-roll-card-footer .main-btn {
1308 |   color: #fff;
1309 |   background: #37C2CC;
1310 | }
1311 | 
1312 | .single-blog.standard .blog-footer .main-btn:hover::after, .single-blog.standard .blog-roll-card-footer .main-btn:hover::after, .standard.single-post .blog-footer .main-btn:hover::after, .standard.single-post .blog-roll-card-footer .main-btn:hover::after, .standard.blog-roll-card .blog-footer .main-btn:hover::after, .standard.blog-roll-card .blog-roll-card-footer .main-btn:hover::after {
1313 |   background: rgba(0, 0, 0, 0.05);
1314 | }
1315 | 
1316 | .single-blog div:first-of-type, .single-post div:first-of-type, .blog-roll-card div:first-of-type {
1317 |   padding-top: 0;
1318 | }
1319 | 
1320 | .single-post-nav, .blog-roll-nav {
1321 |   align-items: center;
1322 |   background: linear-gradient(180deg, #C2FBFF 0%, rgba(255, 255, 255, 0) 93.47%);
1323 |   display: flex;
1324 |   height: 400px;
1325 |   overflow: hidden;
1326 |   position: relative;
1327 |   z-index: 1;
1328 | }
1329 | 
1330 | @media only screen and (min-width: 550px) {
1331 |   .single-post-nav, .blog-roll-nav {
1332 |     height: 350px;
1333 |   }
1334 | }
1335 | 
1336 | @media only screen and (min-width: 768px) {
1337 |   .single-post-nav, .blog-roll-nav {
1338 |     height: 430px;
1339 |   }
1340 | }
1341 | 
1342 | .breadcrumb-nav {
1343 |   display: flex;
1344 |   flex-direction: column;
1345 |   justify-content: center;
1346 |   margin-top: 1em;
1347 | }
1348 | 
1349 | @media only screen and (min-width: 550px) {
1350 |   .breadcrumb-nav {
1351 |     flex-direction: row;
1352 |   }
1353 | }
1354 | 
1355 | .breadcrumb-nav li a {
1356 |   color: #37C2CC;
1357 |   font-weight: 500;
1358 |   display: inline-block;
1359 |   position: relative;
1360 |   padding-right: 15px;
1361 |   margin-right: 15px;
1362 |   text-transform: capitalize;
1363 | }
1364 | 
1365 | .breadcrumb-nav li::after {
1366 |   content: "";
1367 |   font-size: 10px;
1368 |   position: relative;
1369 |   font-family: lineIcons;
1370 |   right: 11px;
1371 | }
1372 | 
1373 | .breadcrumb-nav li:last-child::after {
1374 |   content: "";
1375 | }
1376 | 
1377 | .single-post, .blog-roll-card {
1378 |   padding: 0px;
1379 | }
1380 | 
1381 | .single-post div:first-of-type, .blog-roll-card div:first-of-type {
1382 |   padding-top: 30px;
1383 | }
1384 | 
1385 | .single-post-meta, .blog-roll-card-meta {
1386 |   padding: 30px 16px 0 16px;
1387 | }
1388 | 
1389 | @media only screen and (min-width: 550px) {
1390 |   .single-post-meta, .blog-roll-card-meta {
1391 |     padding: 42px 24px 0 24px;
1392 |   }
1393 | }
1394 | 
1395 | @media only screen and (min-width: 768px) {
1396 |   .single-post-meta, .blog-roll-card-meta {
1397 |     padding: 52px 30px 0 30px;
1398 |   }
1399 | }
1400 | 
1401 | .single-post-header, .blog-roll-card-header {
1402 |   margin-bottom: 20px;
1403 | }
1404 | 
1405 | .single-post-meta-info, .blog-roll-card-meta-info {
1406 |   font-size: 14px;
1407 |   display: inline-block;
1408 |   position: relative;
1409 | }
1410 | 
1411 | .single-post-meta-info li, .blog-roll-card-meta-info li {
1412 |   font-size: 14px;
1413 |   display: inline-block;
1414 |   margin-right: 15px;
1415 |   padding-right: 15px;
1416 |   position: relative;
1417 | }
1418 | 
1419 | .single-post-meta-info li a, .blog-roll-card-meta-info li a {
1420 |   color: #888;
1421 |   font-size: 14px;
1422 |   font-weight: 500;
1423 | }
1424 | 
1425 | .single-post-meta-info li a img, .blog-roll-card-meta-info li a img {
1426 |   height: 35px;
1427 |   width: 35px;
1428 |   border-radius: 50%;
1429 |   display: inline-block;
1430 |   margin-right: 12px;
1431 | }
1432 | 
1433 | @media only screen and (min-width: 550px) {
1434 |   .single-post-meta-info li a img, .blog-roll-card-meta-info li a img {
1435 |     height: 35px;
1436 |     width: 35px;
1437 |   }
1438 | }
1439 | 
1440 | @media only screen and (min-width: 768px) {
1441 |   .single-post-meta-info li a img, .blog-roll-card-meta-info li a img {
1442 |     height: 50px;
1443 |     width: 50px;
1444 |   }
1445 | }
1446 | 
1447 | @media only screen and (min-width: 768px) {
1448 |   .single-post-meta-info li::before, .blog-roll-card-meta-info li::before {
1449 |     position: absolute;
1450 |     content: "";
1451 |     right: -5px;
1452 |     top: 50%;
1453 |     background-color: #d2d2d2;
1454 |     height: 5px;
1455 |     width: 5px;
1456 |     border-radius: 50%;
1457 |     -webkit-transform: translateY(-50%);
1458 |     transform: translateY(-50%);
1459 |   }
1460 | }
1461 | 
1462 | @media only screen and (min-width: 768px) {
1463 |   .single-post-meta-info li:last-of-type::before, .blog-roll-card-meta-info li:last-of-type::before {
1464 |     content: none;
1465 |   }
1466 | }
1467 | 
1468 | .single-post-thumbnail {
1469 |   position: relative;
1470 |   overflow: hidden;
1471 |   border-radius: 0;
1472 |   width: 100%;
1473 |   margin-top: 15px;
1474 |   /* changes for Image tag */
1475 |   height: 300px;
1476 |   /* end of changes for Image tag */
1477 | }
1478 | 
1479 | .single-post-thumbnail img {
1480 |   width: 100%;
1481 | }
1482 | 
1483 | @media only screen and (min-width: 550px) {
1484 |   .single-post-thumbnail {
1485 |     margin-top: 42px;
1486 |   }
1487 | }
1488 | 
1489 | @media only screen and (min-width: 768px) {
1490 |   .single-post-thumbnail {
1491 |     margin-top: 52px;
1492 |   }
1493 | }
1494 | 
1495 | .single-post-body, .blog-roll-card-body {
1496 |   padding: 30px 16px;
1497 | }
1498 | 
1499 | @media only screen and (min-width: 550px) {
1500 |   .single-post-body, .blog-roll-card-body {
1501 |     padding: 42px 24px;
1502 |   }
1503 | }
1504 | 
1505 | @media only screen and (min-width: 768px) {
1506 |   .single-post-body, .blog-roll-card-body {
1507 |     padding: 52px 30px;
1508 |   }
1509 | }
1510 | 
1511 | .single-post-body h3, .blog-roll-card-body h3, .single-post-body .single-post-header, .blog-roll-card-body .single-post-header, .single-post-body .blog-roll-card-header, .blog-roll-card-body .blog-roll-card-header {
1512 |   margin-top: 10px;
1513 |   margin-bottom: 20px;
1514 | }
1515 | 
1516 | .single-post-body p, .blog-roll-card-body p {
1517 |   margin-bottom: 20px;
1518 | }
1519 | 
1520 | .single-post-body figure img, .blog-roll-card-body figure img {
1521 |   max-width: 100%;
1522 | }
1523 | 
1524 | @media only screen and (min-width: 768px) {
1525 |   .blog-roll-card .single-post-thumbnail {
1526 |     margin-top: 30px;
1527 |   }
1528 | }
1529 | 
1530 | .blog-roll-card-meta {
1531 |   padding: 15px 15px 0 15px;
1532 | }
1533 | 
1534 | @media only screen and (min-width: 768px) {
1535 |   .blog-roll-card-meta {
1536 |     padding: 30px 30px 0 30px;
1537 |   }
1538 | }
1539 | 
1540 | .blog-roll-card-header a {
1541 |   color: rgba(0, 0, 0, 0.7);
1542 | }
1543 | 
1544 | .blog-roll-card-header a:hover {
1545 |   color: #37C2CC;
1546 | }
1547 | 
1548 | .blog-roll-card-body {
1549 |   padding: 15px 15px 5px;
1550 | }
1551 | 
1552 | @media only screen and (min-width: 768px) {
1553 |   .blog-roll-card-body {
1554 |     padding: 30px 30px 10px;
1555 |   }
1556 | }
1557 | 
1558 | .blog-roll-card-footer {
1559 |   padding: 0px 15px 15px;
1560 | }
1561 | 
1562 | @media only screen and (min-width: 768px) {
1563 |   .blog-roll-card-footer {
1564 |     padding: 0 30px 30px;
1565 |   }
1566 | }
1567 | 
1568 | /* =====================
1569 |     TEAM SECTION CSS
1570 | ======================== */
1571 | .team-section .single-team {
1572 |   position: relative;
1573 |   margin-bottom: 50px;
1574 | }
1575 | 
1576 | .team-section .single-team .team-image {
1577 |   max-width: 313px;
1578 |   width: 100%;
1579 |   border-radius: 50%;
1580 | }
1581 | 
1582 | .team-section .single-team .team-image img {
1583 |   width: 100%;
1584 | }
1585 | 
1586 | .team-section .single-team .team-info {
1587 |   position: absolute;
1588 |   bottom: 30px;
1589 |   right: 0;
1590 |   background: #fff;
1591 |   -webkit-box-shadow: 0px 8px 25px rgba(211, 211, 211, 0.25);
1592 |   -moz-box-shadow: 0px 8px 25px rgba(211, 211, 211, 0.25);
1593 |   box-shadow: 0px 8px 25px rgba(211, 211, 211, 0.25);
1594 |   padding: 20px 30px;
1595 |   min-width: 210px;
1596 |   text-align: center;
1597 | }
1598 | 
1599 | .team-section .single-team .team-info h4 {
1600 |   font-size: 20px;
1601 |   margin-bottom: 5px;
1602 | }
1603 | 
1604 | .team-section .single-team .team-info p {
1605 |   font-size: 14px;
1606 | }
1607 | 
1608 | /* ========================
1609 | 		TESTIMONIAL CSS
1610 | =========================== */
1611 | .testimonial-section {
1612 |   background-image: url("../public/images/testimonial/testimonial-bg.svg");
1613 |   background-size: cover;
1614 |   background-position: bottom center;
1615 |   padding-top: 75px;
1616 |   padding-bottom: 130px;
1617 |   border-radius: 333px 0px;
1618 |   position: relative;
1619 |   z-index: 1;
1620 | }
1621 | 
1622 | @media only screen and (min-width: 1200px) and (max-width: 1399px) {
1623 |   .testimonial-section {
1624 |     border-radius: 200px 0px;
1625 |   }
1626 | }
1627 | 
1628 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
1629 |   .testimonial-section {
1630 |     border-radius: 100px 0px;
1631 |   }
1632 | }
1633 | 
1634 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
1635 |   .testimonial-section {
1636 |     border-radius: 70px 0px;
1637 |   }
1638 | }
1639 | 
1640 | .testimonial-section .testimonial-active-wrapper {
1641 |   position: relative;
1642 | }
1643 | 
1644 | @media (max-width: 767px) {
1645 |   .testimonial-section .testimonial-active-wrapper {
1646 |     padding-bottom: 80px;
1647 |   }
1648 | }
1649 | 
1650 | .testimonial-section .testimonial-active-wrapper .tns-controls {
1651 |   position: absolute;
1652 |   right: 0;
1653 |   bottom: 0;
1654 |   width: 100%;
1655 |   z-index: 2;
1656 |   display: flex;
1657 |   align-items: center;
1658 |   justify-content: flex-end;
1659 | }
1660 | 
1661 | @media (max-width: 767px) {
1662 |   .testimonial-section .testimonial-active-wrapper .tns-controls {
1663 |     justify-content: center;
1664 |   }
1665 | }
1666 | 
1667 | .testimonial-section .testimonial-active-wrapper .tns-controls button {
1668 |   width: 55px;
1669 |   height: 55px;
1670 |   display: flex;
1671 |   align-items: center;
1672 |   justify-content: center;
1673 |   border-radius: 50%;
1674 |   background: #fff;
1675 |   color: rgba(0, 0, 0, 0.9);
1676 |   border: 1px solid #37C2CC;
1677 |   -webkit-transition: all 0.3s ease-out 0s;
1678 |   -moz-transition: all 0.3s ease-out 0s;
1679 |   -ms-transition: all 0.3s ease-out 0s;
1680 |   -o-transition: all 0.3s ease-out 0s;
1681 |   transition: all 0.3s ease-out 0s;
1682 |   margin: 0 5px;
1683 | }
1684 | 
1685 | .testimonial-section .testimonial-active-wrapper .tns-controls button:hover {
1686 |   background: #37C2CC;
1687 |   color: #fff;
1688 | }
1689 | 
1690 | .testimonial-section .testimonial-active-wrapper .single-testimonial {
1691 |   text-align: center;
1692 | }
1693 | 
1694 | .testimonial-section .testimonial-active-wrapper .single-testimonial .quote {
1695 |   font-size: 55px;
1696 |   line-height: 1;
1697 |   color: #37C2CC;
1698 |   margin-bottom: 20px;
1699 | }
1700 | 
1701 | .testimonial-section .testimonial-active-wrapper .single-testimonial .content {
1702 |   margin-bottom: 30px;
1703 | }
1704 | 
1705 | .testimonial-section .testimonial-active-wrapper .single-testimonial .content p {
1706 |   font-size: 22px;
1707 |   line-height: 35px;
1708 |   color: rgba(0, 0, 0, 0.7);
1709 |   padding: 0 15px;
1710 | }
1711 | 
1712 | @media (max-width: 767px) {
1713 |   .testimonial-section .testimonial-active-wrapper .single-testimonial .content p {
1714 |     font-size: 18px;
1715 |     line-height: 28px;
1716 |     padding: 0px;
1717 |   }
1718 | }
1719 | 
1720 | .testimonial-section .testimonial-active-wrapper .single-testimonial .info h6 {
1721 |   font-size: 16px;
1722 |   font-weight: 700;
1723 |   margin-bottom: 10px;
1724 | }
1725 | 
1726 | .testimonial-section .testimonial-active-wrapper .single-testimonial .info p {
1727 |   font-size: 15px;
1728 | }
1729 | 
1730 | .testimonial-section .testimonial-images .testimonial-image {
1731 |   position: absolute;
1732 |   z-index: -1;
1733 |   max-width: 100%;
1734 | }
1735 | 
1736 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
1737 |   .testimonial-section .testimonial-images .testimonial-image {
1738 |     display: none;
1739 |   }
1740 | }
1741 | 
1742 | .testimonial-section .testimonial-images .testimonial-image.image-1 {
1743 |   left: 10%;
1744 |   top: 30%;
1745 | }
1746 | 
1747 | .testimonial-section .testimonial-images .testimonial-image.image-2 {
1748 |   bottom: 5%;
1749 |   left: 15%;
1750 | }
1751 | 
1752 | .testimonial-section .testimonial-images .testimonial-image.image-3 {
1753 |   top: 5%;
1754 |   right: 10%;
1755 | }
1756 | 
1757 | .testimonial-section .testimonial-images .testimonial-image.image-4 {
1758 |   top: 40%;
1759 |   right: 12%;
1760 | }
1761 | 
1762 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
1763 |   .testimonial-section .testimonial-images .testimonial-image.image-4 {
1764 |     right: 8%;
1765 |   }
1766 | }
1767 | 
1768 | /* ==========================
1769 |     FOOTER CSS
1770 | ============================= */
1771 | .footer .footer-widget {
1772 |   margin-bottom: 50px;
1773 | }
1774 | 
1775 | .footer .footer-widget .logo {
1776 |   margin-bottom: 30px;
1777 | }
1778 | 
1779 | .footer .footer-widget .desc {
1780 |   margin-bottom: 25px;
1781 | }
1782 | 
1783 | .footer .footer-widget .social-links {
1784 |   display: flex;
1785 |   align-items: center;
1786 | }
1787 | 
1788 | .footer .footer-widget .social-links li a {
1789 |   width: 44px;
1790 |   height: 44px;
1791 |   border-radius: 50%;
1792 |   background: #E3FDFF;
1793 |   color: rgba(0, 0, 0, 0.9);
1794 |   display: flex;
1795 |   align-items: center;
1796 |   justify-content: center;
1797 |   margin-right: 18px;
1798 |   font-size: 22px;
1799 | }
1800 | 
1801 | .footer .footer-widget .social-links li a:hover {
1802 |   background: #37C2CC;
1803 |   color: #fff;
1804 | }
1805 | 
1806 | .footer .footer-widget h3, .footer .footer-widget .single-post-header, .footer .footer-widget .blog-roll-card-header {
1807 |   margin-bottom: 30px;
1808 |   margin-top: 10px;
1809 | }
1810 | 
1811 | .footer .footer-widget .links li a {
1812 |   font-size: 16px;
1813 |   line-height: 30px;
1814 |   color: rgba(0, 0, 0, 0.7);
1815 | }
1816 | 
1817 | .footer .footer-widget .links li a:hover {
1818 |   padding-left: 8px;
1819 |   color: #37C2CC;
1820 | }
1821 | 
1822 | .footer .footer-widget form {
1823 |   display: flex;
1824 |   flex-direction: column;
1825 |   align-items: flex-end;
1826 | }
1827 | 
1828 | .footer .footer-widget form input {
1829 |   width: 100%;
1830 |   background: #F1FEFF;
1831 |   border: 1px solid #37C2CC;
1832 |   box-sizing: border-box;
1833 |   border-radius: 10px;
1834 |   margin-bottom: 20px;
1835 |   padding: 15px 20px;
1836 | }
1837 | 
1838 | .footer .footer-widget form button {
1839 |   text-align: right;
1840 | }
1841 | 
1842 | /* ======================
1843 |     DEFAULT CSS
1844 | ========================= */
1845 | .mt-5 {
1846 |   margin-top: 5px;
1847 | }
1848 | 
1849 | .mt-10 {
1850 |   margin-top: 10px;
1851 | }
1852 | 
1853 | .mt-15 {
1854 |   margin-top: 15px;
1855 | }
1856 | 
1857 | .mt-20 {
1858 |   margin-top: 20px;
1859 | }
1860 | 
1861 | .mt-25 {
1862 |   margin-top: 25px;
1863 | }
1864 | 
1865 | .mt-30 {
1866 |   margin-top: 30px;
1867 | }
1868 | 
1869 | .mt-35 {
1870 |   margin-top: 35px;
1871 | }
1872 | 
1873 | .mt-40 {
1874 |   margin-top: 40px;
1875 | }
1876 | 
1877 | .mt-45 {
1878 |   margin-top: 45px;
1879 | }
1880 | 
1881 | .mt-50 {
1882 |   margin-top: 50px;
1883 | }
1884 | 
1885 | .mt-55 {
1886 |   margin-top: 55px;
1887 | }
1888 | 
1889 | .mt-60 {
1890 |   margin-top: 60px;
1891 | }
1892 | 
1893 | .mt-65 {
1894 |   margin-top: 65px;
1895 | }
1896 | 
1897 | .mt-70 {
1898 |   margin-top: 70px;
1899 | }
1900 | 
1901 | .mt-75 {
1902 |   margin-top: 75px;
1903 | }
1904 | 
1905 | .mt-80 {
1906 |   margin-top: 80px;
1907 | }
1908 | 
1909 | .mt-85 {
1910 |   margin-top: 85px;
1911 | }
1912 | 
1913 | .mt-90 {
1914 |   margin-top: 90px;
1915 | }
1916 | 
1917 | .mt-95 {
1918 |   margin-top: 95px;
1919 | }
1920 | 
1921 | .mt-100 {
1922 |   margin-top: 100px;
1923 | }
1924 | 
1925 | .mt-105 {
1926 |   margin-top: 105px;
1927 | }
1928 | 
1929 | .mt-110 {
1930 |   margin-top: 110px;
1931 | }
1932 | 
1933 | .mt-115 {
1934 |   margin-top: 115px;
1935 | }
1936 | 
1937 | .mt-120 {
1938 |   margin-top: 120px;
1939 | }
1940 | 
1941 | .mt-125 {
1942 |   margin-top: 125px;
1943 | }
1944 | 
1945 | .mt-130 {
1946 |   margin-top: 130px;
1947 | }
1948 | 
1949 | .mt-135 {
1950 |   margin-top: 135px;
1951 | }
1952 | 
1953 | .mt-140 {
1954 |   margin-top: 140px;
1955 | }
1956 | 
1957 | .mt-145 {
1958 |   margin-top: 145px;
1959 | }
1960 | 
1961 | .mt-150 {
1962 |   margin-top: 150px;
1963 | }
1964 | 
1965 | .mt-155 {
1966 |   margin-top: 155px;
1967 | }
1968 | 
1969 | .mt-160 {
1970 |   margin-top: 160px;
1971 | }
1972 | 
1973 | .mt-165 {
1974 |   margin-top: 165px;
1975 | }
1976 | 
1977 | .mt-170 {
1978 |   margin-top: 170px;
1979 | }
1980 | 
1981 | .mt-175 {
1982 |   margin-top: 175px;
1983 | }
1984 | 
1985 | .mt-180 {
1986 |   margin-top: 180px;
1987 | }
1988 | 
1989 | .mt-185 {
1990 |   margin-top: 185px;
1991 | }
1992 | 
1993 | .mt-190 {
1994 |   margin-top: 190px;
1995 | }
1996 | 
1997 | .mt-195 {
1998 |   margin-top: 195px;
1999 | }
2000 | 
2001 | .mt-200 {
2002 |   margin-top: 200px;
2003 | }
2004 | 
2005 | .mt-205 {
2006 |   margin-top: 205px;
2007 | }
2008 | 
2009 | .mt-210 {
2010 |   margin-top: 210px;
2011 | }
2012 | 
2013 | .mt-215 {
2014 |   margin-top: 215px;
2015 | }
2016 | 
2017 | .mt-220 {
2018 |   margin-top: 220px;
2019 | }
2020 | 
2021 | .mt-225 {
2022 |   margin-top: 225px;
2023 | }
2024 | 
2025 | .mb-5 {
2026 |   margin-bottom: 5px;
2027 | }
2028 | 
2029 | .mb-10 {
2030 |   margin-bottom: 10px;
2031 | }
2032 | 
2033 | .mb-15 {
2034 |   margin-bottom: 15px;
2035 | }
2036 | 
2037 | .mb-20 {
2038 |   margin-bottom: 20px;
2039 | }
2040 | 
2041 | .mb-25 {
2042 |   margin-bottom: 25px;
2043 | }
2044 | 
2045 | .mb-30 {
2046 |   margin-bottom: 30px;
2047 | }
2048 | 
2049 | .mb-35 {
2050 |   margin-bottom: 35px;
2051 | }
2052 | 
2053 | .mb-40 {
2054 |   margin-bottom: 40px;
2055 | }
2056 | 
2057 | .mb-45 {
2058 |   margin-bottom: 45px;
2059 | }
2060 | 
2061 | .mb-50 {
2062 |   margin-bottom: 50px;
2063 | }
2064 | 
2065 | .mb-55 {
2066 |   margin-bottom: 55px;
2067 | }
2068 | 
2069 | .mb-60 {
2070 |   margin-bottom: 60px;
2071 | }
2072 | 
2073 | .mb-65 {
2074 |   margin-bottom: 65px;
2075 | }
2076 | 
2077 | .mb-70 {
2078 |   margin-bottom: 70px;
2079 | }
2080 | 
2081 | .mb-75 {
2082 |   margin-bottom: 75px;
2083 | }
2084 | 
2085 | .mb-80 {
2086 |   margin-bottom: 80px;
2087 | }
2088 | 
2089 | .mb-85 {
2090 |   margin-bottom: 85px;
2091 | }
2092 | 
2093 | .mb-90 {
2094 |   margin-bottom: 90px;
2095 | }
2096 | 
2097 | .mb-95 {
2098 |   margin-bottom: 95px;
2099 | }
2100 | 
2101 | .mb-100 {
2102 |   margin-bottom: 100px;
2103 | }
2104 | 
2105 | .mb-105 {
2106 |   margin-bottom: 105px;
2107 | }
2108 | 
2109 | .mb-110 {
2110 |   margin-bottom: 110px;
2111 | }
2112 | 
2113 | .mb-115 {
2114 |   margin-bottom: 115px;
2115 | }
2116 | 
2117 | .mb-120 {
2118 |   margin-bottom: 120px;
2119 | }
2120 | 
2121 | .mb-125 {
2122 |   margin-bottom: 125px;
2123 | }
2124 | 
2125 | .mb-130 {
2126 |   margin-bottom: 130px;
2127 | }
2128 | 
2129 | .mb-135 {
2130 |   margin-bottom: 135px;
2131 | }
2132 | 
2133 | .mb-140 {
2134 |   margin-bottom: 140px;
2135 | }
2136 | 
2137 | .mb-145 {
2138 |   margin-bottom: 145px;
2139 | }
2140 | 
2141 | .mb-150 {
2142 |   margin-bottom: 150px;
2143 | }
2144 | 
2145 | .mb-155 {
2146 |   margin-bottom: 155px;
2147 | }
2148 | 
2149 | .mb-160 {
2150 |   margin-bottom: 160px;
2151 | }
2152 | 
2153 | .mb-165 {
2154 |   margin-bottom: 165px;
2155 | }
2156 | 
2157 | .mb-170 {
2158 |   margin-bottom: 170px;
2159 | }
2160 | 
2161 | .mb-175 {
2162 |   margin-bottom: 175px;
2163 | }
2164 | 
2165 | .mb-180 {
2166 |   margin-bottom: 180px;
2167 | }
2168 | 
2169 | .mb-185 {
2170 |   margin-bottom: 185px;
2171 | }
2172 | 
2173 | .mb-190 {
2174 |   margin-bottom: 190px;
2175 | }
2176 | 
2177 | .mb-195 {
2178 |   margin-bottom: 195px;
2179 | }
2180 | 
2181 | .mb-200 {
2182 |   margin-bottom: 200px;
2183 | }
2184 | 
2185 | .mb-205 {
2186 |   margin-bottom: 205px;
2187 | }
2188 | 
2189 | .mb-210 {
2190 |   margin-bottom: 210px;
2191 | }
2192 | 
2193 | .mb-215 {
2194 |   margin-bottom: 215px;
2195 | }
2196 | 
2197 | .mb-220 {
2198 |   margin-bottom: 220px;
2199 | }
2200 | 
2201 | .mb-225 {
2202 |   margin-bottom: 225px;
2203 | }
2204 | 
2205 | .pt-5 {
2206 |   padding-top: 5px;
2207 | }
2208 | 
2209 | .pt-10 {
2210 |   padding-top: 10px;
2211 | }
2212 | 
2213 | .pt-15 {
2214 |   padding-top: 15px;
2215 | }
2216 | 
2217 | .pt-20 {
2218 |   padding-top: 20px;
2219 | }
2220 | 
2221 | .pt-25 {
2222 |   padding-top: 25px;
2223 | }
2224 | 
2225 | .pt-30 {
2226 |   padding-top: 30px;
2227 | }
2228 | 
2229 | .pt-35 {
2230 |   padding-top: 35px;
2231 | }
2232 | 
2233 | .pt-40 {
2234 |   padding-top: 40px;
2235 | }
2236 | 
2237 | .pt-45 {
2238 |   padding-top: 45px;
2239 | }
2240 | 
2241 | .pt-50 {
2242 |   padding-top: 50px;
2243 | }
2244 | 
2245 | .pt-55 {
2246 |   padding-top: 55px;
2247 | }
2248 | 
2249 | .pt-60 {
2250 |   padding-top: 60px;
2251 | }
2252 | 
2253 | .pt-65 {
2254 |   padding-top: 65px;
2255 | }
2256 | 
2257 | .pt-70 {
2258 |   padding-top: 70px;
2259 | }
2260 | 
2261 | .pt-75 {
2262 |   padding-top: 75px;
2263 | }
2264 | 
2265 | .pt-80 {
2266 |   padding-top: 80px;
2267 | }
2268 | 
2269 | .pt-85 {
2270 |   padding-top: 85px;
2271 | }
2272 | 
2273 | .pt-90 {
2274 |   padding-top: 90px;
2275 | }
2276 | 
2277 | .pt-95 {
2278 |   padding-top: 95px;
2279 | }
2280 | 
2281 | .pt-100 {
2282 |   padding-top: 100px;
2283 | }
2284 | 
2285 | .pt-105 {
2286 |   padding-top: 105px;
2287 | }
2288 | 
2289 | .pt-110 {
2290 |   padding-top: 110px;
2291 | }
2292 | 
2293 | .pt-115 {
2294 |   padding-top: 115px;
2295 | }
2296 | 
2297 | .pt-120 {
2298 |   padding-top: 120px;
2299 | }
2300 | 
2301 | .pt-125 {
2302 |   padding-top: 125px;
2303 | }
2304 | 
2305 | .pt-130 {
2306 |   padding-top: 130px;
2307 | }
2308 | 
2309 | .pt-135 {
2310 |   padding-top: 135px;
2311 | }
2312 | 
2313 | .pt-140 {
2314 |   padding-top: 140px;
2315 | }
2316 | 
2317 | .pt-145 {
2318 |   padding-top: 145px;
2319 | }
2320 | 
2321 | .pt-150 {
2322 |   padding-top: 150px;
2323 | }
2324 | 
2325 | .pt-155 {
2326 |   padding-top: 155px;
2327 | }
2328 | 
2329 | .pt-160 {
2330 |   padding-top: 160px;
2331 | }
2332 | 
2333 | .pt-165 {
2334 |   padding-top: 165px;
2335 | }
2336 | 
2337 | .pt-170 {
2338 |   padding-top: 170px;
2339 | }
2340 | 
2341 | .pt-175 {
2342 |   padding-top: 175px;
2343 | }
2344 | 
2345 | .pt-180 {
2346 |   padding-top: 180px;
2347 | }
2348 | 
2349 | .pt-185 {
2350 |   padding-top: 185px;
2351 | }
2352 | 
2353 | .pt-190 {
2354 |   padding-top: 190px;
2355 | }
2356 | 
2357 | .pt-195 {
2358 |   padding-top: 195px;
2359 | }
2360 | 
2361 | .pt-200 {
2362 |   padding-top: 200px;
2363 | }
2364 | 
2365 | .pt-205 {
2366 |   padding-top: 205px;
2367 | }
2368 | 
2369 | .pt-210 {
2370 |   padding-top: 210px;
2371 | }
2372 | 
2373 | .pt-215 {
2374 |   padding-top: 215px;
2375 | }
2376 | 
2377 | .pt-220 {
2378 |   padding-top: 220px;
2379 | }
2380 | 
2381 | .pt-225 {
2382 |   padding-top: 225px;
2383 | }
2384 | 
2385 | .pb-5 {
2386 |   padding-bottom: 5px;
2387 | }
2388 | 
2389 | .pb-10 {
2390 |   padding-bottom: 10px;
2391 | }
2392 | 
2393 | .pb-15 {
2394 |   padding-bottom: 15px;
2395 | }
2396 | 
2397 | .pb-20 {
2398 |   padding-bottom: 20px;
2399 | }
2400 | 
2401 | .pb-25 {
2402 |   padding-bottom: 25px;
2403 | }
2404 | 
2405 | .pb-30 {
2406 |   padding-bottom: 30px;
2407 | }
2408 | 
2409 | .pb-35 {
2410 |   padding-bottom: 35px;
2411 | }
2412 | 
2413 | .pb-40 {
2414 |   padding-bottom: 40px;
2415 | }
2416 | 
2417 | .pb-45 {
2418 |   padding-bottom: 45px;
2419 | }
2420 | 
2421 | .pb-50 {
2422 |   padding-bottom: 50px;
2423 | }
2424 | 
2425 | .pb-55 {
2426 |   padding-bottom: 55px;
2427 | }
2428 | 
2429 | .pb-60 {
2430 |   padding-bottom: 60px;
2431 | }
2432 | 
2433 | .pb-65 {
2434 |   padding-bottom: 65px;
2435 | }
2436 | 
2437 | .pb-70 {
2438 |   padding-bottom: 70px;
2439 | }
2440 | 
2441 | .pb-75 {
2442 |   padding-bottom: 75px;
2443 | }
2444 | 
2445 | .pb-80 {
2446 |   padding-bottom: 80px;
2447 | }
2448 | 
2449 | .pb-85 {
2450 |   padding-bottom: 85px;
2451 | }
2452 | 
2453 | .pb-90 {
2454 |   padding-bottom: 90px;
2455 | }
2456 | 
2457 | .pb-95 {
2458 |   padding-bottom: 95px;
2459 | }
2460 | 
2461 | .pb-100 {
2462 |   padding-bottom: 100px;
2463 | }
2464 | 
2465 | .pb-105 {
2466 |   padding-bottom: 105px;
2467 | }
2468 | 
2469 | .pb-110 {
2470 |   padding-bottom: 110px;
2471 | }
2472 | 
2473 | .pb-115 {
2474 |   padding-bottom: 115px;
2475 | }
2476 | 
2477 | .pb-120 {
2478 |   padding-bottom: 120px;
2479 | }
2480 | 
2481 | .pb-125 {
2482 |   padding-bottom: 125px;
2483 | }
2484 | 
2485 | .pb-130 {
2486 |   padding-bottom: 130px;
2487 | }
2488 | 
2489 | .pb-135 {
2490 |   padding-bottom: 135px;
2491 | }
2492 | 
2493 | .pb-140 {
2494 |   padding-bottom: 140px;
2495 | }
2496 | 
2497 | .pb-145 {
2498 |   padding-bottom: 145px;
2499 | }
2500 | 
2501 | .pb-150 {
2502 |   padding-bottom: 150px;
2503 | }
2504 | 
2505 | .pb-155 {
2506 |   padding-bottom: 155px;
2507 | }
2508 | 
2509 | .pb-160 {
2510 |   padding-bottom: 160px;
2511 | }
2512 | 
2513 | .pb-165 {
2514 |   padding-bottom: 165px;
2515 | }
2516 | 
2517 | .pb-170 {
2518 |   padding-bottom: 170px;
2519 | }
2520 | 
2521 | .pb-175 {
2522 |   padding-bottom: 175px;
2523 | }
2524 | 
2525 | .pb-180 {
2526 |   padding-bottom: 180px;
2527 | }
2528 | 
2529 | .pb-185 {
2530 |   padding-bottom: 185px;
2531 | }
2532 | 
2533 | .pb-190 {
2534 |   padding-bottom: 190px;
2535 | }
2536 | 
2537 | .pb-195 {
2538 |   padding-bottom: 195px;
2539 | }
2540 | 
2541 | .pb-200 {
2542 |   padding-bottom: 200px;
2543 | }
2544 | 
2545 | .pb-205 {
2546 |   padding-bottom: 205px;
2547 | }
2548 | 
2549 | .pb-210 {
2550 |   padding-bottom: 210px;
2551 | }
2552 | 
2553 | .pb-215 {
2554 |   padding-bottom: 215px;
2555 | }
2556 | 
2557 | .pb-220 {
2558 |   padding-bottom: 220px;
2559 | }
2560 | 
2561 | .pb-225 {
2562 |   padding-bottom: 225px;
2563 | }
2564 | 
2565 | .widget {
2566 |   background: #fff;
2567 |   box-shadow: 0px 0px 50px rgba(183, 199, 240, 0.25);
2568 |   border-radius: 14px;
2569 |   padding: 30px;
2570 |   margin-bottom: 30px;
2571 |   position: relative;
2572 |   overflow: hidden;
2573 |   z-index: 1;
2574 | }
2575 | 
2576 | .widget form {
2577 |   position: relative;
2578 | }
2579 | 
2580 | .widget form input {
2581 |   background-color: transparent;
2582 |   border-radius: 5px;
2583 |   border: 1px solid #37C2CC;
2584 |   font-size: 14px;
2585 |   font-weight: 400;
2586 |   height: 55px;
2587 |   padding: 0 70px 0 30px;
2588 |   width: 100%;
2589 | }
2590 | 
2591 | .widget form button {
2592 |   border: none;
2593 |   position: absolute;
2594 |   right: 7px;
2595 |   top: 6px;
2596 |   width: 42px;
2597 |   height: 42px;
2598 |   z-index: 1;
2599 |   color: #fff !important;
2600 |   font-size: 13px;
2601 |   -webkit-transition: all 0.3s ease-out 0s;
2602 |   transition: all 0.3s ease-out 0s;
2603 |   color: #fff;
2604 |   border-radius: 5px;
2605 |   padding: 0 !important;
2606 |   border: none;
2607 |   background: #37C2CC;
2608 | }
2609 | 
2610 | .widget-title {
2611 |   font-size: 22px;
2612 |   margin-bottom: 30px;
2613 |   position: relative;
2614 |   font-weight: 600;
2615 |   line-height: 28px;
2616 |   z-index: 1;
2617 | }
2618 | 
2619 | .categories-widget .categories-list li {
2620 |   display: inline;
2621 | }
2622 | 
2623 | .categories-widget .categories-list li>a {
2624 |   -ms-flex-pack: center;
2625 |   -webkit-box-pack: center;
2626 |   background: 0 0;
2627 |   border-radius: 5px;
2628 |   border: 1px solid #37C2CC;
2629 |   color: rgba(0, 0, 0, 0.7);
2630 |   display: -ms-inline-flexbox;
2631 |   display: -webkit-inline-box;
2632 |   display: inline-flex;
2633 |   font-size: 14px;
2634 |   font-weight: 400;
2635 |   justify-content: center;
2636 |   margin-bottom: 10px;
2637 |   margin-right: 5px;
2638 |   padding: 7px 15px;
2639 |   text-transform: capitalize;
2640 | }
2641 | 
2642 | .categories-widget .categories-list li>a:hover {
2643 |   background-color: #37C2CC;
2644 |   color: #fff;
2645 |   border-color: transparent;
2646 | }
2647 | 
2648 | /*# sourceMappingURL=main.css.map */


--------------------------------------------------------------------------------