├── styles ├── Home.module.css ├── globals.css └── queue-new.css ├── .eslintrc.json ├── next.config.js ├── public ├── favicon.ico ├── Images │ ├── HomePage │ │ ├── bg.jpg │ │ ├── qr.png │ │ ├── step-1.png │ │ ├── step-2.png │ │ ├── step-3.png │ │ ├── Automation.png │ │ ├── time.svg │ │ ├── instruction.svg │ │ ├── better.svg │ │ ├── maintain.svg │ │ ├── social.svg │ │ └── customer-feedback.svg │ └── readme │ │ ├── About3.png │ │ ├── about1.png │ │ ├── about2.png │ │ └── about4.png └── vercel.svg ├── pages ├── api │ ├── hello.js │ ├── getList.js │ ├── getAdminList.js │ ├── deleteList.js │ ├── deleteObj.js │ ├── deleteAdmin.js │ ├── auth.js │ ├── newAdmin.js │ ├── registerQ.js │ ├── sendMessage.js │ └── userInfo.js ├── _app.js ├── index.js ├── queue │ ├── [admin] │ │ ├── [date] │ │ │ └── [id].js │ │ └── [date].js │ └── [admin].js ├── login.js ├── registration.js ├── signup.js └── superadmin.js ├── .gitignore ├── lib └── mongodb.js ├── package.json ├── README.md └── components ├── Slider.js ├── NavforSuperAdmin.js ├── Footer.js ├── Nav.js └── about.js /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | 5 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/Images/HomePage/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/HomePage/bg.jpg -------------------------------------------------------------------------------- /public/Images/HomePage/qr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/HomePage/qr.png -------------------------------------------------------------------------------- /public/Images/HomePage/step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/HomePage/step-1.png -------------------------------------------------------------------------------- /public/Images/HomePage/step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/HomePage/step-2.png -------------------------------------------------------------------------------- /public/Images/HomePage/step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/HomePage/step-3.png -------------------------------------------------------------------------------- /public/Images/readme/About3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/readme/About3.png -------------------------------------------------------------------------------- /public/Images/readme/about1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/readme/about1.png -------------------------------------------------------------------------------- /public/Images/readme/about2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/readme/about2.png -------------------------------------------------------------------------------- /public/Images/readme/about4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/readme/about4.png -------------------------------------------------------------------------------- /public/Images/HomePage/Automation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhi-05-04/QueueAutomation/HEAD/public/Images/HomePage/Automation.png -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import '../styles/front.css' 3 | import '../styles/queue-new.css' 4 | import '../styles/front.css' 5 | 6 | function MyApp({ Component, pageProps }) { 7 | console.log(process.env.DOMAIN); 8 | // return ( 9 | //
Hello
10 | // ) 11 | return 12 | } 13 | 14 | export default MyApp 15 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0!important; 4 | margin: 0!important; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif!important; 7 | } 8 | 9 | a { 10 | color: inherit!important; 11 | text-decoration: none!important; 12 | } 13 | 14 | * { 15 | box-sizing: border-box!important; 16 | } 17 | -------------------------------------------------------------------------------- /pages/api/getList.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | 3 | 4 | export default async function handler(req,res){ 5 | const { db } = await connectToDatabase() 6 | const data = req.query 7 | 8 | await db.collection('Queue').find(data).toArray() 9 | .then((result)=>{ 10 | // console.log(result ); 11 | res.json(result); 12 | }) 13 | .catch((err)=>{ 14 | res.json({message:"error in database"}); 15 | console.log(err); 16 | }) 17 | 18 | 19 | } -------------------------------------------------------------------------------- /pages/api/getAdminList.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | 3 | 4 | export default async function handler(req,res){ 5 | const { db } = await connectToDatabase() 6 | const data = req.query 7 | 8 | await db.collection('Admin').find({}).toArray() 9 | .then((result)=>{ 10 | // console.log(result ); 11 | res.json(result); 12 | }) 13 | .catch((err)=>{ 14 | res.json({message:"error in database"}); 15 | console.log(err); 16 | }) 17 | 18 | 19 | } -------------------------------------------------------------------------------- /pages/api/deleteList.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | 3 | 4 | export default async function handler(req,res){ 5 | const { db } = await connectToDatabase() 6 | 7 | const data = req.query 8 | console.log(data.admin); 9 | 10 | await db.collection('Queue').deleteMany(data) 11 | .then(()=>{ 12 | res.json({message : "deleted"}); 13 | }) 14 | .catch((err)=>{ 15 | res.json({message:"error in database"}); 16 | console.log(err); 17 | }) 18 | 19 | 20 | } -------------------------------------------------------------------------------- /.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.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /pages/api/deleteObj.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | import { ObjectId } from "mongodb"; 3 | 4 | 5 | export default async function handler(req,res){ 6 | const { db } = await connectToDatabase() 7 | const data = req.query.id 8 | console.log(data); 9 | await db.collection('Queue').deleteOne({"_id": ObjectId(data)}) 10 | .then(()=>{ 11 | res.json({message : "deleted"}); 12 | }) 13 | .catch((err)=>{ 14 | res.json({message:"error in database"}); 15 | console.log(err); 16 | }) 17 | 18 | 19 | } -------------------------------------------------------------------------------- /pages/api/deleteAdmin.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | import { ObjectId } from "mongodb"; 3 | 4 | 5 | export default async function handler(req,res){ 6 | const { db } = await connectToDatabase() 7 | const data = req.query.id 8 | console.log(data); 9 | await db.collection('Admin').deleteOne({"_id": ObjectId(data)}) 10 | .then(()=>{ 11 | res.json({message : "deleted"}); 12 | }) 13 | .catch((err)=>{ 14 | res.json({message:"error in database"}); 15 | console.log(err); 16 | }) 17 | 18 | 19 | } -------------------------------------------------------------------------------- /pages/api/auth.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | 3 | 4 | export default async function handler(req,res){ 5 | const { db } = await connectToDatabase() 6 | const data = req.query 7 | await db.collection('Admin').findOne({email :data.email , password : data.password} ) 8 | .then((findingData)=>{ 9 | console.log(findingData); 10 | if(findingData != null){ 11 | res.json(findingData); 12 | } 13 | else{ 14 | res.json({'user':'Wrong Credentials'}); 15 | } 16 | }) 17 | 18 | 19 | } -------------------------------------------------------------------------------- /public/Images/HomePage/time.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/api/newAdmin.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | 3 | 4 | export default async function handler(req,res){ 5 | const { db } = await connectToDatabase() 6 | const data = req.query 7 | const findingData = await db.collection('Admin').findOne({email :data.email}) 8 | if(findingData == null){ 9 | await db.collection('Admin').insertOne(data) 10 | .then((result)=>{ 11 | let id = result.insertedId; 12 | res.send(id); 13 | }) 14 | .catch((err)=>{ 15 | res.json({message:"error in database"}); 16 | console.log(err); 17 | }) 18 | } 19 | else{ 20 | res.json({'user':'already exits'}); 21 | } 22 | 23 | } -------------------------------------------------------------------------------- /pages/api/registerQ.js: -------------------------------------------------------------------------------- 1 | import { connectToDatabase } from "../../lib/mongodb"; 2 | 3 | 4 | export default async function handler(req,res){ 5 | const { db } = await connectToDatabase() 6 | const data = req.query 7 | 8 | console.log(data); 9 | await db.collection('Queue').findOne({'phone' : data.phone , 'admin' : data.admin}) 10 | .then(async(candFound)=>{ 11 | if(!candFound){ 12 | await db.collection('Queue').insertOne(data) 13 | .then((result)=>{ 14 | let id = result.insertedId; 15 | console.log(id); 16 | res.send(id); 17 | }) 18 | .catch((err)=>{ 19 | res.json({message:"error in database"}); 20 | console.log(err); 21 | }) 22 | } 23 | else 24 | { 25 | res.send(-1); 26 | } 27 | }) 28 | 29 | 30 | 31 | 32 | } -------------------------------------------------------------------------------- /pages/api/sendMessage.js: -------------------------------------------------------------------------------- 1 | import dotenv from 'dotenv' 2 | dotenv.config({ path: '.env.local' }) 3 | 4 | import { NextApiRequest, NextApiResponse } from 'next'; 5 | import twilio from 'twilio'; 6 | 7 | export default function sendMessage(req = NextApiRequest, res = NextApiResponse) { 8 | console.log(process.env.TWILIO_ACCOUNT_SID); 9 | const accountSid = process.env.TWILIO_ACCOUNT_SID; 10 | const token = process.env.TWILIO_AUTH_TOKEN; 11 | const client = twilio(accountSid, token); 12 | const { phone, message } = req.body; 13 | // console.log(phone, message); 14 | client.messages 15 | .create({ 16 | body: message, 17 | from: '+17752777748', 18 | to: '+91'+phone, 19 | }) 20 | .then((message) => 21 | res.json({ 22 | success: true, 23 | }) 24 | ) 25 | .catch((error) => { 26 | console.log(error); 27 | res.json({ 28 | success: false, 29 | }); 30 | }); 31 | } 32 | 33 | 34 | -------------------------------------------------------------------------------- /pages/api/userInfo.js: -------------------------------------------------------------------------------- 1 | import { ObjectId } from "mongodb"; 2 | import { connectToDatabase } from "../../lib/mongodb"; 3 | 4 | export default async function handler(req, res) { 5 | const { db } = await connectToDatabase(); 6 | const data = req.query; 7 | await db 8 | .collection("Admin") 9 | .find({_id:ObjectId(data.admin)}) 10 | .toArray((err, docs) => { 11 | if (err) { 12 | // if an error happens 13 | res.send("Error in GET req."); 14 | } else { 15 | // if all works 16 | // console.log(docs); 17 | res.send(docs); // send back all users found with the matching username 18 | } 19 | }); 20 | // .then((result)=>{ 21 | // // console.log(result ); 22 | // res.json(result); 23 | // }) 24 | // .catch((err)=>{ 25 | // res.json({message:"error in database"}); 26 | // console.log(err); 27 | // }) 28 | // await res.send(temp); 29 | // console.log(temp); 30 | } 31 | -------------------------------------------------------------------------------- /lib/mongodb.js: -------------------------------------------------------------------------------- 1 | import dotenv from 'dotenv' 2 | dotenv.config({ path: '.env.local' }) 3 | 4 | import { MongoClient } from 'mongodb' 5 | 6 | let uri = process.env.MONGODB_URI 7 | let dbName = process.env.MONGODB_DB 8 | 9 | let cachedClient = null 10 | let cachedDb = null 11 | 12 | if (!uri) { 13 | throw new Error( 14 | 'Please define the MONGODB_URI environment variable inside .env.local' 15 | ) 16 | } 17 | 18 | if (!dbName) { 19 | throw new Error( 20 | 'Please define the MONGODB_DB environment variable inside .env.local' 21 | ) 22 | } 23 | 24 | export async function connectToDatabase() { 25 | if (cachedClient && cachedDb) { 26 | return { client: cachedClient, db: cachedDb } 27 | } 28 | 29 | const client = await MongoClient.connect(uri, { 30 | useNewUrlParser: true, 31 | useUnifiedTopology: true, 32 | }) 33 | 34 | const db = await client.db(dbName) 35 | 36 | cachedClient = client 37 | cachedDb = db 38 | 39 | return { client, db } 40 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "queue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "bootstrap": "^5.1.3", 13 | "cookie": "^0.4.1", 14 | "dotenv": "^10.0.0", 15 | "install": "^0.13.0", 16 | "js-cookie": "^3.0.1", 17 | "mdbootstrap": "^4.20.0", 18 | "mongodb": "^4.2.2", 19 | "next": "^12.0.7", 20 | "next-qrcode": "^1.1.0", 21 | "npm": "^8.3.0", 22 | "qrcode.react": "^1.0.1", 23 | "react": "17.0.2", 24 | "react-cookie": "^4.1.1", 25 | "react-cssfx-loading": "^1.0.3", 26 | "react-dom": "17.0.2", 27 | "react-simple-image-slider": "^2.3.0", 28 | "reactstrap": "^9.0.1", 29 | "semantic-ui-css": "^2.4.1", 30 | "semantic-ui-react": "^2.0.4", 31 | "twilio": "^3.72.0" 32 | }, 33 | "devDependencies": { 34 | "eslint": "8.5.0", 35 | "eslint-config-next": "12.0.7" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | # QueueAutomation 36 | ![HomeScreen_photo_1](https://github.com/abhi05-04/QueueAutomation/blob/main/public/Images/readme/about1.png) 37 | ![HomeScreen_photo_2](https://github.com/abhi05-04/QueueAutomation/blob/main/public/Images/readme/about2.png) 38 | ![HomeScreen_photo_3](https://github.com/abhi05-04/QueueAutomation/blob/main/public/Images/readme/About3.png) 39 | ![HomeScreen_photo_4](https://github.com/abhi05-04/QueueAutomation/blob/main/public/Images/readme/about4.png) 40 | -------------------------------------------------------------------------------- /public/Images/HomePage/instruction.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /public/Images/HomePage/better.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import React, { useState, useEffect } from 'react' 3 | import Image from 'next/image' 4 | import styles from '../styles/Home.module.css' 5 | import Nav from '../components/Nav' 6 | import SuperNav from '../components/NavforSuperAdmin' 7 | import Slider from '../components/Slider' 8 | import 'bootstrap/dist/css/bootstrap.css'; 9 | import Footer from '../components/Footer' 10 | import About from '../components/about' 11 | import Cookies from 'js-cookie' 12 | 13 | export default function Home({ userInfo, cook, date }) { 14 | // console.log("-> "+userInfo); 15 | 16 | const setDate = async () => { 17 | const D = new Date(); 18 | let d = D.getDate(); 19 | // d = 16; 20 | // console.log(date + " " + d); 21 | try { 22 | if (d != date) { 23 | // console.log("confilct"); 24 | Cookies.set("date", d, { expires: 24 / 24 }); 25 | // await fetch(`/api/deleteList`); 26 | // console.log("deleted"); 27 | } 28 | } catch (error) { 29 | console.log(error); 30 | } 31 | } 32 | useEffect(() => { 33 | setDate(); 34 | 35 | }, []); 36 | return ( 37 |
38 | 39 | 40 | Queue - Home 41 | {userInfo == "61ebb855231640c1d2f54c76"?:
57 | ) 58 | } 59 | 60 | export const getServerSideProps = async ({ req, res }) => { 61 | let cook = req.cookies.user; 62 | // console.log("hello"+req.cookies.user); 63 | if (cook == undefined) { 64 | return { props: { userInfo: "" } } 65 | } 66 | else { 67 | // await fetch(`https://queue-mu.vercel.app/api/userInfo?admin=${cook}`, { 68 | // method: 'GET', 69 | // headers: { 70 | // 'Content-Type': 'application/json', 71 | // }, 72 | // }) 73 | // .then(async (data) => { 74 | // await data.json().then((result)=>{ 75 | // console.log(result); 76 | // return { props: {result} } 77 | // }) 78 | // .catch((err)=>{ 79 | // console.log(err); 80 | // }) 81 | // }).catch((err) => { 82 | // console.log(err); 83 | // }) 84 | // const response = await userInfo.json(); 85 | // console.log(userInfo); 86 | let date = ""; 87 | if (req.cookies.date != undefined) { 88 | date = req.cookies.date; 89 | } 90 | return { props: { userInfo: cook, cook: cook, date: date } } 91 | } 92 | 93 | 94 | 95 | } 96 | -------------------------------------------------------------------------------- /public/Images/HomePage/maintain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/queue/[admin]/[date]/[id].js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "bootstrap/dist/css/bootstrap.css"; 3 | import { useState, useEffect } from 'react' 4 | export default function (props) { 5 | 6 | // const [num, setNum] = useState(props.num); 7 | // const init = async () => { 8 | // var index; 9 | // for (index = 1; index < props.response.length; index++) { 10 | // if(props.response[index]._id == props.userId) 11 | // { 12 | // setNum(index+1); 13 | // } 14 | // } 15 | // }; 16 | 17 | // useEffect(() => { 18 | // init(); 19 | // }, []); 20 | 21 | useEffect(() => { 22 | if (props.num == -1) { 23 | location.reload(); 24 | } 25 | }) 26 | if (props.num == -1) { 27 | return ( 28 |
Wait...
29 | ) 30 | } else { 31 | return ( 32 | 33 |
34 | { 35 |
36 |
Wait
37 |
38 |
Your number in Queue {props.num}
39 |

40 | You have sucessfully added yourself to the Queue. Once your number 41 | will come we will notify you by message.But to live track Don't Exit 42 | From this Page otherwise you will not able track you live. 43 |

44 |
45 |
46 | // : 47 | //
48 | //
You are no more in Queue
49 | //
50 | } 51 | 52 |
53 | ); 54 | } 55 | } 56 | export const getServerSideProps = async ({ req, res }) => { 57 | let url = req.url.split('/'); 58 | 59 | let reqURL = "queue-mu.vercel.app/"; 60 | for (let i = 1; i < url.length; i++) 61 | reqURL = reqURL + url[i] + '/'; 62 | let adminId = url[url.length - 3]; 63 | let userId = url[url.length - 1] 64 | 65 | 66 | let getList = await fetch(`${process.env.DOMAIN}/api/getList?admin=${adminId}`); 67 | 68 | const response = await getList.json(); 69 | // console.log(response.length); 70 | var num = -1; 71 | // console.log(response); 72 | 73 | if (response.some(id => id._id === userId)) { 74 | for (var index = 0; index < response.length; index++) { 75 | if (response[index]._id == userId) { 76 | num = index + 1 77 | } 78 | } 79 | } 80 | console.log(adminId, num); 81 | 82 | // console.log(userId); 83 | // return { props: { response : response , userId: userId} } 84 | return { props: { num: num } } 85 | 86 | 87 | } 88 | -------------------------------------------------------------------------------- /components/Slider.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import 'bootstrap/dist/css/bootstrap.min.css'; 3 | 4 | export default function Slider() { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
    15 |
  1. 16 |
  2. 17 |
  3. 18 |
19 |
20 |
21 | First slide 22 |
23 |
My Caption Title (1st Image)
24 |

The whole caption will only show up if the screen is at least medium size.

25 |
26 |
27 |
28 | Second slide 29 |
30 |
31 | Third slide 32 |
33 |
34 | 35 | 36 | Previous 37 | 38 | 39 | 40 | Next 41 | 42 |
43 |
44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /components/NavforSuperAdmin.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Cookies from "js-cookie"; 3 | import { useRouter } from "next/router"; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | function SuperNav(props) { 6 | console.log(props.cook); 7 | const router = useRouter(); 8 | var name = (props.cook == undefined || props.cook == "") ? "" : props.cook 9 | // let queueUrl = `/queue/${props.cook}`; 10 | 11 | const logout = () => { 12 | Cookies.remove("user"); 13 | router.replace('/login'); 14 | } 15 | return ( 16 |
17 | 18 | 19 | 20 | 24 | 62 |
63 | ); 64 | 65 | } 66 | 67 | export default SuperNav; 68 | 69 | -------------------------------------------------------------------------------- /components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Footer() { 4 | return ( 5 |
6 | {/* 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | */} 15 | {/* */} 16 |
17 | {/*
18 | 19 |
20 | 21 |
22 | 23 |
Footer Content
24 |

Here you can use rows and columns to organize your footer content.

25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 |
Links
33 | 34 | 48 | 49 |
50 | 51 |
52 | 53 |
Links
54 | 55 | 69 | 70 |
71 | 72 |
73 | 74 |
*/} 75 | {/* */} 76 | 77 | {/* */} 78 |
79 | Walchand College of Engneering, Sangli. 80 |
81 | {/* */} 82 | 83 |
84 | {/* */} 85 |
86 | ) 87 | } 88 | -------------------------------------------------------------------------------- /public/Images/HomePage/social.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /pages/login.js: -------------------------------------------------------------------------------- 1 | import React, { useState ,useEffect } from 'react' 2 | import Nav from '../components/Nav' 3 | import { useRouter } from 'next/router'; 4 | import Cookies from 'js-cookie'; 5 | import { route } from 'next/dist/server/router'; 6 | 7 | export default function login({token , date}) { 8 | 9 | const router = useRouter(); 10 | 11 | const redir = ()=>{ 12 | router.replace('/'); 13 | } 14 | 15 | 16 | const setDate = async()=>{ 17 | const D = new Date(); 18 | let d = D.getDate(); 19 | // d = 16; 20 | console.log(date+" "+d); 21 | if(d != date){ 22 | console.log("confilct"); 23 | Cookies.set("date",d,{expires:24/24}); 24 | // await fetch(`/api/deleteList`); 25 | console.log("deleted"); 26 | } 27 | } 28 | useEffect(()=>{ 29 | setDate(); 30 | if(token != "") 31 | redir(); 32 | },[]); 33 | 34 | const handleLogin = async (event)=>{ 35 | event.preventDefault(); 36 | if(validate()) 37 | { 38 | try{ 39 | await fetch(`/api/auth?email=${email}&password=${pass}`,{ 40 | method: 'GET', 41 | headers: { 42 | 'Content-Type': 'application/json', 43 | }, 44 | }) 45 | .then(async(result)=>{ 46 | await result.json() 47 | .then((x)=>{ 48 | 49 | let id = x._id; 50 | console.log(id); 51 | if(id != null && id != undefined){ 52 | Cookies.set("user",id,{expires:1/24}); 53 | } 54 | else{ 55 | alert("Wrong Credentials!") 56 | } 57 | 58 | router.reload('/login'); 59 | }) 60 | .catch((err)=>{ 61 | console.log(err); 62 | }) 63 | }) 64 | .catch((err)=>{ 65 | console.log(err); 66 | }) 67 | } 68 | catch(err){ 69 | console.log(err); 70 | } 71 | } 72 | } 73 | 74 | const [email,setEmail] = useState(""); 75 | const [pass,setPass] = useState(""); 76 | 77 | 78 | const validate = () => { 79 | if (email === "") { 80 | alert("Enter Email!"); 81 | return; 82 | } 83 | if(pass === "") 84 | { 85 | alert("Enter password!"); 86 | return; 87 | } 88 | return true; 89 | 90 | } 91 | 92 | 93 | return ( 94 |
95 |
131 | ) 132 | } 133 | 134 | 135 | 136 | 137 | export function getServerSideProps({ req , res }){ 138 | let token = "" , date = ""; 139 | if(req.cookies.user != undefined){ 140 | token = req.cookies.user; 141 | } 142 | if(req.cookies.date != undefined){ 143 | date = req.cookies.date; 144 | } 145 | return { props : { token : token , date : date } }; 146 | } -------------------------------------------------------------------------------- /components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Cookies from "js-cookie"; 3 | import { useRouter } from "next/router"; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | function Nav(props) { 6 | 7 | console.log(props.cook); 8 | const router = useRouter(); 9 | var name = (props.cook == undefined || props.cook == "") ? "" : props.cook 10 | // let queueUrl = `/queue/${props.cook}`; 11 | 12 | const logout = () => { 13 | Cookies.remove("user"); 14 | router.replace('/login'); 15 | } 16 | return ( 17 |
18 | 19 | 20 | 21 | 25 | 75 |
76 | ); 77 | 78 | } 79 | 80 | export default Nav; 81 | 82 | 83 | // export const getServerSideProps = async({req,res})=>{ 84 | // let cook = req.cookies.user; 85 | // console.log(req); 86 | // return {props : { cook : cook }} 87 | 88 | // } 89 | 90 | -------------------------------------------------------------------------------- /pages/registration.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import Nav from '../components/Nav' 3 | import Cookies from 'js-cookie'; 4 | import { useRouter } from 'next/router'; 5 | 6 | export default function registration({ token, date }) { 7 | 8 | 9 | const router = useRouter(); 10 | 11 | 12 | const setDate = async () => { 13 | const D = new Date(); 14 | let d = D.getDate(); 15 | // d = 16; 16 | // console.log(date+" "+d); 17 | if (d != date) { 18 | console.log("confilct"); 19 | Cookies.set("date", d, { expires: 24 / 24 }); 20 | // await fetch(`/api/deleteList`); 21 | console.log("deleted"); 22 | } 23 | } 24 | 25 | 26 | var token1 = (token == undefined || token == "") ? {} : token; 27 | token1 = token1._id; 28 | 29 | const [fname, setFname] = useState(""); 30 | const [lname, setLname] = useState(""); 31 | const [ph, setPh] = useState(""); 32 | 33 | const redir = () => { 34 | router.replace('/'); 35 | } 36 | useEffect(() => { 37 | // console.log(token); 38 | setDate(); 39 | if (token1 == "") 40 | redir(); 41 | }, []); 42 | 43 | 44 | 45 | const handleClick = async (event) => { 46 | if (validate()) { 47 | event.preventDefault(); 48 | try { 49 | console.log(fname); 50 | await fetch(`/api/registerQ?fname=${fname}&lname=${lname}&phone=${ph}&admin=${token}`, { 51 | method: 'GET', 52 | headers: { 53 | 'Content-Type': 'application/json', 54 | }, 55 | }) 56 | // alert 57 | // refresh page 58 | router.reload(); 59 | } 60 | catch (err) { 61 | console.log(err); 62 | } 63 | } 64 | } 65 | const validate = () => { 66 | if (fname === "") { 67 | alert("Enter First Name!") 68 | return; 69 | } 70 | if (fname.search('^[A-Za-z]+$') === -1) { 71 | alert("First Name is not valid!") 72 | return; 73 | } 74 | if (lname === "") { 75 | alert("Enter Last Name!") 76 | return; 77 | } 78 | if (lname.search('^[A-Za-z]+$') === -1) { 79 | alert("Last Name is not valid!") 80 | return; 81 | } 82 | // if (ph === "") { 83 | // alert("Enter mobile no!"); 84 | // return; 85 | // } 86 | // if (ph.length != 10) { 87 | // alert("Enter correct mobile number!"); 88 | // return; 89 | // } 90 | // if (ph.search('^[0-9]$') === -1) { 91 | // alert("Enter Valid phone Number!") 92 | // return; 93 | // } 94 | return true; 95 | 96 | } 97 | return ( 98 |
99 |
132 | ); 133 | } 134 | 135 | 136 | 137 | export function getServerSideProps({ req, res }) { 138 | let date = ""; 139 | 140 | if (req.cookies.date != undefined) { 141 | date = req.cookies.date; 142 | } 143 | if (req.cookies.user != undefined) { 144 | return { props: { token: req.cookies.user, date: date } }; 145 | } 146 | return { props: { token: "", date: date } }; 147 | } -------------------------------------------------------------------------------- /pages/queue/[admin].js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import 'bootstrap/dist/css/bootstrap.min.css'; 3 | import Nav from '../../components/Nav' 4 | import { useEffect } from 'react'; 5 | import 'semantic-ui-css/semantic.min.css' 6 | import Cookies from 'js-cookie'; 7 | import { useRouter } from 'next/router'; 8 | 9 | // import { Card } from 'reactstrap'; 10 | import { Card, Button, Grid } from 'semantic-ui-react' 11 | import QRCode from 'qrcode.react'; 12 | 13 | 14 | export default function Queue({ admin, cook, list, reqURL, date }) { 15 | 16 | const router = useRouter(); 17 | const deleteobj= async (id) => { 18 | try { 19 | await fetch(`/api/deleteObj?id=${id}`); 20 | window.location.reload() 21 | } catch (error) { 22 | } 23 | } 24 | 25 | 26 | const setDate = async () => { 27 | const D = new Date(); 28 | let d = D.getDate(); 29 | // d = 16; 30 | console.log(date + " " + d); 31 | if (d != date) { 32 | console.log("confilct"); 33 | Cookies.set("date", d, { expires: 24 / 24 }); 34 | // await fetch(`/api/deleteList`); 35 | console.log("deleted"); 36 | } 37 | } 38 | 39 | 40 | const redir = () => { 41 | router.replace('/'); 42 | } 43 | 44 | 45 | const sendMessage = async () => { 46 | 47 | const res = await fetch(`/api/sendMessage` , { 48 | method: 'POST', 49 | headers: { 50 | 'Content-Type': 'application/json', 51 | }, 52 | body: JSON.stringify({ phone: list[2].phone, message: 'Be ready you are next' }), 53 | }); 54 | const apiResponse = await res.json(); 55 | console.log(apiResponse); 56 | 57 | }; 58 | 59 | 60 | 61 | 62 | useEffect(async () => { 63 | console.log(list.length) 64 | setDate(); 65 | if (list.length >= 3) 66 | sendMessage(); 67 | // const res = await fetch(`/api/sendMessage`); 68 | // console.log(res); 69 | if (admin != cook) 70 | redir(); 71 | }, []) 72 | 73 | let items = []; 74 | for (let i = 0; i < list.length; i++) { 75 | // console.log(cList[i]); 76 | items.push({ 77 | header: `${i + 1}. ${list[i].fname} ${list[i].lname}`, 78 | meta: `${list[i].phone}`, 79 | description: ( 80 | 81 | 82 |
83 | 86 | {/* */} 89 |
90 | 91 | 92 | ), 93 | fluid: true 94 | 95 | }); 96 | } 97 | 98 | const downloadQRCode = () => { 99 | const as = document.querySelectorAll("#qrcodeEl")[0]; 100 | const qrCodeURL = as 101 | .toDataURL("image/png") 102 | .replace("image/png", "image/octet-stream"); 103 | console.log("qrcode==" + qrCodeURL) 104 | let aEl = document.createElement("a"); 105 | aEl.href = qrCodeURL; 106 | aEl.download = "QR_Code.png"; 107 | document.body.appendChild(aEl); 108 | aEl.click(); 109 | document.body.removeChild(aEl); 110 | } 111 | 112 | return ( 113 |
114 |
150 | ) 151 | } 152 | 153 | export const getServerSideProps = async ({ req, res }) => { 154 | // console.log(req.url); 155 | let date = new Date(); 156 | // console.log(date.getDate()); 157 | let url = req.url.split('/'); 158 | 159 | let reqURL = `${process.env.DOMAIN}/`; 160 | for (let i = 1; i < url.length; i++) 161 | reqURL = reqURL + url[i] + '/'; 162 | reqURL = reqURL + date.getDate(); 163 | let adminId = url[url.length - 1]; 164 | let cook = req.cookies.user; 165 | 166 | 167 | let getList = await fetch(`${process.env.DOMAIN}/api/getList?admin=${adminId}`); 168 | 169 | const response = await getList.json(); 170 | let d = ""; 171 | if (req.cookies.date != undefined) { 172 | d = req.cookies.date; 173 | } 174 | 175 | return { props: { admin: adminId, cook: cook, list: response, reqURL: reqURL, date: d } } 176 | 177 | } 178 | 179 | -------------------------------------------------------------------------------- /pages/queue/[admin]/[date].js: -------------------------------------------------------------------------------- 1 | 2 | import Nav from '../../../components/Nav' 3 | import React, { useState, useEffect } from 'react' 4 | import { useRouter } from 'next/router'; 5 | import { route } from 'next/dist/server/router'; 6 | import Cookies from 'js-cookie'; 7 | import { AlertPage } from 'twilio/lib/rest/monitor/v1/alert'; 8 | 9 | 10 | 11 | export default function registration({ date }) { 12 | const router = useRouter(); 13 | // const {asPath} = useRouter(); 14 | let adminL = router.asPath.split('/'); 15 | adminL = adminL[adminL.length - 2]; 16 | let dateL = date; 17 | console.log(dateL, adminL); 18 | 19 | 20 | const redir = (data) => { 21 | router.replace("/queue/" + adminL + "/" + dateL + "/" + data); 22 | } 23 | 24 | 25 | const setDate = async () => { 26 | dateL = date; 27 | adminL = adminL[adminL.length - 2]; 28 | 29 | const D = new Date(); 30 | let d = D.getDate(); 31 | 32 | if (d != dateL) { 33 | console.log("confilct"); 34 | Cookies.set("date", d, { expires: 24 / 24 }); 35 | // await fetch(`/api/deleteList`); 36 | console.log("deleted"); 37 | } 38 | } 39 | 40 | useEffect(() => { 41 | setDate(); 42 | }, []); 43 | 44 | 45 | const [fname, setFname] = useState(""); 46 | const [lname, setLname] = useState(""); 47 | const [ph, setPh] = useState(""); 48 | 49 | const handleClick = async (event) => { 50 | if (validate()) { 51 | event.preventDefault(); 52 | try { 53 | await fetch(`/api/registerQ?fname=${fname}&lname=${lname}&phone=${ph}&admin=${adminL}`, { 54 | method: 'GET', 55 | headers: { 56 | 'Content-Type': 'application/json', 57 | }, 58 | }).then( 59 | async (data) => { 60 | console.log(data); 61 | await data.json() 62 | .then( 63 | (id) => { 64 | // alert("==>" + id); 65 | if(id == -1) 66 | { 67 | alert("Mobile number already in Queue"); 68 | } 69 | else 70 | { 71 | redir(id); 72 | } 73 | } 74 | ).catch( 75 | (err) => { 76 | console.log(err); 77 | console.log("Unique1"); 78 | } 79 | ) 80 | 81 | } 82 | ).catch( 83 | (err) => { 84 | console.log(err); 85 | console.log("Unique2"); 86 | } 87 | ) 88 | // alert 89 | // refresh page 90 | // router.reload(); 91 | } 92 | catch (err) { 93 | console.log(err); 94 | console.log("Unique3"); 95 | } 96 | } 97 | 98 | } 99 | 100 | const validate = () => { 101 | if (fname === "") { 102 | alert("Enter First Name!") 103 | return; 104 | } 105 | if (fname.search('^[A-Za-z]+$') === -1) { 106 | alert("First Name is not valid!") 107 | return; 108 | } 109 | if (lname === "") { 110 | alert("Enter Last Name!") 111 | return; 112 | } 113 | if (lname.search('^[A-Za-z]+$') === -1) { 114 | alert("Last Name is not valid!") 115 | return; 116 | } 117 | if (ph === "") { 118 | alert("Enter mobile no!"); 119 | return; 120 | } 121 | if (ph.length != 10) { 122 | alert("Enter correct mobile number!"); 123 | return; 124 | } 125 | if (ph.search('^[0-9]+$') === -1) { 126 | alert("Enter Valid phone Number!") 127 | return; 128 | } 129 | return true; 130 | 131 | } 132 | 133 | return ( 134 |
135 |
136 | 137 |

Add yourself to virtual Queue

138 | 139 |
140 |
141 | { setFname(e.target.value) }} placeholder="First name" /> 142 |
143 |
144 |
145 | { setLname(e.target.value) }} placeholder="Last name" /> 146 |
147 |
148 | 149 | { setPh(e.target.value) }} placeholder="Phone number" aria-describedby="defaultRegisterFormPhoneHelpBlock" /> 150 | 151 | For sending updates about Queue 152 | 153 | 154 |
155 | 156 |
157 | 158 | 159 |
160 |
161 | ); 162 | } 163 | 164 | 165 | registration.getInitialProps = ({ req, res }) => { 166 | 167 | 168 | let date = ""; 169 | if (req.cookies.date != undefined) { 170 | date = req.cookies.date; 171 | } 172 | 173 | return { date: date }; 174 | } 175 | 176 | -------------------------------------------------------------------------------- /public/Images/HomePage/customer-feedback.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/signup.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Nav from '../components/Nav' 3 | import { useState } from 'react' 4 | import { useRouter } from 'next/router'; 5 | import Cookies from "js-cookie"; 6 | import { useEffect } from 'react'; 7 | 8 | 9 | export default function signup({ token, date }) { 10 | const router = useRouter(); 11 | 12 | const setDate = async () => { 13 | const D = new Date(); 14 | let d = D.getDate(); 15 | // d = 16; 16 | console.log(date + " " + d); 17 | if (d != date) { 18 | console.log("confilct"); 19 | Cookies.set("date", d, { expires: 24 / 24 }); 20 | // await fetch(`/api/deleteList`); 21 | console.log("deleted"); 22 | } 23 | } 24 | 25 | 26 | var token1 = (token == undefined || token == "") ? {} : JSON.parse(token); 27 | token1 = token1._id; 28 | 29 | const redir = () => { 30 | router.replace('/'); 31 | } 32 | useEffect(() => { 33 | setDate(); 34 | if (token != "") 35 | redir(); 36 | }, []); 37 | 38 | 39 | const [fname, setFname] = useState(""); 40 | const [lname, setLname] = useState(""); 41 | const [email, setEmail] = useState(""); 42 | const [pass, setPass] = useState(""); 43 | const [num, setNum] = useState(""); 44 | 45 | const handleFname = (event) => { 46 | setFname(event.target.value); 47 | } 48 | const handleLname = (event) => { 49 | setLname(event.target.value); 50 | } 51 | const handleEmail = (event) => { 52 | setEmail(event.target.value); 53 | } 54 | const handlePass = (event) => { 55 | setPass(event.target.value); 56 | } 57 | 58 | const handleNum = (event) => { 59 | setNum(event.target.value); 60 | } 61 | 62 | const register = async (event) => { 63 | event.preventDefault(); 64 | if (validate()) { 65 | try { 66 | await fetch(`/api/newAdmin?fname=${fname}&lname=${lname}&email=${email}&password=${pass}&number=${num}`, { 67 | method: 'POST', 68 | headers: { 69 | 'Content-Type': 'application/json', 70 | }, 71 | }) 72 | .then(async (result) => { 73 | await result.json() 74 | .then((x) => { 75 | console.log(x); 76 | 77 | let str = toString(x); 78 | Cookies.set("user", x, { expires: 1 / 24 }); 79 | router.replace('/'); 80 | }) 81 | .catch((err) => { 82 | console.log(err); 83 | }) 84 | }) 85 | .catch((err) => { 86 | console.log(err); 87 | }) 88 | } 89 | catch (err) { 90 | console.log(err); 91 | alert("Failed to signin!") 92 | } 93 | } 94 | 95 | } 96 | 97 | const validate = () => { 98 | if (fname === "") { 99 | alert("Enter First Name!") 100 | return; 101 | } 102 | if (fname.search('^[A-Za-z]+$') === -1) { 103 | alert("First Name is not valid!") 104 | return; 105 | } 106 | if (lname === "") { 107 | alert("Enter Last Name!") 108 | return; 109 | } 110 | if (lname.search('^[A-Za-z]+$') === -1) { 111 | alert("Last Name is not valid!") 112 | return; 113 | } 114 | if (email === "") { 115 | alert("Enter Email!"); 116 | return; 117 | } 118 | if (!String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) { 119 | alert("Enter Valid Email!"); 120 | return; 121 | } 122 | if(pass === "") 123 | { 124 | alert("Enter password!"); 125 | return; 126 | } 127 | if(pass.length<6) 128 | { 129 | alert("password too short!"); 130 | return; 131 | } 132 | if(num === "") 133 | { 134 | alert("Enter Phone Number!"); 135 | return; 136 | } 137 | if(num.length!=10 ) 138 | { 139 | alert("Enter Valid phone Number!"); 140 | return; 141 | } 142 | 143 | if (num.search('^[0-9]+$') === -1) { 144 | alert("Enter Valid phone Number!") 145 | return; 146 | } 147 | return true; 148 | 149 | } 150 | 151 | 152 | return ( 153 |
154 |
197 | ) 198 | } 199 | 200 | 201 | export function getServerSideProps({ req, res }) { 202 | let date = ""; 203 | 204 | if (req.cookies.date != undefined) { 205 | date = req.cookies.date; 206 | } 207 | if (req.cookies.user != undefined) { 208 | return { props: { token: req.cookies.user, date: date } }; 209 | } 210 | return { props: { token: "", date: date } }; 211 | } -------------------------------------------------------------------------------- /pages/superadmin.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import SuperNav from "../components/NavforSuperAdmin"; 3 | // import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import 'semantic-ui-css/semantic.min.css' 5 | import { useRouter } from "next/router"; 6 | import Cookies from "js-cookie"; 7 | import About from "../components/about"; 8 | import { Card, Button, Grid } from "semantic-ui-react"; 9 | 10 | 11 | 12 | export default function login({ token, date }) { 13 | const [items, setItems] = useState([]); 14 | const [queueItems, setQueueItems] = useState([]); 15 | // const [queueMap, setQueueMap] = useState([]) 16 | const router = useRouter(); 17 | 18 | const deleteobj= async (id) => { 19 | if(confirm("This Admin will be permanatly deleted !")) 20 | { 21 | try { 22 | await fetch(`/api/deleteList?admin=${id}`); 23 | await fetch(`/api/deleteAdmin?id=${id}`); 24 | window.location.reload() 25 | } catch (error) { 26 | } 27 | } 28 | } 29 | 30 | console.log(process.env.SUPERADMIN); 31 | let adminList = [], 32 | queueOfAdmin = []; 33 | 34 | let map1 = new Map(); 35 | 36 | const init = async () => { 37 | console.log(token.toString()); 38 | if (token != "61ebb855231640c1d2f54c76") { 39 | router.replace("/"); 40 | } 41 | try { 42 | await fetch(`/api/getAdminList`, { 43 | method: "GET", 44 | headers: { 45 | "Content-Type": "application/json", 46 | }, 47 | }) 48 | .then(async (result) => { 49 | await result 50 | .json() 51 | .then((x) => { 52 | adminList = x; 53 | 54 | let items = []; 55 | var k = 0; 56 | for (let i = 0; i < adminList.length; i++, k++) { 57 | // console.log(adminList); 58 | if (adminList[i]._id == '61ebb855231640c1d2f54c76') { 59 | k--; 60 | } else { 61 | items.push({ 62 | header: `${k + 1}. ${adminList[i].fname} ${adminList[i].lname 63 | }`, 64 | meta: `${adminList[i].number}`, 65 | description: ( 66 | 67 |
68 | 71 | 74 |
75 | 76 | ), 77 | fluid: true 78 | }); 79 | } 80 | } 81 | // console.log("=>"+items[0].id); 82 | // getQueue(items[0].id);className 83 | setItems(items); 84 | // console.log('======>'+items); 85 | }) 86 | .catch((err) => { 87 | console.log(err); 88 | }); 89 | }) 90 | .then((err) => { 91 | console.log(err); 92 | }); 93 | } catch (err) { 94 | console.log(err); 95 | } 96 | 97 | for (let i = 0; i < adminList.length; i++) { 98 | // console.log(adminList[i]._id); 99 | let ithList = []; 100 | 101 | try { 102 | await fetch( 103 | `/api/getList?admin=${adminList[i]._id}`, 104 | { 105 | method: "GET", 106 | headers: { 107 | "Content-Type": "application/json", 108 | }, 109 | } 110 | ) 111 | .then(async (result) => { 112 | await result 113 | .json() 114 | .then((x) => { 115 | queueOfAdmin.push(x); 116 | }) 117 | .catch((err) => { 118 | console.log(err); 119 | }); 120 | }) 121 | .then((err) => { 122 | console.log(err); 123 | }); 124 | } catch (err) { 125 | console.log(err); 126 | } 127 | } 128 | // let map1 = new Map(); 129 | var ind = 10000; 130 | for (let i = 0; i < adminList.length; i++) { 131 | console.log(adminList[i]); 132 | console.log(queueOfAdmin[i]); 133 | if (queueOfAdmin[i].length > 0) { 134 | map1[adminList[i]._id] = queueOfAdmin[i]; 135 | ind = ind > i ? i : ind; 136 | } 137 | } 138 | // getQueue(adminList[ind]._id); 139 | 140 | }; 141 | 142 | const getQueue = async (id) => { 143 | let items = []; 144 | var k = 0; 145 | let queueList = map1[id]; 146 | if (queueList == undefined) { 147 | var x = 0; 148 | alert("No queue avaible for this admin!"); 149 | } 150 | else { 151 | console.log(">" + queueList.length); 152 | for (let i = 0; i < queueList.length; i++, k++) { 153 | 154 | items.push({ 155 | header: `${k + 1}. ${queueList[i].fname} ${queueList[i].lname 156 | }`, 157 | meta: `${queueList[i].phone}`, 158 | // description: , 159 | fluid: true, 160 | }); 161 | 162 | } 163 | setQueueItems(items); 164 | } 165 | 166 | 167 | } 168 | useEffect(() => { 169 | init(); 170 | }, []); 171 | 172 | return ( 173 |
174 | 175 |
176 |
177 |
178 |
Admins
179 |
180 | 181 |
182 |
183 |
184 |
Students
185 |
186 | 187 |
188 |
189 |
190 |
191 |
192 | ); 193 | } 194 | 195 | export function getServerSideProps({ req, res }) { 196 | let token = "", 197 | date = ""; 198 | if (req.cookies.user != undefined) { 199 | token = req.cookies.user; 200 | } 201 | if (req.cookies.date != undefined) { 202 | date = req.cookies.date; 203 | } 204 | return { props: { token: token, date: date } }; 205 | } 206 | 207 | // export const getServerSideProps = async({req,res})=>{ 208 | // // console.log(req.url); 209 | // let date = new Date(); 210 | // // console.log(date.getDate()); 211 | // let url = req.url.split('/'); 212 | 213 | // let reqURL = "queue-mu.vercel.app/"; 214 | // for(let i=1;i 15 |
16 |
17 |
18 |
19 |
20 | queue waiting system 24 |
25 |
26 |

27 | Virtual Queue System to make it efficient than traditional Queue Method 28 |

29 |

30 | 31 | Students being occupied with their studies and class schedules 32 | often find it challenging to waste time waiting in a queue 33 | outside administrative offices, libraries, cafeterias, or fee 34 | departments. Our smart system provides students the 35 | versatility and comfort to obtain these services without any 36 | trouble. Qwaiting is a specially designed system for the 37 | educational sector that gives students and the staff the 38 | ability to manage all the activities smoothly. 39 |

40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 | Automation 50 | 51 |
52 |
53 |
54 |

55 | How QueueAutomation Works? 56 |

57 |
58 |
    59 |
  • 60 | Students can join the queue using their phones through QR scan. 61 |
    • 62 |
  • 63 | A webpage will be generated highlighting all the required 64 | parameters(Name, Mobile Number). He/She need fill and submit it. 65 |
    • 66 |
  • 67 | After that he/she will get redirected to new page where they can see their 68 | queue no. and students waiting ahead of them. Queue Status can be 69 | tracked on a real-time basis. 70 |
    • 71 |
  • 72 | They will receive a reminder notification once they are next 73 | in line to be served.{" "} 74 |
    • 75 |
  • Service is delivered safely and comfortably.
    • 76 |
77 |
78 |
79 |
80 |
81 | 82 |
83 |
84 |
85 |
86 |
Features Highlights
87 |

88 | How will QueueAutomation benefit the students and staff members? 89 |

90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | better 98 |
99 |
100 |
101 | Better administration 102 |
103 |
104 |
105 |
106 | {/* */} 107 | 108 |
109 |
110 |
111 | time 112 |
113 |
114 |
115 | Reduce waiting time 116 |
117 |
118 |
119 |
120 | {/* */} 121 | 122 |
123 |
124 |
125 | instruction 129 |
130 |
131 |
132 | Clear instructions{" "} 133 |
134 |
135 |
136 |
137 | {/* */} 138 | 139 |
140 |
141 |
142 | social 143 |
144 |
145 |
146 | Social distancing Protocols will be implemented 147 |
148 |
149 |
150 |
151 | {/* */} 152 | 153 |
154 |
155 |
156 | feedback 160 |
161 |
162 |
163 | Improve staff productivity & Performance 164 |
165 |
166 |
167 |
168 | {/* */} 169 | 170 |
171 |
172 |
173 | maintain 174 |
175 |
176 |
177 | Improves Brand Perception 178 |
179 |
180 |
181 |
182 | {/* */} 183 |
184 | 185 |
186 |
187 |

How It Works

188 |
189 |
190 |
191 |
192 | step 1 193 |
194 |
1
195 |

Student will scan the QR Code and fill the Details .

196 |
197 | 198 |
199 |
200 | step 2 201 |
202 |
2
203 |

204 | He/She is able to track the exact number in the virtual Queue. 205 |

206 |
207 | 208 |
209 |
210 | step 3 211 |
212 |
3
213 |

214 | A notification alert will be sent to them when their turn is 215 | next. They will arrive right on time to be served 216 |

217 |
218 |
219 |
220 |
221 |
222 |
223 | 224 | ); 225 | } 226 | -------------------------------------------------------------------------------- /styles/queue-new.css: -------------------------------------------------------------------------------- 1 | 2 | .fa-angle-up:before{ 3 | content: "\f106" 4 | } 5 | .fa-angle-down:before{ 6 | content: "\f107" 7 | } 8 | .fa-home:before{ 9 | content: "\f015" 10 | } 11 | .fa-play:before{ 12 | content: "\f04b" 13 | } 14 | .fa-pencil-square-o::before { 15 | content: "\f044"; 16 | } 17 | .fa-dollar::before, .fa-usd::before { 18 | content: "\f155"; 19 | } 20 | 21 | /*--- Top Bar---*/ 22 | 23 | .top-bar .navbar-brand img {width:60px;} 24 | .top-bar .container{padding:0px 35px 0px 20px;} 25 | .top-bar .navbar-brand.main-logo {height:auto;} 26 | .top-bar .top-bar-menu11 {float:right; max-width:80%;} 27 | .top-bar .top-bar-menu11 li {float:left; margin:10px 0px 0px 25px; font-size:13px; position:relative; padding-bottom:6px;} 28 | .top-bar .top-bar-menu11 li a .fa, .site-header .sub-menu-1 li .fa {margin:0px 0px 0px 2px;} 29 | .top-bar .top-bar-menu11 li a:hover, .top-bar .top-bar-menu11 li a:focus{text-decoration:none; color:#000000;} 30 | .top-bar .top-bar-menu11 li a {float:left; color:#ffffff;} 31 | .top-bar .submenu11 {display:none; position:absolute; overflow:hidden; top:25px; left:0; z-index:9; background:#ffffff; width:210px; border-radius:6px; box-shadow: 0px 20px 20px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 20px 20px rgba(0,0,0,0.1); z-index:99;} 32 | .top-bar .top-bar-menu11 li:hover .submenu11 {display:block;} 33 | .header-bg11 {padding-top:100px; position:relative;} 34 | .site-header .sub-menu-1 li {/*color:#ffffff;*/font-weight: 500;} 35 | 36 | .navbar {width: 100%; border-bottom: none !important; position: relative !important; right: 0; top: 0; z-index: 999; padding: 10px 0; background: transparent;box-shadow: 0 0 20px rgb(0 0 0 / 5%);} 37 | .site-header.fixed {background:#fff;} 38 | .site-header .sub-menu-1 a {/*color:#ffffff;*/transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;} 39 | .site-header.fixed .sub-menu-1 a {color:#ffffff;} 40 | .top-bar .top-bar-menu11 li .submenu11 li {width:100%; margin:0px; padding:0px 10px;} 41 | .top-bar .top-bar-menu11 li .submenu11 li a img {margin:-1px 6px 0px 0px;} 42 | .top-bar .top-bar-menu11 li .submenu11 li a {font-size:20px; color:#212121; padding:4px 0px;} 43 | .top-bar .top-bar-menu11 li .submenu11.submenu12 li a{font-size:13px; color:#4d4d4d; padding:5px 0px;} 44 | .top-bar .top-bar-menu11 li .submenu11 li a span {width:100%; float:left; font-size:11px; color:#4d4d4d; margin:3px 0px 0px 0px;} 45 | .top-bar {border-bottom:0px solid rgba(0,0,0,.2); padding-bottom:0px;} 46 | .homepage-equeue11 ~ .top-bar {border: 0;} 47 | /*.site-header .sub-menu-1 li:last-child {padding:8px 0px 15px 20px;}*/ 48 | .top-bar .logo-top img {width:75px; margin:7px 0px 0px 0px;} 49 | #navbar .sub-menu-1 {margin: 15px 0px 10px 0px; display: inline-block; flex: 1; text-align: right; padding-right: 60px;} 50 | .top-bar .top-bar-menu11 li .submenu11 li:hover {background:#f1f1f1;} 51 | .dropdowm-menu1{display:none; position:absolute; left:0; top:0; top:46px; background:#fff; border-radius:0px 0px 4px 4px; width:135px; padding:4px 0px; box-shadow: 0px 20px 20px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 20px 20px rgba(0,0,0,0.1);} 52 | .navbar-brand > img {max-width: 150px;margin: 10px 14px 0 0px;} 53 | .homepage-equeue11{position: relative;z-index: 1;} 54 | /*.homepage-equeue11::before{ 55 | content: "";width:40%; height:530px; position:absolute; top:0; right:0; background:#5C4AE4; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); 56 | clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); z-index: -1;}*/ 57 | 58 | 59 | @media (min-width:991px) { 60 | #navbar li:hover .dropdowm-menu1{display:block;} 61 | .site-header .drop-menu .fa-angle-down{display:none !important;} 62 | .feature-single-body ul.dropdowm-menu1 {background:#f5f5f5;} 63 | .feature-single-body .dropdowm-menu1:before {border-bottom:15px solid #f5f5f5;} 64 | #footer ul {display:block !important; margin-bottom:20px !important; opacity:1 !important; height:auto !important;} 65 | #navbar{display: flex !important; height: auto!important; padding-bottom: 0; overflow: visible!important; align-items: center; justify-content: space-between; } 66 | 67 | } 68 | 69 | @media (min-width:1800px) { 70 | .site-header:before {width:60%;} 71 | } 72 | 73 | 74 | .dropdowm-menu1::before {content: ''; border-bottom: 15px solid #ffffff; position: absolute; top: -15px; border-right: 10px solid transparent; border-left: 10px solid transparent; 75 | left: 0; right: 0; margin: auto; width: 20px; } 76 | #navbar li .dropdowm-menu1 li{width:100%; padding:0px 10px; text-transform:none;} 77 | #navbar li .dropdowm-menu1 li a { font-size: 13px; width: 100%; padding: 7px 0px; color: #212121; display: block; text-align: left;} 78 | #navbar li .dropdowm-menu1 li a:hover{color:#6b8cd1;} 79 | .logo-top {float:left; color:#000000; margin:8px 0px 0px 0px; font-size:14px;} 80 | .logo-top:hover{color:#000000; text-decoration:none;} 81 | 82 | .site-header .sub-menu-1 li {padding:8px 15px 15px 15px} 83 | .sub-menu-1 a:hover {color:#000000;} 84 | .site-header.fixed .sub-menu-1 a:hover{color:#6b8cd1;} 85 | .site-header.fixed .top-bar .top-bar-menu11 li a:hover, .site-header.fixed .top-bar .top-bar-menu11 li a:focus {color:#6b8cd1;} 86 | .top-bar .top-bar-menu11 li .submenu11 li:last-child a img {max-width:30px; min-height:20px;} 87 | 88 | /* Top bar End */ 89 | 90 | 91 | 92 | 93 | 94 | /* Footer Start*/ 95 | #footer {width:100%; float:left; background:rgba(93, 107, 196, 0.1); padding:45px 0px 30px 0px;margin-top: 50px;position: relative;z-index: 0} 96 | #footer * {color:#4d4d4d;} 97 | #footer .relations h4 { width:100%; float:left} 98 | #footer h4 {font-size:18px; font-weight:700; text-transform: uppercase; font-style: normal; margin:0px 0px 12px 0px; color:#212121;} 99 | #footer h4:after {display:none;} 100 | .blue-theme #footer .relations li::before{border:none;} 101 | #footer .col-sm-2 {padding-left:0;} 102 | #footer .relations li {padding-left:12px; position:relative; font-size:14px; line-height:26px;} 103 | #footer .relations li:before {content:'\f105'; width:12px; height:12px; display:block; position:absolute; left:0; margin-top:0px; font-family:fontawesome;} 104 | #footer .col-sm-4 ul{width:50%; float:left;} 105 | #footer .relations a:hover {color:#6b8cd1;} 106 | .footer-bottom * {color:#4d4d4d;} 107 | .footer-bottom {width:100%; float:left; padding:12px 0 12px; background:#fff !important;} 108 | .footer-bottom .footer-social a {background:#4d4d4d !important; color:#ffffff !important;} 109 | .footer-bottom .footer-social a:hover, .footer-bottom .footer-social a:focus{background:#cccccc !important; color:#4d4d4d !important;} 110 | .footer-social li a {width:36px; height:36px; line-height:36px; text-align:center; font-size:18px; border-radius:50%; position:relative; -webkit-border-radius:50%; display:block;} 111 | .footer-social ul {float:right; margin:6px 0px 0px 0px;} 112 | .footer-bottom .footer-social a:hover i, .footer-bottom .footer-social a:focus i{color:#4d4d4d !important;} 113 | .footer-social li a .fa{color:#ffffff; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; height:18px;} 114 | body .theme-background-color {background-color:#f20158 !important;} 115 | 116 | /* Footer End */ 117 | 118 | /* Homepage Start */ 119 | body.feature-single-body {overflow-x:hidden;} 120 | .homepage-equeue11 section {width:100%; float:left;background: rgba(93, 107, 196, 0.1) no-repeat center center / 100% 100%;position: relative;z-index: 999;min-height: 550px} 121 | .section11 h1 {font-family: 'Poppins', sans-serif; font-size:42px; font-weight: 700; text-transform:none; margin: 0px 0 10px; /* max-width:425px;*/} 122 | .section11 p{width:100%; color:#666666; font-size:18px; line-height:28px;} 123 | .rounded-btn {border-radius:4px; color:#ffffff !important; border:none !important; margin:30px 0px 0px 0px; background:#5d6bc4; padding:10px 32px; font-size: 18px; box-shadow:0px 10px 20px rgba(0,0,0,0.2); -moz-box-shadow:0px 10px 20px rgba(0,0,0,0.2); -webkit-box-shadow:0px 10px 20px rgba(0,0,0,0.2);transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out; } 124 | .rounded-btn:hover, .rounded-btn:focus{background:#1b4472 !important; text-decoration:none; outline:none;} 125 | .homepage-equeue11 section:before {content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(255, 255, 255, 0.9); } 126 | .section22 {padding:50px 0px 40px;} 127 | .title1{width:100%; float:left; font-family: 'Poppins', sans-serif; font-size:42px;font-weight: 600; text-transform:none; margin:0px 0px 10px 0px; color:#000000; position:relative; padding:0px 0px 20px 0px;} 128 | /*.title1:before {width:40px; position:absolute; content:''; height:5px; background:rgba(88,97,192,1); left:0; right:0; bottom:-1px; margin:auto; z-index:9;} 129 | .title1:after {width:120px; position:absolute; content:''; height:2px; background:#dddddd; left:0; right:0; bottom:0; margin:auto;} 130 | */.section22 img{margin-top:30px;} 131 | .section33{background: rgb(88,97,192); /* Old browsers */ 132 | background: -moz-linear-gradient(top, rgba(88,97,192,1) 0%, rgba(125,169,216,1) 100%); /* FF3.6-15 */ 133 | background: -webkit-linear-gradient(top, rgba(88,97,192,1) 0%,rgba(125,169,216,1) 100%); /* Chrome10-25,Safari5.1-6 */ 134 | background: linear-gradient(to bottom, rgba(88,97,192,1) 0%,rgba(125,169,216,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 135 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5861c0', endColorstr='#7da9d8',GradientType=0 );} 136 | .before11{position:relative;} 137 | .before11:before {width:100%; position:absolute; top:-1px; height:200px; content:''; left:0px; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 0 100%); 138 | clip-path: polygon(0 0, 100% 0%, 100% 0, 0 100%); background:#ffffff;} 139 | /*.before11:after {width:100%; position:absolute; bottom:-1px; height:200px; content:''; left:0px; -webkit-clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%); 140 | clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%); background:#ffffff;}*/ 141 | .section33.before11 .title11::before {background:#ffffff;} 142 | 143 | .inn .label {padding:0px; position:relative; top:-12px; left:20px;} 144 | 145 | .section33 img{position:relative; z-index:9;} 146 | .section33 .col-sm-6 {float:none; display:table-cell; padding:90px 0px; vertical-align:middle;} 147 | .title11 {width:100%; float:left; font-family: 'Poppins', sans-serif; font-size:30px; font-weight:700; margin:0px 0px 20px 0px; padding:25px 0px 0px 0px; text-align:left; position:relative;} 148 | .title11::before {content:''; width:40px; height:4px; background:#5666cc; position:absolute; top:0; } 149 | .section33 *{color:#ffffff;} 150 | .section33 .rounded-btn{background:#ffffff; color:#5d6bc4 !important; margin:30px 0px 0px 5px;} 151 | .section33 .rounded-btn:hover, .section33 .rounded-btn:focus{color:#ffffff !important;} 152 | .section22 p {margin:0px auto; max-width:900px;} 153 | 154 | .section44 p.text-center{max-width:900px; margin:0px auto 70px;} 155 | .key-features11 {text-align: center;margin-bottom: 30px;} 156 | .key-features11 img {display: block;margin: 20px auto;max-width: 72px;} 157 | .key-features11 h3 {font-size:19px; margin:0px 0px 10px 0px; font-family: 'Poppins', sans-serif; font-weight:600;} 158 | .key-features11 p{font-size:16px; line-height:24px;} 159 | 160 | @media only screen and (max-width: 767px){ 161 | .key-features11 { margin-bottom: 50px;} 162 | } 163 | 164 | .section55 {background:#f5f5f5; padding:180px 0px 60px;} 165 | .section55 p.text-center{max-width:900px; margin:0px auto 40px;} 166 | .tabbing .tab-content{display:block; margin:0px 0px 40px 0px;} 167 | .section55 .nav-tabs li {float:none; margin:30px 0px; display:table-cell; text-align:center; position:relative;} 168 | .section55 .nav-tabs li span {width:54px; height:54px; float:none; border:2px solid #5d6bc4; border-radius:50%; text-align:center; display:inline-block; 169 | margin:0px 0px 20px 0px; line-height:48px; font-size:27px; font-weight:700; color:#5d6bc4; position:relative; z-index:9; background:#ffffff;} 170 | 171 | .section55 .nav-tabs li a .tabh6{font-family: 'Poppins', sans-serif; font-size:20px; font-weight:600; margin:0px 0px 10px 0px; color:#000000;} 172 | .section55 .nav-tabs li a p{font-size:15px; line-height:24px;} 173 | .tabbing .col-sm-4 {float:none; display:table-cell; vertical-align:middle;} 174 | .col-sm-4.text-right {padding-left:0;} 175 | .col-sm-4.text-left {padding-right:0;} 176 | .section55 .nav-tabs li a:hover, .section55 .nav-tabs li a:focus{text-decoration:none; outline:none;} 177 | .section55 .nav-tabs{display:table; width:100%; border-bottom:none; margin-bottom:50px;} 178 | .section55 .nav-tabs li.active span{background:#5d6bc4; color:#ffffff;} 179 | .section55 .nav-tabs li.active .tabh6{color:#5d6bc4;} 180 | .section55 .nav-tabs li.active a{border:none; background:transparent;} 181 | .section55 .nav-tabs li a{margin-right:0px; border:none;} 182 | .section55 .nav-tabs li a:hover, .section55 .nav-tabs li a:focus, .section55 .nav-tabs li.active a:hover, .section55 .nav-tabs li.active a:focus{border:none; background:transparent !important;} 183 | /*.section55.before11::after{background:#5d6bc4; display:table; width:100%;}*/ 184 | .section55 .nav-tabs li a:after {content:''; background:#e1e1e1; width:96%; height:1px; position:absolute; left:50%; top:37px;} 185 | .section55 .nav-tabs li:last-child a:after{display:none;} 186 | .section55 .tab-content .col-sm-6{float:none; display:table-cell; vertical-align:middle;} 187 | .section55 #profile img, .section55 #settings img{max-width:290px;} 188 | 189 | .section55 .title1 {margin:0px 0px 80px 0px;} 190 | 191 | .tabbing .tab-content ul {width:100%; float:left; margin-top:15px;} 192 | .tabbing .tab-content ul li {width: 100%; float: left; padding-left: 30px; background-size: 18px; line-height: 25px; font-size: 18px; margin-bottom: 10px;} 193 | /*.section66{background:#5d6bc4;}*/ 194 | .section66 *{color:#000;} 195 | .our-clients li {display:inline-block; margin:20px; padding:10px 15px; background:#ffffff;} 196 | /*.section66 .title1:before{background:#000000;} 197 | .section66 .title1:after {background:#ffffff;} */ 198 | .our-clients li img {max-width: 120px;/*height: 52px;*/} 199 | /* Homepage End */ 200 | 201 | /*---- Gym Features Page Start ----*/ 202 | .gym-features {margin:80px 0px 120px 0px;} 203 | .gym-feature-row {width:100%; float:left; position:relative; margin:0px 0px 50px 0px;} 204 | .gym-feature-row .col-sm-6 {padding:0px; max-width:545px; height:490px; overflow:hidden;} 205 | .gym-feature-row .gym-image-content {background:#f6f6f6; top:80px; position:absolute; right:0; width:545px;} 206 | .gym-feature-row.row22 .gym-image-content {left:0px; right:inherit; top:0;} 207 | .gym-feature-row.row22 .gym-image1{float:right; margin-right:0px; margin-top:80px;} 208 | .gym-feature-row.row22{margin:0px 0px -30px 0px;} 209 | .gym-image1 img {transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; height:490px;} 210 | .gym-image1:hover img {transform:scale(1.3); -moz-transform:scale(1.3); -webkit-transform:scale(1.3); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;} 211 | .gym-image1{border:0px solid #ffffff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;} 212 | .gym-image1:hover {border:20px solid #ffffff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;} 213 | .gym-image-content .section-title h3 {text-align:left; color:#000;} 214 | .gym-image-content .section-title h3:after{left:0; margin-left:0;} 215 | .gym-image-content .features11 {padding:12px 25px;} 216 | .gym-image-content .features11 li {color:#626262;} 217 | .gym-image-content .features11 ul {margin-top:25px;} 218 | 219 | 220 | .industry-banner{padding-top:190px; padding-bottom:50px; position:relative;} 221 | .industry-banner:before{width:100%; position:absolute; top:0; left:0; height:100%; position:relative; background: #fd6e00; background:-moz-linear-gradient(top, #fd6e00 0%, #ff401b 100%); 222 | background: -webkit-linear-gradient(top, #fd6e00 0%,#ff401b 100%); background:linear-gradient(to bottom, #fd6e00 0%,#ff401b 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd6e00', endColorstr='#ff401b',GradientType=0 ); opacity:0.35; } 223 | 224 | .industry-banner::after, .header-bg11:after{content:''; position:absolute; bottom:0; width:100%; height:160px; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 75%, 0 100%); clip-path: polygon(0% 100%, 100% 0, 100% 100%, 0% 100%); background:#fff;} 225 | .header-bg11:after{background:#f2f2f2;} 226 | .industry-banner h3 {float:left; color:#ffffff; text-transform:uppercase; font-weight:400; font-size:43px; margin-top:50px;} 227 | .industry-banner p{float:left; color:#ffffff; font-weight:400; font-size:18px; line-height:30px; max-width:470px;} 228 | .industry-banner img {width:640px; float:right; position:relative; z-index:9; bottom:-30px;} 229 | .indusrty-section2 {width:100%; float:left; padding:20px 0px 60px;} 230 | .title-new {text-align:center; margin:0px 0px 60px 0px;} 231 | .title-new span {font-size:30px; text-transform:capitalize; color:#212121; font-weight:700;} 232 | .title-new p{color:#626262;} 233 | .indusrty-section2 .col-sm-4 {text-align:center; padding:0px 50px;} 234 | .indusrty-section2 .col-sm-4 img{max-width:120px;} 235 | .indusrty-section2 .col-sm-4 h4{margin:0px; font-size:20px; color:#212121; font-weight:600;} 236 | .img-parent {min-height:150px; display:block;} 237 | .indusrty-section2 .col-sm-4 p{margin:10px 0px;} 238 | .indusrty-section3 {width:100%; float:left; position:relative; background:#f1f1f1; padding:200px 0px 95px 0px;} 239 | .indusrty-section3:before, .indusrty-section4:before{content:''; position:absolute; top:0; width:100%; height:160px; -webkit-clip-path:polygon(0 0%, 100% 0%, 100% 0%, 0% 100%); clip-path:polygon(0 0%, 100% 0%, 100% 0%, 0% 100%); background:#fff;} 240 | .indusrty-section3 img {max-width:400px;} 241 | .indusrty-section3 h5 {font-size:23px; text-transform:uppercase; font-weight:600; position:relative; padding-bottom:12px; margin:25px 0px 20px 0px;} 242 | .indusrty-section3 p{line-height:28px;} 243 | .indusrty-section3 .row{margin:0px 0px 60px 0px;} 244 | .indusrty-section3 .pull-right img{max-width:350px;} 245 | .salonist-industry .indusrty-section4{position:relative; margin-top:-100px; background: #5b22bc; /* Old browsers */ 246 | background: -moz-linear-gradient(45deg, #5b22bc 0%, #f20158 100%); /* FF3.6-15 */ 247 | background: -webkit-linear-gradient(45deg, #5b22bc 0%,#f20158 100%); /* Chrome10-25,Safari5.1-6 */ 248 | background: linear-gradient(45deg, #5b22bc 0%,#f20158 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 249 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b22bc', endColorstr='#f20158',GradientType=1 ); padding:130px 0px 70px 0px; width:100%; float:left;} 250 | .indusrty-section4:before{background:#f1f1f1;} 251 | .indusrty-section4 .col-sm-4 {max-width:30%; background:#ffffff; margin:0px 1.5%; text-align:center; padding:20px;} 252 | .indusrty-section4 .col-sm-4 span {width:100px; height:100px; border-radius:50%; overflow:hidden; display:inline-block;} 253 | .indusrty-section4 .col-sm-4 h4 {font-size:22px; text-transform:uppercase; font-weight:500; margin:12px 0px;} 254 | .indusrty-section4 .col-sm-4 h6 {font-size:15px; font-style:italic; color:#626262; margin:0px;} 255 | .indusrty-section4 .col-sm-4 p{color:#626262; margin:20px 0px; font-size:15px; padding:0px 2px;} 256 | .indusrty-section4 .title-new *{color:#ffffff;} 257 | .indusrty-section5 {width:100%; float:left; margin:0px 0px 50px 0px; padding:50px 0px; background:#000000;} 258 | .indusrty-section5 h2{margin:0px; color:#ffffff;} 259 | .indusrty-section5 p{color:#ffffff; margin:12px 0px 0px 0px;} 260 | 261 | .salonist-industry .industry-banner:before{width: 100%; height:100%; position:absolute; top:0; left:0; content:''; background:#5b22bc; /* Old browsers */ 262 | background: -moz-linear-gradient(45deg, #5b22bc 0%, #f20158 100%); /* FF3.6-15 */ 263 | background: -webkit-linear-gradient(45deg, #5b22bc 0%,#f20158 100%); /* Chrome10-25,Safari5.1-6 */ 264 | background: linear-gradient(45deg, #5b22bc 0%,#f20158 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 265 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b22bc', endColorstr='#f20158',GradientType=1 ); opacity: 0.85;} 266 | .salonist-industry .indusrty-section3 h5:after{position:absolute; content:''; background:#f20158; left:0; bottom:0; width:50px; height:3px;} 267 | .salonist-industry .indusrty-section4 .col-sm-4 a {border:1px solid #f20158; padding:9px 20px; font-size:20px; color:#f20158; margin:10px 0px 5px 0px; display:inline-block;} 268 | .salonist-industry .indusrty-section4 .col-sm-4 a:hover, .salonist-industry .indusrty-section4 .col-sm-4 a:focus{text-decoration:none; color:#ffffff; background:#f20158; } 269 | .salonist-industry .indusrty-section5 a {font-size:18px; text-transform:uppercase; color:#ffffff; border:1px solid #ffffff; padding:10px 25px; margin:12px 10px 0px 15px; display:inline-block;} 270 | .salonist-industry .indusrty-section5 a.let-button, .salonist-industry .indusrty-section5 a:hover, .salonist-industry .indusrty-section5 a:focus{border:1px solid #f20158; background:#f20158; text-decoration:none;} 271 | .salonist-industry .indusrty-section5 a.let-button:hover, .salonist-industry .indusrty-section5 a.let-button:focus{border:1px solid #ffffff; background:transparent; text-decoration:none;} 272 | 273 | 274 | 275 | /*---- Salonist Pricing Page ----*/ 276 | 277 | .pricing-equeue-main11 {width:100%; float:left; padding:70px 0px; text-align:center;} 278 | .pricing-table1 {width:27%; display:inline-block; vertical-align:top; margin:0px 8px; background:#5d6bc4; padding:25px 20px 70px; min-height:435px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease; position:relative;} 279 | .pricing-table1:nth-child(1){background:#b3bf00; /*-webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease; transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); left:-20px;*/} 280 | .basic-plan {background:#b3bf00; display:inline-block; padding:6px 35px; font-size:25px; color:#ffffff; position: relative; top:0px; margin:auto;} 281 | .basic-plan::before {border-left:15px solid #5d6bc4; content:''; border-right:20px solid transparent; border-top:24px solid transparent; border-bottom:24px solid transparent; position:absolute; top:0; left:0;} 282 | .basic-plan::after {border-right:15px solid #5d6bc4; content:''; border-left:20px solid transparent; border-top:24px solid transparent; border-bottom:24px solid transparent; position:absolute; top:0; right:0;} 283 | .price span {background:transparent; border:none; font-size:34px; color:#ffffff; position:absolute; left:0; top:0; padding:0px; margin:0px; font-family:'bebas_neuebold'; line-height:30px;} 284 | .price {font-family:'bebas_neuebold'; font-size:72px; display:inline-block; position:relative; padding-left:15px; margin:30px 0px 0px; color:#ffffff; line-height:60px;} 285 | .pricing-table1 li {font-size:17px; line-height:30px; color:#ffffff;} 286 | .pricing-table1 ul {margin:20px 0px;} 287 | .per-location {font-weight:500; color:#ffffff;} 288 | /*.pricing-table1:nth-child(1):hover{-webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease; transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1);}*/ 289 | .pricing-table1:nth-child(1) .basic-plan{background:#5d6bc4;} 290 | .pricing-table1:nth-child(1) .basic-plan:before{border-left:15px solid #b3bf00;} 291 | .pricing-table1:nth-child(1) .basic-plan:after{border-right:15px solid #b3bf00;} 292 | .pricing-table1 .basic-plan:before{left:-1px;} 293 | .pricing-table1 .basic-plan:after{right:-1px;} 294 | section.feature-page11 {width:100%; float:left;} 295 | .resturant-page-main11 {width:100%; float:left;} 296 | .pricing-table1:hover {-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; box-shadow: 0 0 20px rgb(0 0 0 / 30%);} 297 | .text-bottomp {margin-top:50px;} 298 | .text-bottomp p{color:#4d4d4d;} 299 | .text-bottomp .rounded-btn{margin:10px 0px 0px 0px; text-transform:uppercase;} 300 | .text-bottomp .rounded-btn:hover, .text-bottomp .rounded-btn:focus{background:#b3bf00 !important;} 301 | .pricing-table1 a{text-decoration:none; background:transparent; font-size:15px; border:2px solid #ffffff; color:#ffffff; padding:5px 14px; display: inline-block; margin-top:17px; text-transform:uppercase; margin-bottom:4px;} 302 | .pricing-table1 a:hover, .pricing-table1 a:focus{color:#5d6bc4; background:#ffffff;} 303 | .per-location.custom {font-size:22px; margin-top:25px;} 304 | 305 | 306 | /*---- Industries Page Start ----*/ 307 | 308 | .top-industries-list11 {border-bottom:none; text-align:center; min-height:550px; position:relative;} 309 | .top-industries-list11 li {float:none; margin-bottom:0; position:absolute;} 310 | .top-industries-list11 .imgul{width:325px; position:absolute; bottom:0; left:-30px; right:0; margin:auto;} 311 | .top-industries-list11 li:nth-child(1) {bottom:10px; left:50px;} 312 | .top-industries-list11 li:nth-child(2) {bottom:115px; left:85px;} 313 | .top-industries-list11 li:nth-child(3) {bottom:215px; left:125px;} 314 | .top-industries-list11 li:nth-child(4) {bottom:315px; left:170px;} 315 | .top-industries-list11 li:nth-child(5) {bottom:415px; left:215px;} 316 | .top-industries-list11 li:nth-child(7) {bottom:415px; right:205px;} 317 | .top-industries-list11 li:nth-child(8) {bottom:315px; right:160px;} 318 | .top-industries-list11 li:nth-child(9) {bottom:215px; right:115px;} 319 | .top-industries-list11 li:nth-child(10) {bottom:115px; right:75px;} 320 | .top-industries-list11 li:nth-child(11) {bottom:10px; right:40px;} 321 | .top-industries-list11 span {width:75px; height:75px; display:table-cell; vertical-align:middle; border:2px solid #d1d1d1; border-radius:50%;} 322 | .features-index-page11 .our-feature span {border:2px solid #5d6bc4; background:#5d6bc4;} 323 | .features-index-page11 .our-feature a:hover span, .features-index-page11 .our-feature a:focus span{border:2px solid #5d6bc4; background:#5d6bc4;} 324 | 325 | .top-industries-list11 span img {max-width:45px;} 326 | .top-industries-list11 strong {display:table-cell; vertical-align:middle; padding:0px 15px 0px 0px; width:182px; text-align:right;font-size:14px; font-weight:700; line-height:22px; color:#010101;} 327 | .top-industries-list11 li:nth-child(7) strong, .top-industries-list11 li:nth-child(8) strong, .top-industries-list11 li:nth-child(9) strong, .top-industries-list11 li:nth-child(10) strong, .top-industries-list11 li:nth-child(11) strong {text-align:left; padding:0px 0px 0px 15px; } 328 | .top-industries-list11 li a{padding:0px; border:none;} 329 | .top-industries-list11 li a:hover, .top-industries-list11 li a:focus{background:transparent;} 330 | .top-industries-list11 li a:hover strong, .top-industries-list11 li a:focus strong{color:#5d6bc4;} 331 | .top-industries-list11 li.active a, .top-industries-list11 li.active > a:focus, .top-industries-list11 li.active a:hover {color:#000000; cursor:default; background-color:transparent; border:none;} 332 | .top-industries-list11 li.active span, .top-industries-list11 li a:hover span, .top-industries-list11 li a:focus span {border:2px solid #5d6bc4;} 333 | .top-industries-list11 li.active h4, .top-industries-list11 li a:hover h4, .top-industries-list11 li a:focus h4 {color:#5d6bc4;} 334 | .restaurant-inner11 h2 {color:#020202; font-size:20px; padding-bottom:0; font-family: 'Poppins', ;font-weight:700; margin:10px 0px 15px 0px;} 335 | .restaurant-inner11 span {display:inline-block; min-height:90px; vertical-align:top;} 336 | .restaurant-inner11 span img {margin:0px;} 337 | .restaurant-inner11 p {color:#626262; font-size:16px; line-height:25px;} 338 | .restaurant-inner11 .row{margin:70px 0px;} 339 | .resturant-page-main11 .feature-tabbing .col-sm-6 span img {max-width:300px; border:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;} 340 | 341 | .resturant-page-main11 .section44-feature {padding:80px 0px 140px;} 342 | .mobileapps ul {margin:30px 0px 70px;} 343 | .mobileapps ul li {display:inline-block; margin:0px 5px;} 344 | .mobileapps p{max-width:700px; margin:0px auto;} 345 | 346 | 347 | .industries-index-page11 li {position:static; display:inline-block;width:29%;text-align:center;margin:20px;vertical-align: top;} 348 | .industries-index-page11 .top-industries-list11 strong {width:100%;display: block; padding:10px 0px !important; text-align:center !important; font-size:15px; font-weight:700; line-height:24px;} 349 | .industries-index-page11 .top-industries-list11 {padding:70px 0px; border-bottom:1px solid #e1e1e1;} 350 | .section44-feature ul{width:100%; float:left; margin:0px 0px 10px 0px;} 351 | .section44-feature ul li {position:relative; float:left; width:100%; color:#767676; font-size:17px; line-height:26px; margin-bottom:10px; padding-left:30px;} 352 | .section44-feature ul li:before { 353 | content: "\f00c"; 354 | font-family: fontawesome; 355 | color: #5666cc; 356 | position: absolute; 357 | left: 0; 358 | font-size: 20px; top:2px;} 359 | .section44-feature p{color:#767676; font-size:17px; line-height:26px;} 360 | 361 | .feature-tabbing-feature11 .section33.before11 .title11::before {background:#ffffff;} 362 | .feature-tabbing-feature11 .section44-feature.before11::after {background:#f5f5f5;} 363 | .feature-tabbing-feature11 .section55 {padding:10px 0px 220px;} 364 | .feature-tabbing-feature11 .section55.before11::before {display:none;} 365 | 366 | 367 | 368 | /*---- Industries Page End ----*/ 369 | 370 | 371 | /*---- Salonist Videos Start ----*/ 372 | 373 | .pricing-page-main.videos-main .industry-banner{padding-bottom: 160px;} 374 | .video-overview {position:relative; width:100%; max-width:900px; margin:0px auto 60px; top:0; left:0; right:0; background:#ffffff; border-radius:6px; overflow:hidden; box-shadow:0px 5px 10px rgba(0,0,0,0.1); -webkit-box-shadow:0px 5px 10px rgba(0,0,0,0.1); -moz-box-shadow:0px 5px 10px rgba(0,0,0,0.1);} 375 | .video-overview .col-sm-6{padding:0px;} 376 | .video-overview .col-sm-6:first-child::before {content:''; width:100%; position:absolute; height:100%; background:rgba(0,0,0,0.4);} 377 | .video-overview .col-sm-6:first-child::after {content:'Introduction Queue management software'; width:100%; position:absolute; left:0; top:15px; color:#ffffff; font-size:22px; padding:0px 0px 0px 15px;} 378 | .video-page-main .video {float:left; position:relative; top:0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow:0px 5px 10px rgba(0,0,0,0.1); -webkit-box-shadow:0px 5px 10px rgba(0,0,0,0.1); -moz-box-shadow:0px 5px 10px rgba(0,0,0,0.1); margin:0px 0px 25px 0px;} 379 | .video-page-main .video img {min-height:207px;} 380 | 381 | .video-page-main .video:hover, .video-page-main .video:focus{top:-7px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;} 382 | .video-overview .col-sm-6:last-child{padding:10px 20px;} 383 | .video-overview .col-sm-6 a{padding:11px 19px; border:none; background:#5d6bc4; float:left; border:1px solid #5d6bc4; text-transform:uppercase; font-size:18px; margin-top:20px; color:#ffffff;} 384 | .video-overview .col-sm-6 a:hover, .video-overview .col-sm-6 a:focus{color:#5d6bc4; border:1px solid #5d6bc4; background:transparent; text-decoration:none;} 385 | .video-overview h2{font-size:27px;} 386 | .video-overview p{color:#626262;} 387 | 388 | .video-image-parent {position:relative;} 389 | .video-image-parent:before{ content:''; width:100%; position:absolute; height:100%; background:rgba(0,0,0,0.4);} 390 | .video-image-parent .title {position:absolute; top:0; left:0; color:#ffffff; padding:10px 15px 0px 15px; font-size:18px;} 391 | .video-image-parent .play-icon {position:absolute; top:0; bottom:0; margin:auto; height:50px; width:50px; left:0px; right:0; border:2px solid #ffffff; text-align:center; line-height:45px; border-radius:50%; font-size:21px; color:#ffffff; padding:0px 0px 0px 5px;} 392 | .video-image-parent .play-icon:hover, .video-image-parent .play-icon:focus{opacity:0.6; background:rgba(0,0,0,0.4);} 393 | .video-page-main .video h5 {margin:0px; font-size:17px; font-weight:500; line-height:26px; padding:12px 10px; display:none;} 394 | .video-page-main .video:hover {text-decoration:none;} 395 | .video-page-main {width:100%; float:left; padding-top:80px; padding-bottom:54px; background:#f2f2f2;} 396 | .resturant-page-main11 .container, .feature-page11 .container{display:table;} 397 | .video-overview .col-sm-6:first-child img {min-height:270px;} 398 | 399 | /*---- Salonist Videos End ----*/ 400 | 401 | /*---- Salonist Customers Page Start ----*/ 402 | 403 | .cutomers-page-main .col-sm-6 {text-align:center; padding:60px 10px; float:none; display:table-cell; vertical-align:middle;} 404 | .cutomers-page-main{width:100%; float:left; position:relative; margin-top:0px;} 405 | .customers-left-list li {width:180px; height:220px; display:inline-block; margin:10px 10px; position:relative;} 406 | .customers-left-list li a{width:100%; float:left; -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 407 | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);} 408 | .customers-left-list li a img{height:220px;} 409 | .customers-left-list li.current a:before{background:#5d6bc4;} 410 | .customers-left-list li.current a:hover:before{background:rgba(93,107,96,0.7);} 411 | .customers-left-list li a:before {width:100%; position:absolute; height:100%; left:0; top:0; content:''; background:#3b3b39; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;} 412 | .customers-left-list .customer-name{position:absolute; top:0; z-index:9; left:0; right:0; margin:auto; text-transform:uppercase; color:#ffffff; height:54px; bottom:0; text-align:center; width:150px; font-size:20px;} 413 | 414 | .video-overview-customers .col-sm-6{float:none; padding:0px; display:table-cell; vertical-align:middle; } 415 | .video-overview-customers video {width:100%; float:left; margin:0px; padding:0px;} 416 | .video-overview-customers .video-image-parent img {width:100%; min-height:400px;} 417 | .video-image-parent .play-icon {height:70px; width:70px; line-height:inherit; font-size:36px; padding:0px 0px 0px 7px;} 418 | .video-image-parent .play-icon .fa {position:absolute; left:0; right:0; margin:auto -6px auto auto; top:0; bottom:0; height:36px;} 419 | .video-overview-customers {width:100%; float:left; background:#ffffff; display:table;} 420 | .video-overview-customers .col-sm-6:last-child {padding:0px;} 421 | .video-text {width:100%; max-width:556px; padding:0px 15px 0px 35px;} 422 | .video-text p{font-size:18px; line-height:30px; color:#626262; font-style:italic;} 423 | .video-text h3{width:100%; float:left; font-size:17px; font-weight:700; position:relative; padding-top:30px; margin:10px 0px 5px 0px;} 424 | .video-text h3:before {width:100px; height:3px; background:#5d6bc4; content:''; top:0; left:0; position:absolute;} 425 | .video-text div {float:left; color:#666; font-size:14px; margin:4px 0px 0px 0px;} 426 | 427 | .customer-clients11 .section-title {margin:50px 0 20px;} 428 | .industry-inner-page .section66 {width:100%; float:left; padding-top:50px;} 429 | 430 | /*---- Salonist Customers Page End ----*/ 431 | 432 | 433 | /*---- Salonist Get Free Trial Start ----*/ 434 | 435 | #signup-gym{padding:60px 0px; position:relative;} 436 | #signup-gym:before{background: #007aff; /* Old browsers */ 437 | background: -moz-linear-gradient(-45deg, #007aff 0%, #00deff 100%); /* FF3.6-15 */ 438 | background: -webkit-linear-gradient(-45deg, #007aff 0%,#00deff 100%); /* Chrome10-25,Safari5.1-6 */ 439 | background: linear-gradient(135deg, #007aff 0%,#00deff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 440 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007aff', endColorstr='#00deff',GradientType=1 ); position:absolute; content:''; top:0; left:0; width:100%; height:100%; opacity:0.8; } 441 | section#get-free-trail11{overflow:hidden; padding:40px 0px;} 442 | #signup-gym .signup-form {max-width:650px; margin:0px auto; padding:0px; display:table; background:transparent; position:relative;} 443 | #signup-gym .form__fieldgroup {width:47%; float:left; margin:0px 1.5% 15px;} 444 | #signup-gym .inn {max-width:100%;} 445 | #signup-gym h3 {color:#ffffff; font-size:24px; padding-bottom:0; text-transform:uppercase;} 446 | #signup-gym .booking-title{color:#ffffff; font-size:14px; margin-bottom:30px;} 447 | #signup-gym .form__fieldgroup input{width:100%; border:1px solid #ffffff; height:50px; padding:0 10px; border-radius:0; color:#ffffff; background:transparent;} 448 | #signup-gym .btn-center {width:47%; float:left; margin:0px 1.5%;} 449 | #signup-gym .btn-center input[type="submit"]{width:100%; max-width:100%; border-radius:0px; background:#fff; border:1px solid #ffffff; color:#000000; font-size:20px; padding:0px; height:50px;} 450 | #signup-gym .btn-center input[type="submit"]:hover, #get-free-trail11 .btn-center input[type="submit"]:focus{border:1px solid #000000; color:#ffffff; background:#000000;} 451 | 452 | #signup-gym .form__fieldgroup input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 453 | color: #ffffff; opacity:1; 454 | } 455 | #signup-gym .form__fieldgroup input::-moz-placeholder { /* Firefox 19+ */ 456 | color: #ffffff; opacity:1; 457 | } 458 | #signup-gym .form__fieldgroup input:-ms-input-placeholder { /* IE 10+ */ 459 | color: #ffffff; opacity:1; 460 | } 461 | #signup-gym .form__fieldgroup input:-moz-placeholder { /* Firefox 18- */ 462 | color: #ffffff; opacity:1; 463 | } 464 | 465 | /*---- Salonist Get Free Trial End ----*/ 466 | 467 | 468 | /*---- Salonist Features Inner Page Start ----*/ 469 | 470 | 471 | .feature-single-body .site-header::before {display:none;} 472 | .feature-single-body .top-bar .top-bar-menu11 li a {float:left; color:#000000;} 473 | .feature-single-body .site-header .sub-menu-1 a, .feature-single-body .site-header .sub-menu-1 li{color:#000000;} 474 | .feature-single-body .top-bar .top-bar-menu11 li a:hover, .feature-single-body .top-bar .top-bar-menu11 li a:focus, .feature-single-body .site-header .sub-menu-1 a:hover, .feature-single-body .site-header .sub-menu-1 a:focus{color:#767676;} 475 | .feature-single-body .logo-top:hover, .feature-single-body .logo-top:focus{color:#767676; text-decoration:none;} 476 | .feature-single-body .top-bar .top-bar-menu11 li .submenu11 li a:hover, .feature-single-body .top-bar .top-bar-menu11 li .submenu11 li a:focus{color:#212121;} 477 | .title-inner {width:100%; float:left; padding:30px 0px 26px; background:#5d6bc4;} 478 | .title-inner .heading1{font-family: 'Poppins',; font-size:36px; margin:0px; color:#ffffff;} 479 | .title-inner .heading1:before {width:60px; content:''; height:1px; background:#ffffff; display:inline-block; top:-10px; position:relative; margin-right:9px;} 480 | .title-inner .heading1:after {width:60px; content:''; height:1px; background:#ffffff; display:inline-block; top:-10px; position:relative; margin-left:9px;} 481 | .feature-page11 .top-features-list11 li a{text-align:center;} 482 | .feature-page11 .top-features-list11 li a span {width:50px; height:50px; background:#c1c1c1; display:inline-block; border-radius:10px; position:relative;} 483 | .feature-page11 .top-features-list11 li a span img{max-width:30px; position:absolute; top:0; bottom:0; margin:auto; left:0; right:0;} 484 | 485 | .feature-page11 .top-features-list11 li.active > a, .feature-page11 .top-features-list11 > li.active > a:focus, .feature-page11 .top-features-list11 > li a:hover, .feature-page11 .top-features-list11 > li.active > a:hover {background-color:transparent !important; border:none !important;} 486 | .feature-page11 .top-features-list11 li a{border:none !important; margin:0px; padding:0px;} 487 | 488 | .feature-page11 .top-features-list11 > li a:hover span{background:#5d6bc4} 489 | .feature-page11 .top-features-list11 > li a:hover strong{color:#5d6bc4; text-decoration:none;} 490 | .feature-page11 .top-features-list11 > li a:hover, .feature-page11 .top-features-list11 > li a:focus{ background:transparent;} 491 | .feature-page11 .top-features-list11 li a strong{width:100%; float:left; font-family: 'Poppins',; color:#212121; font-size:15px; line-height:1.5; display:block; padding:10px 0px;} 492 | .feature-page11 .top-features-list11 li{width:12%; float:left; text-align:center; margin:8px 0px;} 493 | .feature-page11 .top-features-list11{border-bottom:none; margin:30px 0px; position:relative; height:100px; overflow:hidden; -webkit-transition:all 1s ease; 494 | -moz-transition:all 1s ease; transition:all 1s ease;} 495 | .feature-tabbing .tab-content{display:block; margin:0px 0px;} 496 | .feature-tabbing {width:100%; float:left; background:#f5f5f5;} 497 | .feature-tabbing .section22 {padding:50px 0px 0px 0px;} 498 | .feature-tabbing .section33.before11:before{background:#f5f5f5;} 499 | .section33 ul li {list-style-type:square; margin:0px 0px 0px 19px; line-height:26px;} 500 | .section44-feature {width:100%; display:table; background:#ffffff; padding:40px 0px 160px;} 501 | .section44-feature .col-sm-6 {float:none; display:table-cell; vertical-align:middle;} 502 | .section44-feature .col-sm-6 span img,.shadow-top-left{max-width:400px; border:none; box-shadow:-25px -25px 0px #5d6bc4; -moz-box-shadow:-25px -25px 0px #5d6bc4; -webkit-box-shadow:-25px -25px 0px #5d6bc4;} 503 | .section44-feature .row{margin:30px 0px 80px;} 504 | .section44-feature .row:last-child {margin:30px 0px 80px 0px;} 505 | .section44-feature.before11:after{background:#5d6bc4;} 506 | .section44-feature .col-sm-6.text-left img {margin:0px 0px 0px 20px;} 507 | .shadow-top-left{padding: 20px;} 508 | /*.footer-center11 {width:100%; float:left; padding:15px 0px; background:#c1c1c1; display:block;} 509 | .footer-center11 li {display:inline-block; margin:0px 5px;} 510 | /*.feature-single-body .footer-center11{display:block;}*/ 511 | .inner-baneer-image {width:100%; /*max-height:500px;*/} 512 | 513 | .show-more11 {position:absolute; top:24px; right:15px; width:30px; height:30px; min-width:inherit; line-height:30px; padding:0; border-radius:50%; 514 | background:#c1c1c1; border:1px solid #c1c1c1; bottom:0;} 515 | .show-more11::before {content:'Show'; position:absolute; bottom:-35px; color:#999; font-size:13px; left:0; right:0; text-transform:capitalize; font-weight: 400;} 516 | .show-more11 .fa-angle-up, .show-more11.active .fa-angle-down {display:none;} 517 | .show-more11.active .fa-angle-up {display:inline-block; position:relative; top:-2px;} 518 | .show-more11 .fa-angle-up, .show-more11.active .fa-angle-down {display:none;} 519 | .show-more11.active::before {content:'Less'; color:#626262;} 520 | .top-features-list11.active {height:210px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease;} 521 | .show-more11.active {background:#5d6bc4; border:1px solid #5d6bc4;} 522 | .how-img11 {width:100%; margin:0px 0px 30px 0px;} 523 | 524 | 525 | /* 21 - Sep - 2019 */ 526 | .fa-check-square-o::before {content: "\f046";} 527 | .pt_80{padding-top: 80px !important} 528 | .pb_80{padding-bottom: 80px !important} 529 | .pt_50{padding-top: 50px !important} 530 | .pb_50{padding-bottom: 50px !important} 531 | 532 | ul.check_list { 533 | margin-top: 30px; 534 | } 535 | ul.check_list li { 536 | margin-bottom: 10px; 537 | font-size: 18px; 538 | } 539 | ul.check_list li i.fa { 540 | margin-right: 10px; 541 | color: #5d6bc4; 542 | font-size: 20px 543 | } 544 | section{clear: both;} 545 | 546 | 547 | 548 | /* 31-Dec-2019 */ 549 | /* Banner */ 550 | .pt-5{padding-top: 3rem} 551 | .pb-5{padding-bottom: 3rem} 552 | .banner-form {max-width: 420px; width: 100%; background: rgba(255,255,255,0.95); padding: 30px; box-shadow: 0 15px 25px rgb(0 0 0 / 15%); -webkit-box-shadow: 0 15px 25px rgb(0 0 0 / 15%); border-radius: 5px; margin: 0 auto;} 553 | .banner-form .form__fieldgroup input { border: 1px solid #ddd;} 554 | .banner-form .signup-form { padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } 555 | .banner-form .title {margin-top: 0; font-size: 24px; font-weight: 600;} 556 | .signup-form p{/*margin: 0;*/color: #888;font-size: 14px;} 557 | .banner-form .btn-center, 558 | .banner-form .btn-center, .banner-form p.form__fieldgroup {display: inline-block; max-width: 100%; vertical-align: top; flex: 100%; margin-bottom: 24px;} 559 | .banner-form input.button {padding: 11px; background: #5C4AE4; border-color: #5C4AE4; margin: 0 auto; text-align: center; float: none; display: block; height: auto; text-transform: capitalize; font-weight: 600;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;} 560 | .banner-form .signup-form label.error{font-size: 0;} 561 | .banner-form .signup-form label.error + p.form__fieldgroup input {border-color: red;} 562 | .section11 .brand-name {color: #5d6bc4; background: rgba(93, 107, 196, 0.1); width: auto; display: inline-block; padding: 0px 20px; margin-bottom: 24px; border-radius: 4px; font-size: 16px; border: 1px solid;} 563 | 564 | .signup-form .form__fieldgroup {flex: 1; padding: 0 5px;} 565 | .feature-page11 .our-feature span{position: relative;} 566 | .feature-page11 .our-feature span:before { 567 | content: ""; 568 | border: 2px solid #5d6bc4; 569 | position: absolute; 570 | z-index: -1; 571 | top: 0px; 572 | left: 0px; 573 | border-radius: 50%; 574 | right: 0px; 575 | bottom: 0px; 576 | transition: all 0.5s ease-in-out; 577 | -moz-transition: all 0.5s ease-in-out; 578 | -webkit-transition: all 0.5s ease-in-out; 579 | } 580 | .feature-page11 .our-feature li:hover span:before {top: -10px;left: -10px;right: -10px;bottom: -10px;} 581 | .how-to-manage img { 582 | margin-top: 30px; 583 | box-shadow: 0 0 20px rgb(0 0 0 / 10%); 584 | } 585 | @media only screen and (max-width: 767px){ 586 | .banner-form h2 {font-size: 20px;} 587 | } 588 | 589 | 590 | /*Our product */ 591 | .product-section {background: rgba(0, 0, 0, 0.03);padding-bottom: 50px;} 592 | .product{display: block;} 593 | .product li.product-name {background: #fff;border-radius:5px;display: inline-block;max-width: 355px;width: 100%;border: 1px solid #ddd;margin-bottom: 30px;margin-right: 30px;text-align: center;} 594 | .product li.product-name:nth-child(3n+3) {margin-right: 0;} 595 | .product li.product-name a{display: block; cursor: pointer;} 596 | 597 | /* case-study */ 598 | .case-studies{padding: 50px;} 599 | .case-studies .images{overflow: hidden;position:relative;background: rgba(93, 107, 196, 0.1);height: 150px;margin-bottom:30px;padding: 30px;display: flex;align-items: center;display: -webkit-flex;flex-wrap: wrap;border-radius: 7px;} 600 | .case-studies .custom_height{height: 400px;} 601 | .case-description{text-decoration:none;color:#fff;padding: 30px;position: absolute;bottom:0px;top:0;left:0;right:0;background: rgba(0, 0, 0, 0.8); 602 | transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;opacity: 0;visibility: hidden;} 603 | .case-description:hover{text-decoration:none;} 604 | .case-studies .images:hover .case-description {opacity: 1;visibility: visible;} 605 | .case-description p{color:#fff;text-align: center;} 606 | .case-description .link-btn {color:#fff;text-align:center;display:block;position:absolute;left:0;right:0;font-size:18px;bottom:20px;padding: 10px;} 607 | .fa-long-arrow-right:before {content: "\f178";} 608 | .fa-long-arrow-right { padding-left: 5px;} 609 | 610 | /*case-study details */ 611 | case-study-banner:before {content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, 0.5);} 612 | .case-study-banner h1 {text-transform: capitalize;position: relative;color: #fff;z-index: 9;font-size: 30px;line-height:1.4;} 613 | .case-study-head {background: rgba(93, 107, 196, 0.06);padding: 50 0;} 614 | .case-study-head p {color: #000;font-weight: 600;margin: 10px 0;} 615 | .case-study-head h2 {margin: 0;font-weight: 800;color: #a7a7a7;} 616 | .case-study-inner{padding: 50px 0;} 617 | img.icon-big {max-width: 150px;margin: 0 auto;} 618 | .dot-list li { color: #a7a7a7;position: relative;padding-left: 20px;margin-bottom: 10px;} 619 | .dot-list li:before {content:"";height:8px;width:8px;display:inline-block;background:#5d6bc4;position:absolute;left: 2px;top: 8px;border-radius: 50%;} 620 | .case-study-inner .industry {padding: 15px;border: 1px solid #ddd;margin-bottom: 30px;border-radius: 5px;} 621 | .case-study-inner h3 {font-weight: 600;font-size: 24px;margin: 0;} 622 | 623 | @media only screen and (min-width: 768px){ 624 | .d-flex {display: flex;flex-wrap: wrap;align-items: center;} 625 | .justify-content-center{justify-content: center;} 626 | .pricing-equeue-main11 .d-flex {align-items: inherit;} 627 | } 628 | 629 | @media (max-width: 768px){ 630 | .case-study-head .col-md-3.text-center { 631 | width: 100%; 632 | margin-bottom: 30px; 633 | border-radius: 0; 634 | border-bottom: 1px solid#ddd; 635 | padding-bottom: 30px; 636 | } 637 | .case-study-head .col-md-3 { 638 | width: 33.33%; 639 | } 640 | } 641 | 642 | /* screen modal section */ 643 | 644 | .screen-models-section {background: rgba(93, 107, 196, 0.1);} 645 | .pt_15 {padding-top: 15px !important;} 646 | .kiosk-model {display: flex;flex-wrap: wrap;} 647 | .kiosk-model li:last-child {margin-right: 0;} 648 | .kiosk-screen img {max-width: 200px;} 649 | .kiosk-screen span {display: block;position: absolute;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.3);padding: 10px;bottom: 30px;color: #fff;} 650 | 651 | @media (max-width: 991px){ 652 | .kiosk-model {justify-content: center;} 653 | .kiosk-model li{margin-bottom: 30px;} 654 | 655 | } 656 | 657 | 658 | .fa-envelope:before {content: "\f0e0";} 659 | #footer .relations .mobileapps li {padding:0;} 660 | #footer .relations .mobileapps li:before {display: none;} 661 | .support-nav img {max-width:30px;} 662 | .support-nav i {margin-right:10px;} 663 | .mobileapps {margin-top: 20px;} 664 | .footer-bar {display: inline-block;width: 100%; background: #111;padding: 10px;} 665 | .footer-bar p{margin:0;color:#fff;text-align:center;font-size: 15px;} 666 | 667 | @media (max-width:767px) { 668 | .product{text-align: center;} 669 | } 670 | 671 | /* change style */ 672 | .tabs { 673 | padding: 50px 0; 674 | border-bottom: 1px solid #ddd; 675 | display: flex; 676 | display: -webkit-box; 677 | display: -webkit-flex; 678 | flex-wrap: wrap; 679 | align-items: center; 680 | } 681 | .tabs:last-child { 682 | border: 0; 683 | } 684 | 685 | @media (min-width: 768px){ 686 | .row-reverse{ 687 | flex-direction: row-reverse; 688 | display: flex; 689 | flex-wrap: wrap; 690 | display: -webkit-box; 691 | display: -webkit-flex; 692 | } 693 | } 694 | .key-features11 span { 695 | position: relative; 696 | display: block; 697 | max-width: 100px; 698 | margin: 0 auto; 699 | } 700 | .key-features11 > span:after, 701 | .key-features11 > span:before { 702 | content: ""; 703 | height: 60px; 704 | width: 60px; 705 | background: linear-gradient(to bottom, rgba(88,97,192, 0.5) 0%,rgba(125,169,216,0.5) 100%); 706 | position: absolute; 707 | z-index: -1; 708 | border-radius: 50px; 709 | right: 0; 710 | top: -13px; 711 | } 712 | .key-features11 > span:after { 713 | background: transparent; 714 | border: 2px solid rgba(88,97,192, 0.5); 715 | height: 70px; 716 | width: 70px; 717 | right: -5px; 718 | top: -18px; 719 | } 720 | .instell-step { 721 | background: rgba(93, 107, 196, 0.8); 722 | } 723 | .statr-steps { 724 | text-align: center; 725 | box-shadow: 0 0 12px rgba(0, 0, 0, 0.09); 726 | padding: 30px 15px; 727 | background: #fff; 728 | min-height: 256px; 729 | display: inline-block; 730 | width: 100%; 731 | } 732 | .instell-step span.title1 { 733 | text-align: center; 734 | color: #fff; 735 | margin-bottom: 50px; 736 | } 737 | .statr-steps span { 738 | height: 60px; 739 | width: 60px; 740 | border: 2px solid rgba(88,97,192,1); 741 | color: rgba(88,97,192,1); 742 | display: block; 743 | margin: 0 auto 30px; 744 | line-height: 60px; 745 | border-radius: 50px; 746 | font-size: 24px; 747 | font-weight: 600; 748 | position: relative; 749 | } 750 | .statr-steps span:before { 751 | content: ""; 752 | height: 60px; 753 | width: 60px; 754 | position: absolute; 755 | border: 3px solid rgba(88,97,192,0.12); 756 | border-radius: 50%; 757 | left: 0px; 758 | top: 5px; 759 | } 760 | .statr-steps p{font-size: 15px} 761 | @media (max-width: 767px){ 762 | .statr-steps {margin-bottom: 30px;} 763 | } 764 | 765 | 766 | /* covid page style */ 767 | .main-wrapper{background:#F9F8FE} 768 | .container{position: relative;z-index: 9} 769 | .ml-20{margin-left: 20px} 770 | .ml-30{margin-left: 30px} 771 | .ml-40{margin-left: 40px} 772 | .ml-50{margin-left: 50px} 773 | 774 | .mt-20{margin-top: 20px} 775 | .mt-30{margin-top: 30px} 776 | .mt-40{margin-top: 40px} 777 | .mt-50{margin-top: 50px} 778 | 779 | 780 | .mr-20{margin-right: 20px} 781 | .mr-30{margin-right: 30px} 782 | .mr-40{margin-right: 40px} 783 | .mr-50{margin-right: 50px} 784 | 785 | 786 | .mt-0{margin-top: 0px} 787 | .mb-0{margin-bottom:0px !important} 788 | .mb-20{margin-bottom:20px} 789 | .mb-30{margin-bottom: 30px} 790 | .mb-40{margin-bottom: 40px} 791 | .mb-50{margin-bottom: 50px} 792 | 793 | 794 | .header-btn .space{padding: 50px 0} 795 | .covid-banner {display: inline-block; width: 100%;min-height: 770px;} 796 | .covid-banner h1 {color: #333; text-transform: capitalize; font-size: 48px; font-weight: 800; } 797 | .sub-title{font-size: 24px; font-weight: 500; color: #5C4AE4; line-height: 32px; margin: 25px 0; display: block;} 798 | .tag { 799 | position: absolute; 800 | font-size: 10px; 801 | background: red; 802 | color: #fff; 803 | padding: 0px 8px; 804 | border-radius: 10px 10px 10px 0; 805 | margin-left: 5px; 806 | display: inline-block; 807 | } 808 | .pt-0{padding-top: 0 !important} 809 | .pb-0{padding-bottom: 0 !important} 810 | 811 | .covid-banner .col-md-6 img{max-width: 450px; width: 100%; } 812 | .covid-banner .col-md-6 + .col-md-6{padding-right: 35PX;} 813 | .shaps-left {position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 814 | 815 | .text-blue{color:#5C4AE4} 816 | .bg-blue{color:#5C4AE4} 817 | .text-white {color: #fff; } 818 | .bg-white{background: #fff;} 819 | .round-btn {display: inline-block; padding: 15px 30px; border: 2px solid ; box-sizing: border-box; border-radius: 40px;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;} 820 | .round-btn:hover {background: #5C4AE4; color: #fff; text-decoration: none;} 821 | .round-btn.bg-ligthblue:hover {background: #fff;color: #5C4AE4; text-decoration: none; border-color: #5C4AE4;} 822 | .round-btn.bg-white:hover {border-color: #fff;} 823 | 824 | .round-btn {display: inline-block; padding: 7px 20px; border: 2px solid; box-sizing: border-box; border-radius: 4px; font-weight: 500; } 825 | .main-navigation .round-btn {padding: 7px 20px; border-color: transparent;} 826 | .bg-ligthblue {background: #5d6bc4; } 827 | .header-btn .round-btn + .round-btn {margin-left: 10px;border-color: #5C4AE4;} 828 | .main-title {font-size: 72px; font-weight: 700; color: #333;} 829 | 830 | .inner-column {padding: 0 15px; } 831 | .custom-column h5, 832 | .inner-column h3 {font-size: 26px; font-weight: 600; padding: 0; } 833 | .how-it-works {position: relative; padding-top: 50px; height: 100%;} 834 | .how-it-works:after {bottom: 0; left: 0; right: 0; content: ""; position: absolute; background: #fff; top: 50%; } 835 | .how-it-works .d-flex {align-items: inherit; } 836 | .custom-column.free-trial {background: #5C4AE4; height: 100%; max-width: 320px; border-radius: 60px 60px 90px 0; text-align: center; color: #fff; padding: 30px; } 837 | .number {position: absolute; top: 26%; left: 0; font-size: 55px; font-weight: 800; color: rgba(51, 51, 51, 0.1); } 838 | .free-trial div {font-size: 72px; text-transform: uppercase; font-weight: 700; line-height: 1; } 839 | .free-trial span {font-size: 24px; font-weight: 500;} 840 | 841 | .free-trial-form {border: 2px solid #5C4AE4; padding: 50px; border-radius: 0 60px; background: #fff; } 842 | .free-trial-form label {color: #5C4AE4; font-weight: 400; display: block; } 843 | .free-trial-form input {width: 100%; border: 0; padding: 0 0 10px;font-weight: 600; border-bottom: 2px solid #eee; color: #222222; } 844 | .free-trial-form input[type="submit"] {background: #5C4AE4;color: #fff; border-radius: 40px 40px 0; text-transform: capitalize; font-size: 18px;border: 2px solid; padding: 15px; max-width: 100%;} 845 | .free-trial-form input[type="submit"]:hover {background: transparent;color: #5C4AE4;border: 2px solid#5C4AE4;} 846 | .free-trial-form input::placeholder {color: #C4C4C4; opacity: 1;} 847 | .free-trial-form input:-ms-input-placeholder {color: #C4C4C4;} 848 | .free-trial-form input::-ms-input-placeholder {color: #C4C4C4;} 849 | .free-trial-form label.error {display: none !important;} 850 | .free-trial-form .error input {border-color: red;} 851 | .free-trial-form .error input[type="submit"]{ border-color: transparent;} 852 | 853 | .arrow, .arrow-2,.arrow-3 {position: absolute; top: -20px; right: -70px; } 854 | .arrow-2 {right: 0; top: 15%; } 855 | .mobileapps li img {max-width: 200px; margin-bottom: 15px; } 856 | 857 | .modal{z-index: 9999;} 858 | 859 | @media (min-width: 992px) { 860 | .row-reverse{flex-direction: row-reverse;} 861 | } 862 | 863 | @media (max-width: 991px) { 864 | .navbar-brand > img {max-width: 130px;} 865 | .header-btn.pull-right {float: none !important; display: inline-block; width: 100%; padding: 6px;} 866 | .main-navigation .round-btn {padding: 10px 15px; border-color: transparent; border-radius: 0; width: 100%; margin: 0 !important; text-align: center;} 867 | .tag {border-radius: 0;margin-left: 5px;top: 10px;right: 15px;} 868 | .signup-form .form__fieldgroup {flex: none;padding: 0 5px;width: 100%;margin-bottom: 15px;} 869 | .banner-form .signup-form {display: block;padding-top: 0px;} 870 | .pricing-table1 {width: 31%;} 871 | .pricing-table1 li {font-size: 13px;line-height: 1.3;text-align: left;} 872 | .footer-nav-title.caps-heading-12 {text-align: center; display: inline-block; width: 100%; margin-bottom: 0px;} 873 | .shaps-right,.shaps-left{display: none;} 874 | .arrow, .arrow-2, .arrow-3 { display: none;} 875 | } 876 | 877 | @media (max-width: 767px) { 878 | 879 | .covid-banner h1 {font-size: 30px;} 880 | .sub-title {font-size: 18px;line-height: 24px;} 881 | .covid-banner .col-md-6 img {margin-top: 50px;} 882 | .covid-banner {text-align: center;} 883 | .space { padding: 50px 0;} 884 | .main-title {font-size: 40px;} 885 | .how-it-works {padding-top: 0px;} 886 | .free-trial-form {padding: 30px;} 887 | .custom-column.free-trial, 888 | .custom-column {text-align: center;position: relative;border-radius: 0; max-width: 100%;} 889 | .customer-namecolumn.free-trial {max-width: 100%;border-radius: 0px 0px 50px 0;color: #fff;padding: 30px;} 890 | .free-trial span {font-size: 20px;font-weight: 500;} 891 | .free-trial div {font-size: 30px;} 892 | .support-nav a > span {margin-right: 12px !important;} 893 | .support-nav li {margin-bottom: 15px;} 894 | .inner-column {margin-bottom: 30px;} 895 | .statr-steps {display: inline-block;width: 100%;} 896 | .top-industries-list11 strong {width: 75%;font-size: 13px;} 897 | .pricing-table1 {width: 100%;} 898 | .our-clients li { max-width: 50%;} 899 | .case-studies .custom_height {height: auto;} 900 | .case-studies .images { padding: 15px;} 901 | .section44-feature p{font-size:15px; line-height:24px;} 902 | } 903 | 904 | @media screen and (max-width: 992px) and (min-width: 1024px) { 905 | .site-header .sub-menu-1 li {padding: 5px 8px;} 906 | .main-navigation .round-btn {padding: 5px 10px;} 907 | } 908 | 909 | @media screen and (max-width: 767px) and (min-width: 481px) { 910 | .top-industries-list11 li {width: 48%;display: inline-block; margin: 4px;} 911 | .top-industries-list11 li {width: 49%;display: inline-block;margin: 0 0 30px;} 912 | .kiosk-model li {margin-bottom: 10px;margin: 5px;width: 48%;} 913 | .pricing-table1 {width: 70%;} 914 | ul.check_list { text-align: center;} 915 | .check_list + a{margin: 30px auto;display: block;max-width: 230px;} 916 | 917 | } 918 | 919 | /* */ 920 | @media only screen and (min-width: 768px){ 921 | .table-row { justify-content: center;} 922 | } 923 | .table-row {display: flex;} 924 | .table-row:first-child .table-data {font-weight: 600; font-size: 20px;} 925 | .table-row .table-data {border-bottom: 1px solid #ddd; padding: 20px 0;text-align: center; flex: 0 0 23%;} 926 | .table-row .table-data:first-child {text-align: left;font-weight: 600;flex: 0 0 30%;} 927 | .table-data img {max-width: 30px;} 928 | 929 | .price-footer .rounded-btn {display: block; margin: 0 auto; background: #fff; color: #5d6bc4 !important; font-size: 16px; font-weight: 600; padding: 10px 16px; max-width: 220px; box-shadow: none;} 930 | .price-footer .rounded-btn:hover{ 931 | box-shadow: 0px 10px 20px rgb(0 0 0 / 20%); 932 | -moz-box-shadow: 0px 10px 20px rgba(0,0,0,0.2); 933 | -webkit-box-shadow: 0px 10px 20px rgb(0 0 0 / 20%); 934 | background-color: #fff !important; 935 | } 936 | .pricing-table1 a.see-features {border: 0; padding: 0; text-transform: inherit;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;} 937 | .pricing-table1 a.see-features:hover{background-color: transparent;color: #fff;} 938 | .table-data .rounded-btn {margin-top: 0;} 939 | 940 | @media only screen and (max-width: 767px){ 941 | .table-row .table-data:first-child {min-width: 74%;} 942 | #table-features .table {overflow-x: scroll;} 943 | .table-row .table-data {white-space: pre;min-width: 130px;} 944 | 945 | } 946 | 947 | /* QR Code page */ 948 | .section-space{padding: 70px 0;} 949 | @media only screen and (min-width: 768px){ 950 | .flex-direction-reverse{ flex-direction: row-reverse;} 951 | } 952 | 953 | .lightbg{background: rgba(93, 107, 196, 0.15);} 954 | .banner-title {color: #5d6bc4;} 955 | .qr-banner {padding: 50px 0 0;} 956 | .banner-subtitle {font-size: 20px; font-weight: 500; margin-bottom: 16px;} 957 | .section-sub-title {font-size: 24px; font-weight: 600; margin-bottom: 0;} 958 | .image-column {position: relative; padding: 30px;} 959 | .image-column:after {content: ""; position: absolute; top: 0; bottom: 60px; left: 0; right: 60px; background: #5d6bc4;} 960 | .image-column img{position: relative; z-index: 9;box-shadow: 0 0 20px rgb(0 0 0 / 10%);} 961 | 962 | .bg-gradient{background: #3a7bd5; background: -webkit-linear-gradient(to right, #3a6073, #3a7bd5); background: linear-gradient(to right, #263e96, #3a7bd5);} 963 | .section-heading {font-weight: 600;margin-bottom: 24px;font-size: 30px;} 964 | 965 | .operate-features li {margin-bottom: 12px; position: relative; padding-left: 30px;} 966 | .operate-features li img {position: absolute; left: 0;} 967 | .solution-steps {display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); text-align: center;} 968 | .solution-steps .steps h4 {font-size: 15px; line-height: 1.3; margin-top: 24px;} 969 | .title {font-size: 30px; font-weight: 600;} 970 | .steps span {max-width: 42px; height: 42px; background: #5d6bc4; display: block; line-height: 42px; color: #fff; margin: 20px auto; border-radius: 50%;} 971 | .people-ask div {font-size: 20px; font-weight: 600; margin-bottom: 16px; border-bottom: 1px solid rgb(93 107 196 /50%); padding-bottom: 10px;} 972 | 973 | .customer-waiting {box-shadow: 0 0 20px rgb(0 0 0 / 10%);padding: 30px 0;} 974 | .waiting-queues span {display: block; color: #5d6bc4; position: relative; margin-bottom: 10px; padding-left: 18px;} 975 | .waiting-queues span:before {content: ""; position: absolute; left: 0; height: 11px; width: 11px; background: #5d6bc4; border-radius: 50px; top: 5px;} 976 | .waiting-queues p b {color: #9e9e9e; font-weight: 600;} 977 | .appstore-section a { 978 | display: inline-block; 979 | position: relative; 980 | -webkit-border-radius: 5px; 981 | -moz-border-radius: 5px; 982 | border-radius: 5px; 983 | background-color: #050708; 984 | line-height: 50px; 985 | height: 50px; 986 | width: 160px; 987 | text-align: center; 988 | -webkit-transition: all 0.25s ease; 989 | -moz-transition: all 0.25s ease; 990 | -ms-transition: all 0.25s ease; 991 | -o-transition: all 0.25s ease; 992 | transition: all 0.25s ease; 993 | } 994 | 995 | .appstore-section a:hover{background: #3d3dad;} 996 | 997 | /* Qur Industries page */ 998 | 999 | .our-industries {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: center; column-gap: 30px;} 1000 | .our-industries li {box-shadow: 0 0 30px rgb(0 0 0 / 10%); padding: 30px; text-align: center; margin-bottom: 30px; border-radius: 5px;transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;} 1001 | .our-industries li:hover{margin-top: -20px;} 1002 | .our-industries li:hover a{text-decoration: none;} 1003 | .our-industries li span {display: block; margin-bottom: 24px;} 1004 | .our-industries li strong {color: #333; font-weight: 600;} 1005 | .our-industries li:hover strong{color: #5d6bc4; } 1006 | 1007 | .our-feature {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; min-height: auto; column-gap: 30px;} 1008 | .our-feature li {width: 100%; margin: 0; box-shadow: 0 0 30px rgb(0 0 0 / 10%); padding: 24px; margin-bottom: 30px; border-radius: 5px;} 1009 | .our-feature p {min-height: 120px;} 1010 | .our-feature strong {min-height: 68px;} 1011 | 1012 | 1013 | /* Queue appointments page */ 1014 | .appointments-video {background: #fff; padding: 50px 0; box-shadow: 0 0 30px rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 30px rgb(0 0 0 / 10%); -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%);} 1015 | .qwaiting-works .section-sub-title {margin-bottom: 15px;} 1016 | .key-features-section {background: #5d6bc4;} 1017 | .key-features {padding: 30px; text-align: center; box-shadow: 0 0 20px rgb(0 0 0 / 10%);background-color: #fff} 1018 | .key-features h4 {font-weight: 600; margin-bottom: 16px;} 1019 | 1020 | 1021 | @media (min-width:768px) { 1022 | #footer ul{display:block !important; margin-bottom:20px !important; opacity:1 !important; height:auto !important;} 1023 | } 1024 | @media (min-width:1700px) { 1025 | .after-shape::after, .after-shape11::after, .after-shape-before::before, .after-shape-before11::before {height:225px;} 1026 | .gym-section55 {padding-top:200px;} 1027 | } 1028 | @media (max-width:1250px) { 1029 | #signup-gym .row{margin:0px;} 1030 | } 1031 | @media (max-width:1199px) { 1032 | .container {max-width:960px;} 1033 | .section11 h1 {margin:100px 0px 20px 0px;} 1034 | .feature-page11 .top-features-list11 li {width:15.5%;} 1035 | .top-industries-list11 strong {width:75%; font-size:13px;} 1036 | .top-industries-list11 .imgul {width:290px;} 1037 | } 1038 | @media (min-width:1024px){ 1039 | .ipad-vew{display: none;} 1040 | } 1041 | @media only screen and (min-width:768px) and (max-width:1023px) { 1042 | .desktop_view{display: none;} 1043 | .title11::before { 1044 | top: 0; 1045 | left: 0; 1046 | right: 0; 1047 | margin: 0; 1048 | } 1049 | .relations{ min-height: 225px;} 1050 | .site-header .sub-menu-1 li {padding: 5px;} 1051 | #navbar{padding: 0;} 1052 | } 1053 | 1054 | @media only screen and (max-width:991px) { 1055 | 1056 | .site-header .sub-menu-1 li {padding: 8px 10px 15px 10px;} 1057 | /*.container {max-width:740px;}*/ 1058 | .section11 h1 {margin:24px auto 20px auto; font-size:30px; max-width:100%;} 1059 | .section11 .brand-name {display: block;max-width: 130px;} 1060 | .section11 p {font-size: 16px; line-height: 24px;} 1061 | 1062 | .title1{font-size:30px;} 1063 | .section33 img {max-width:70%;} 1064 | .before11:before, .before11:after {height:130px;} 1065 | .title11 {font-size:22px;} 1066 | .key-features11 h3 {font-size:18px;} 1067 | .section55 .nav-tabs li a .tabh6 {font-size:16px;} 1068 | .section55 {padding:125px 0px 100px;} 1069 | .section66 p br {display:none;} 1070 | .our-clients li {margin:40px 5px 30px 5px;} 1071 | .our-clients li img {max-width: 150px;width: 100%;} 1072 | .our-clients li {margin: 5px 0; padding: 10px 15px; max-width: 140px; text-align: center;} 1073 | .title-inner .heading1 {font-size:24px;line-height: 1.4} 1074 | .feature-page11 .top-features-list11 li a strong{font-size:12px;} 1075 | .section44-feature .col-sm-6 {width:100%; float:left; left:auto; right:auto; text-align:center;} 1076 | .section44-feature .col-sm-6:last-child{margin-top:70px; text-align:left;} 1077 | .feature-tabbing-feature11 .section55 {padding:10px 0px 120px;} 1078 | .video-page-main .col-sm-4 {width:50%;} 1079 | .video-overview {max-width:740px;} 1080 | .video-overview h2 {font-size:23px;} 1081 | .video-overview .col-sm-6:first-child img {min-height:292px;} 1082 | .customers-left-list li {width:140px; height:160px;} 1083 | .customers-left-list li a img {height:160px;} 1084 | .customers-left-list .customer-name {height:42px; width:140px; font-size:17px;} 1085 | .client-description p{font-size:15px;} 1086 | .restaurant-inner11 h2 {font-size:17px;} 1087 | .top-industries-list11 li:nth-child(1) {left:0;} 1088 | .top-industries-list11 li:nth-child(2) {left:30px;} 1089 | .top-industries-list11 li:nth-child(3) {left:70px;} 1090 | .top-industries-list11 li:nth-child(4) {left:110px;} 1091 | .top-industries-list11 li:nth-child(5) {left:150px;} 1092 | .top-industries-list11 li:nth-child(7){right:150px;} 1093 | .top-industries-list11 li:nth-child(8){right:110px;} 1094 | .top-industries-list11 li:nth-child(9){right:70px;} 1095 | .top-industries-list11 li:nth-child(10){right:30px;} 1096 | .top-industries-list11 li:nth-child(11){right:0px;} 1097 | .top-industries-list11 .imgul {width:220px;} 1098 | .pricing-details-section table {width:90%; margin:0px auto;} 1099 | .pricing-details-section table thead tr td {font-size:36px;} 1100 | .pricing-details-section table thead tr td span {font-size:34px;} 1101 | .pricing-details-section table thead tr td div{font-size:17px;} 1102 | .pricing-details-section table thead tr td pre {font-size:18px; top:4px;} 1103 | .pricing-details-section table tbody tr td {font-size:15px;} 1104 | .pricing-details-section table tr a {font-size:15px; display:block;} 1105 | .section44-feature .row .col-sm-6, 1106 | .title11{text-align: center;} 1107 | .title11::before {top: 0;left: 0;right: 0;margin: 0 auto;} 1108 | 1109 | .resturant-page-main11 .section44-feature {padding-top: 0px;} 1110 | .site-header::before {display:none;} 1111 | .navbar-toggle {margin: 0px; min-width: 40px; right: 15px; top: 15px;padding: 9px 7px 6px;border:0;height: 40px;} 1112 | .navbar-toggle:hover, .navbar-toggle:focus{background:#4d4d4d !important;} 1113 | .top-bar .container {padding:0px 12px 0px 10px;} 1114 | .top-bar .top-bar-menu11 li a {color:#111111; font-weight:700;} 1115 | .top-bar .top-bar-menu11 li {margin:10px 0px 0px 12px; font-size:12px;} 1116 | .logo-top {color:#000000; margin:9px 0px 0px 0px; font-size:12px; font-weight:700;} 1117 | .navbar-brand > img {max-width:180px; margin:0px;} 1118 | .navbar-default .navbar-collapse {top:75px; z-index:99;} 1119 | .site-header .sub-menu-1 li {width:100%; text-align: left; padding:0px;} 1120 | .site-header .sub-menu-1 li.has-dropdown {padding:10px 22px; color:#111111;} 1121 | .site-header .sub-menu-1 a {color:#000000;text-align: left;} 1122 | .site-header .sub-menu-1 li:last-child {float:left; padding:0px;} 1123 | .site-header .sub-menu-1 li .fa{display:inline-block;} 1124 | .site-header .sub-menu-1 li>.fa{display: none;} 1125 | span.drop-menu {float:right; width:40px; text-align:center; height:40px; position:absolute; top:0; right:5px;} 1126 | .dropdowm-menu1 {position:static; background:#ffffff; border-radius:0px; width:100%; padding:4px 0px; box-shadow:none; -webkit-box-shadow:none; float:left; border-top:0; padding:0px; cursor:pointer; margin:7px 0px 0px;} 1127 | #navbar li .dropdowm-menu1 li {width:100%;border: 0;} 1128 | .dropdowm-menu1::before{display:none;} 1129 | span.drop-menu .fa {margin:10px 0px 0px 0px !important; display:block !important;} 1130 | #navbar .sub-menu-1 {width: 100%; margin: 0; background: #f5f5f5; padding: 0;} 1131 | .cutomers-page-main .container {max-width:100%; padding:0px;} 1132 | .resturant-page-main11 span.title1 + p br {display: none;} 1133 | .homepage-equeue11 {padding: 50px 0 20px;display: inline-block;width: 100%;} 1134 | .appointments-banner p{text-align: center;} 1135 | .key-features {margin-bottom: 30px;} 1136 | .site-header{padding: 0;background: #fff;position: fixed !important;} 1137 | #navbar{position: fixed;transition: all 0.5s;-webkit-transition: all 0.5s;height: 100% !important;left: -280px;width: 280px;display: block !important;} 1138 | #navbar[aria-expanded="true"]{left: 0; background-color: #fff} 1139 | #navbar .sub-menu-1{background-color: transparent;} 1140 | .navbar-default .navbar-toggle { 1141 | position: relative; 1142 | display: block; 1143 | min-width: 30px; 1144 | height: 26px; 1145 | background: transparent; 1146 | border: 0; 1147 | border-top: 4px solid #1c2174 ; 1148 | border-bottom: 4px solid #1c2174; 1149 | color: #1c2174 !important; 1150 | font-size: 0; 1151 | -webkit-transition: all 0.25s ease-in-out; 1152 | transition: all 0.25s ease-in-out; 1153 | cursor: pointer; 1154 | border-radius: 0; 1155 | } 1156 | .navbar-default .navbar-toggle::before, .navbar-default .navbar-toggle::after { 1157 | content: ''; 1158 | display: block; 1159 | width: 100%; 1160 | height: 4px; 1161 | position: absolute; 1162 | top: 50%; 1163 | left: 50%; 1164 | background: currentColor; 1165 | -webkit-transform: translate(-50%, -50%); 1166 | transform: translate(-50%, -50%); 1167 | -webkit-transition: -webkit-transform 0.25s ease-in-out; 1168 | transition: -webkit-transform 0.25s ease-in-out; 1169 | transition: transform 0.25s ease-in-out; 1170 | transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out; 1171 | } 1172 | .navbar-default .navbar-toggle[aria-expanded="true"] { 1173 | border-color: transparent; 1174 | } 1175 | .navbar-default .navbar-toggle[aria-expanded="true"]::after { 1176 | -webkit-transform: translate(-50%, -50%) rotate(-45deg); 1177 | transform: translate(-50%, -50%) rotate(-45deg); 1178 | } 1179 | .navbar-default .navbar-toggle[aria-expanded="true"]::before { 1180 | -webkit-transform: translate(-50%, -50%) rotate(45deg); 1181 | transform: translate(-50%, -50%) rotate(45deg); 1182 | } 1183 | .navbar-default .navbar-toggle .icon-bar{display: none;} 1184 | .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{background: transparent !important;} 1185 | #navbar ul li a:hover{color: #5d6bc4;} 1186 | body{padding-top: 80px} 1187 | } 1188 | 1189 | 1190 | 1191 | @media (max-width:767px) { 1192 | .navbar{padding: 0;} 1193 | .text-center p {text-align: center;} 1194 | .ipad-view{display: none;} 1195 | .container {max-width:100%; padding:0px 15px;} 1196 | .homepage-equeue11 .section11 img {max-width:80%;} 1197 | .footer-bottom{position:static;} 1198 | .section11 h1 {max-width:100%;margin-top: 0;} 1199 | .homepage-equeue11 .section11 {text-align:center;} 1200 | .homepage-equeue11 section { min-height: inherit;background-size: cover; padding-top: 100px;padding-bottom: 80px} 1201 | 1202 | .banner-form {margin: 24px auto 0; } 1203 | .mobile-hide{display: none !important;} 1204 | .section11 h1 {text-align: center;} 1205 | .section11 .brand-name {text-align: center;margin: 0 auto 20px;} 1206 | 1207 | .how-to-manage img { margin-top: 0;margin-bottom: 20px;} 1208 | 1209 | .title1 {font-size:24px; font-weight:700;} 1210 | p {font-size: 16px;line-height: 1.5;} 1211 | .section33 .col-sm-6 {width:100%; float:left; padding:20px 0px; text-align:center;} 1212 | .title11{text-align:center;} 1213 | .title11::before {right:0; left:0; margin:auto;} 1214 | .section33 {padding:50px 0px;} 1215 | /*.key-features11 {width:100%; margin:15px 0% 15px 2%; padding:0px 0px 0px 60px;}*/ 1216 | .before11:before, .before11:after {height:100px;} 1217 | .section55 .tab-content .col-sm-6 {width:100%; float:left;} 1218 | .tabbing .tab-content ul li {font-size:16px; line-height:24px;} 1219 | .section55 {padding:100px 0px 0px;} 1220 | .section22 { padding: 40px 0px 40px;} 1221 | 1222 | .tabbing .tab-content {margin: 0;} 1223 | .tabbing .title11 {text-align:left;} 1224 | .tabbing .title11::before {right:auto;} 1225 | .section55 .title1 {margin:0px 0px 50px 0px;} 1226 | .industries-index-page11 li {width:48%;} 1227 | .industries-index-page11 .top-industries-list11 strong{min-height: auto;} 1228 | .feature-page11 .top-features-list11 li {width:22%;} 1229 | .top-features-list11.active {height:310px;} 1230 | /*.section44-feature .title11 {text-align:left;}*/ 1231 | .section44-feature .title11::before {right:0;} 1232 | .section44-feature .col-sm-6 span img {max-width:260px; box-shadow:-15px -15px 0px #5d6bc4; -moz-box-shadow:-15px -15px 0px #5d6bc4; -webkit-box-shadow:-15px -15px 0px #5d6bc4;} 1233 | .section44-feature {padding:40px 0px 60px;} 1234 | .section44-feature .row {margin:20px 0px 50px;} 1235 | .footer-social {display:inline-block;} 1236 | .video-overview {max-width:96%;} 1237 | .section55 .tab-content img, .section55 #profile img, .section55 #settings img {max-width:90%;} 1238 | .video-page-main .col-sm-4 {width:100%; float:left; padding:0px;} 1239 | .video-page-main .video{width:100%;} 1240 | .video-page-main .video img {min-height:inherit; width:100%;} 1241 | .video-image-parent .play-icon {width:45px; font-size:20px; height:45px;} 1242 | .video-image-parent .play-icon .fa {height:20px;} 1243 | .video-image-parent .title {font-size:15px;} 1244 | .video-overview .col-sm-6 a{width:auto;} 1245 | .cutomers-page-main .col-sm-6 {width:100%; float:left; display:block; padding:30px 10px;} 1246 | .cutomers-page-main::after{display:none;} 1247 | .client-description {padding:0px 10px 0px 10px;} 1248 | .video-overview-customers .col-sm-6 {width:100%; float:left;} 1249 | .video-text {max-width:100%; padding:20px; float:left;} 1250 | .video-text h2 {font-size:24px; margin-top:0;} 1251 | .video-text p {font-size:15px; line-height:26px; margin:15px 0px;} 1252 | .video-text h3 {margin:10px 0px 0px 0px;} 1253 | .video-overview-customers .video-image-parent img {min-height:inherit;} 1254 | 1255 | .restaurant-inner11 .col-sm-4{margin:40px 0px;} 1256 | .restaurant-inner11 .row {margin:0;} 1257 | .section44-feature .col-sm-6.text-left img {margin:0px 0px 0px 6px;} 1258 | .resturant-page-main11 .section44-feature {padding:50px 0px;} 1259 | .top-industries-list11 .imgul {display:none;} 1260 | .top-industries-list11 li {width:100%; display:inline-block; position:static; margin:10px;} 1261 | .top-industries-list11 span{width:54px; float:left; position:relative; height:54px;} 1262 | .top-industries-list11 strong {float:right; margin-top:15px; text-align:left; padding-right:0;} 1263 | a.rounded-btn {margin: 30px auto 0px !important;display: inline-block;text-align: center;max-width: 220px;} 1264 | .top-industries-list11 li:nth-child(7) strong, 1265 | .top-industries-list11 li:nth-child(8) strong, 1266 | .top-industries-list11 li:nth-child(9) strong, 1267 | .top-industries-list11 li:nth-child(10) strong, 1268 | .top-industries-list11 li:nth-child(11) strong {padding:0;} 1269 | .top-industries-list11 span img { position:absolute; left:0; right:0; margin:auto; top:0; bottom:0;} 1270 | .top-industries-list11 {min-height:inherit; padding:20px 0px;} 1271 | .salon-modalpopup-all h3 {font-size:18px;} 1272 | .salon-modalpopup-all .booking-title{font-size:14px;} 1273 | div#myModal {padding-right:0px !important;} 1274 | .salon-modalpopup-all {padding:0;} 1275 | .pricing-details-section table thead tr td {font-size:15px;} 1276 | .pricing-details-section table thead tr td span {font-size:15px; position:relative; padding:0px 0px 0px 9px;} 1277 | .pricing-details-section table thead tr td div {font-size:14px;} 1278 | .pricing-details-section {width:96%; margin:40px auto;} 1279 | .pricing-details-section table tbody tr td {font-size:12px;} 1280 | .pricing-details-section table thead tr td pre {font-size:12px; top:3px; line-height:12px; position:absolute; left:0;} 1281 | p.lastp-table {margin-top:10px; font-size:14px;} 1282 | #footer .relations ul {display:none; width:100%; padding:0 12px !important; margin:5px 0 !important;} 1283 | #footer .relations h4 {font-size:14px; position:relative; cursor:pointer; padding:13px 10px; background:#fff; margin:0; border-top:1px solid #e1e1e1; color:#252525;} 1284 | #footer h4::before {content:'\f107'; position:absolute; right:15px; top:8px; font-size:20px; margin:auto; font-family:fontawesome; font-weight:400 !important;} 1285 | #footer{padding:0px; overflow:hidden;} 1286 | #footer .container {max-width:100%; padding:0;} 1287 | #footer .relations h4.active {background:#f6f6f6;} 1288 | .features-index-page11 .our-feature span {float:none;} 1289 | .industries-index-page11 span {float:none;} 1290 | .how-img11 {margin:0px 0px 30px 0px;} 1291 | .pricing-table1 {width: 100%;margin: 0 0 30px;} 1292 | .site-header .sub-menu-1 > li.has-dropdown:first-child {padding:0;} 1293 | .site-header.fixed .navbar-collapse {top:75px;} 1294 | #home .site-header .sub-menu-1>li:last-child a {border: 0; border-radius: 0px; -webkit-border-radius: 0;-ms-border-radius: 0px;background: #5d6bc4;color: #fff;} 1295 | .seperator-line {padding-bottom: 22px;} 1296 | .pricing-equeue-main11 {padding: 50px 0px;} 1297 | .accordion .accordion-header{font-size: 15px;font-weight: 800; 1298 | line-height:1.5;padding-right: 25px;position: relative;} 1299 | .accordion-header .plus_btn {right: 0;font-size: 28px;top:0;} 1300 | .support-nav li { line-height: 2;} 1301 | .title-inner .heading1:after, 1302 | .title-inner .heading1:before{display: none;} 1303 | .pb_80 {padding-bottom: 40px !important;} 1304 | .pricing-table1 {width: 70%;min-height: auto;} 1305 | .top-industries-list11 li { margin: 0 0 15px;} 1306 | .appointments-video {margin-top: 50px;} 1307 | .section-sub-title {font-size: 20px; margin-bottom: 0; margin-top: 0;} 1308 | .banner-subtitle {font-size: 17px;text-align: center;} 1309 | .qr-banner img {margin-top: 30px;} 1310 | .customer-waiting img, 1311 | .image-column {margin-top: 30px;} 1312 | .appstore-section p {text-align: center;} 1313 | 1314 | 1315 | 1316 | } 1317 | 1318 | 1319 | @media (max-width:480px) { 1320 | .section11 h1 {font-size:24px; font-weight:700;} 1321 | .section55 .nav-tabs li { width:100%; float:left; margin:0;} 1322 | .section55 .nav-tabs li a:after{display:none;} 1323 | .section55 .nav-tabs li a .tabh6 {font-size:17px; margin:0px;} 1324 | .section55 .nav-tabs li.active .tabh6, .section55 .nav-tabs li a:hover .tabh6 {color:#ffffff;} 1325 | .section55 .nav-tabs li.active a, .section55 .nav-tabs li.active a:hover, .section55 .nav-tabs li a:hover, .section55 .nav-tabs li a:focus, .section55 .nav-tabs li.active a:focus{background:#5d6bc4 !important; border-bottom:1px solid #5d6bc4 !important;} 1326 | .section55 .nav-tabs li a .tabh6 {color:#ffffff;} 1327 | .section55 .nav-tabs li a {background:#989898; border-radius:0px; border-bottom:1px solid #c1c1c1;} 1328 | .section55 .tab-content .col-sm-6.text-center {margin-bottom:40px;} 1329 | .section55 .nav-tabs li span{display:none;} 1330 | /*.top-bar .container {padding:0px 5px 0px 5px;}*/ 1331 | .title-inner .heading1{font-size:18px;} 1332 | .title-inner .heading1:before {width:40px; top:-6px;} 1333 | .title-inner .heading1:after {width:40px; top:-6px;} 1334 | .feature-page11 .top-features-list11 li {width:42%;} 1335 | .top-features-list11.active {height:640px;} 1336 | .footer-center11 li {width:100%; float:left; margin:2px 0px;} 1337 | .footer-center11 li a {display:inline-block; margin:0px auto;} 1338 | .customers-left-list li {width:107px; height:120px;} 1339 | .customers-left-list li a img {height:120px;} 1340 | .customers-left-list .customer-name {height:35px; width:100%; font-size:13px;} 1341 | .cutomers-page-main .col-sm-6 {padding:10px 10px;} 1342 | .pricing-details-section table tr .fa{font-size:13px;} 1343 | .pricing-table1 { max-width: 320px;line-height: 1.5;width: 100%} 1344 | 1345 | } 1346 | @media (max-width:350px) { 1347 | .pricing-details-section table thead tr td pre{display:none;} 1348 | .pricing-details-section table tbody tr td {font-size:10px;} 1349 | } 1350 | 1351 | 1352 | 1353 | 1354 | 1355 | .signup-modal .salon-modalpopup-all { 1356 | max-width: 780px; 1357 | } 1358 | .signup-modal .inn,.signup-modal .signup-form { 1359 | max-width: 780px; 1360 | } 1361 | .signup-modal .form__fieldgroup { 1362 | display: block; 1363 | background: linear-gradient(103deg,#fafafa,#ececec 100%); 1364 | border: 1px solid rgba(0,0,0,.1); 1365 | border-radius: 8px; 1366 | padding: 8px 24px 20px; 1367 | margin-top: 16px; 1368 | } 1369 | .signup-modal .form__fieldgroup input{ 1370 | border:0; 1371 | background-color: transparent; 1372 | padding:0 !important; 1373 | height: auto; 1374 | } 1375 | .signup-modal .form__fieldgroup input#contact{padding-left: 52px !important;} 1376 | .signup-modal .form__fieldgroup label{ 1377 | color: #222; 1378 | font-size: 16px; 1379 | } 1380 | .signup-modal label.error { 1381 | color: red; 1382 | font-weight: normal; 1383 | font-size: 14px; 1384 | position: absolute; 1385 | bottom: -8px; 1386 | left: 10px; 1387 | top: inherit; 1388 | } 1389 | .position-relative{position: relative;} 1390 | .position-relative.mb-3 { 1391 | padding-bottom: 12px; 1392 | } 1393 | .position-relative.mb-3 .form__fieldgroup {margin-bottom: 0 !important} 1394 | .signup-modal .signup .signup-form input.button { 1395 | background-color: #222; 1396 | border-color:#222; 1397 | padding: 12px 24px; 1398 | font-size: 16px; 1399 | line-height: 24px; 1400 | font-weight: 700; 1401 | } 1402 | 1403 | /*Customers*/ 1404 | 1405 | .customers-section{ 1406 | position: relative; 1407 | display: flex; 1408 | flex-direction: column; 1409 | justify-content: flex-start; 1410 | align-items: center; 1411 | padding-top: 75px; 1412 | padding-left: 131px; 1413 | padding-right: 131px; 1414 | min-height: 731px; 1415 | background: linear-gradient(118deg,#fff,#cce7ff 99%); 1416 | overflow: hidden; 1417 | } 1418 | .customers-section h1 { 1419 | margin-top: 76px; 1420 | max-width: 697px; 1421 | text-align: center; 1422 | z-index: 1; 1423 | color: #222; 1424 | } 1425 | .customers-section h1 em { 1426 | font-style: normal; 1427 | font-weight: 700; 1428 | color: #5d6bc4; 1429 | } 1430 | @media only screen and (min-width: 1080px){ 1431 | .customers-section h1{ 1432 | font-size: 84.2px; 1433 | line-height: 88px; 1434 | letter-spacing: -1.5px; 1435 | } 1436 | } 1437 | @media only screen and (min-width:768px) and (max-width:1079px) { 1438 | .customers-section h1 { 1439 | font-size: 75.8px; 1440 | line-height: 79.2px; 1441 | letter-spacing: -1.35px; 1442 | } 1443 | } 1444 | .customers-section .left-illustration { 1445 | position:absolute; 1446 | left:20%; 1447 | top:251px; 1448 | width:410px 1449 | } 1450 | @media (min-width:1900px) and (max-width:2200px) { 1451 | .customers-section .left-illustration { 1452 | left:15% 1453 | } 1454 | } 1455 | @media (min-width:1400px) and (max-width:1900px) { 1456 | .customers-section .left-illustration { 1457 | top:201px; 1458 | left:50px 1459 | } 1460 | } 1461 | @media (min-width:1080px) and (max-width:1399px) { 1462 | .customers-section .left-illustration { 1463 | top:201px; 1464 | left:-100px 1465 | } 1466 | } 1467 | @media (min-width:768px) and (max-width:1220px) { 1468 | .customers-section .left-illustration { 1469 | top:221px; 1470 | left:-100px; 1471 | width:360px 1472 | } 1473 | } 1474 | @media (max-width:767px) { 1475 | .customers-section .left-illustration { 1476 | display:none 1477 | } 1478 | } 1479 | .customers-section .right-illustration { 1480 | position:absolute; 1481 | right:20%; 1482 | top:201px; 1483 | width:410px; 1484 | transform:rotate(6deg) 1485 | } 1486 | @media (min-width:1900px) and (max-width:2200px) { 1487 | .customers-section .right-illustration { 1488 | right:15% 1489 | } 1490 | } 1491 | @media (min-width:1400px) and (max-width:1900px) { 1492 | .customers-section .right-illustration { 1493 | right:50px 1494 | } 1495 | } 1496 | @media (min-width:1080px) and (max-width:1399px) { 1497 | .customers-section .right-illustration { 1498 | top:201px; 1499 | right:-100px 1500 | } 1501 | } 1502 | @media (min-width:768px) and (max-width:1220px) { 1503 | .customers-section .right-illustration { 1504 | top:221px; 1505 | right:-100px; 1506 | width:360px 1507 | } 1508 | } 1509 | @media (max-width:767px) { 1510 | .customers-section .right-illustration { 1511 | display:none 1512 | } 1513 | .customers-section{ 1514 | padding-left: 37px; 1515 | padding-right: 37px; 1516 | min-height: inherit; 1517 | padding-bottom: 80px; 1518 | padding-top: 80px; 1519 | } 1520 | .customers-section h1 { 1521 | margin-top: 0; 1522 | font-size: 50.6px; 1523 | line-height: 57.7px; 1524 | letter-spacing: -.8px; 1525 | } 1526 | .case-studies { 1527 | padding: 10px; 1528 | } 1529 | } 1530 | 1531 | 1532 | @media (min-width:768px) { 1533 | .column-list li{width: 20%} 1534 | .column-list li img{max-width: 100%} 1535 | } 1536 | .testimonial { 1537 | background: #fff; 1538 | border-radius: 8px; 1539 | -webkit-border-radius: 8px; 1540 | padding: 22px; 1541 | -ms-flex-wrap: wrap; 1542 | flex-wrap: wrap; 1543 | margin-bottom: 20px 1544 | } 1545 | .client-info .client-image { 1546 | width: 122px; 1547 | height: 72px; 1548 | overflow: hidden; 1549 | } 1550 | .client-info .client-image img { 1551 | display: block; 1552 | width: auto; 1553 | height: auto; 1554 | } 1555 | .d-flex-wrap { 1556 | display: -webkit-box !important; 1557 | display: -ms-flexbox !important; 1558 | display: flex !important; 1559 | flex-wrap: wrap; 1560 | } 1561 | .pb-4, .py-4 { 1562 | padding-bottom: 1.5rem !important; 1563 | } 1564 | .d-flex-start{ 1565 | display: -webkit-box !important; 1566 | display: -ms-flexbox !important; 1567 | display: flex !important; 1568 | } 1569 | 1570 | #footer .relations ul.call-info li { 1571 | } 1572 | #footer .relations ul.call-info li i { 1573 | margin-right: 5px; 1574 | width: 22px; 1575 | display: inline-block; 1576 | } 1577 | #footer .relations ul.call-info li i img{max-width: 100%} 1578 | #footer .relations ul.call-info li::before,#footer .relations .footer-social ul li:before{ 1579 | content: ''; 1580 | } 1581 | #footer .relations .footer-social ul li{padding-left: 0;padding-right: 12px;} 1582 | #footer .relations .footer-social ul li a{background-color: #fff} 1583 | #footer .relations .footer-social ul li a:hover{background: #5d6bc4;color: #fff} 1584 | #footer .relations .footer-social ul li a:hover i{color: #fff} 1585 | .footer-social ul li a { 1586 | border: 1px solid #ddd; 1587 | border-radius: 0; 1588 | -webkit-border-radius: 0; 1589 | } 1590 | 1591 | .calltoaction { 1592 | height: 68px; 1593 | font-size: 26px; 1594 | text-align: center; 1595 | line-height: 68px; 1596 | border-radius: 50px; 1597 | background: linear-gradient(-15deg, #ffa63d, #5d6bc4, #8f9eff, #3f50b9); 1598 | background-size: 600%; 1599 | padding-left: 45px; 1600 | padding-right: 45px; 1601 | padding-top: 0; 1602 | transition: all 0.5s ease-in-out; 1603 | -webkit-transition: all 0.5s ease-in-out; 1604 | -moz-transition: all 0.5s ease-in-out; 1605 | } 1606 | .calltoaction:hover{background: linear-gradient(-15deg, #ffa63d, #5d6bc4, #3f50b9, #8f9eff) !important;background-size: 600% !important;} 1607 | 1608 | @media (max-width:767px) { 1609 | a.calltoaction{max-width: inherit;font-size: 22px;} 1610 | } 1611 | .title2 { 1612 | margin: 20px 0; 1613 | font-size: 32px; 1614 | position: relative; 1615 | font-family: "Poppins", serif; 1616 | /* font-style: italic; */ 1617 | font-weight: 500; 1618 | color: #131313; 1619 | } 1620 | .site-color{ 1621 | font-style: normal; 1622 | font-weight: 700; 1623 | color: #5d6bc4; 1624 | } 1625 | 1626 | .space-top-100{padding-top: 130px;} 1627 | .space-100{padding-top: 80px;padding-bottom: 80px;} 1628 | .space-80{padding-bottom: 80px;} 1629 | .space-70{padding-bottom: 70px;} 1630 | .space-40{padding-bottom: 40px;} 1631 | .gray-text{color: #333333;} 1632 | .banner-solutions{ 1633 | background: #5C4AE4; 1634 | padding: 100px 0; 1635 | } 1636 | .banner-solutions *{color: #ffffff;} 1637 | .badge-banner{color: #5C4AE4;background: #fff;font-family: 'Circular Std';font-weight: bold; margin-bottom: 20px;padding: 8px 14px;border-radius:10px 10px 10px 0;-webkit-border-radius:10px 10px 10px 0;font-size: 19px;display: inline-block;} 1638 | .banner-solutions a{font-size: 19px;text-decoration: none;font-family: 'Circular Std';font-weight: bold;} 1639 | .banner-solutions a + a{margin-left: 45px;} 1640 | .banner-solutions a:hover,.banner-solutions a:focus{text-decoration: underline;color: #fff;} 1641 | .banner-solutions h1{font-family: 'Circular Std';font-size: 36px;font-weight: 900;} 1642 | .banner-solutions .fa-angle-right{font-size: 19px;} 1643 | .pre-title{color: #5C4AE4;font-family: 'Circular Std';font-weight: bold; padding: 8px 0px;font-size: 19px;display: inline-block;} 1644 | .custom-title{font-family: 'Circular Std';font-size: 32px;font-weight: 900;} 1645 | .text19{font-size: 19px;} 1646 | .purple{color: #5C4AE4;} 1647 | @media (min-width: 992px){ 1648 | .banner-solutions p{max-width: 90%;} 1649 | .pr-lg-5{padding-right:5rem} 1650 | .large-dropdown{width: auto;} 1651 | .large-dropdown li a{white-space: nowrap;} 1652 | .large-dropdown:before{left: 20px;right: auto;} 1653 | } 1654 | 1655 | .light-blue{background: rgba(92, 74, 228, 0.08);} 1656 | .darkblue{background: #5C4AE4;} 1657 | .subtitle{font-family: 'Circular Std';font-size: 25px;font-weight: 900;} 1658 | .logos-images{list-style-type: none;margin: 30px 0;display:-webkit-box;display:-ms-flexbox;display:flex;} 1659 | .logos-images li + li{margin-left: 30px;} 1660 | .logos-images li img{max-width: 105px;} 1661 | 1662 | .justify-content-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important} 1663 | .justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important} 1664 | .align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important} 1665 | .mt-4{margin-top:3rem} 1666 | .mb-4 {margin-bottom: 3rem;} 1667 | 1668 | .flex-row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-10px;margin-left:-10px} 1669 | .flex{display:-webkit-box;display:-ms-flexbox;display:flex;} 1670 | .icon-box-rounded{background: rgba(92, 74, 228, 0.1); margin-right: 24px;border-radius: 50%;-webkit-border-radius: 50%;min-width: 96px; height: 96px; display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center} 1671 | .sub_title_small{font-size: 19px;font-family: 'Circular Std';font-weight: bold; margin-bottom: 10px;} 1672 | .white-text,.white-text *{color: #fff;} 1673 | .icon{margin-bottom: 24px;} 1674 | 1675 | .small-columns{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important} 1676 | .small-columns .col-md-3{width: 190px;} 1677 | .small-columns .content-col{max-width: 180px;} 1678 | .btn .fa{font-size: 19px;} 1679 | .white-btn{color: #fff;} 1680 | .white-btn:hover,.white-btn:focus,.white-btn:active{background: #fff;color: #5C4AE4;font-family: 'Circular Std';border-color: #fff;} 1681 | .white-btn:hover .fa,.white-btn:focus .fa,.white-btn:active .fa{color: #5C4AE4;} 1682 | .purple-btn{color: #5C4AE4;} 1683 | .purple-btn:hover,.purple-btn:focus,.purple-btn:active{background: #5C4AE4;color: #fff;font-family: 'Circular Std';border-color: #5C4AE4;} 1684 | .rounded-btn-outline {background: transparent;border-radius: 5px;-webkit-border-radius: 5px;border: 2px solid;font-family: 'Circular Std';font-weight: bold;font-size: 19px; padding:0.65em 1.56em;} 1685 | #serve-slider .owl-buttons{display:-webkit-box;display:-ms-flexbox;display:flex;} 1686 | #serve-slider .owl-buttons div{background: #fff;width: 48px;height: 48px;border-radius: 50%;-webkit-border-radius: 50%;text-align: center; line-height: 44px;box-shadow: 0 5px 12px rgba(0,0,0,0.08);-webkit-box-shadow: 0 5px 12px rgba(0,0,0,0.08);margin-right: 15px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center} 1687 | #serve-slider .owl-buttons div .fa { 1688 | color: #5C4AE4; 1689 | font-size: 24px; 1690 | font-weight: bold; 1691 | } 1692 | #serve-slider.appointment-carousel .owl-buttons{display: none;} 1693 | .appointment-carousel .owl-pagination { 1694 | display: flex; 1695 | margin-top: 30px; 1696 | } 1697 | .appointment-carousel .owl-pagination .owl-page span{margin-right: 10px;width: 10px;height: 10px;display: block;border-radius: 50%;-webkit-border-radius: 50%;background: rgba(92, 74, 228, 0.3);} 1698 | .appointment-carousel .owl-pagination .owl-page.active span{background: rgba(92, 74, 228, 1);} 1699 | .video-btn{} 1700 | #serve-slider .custom-title{margin-top: 10px;} 1701 | 1702 | @media (min-width: 1024px){ 1703 | #serve-slider .owl-buttons,.appointment-carousel .owl-pagination{position: relative;top: -100px; z-index: 5;} 1704 | } 1705 | 1706 | @media (min-width: 768px){ 1707 | .flex-row .col-md-6 .content-col{ 1708 | margin-bottom: 45; 1709 | } 1710 | .flex-row .col-md-6:last-child .content-col,.flex-row .col-md-6:nth-last-child(2) .content-col{ 1711 | margin-bottom: 0; 1712 | } 1713 | 1714 | } 1715 | @media (max-width: 680px){ 1716 | .space-100{padding-top: 60px;padding-bottom: 60px} 1717 | .space-80{padding-bottom: 60px} 1718 | .space-70{padding-bottom: 60px} 1719 | .banner-solutions h1,.custom-title{font-size: 32px} 1720 | .pt-4{padding-top:3rem;} 1721 | #serve-slider .owl-buttons{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important; margin-top: 35px;} 1722 | #serve-slider.appointment-carousel .item img{margin-top: 30px} 1723 | .small-columns .col-md-3 {width: 50%} 1724 | .banner-solutions a + a{margin-left: 15px;} 1725 | .logos-images li + li { 1726 | margin-left: 20px; 1727 | } 1728 | .logos-images li img { 1729 | max-height: 55px; 1730 | max-width: 100%; 1731 | } 1732 | } 1733 | .video-banner-in{position: relative;display: inline-block;} 1734 | .video-btn{position: absolute; top: 25%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);z-index: 6;} 1735 | .video-modal-dialog { 1736 | max-width: 750px; 1737 | width: 100%; 1738 | margin: 0 auto; 1739 | padding: 10px; 1740 | margin-top: 30px; 1741 | } 1742 | .video-modal-dialog .modal-body{padding-bottom: 56.25%;position: relative;} 1743 | .video-modal-dialog .modal-body iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} 1744 | .video-modal-dialog .modal-header{padding: 0;border: 0;} 1745 | .video-modal-dialog button.close { 1746 | position: absolute; 1747 | right: -35px; 1748 | z-index: 99; 1749 | min-width: 0; 1750 | top: -30px; 1751 | color: #fff; 1752 | opacity: 1; 1753 | } 1754 | blockquote{padding: 10px 0;border:0 } 1755 | .disk-style{ 1756 | padding-left: 15px; 1757 | 1758 | } 1759 | .disk-style li{ 1760 | list-style-type: disc; 1761 | } 1762 | @media (max-width: 680px){ 1763 | .video-modal-dialog button.close{ 1764 | right: -5px; 1765 | } 1766 | } 1767 | .pricing-table1.child-2{overflow: hidden;} 1768 | .pricing-table1.child-2::before { 1769 | content: 'Most Recommended'; 1770 | background: yellow; 1771 | transform: rotate(60deg); 1772 | -webkit-transform: rotate(50deg); 1773 | display: block; 1774 | position: absolute; 1775 | right: -68px; 1776 | white-space: pre-wrap; 1777 | padding: 40px 40px 10px; 1778 | line-height: 1; 1779 | top: -6px; 1780 | font-size: 14px; 1781 | width: 182px; 1782 | text-align: center; 1783 | z-index: 2; 1784 | font-weight: 600; 1785 | } 1786 | 1787 | .table-row .table-data:nth-child(3) { 1788 | background: #5d6bc4; 1789 | color: #fff; 1790 | box-shadow: -5px 10px 15px rgba(0,0,0,0.45); 1791 | border-color: #7985d2; 1792 | } 1793 | 1794 | .table-row .table-data:nth-child(3) .rounded-btn{ 1795 | background: #fff; 1796 | color: #5d6bc4 !important; 1797 | } 1798 | .table-row .table-data:nth-child(3) .rounded-btn:hover{ 1799 | color: #ffffff !important; 1800 | } 1801 | .site-header .sub-menu-1 li.large__menu{position: static;} 1802 | .large-dropdown-menu {width: 100%;top: 60px;opacity: 0;visibility: hidden;padding: 20px;background: #fff; 1803 | box-shadow: 0 0 12px rgba(0,0,0,0.12);-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.12);} 1804 | .large-dropdown-menu:before{display: none;} 1805 | .site-header .sub-menu-1 li.large__menu:hover .large-dropdown-menu{opacity: 1;visibility: visible;} 1806 | .large-dropdown-menu li{box-shadow: none;} 1807 | #navbar li .large-dropdown-menu{z-index: 9; display: grid !important;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));align-items: center;column-gap: 30px;} 1808 | #navbar li .large-dropdown-menu li a{display:-webkit-box;display:-ms-flexbox;display:flex; font-size: 14px; -webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important} 1809 | #navbar li .large-dropdown-menu li a img{width: 30px;} 1810 | #navbar li .large-dropdown-menu li a span{margin-right: 15px;margin-bottom: 0;} 1811 | @media (max-width: 991px){ 1812 | #navbar li .large-dropdown-menu { 1813 | position: static; 1814 | box-shadow: none; 1815 | -webkit-box-shadow: none; 1816 | visibility: hidden; 1817 | opacity: 0; 1818 | padding: 0; 1819 | display: none !important; 1820 | } 1821 | .dropdowm-menu1{display: block;} 1822 | } 1823 | 1824 | .align-items-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important} 1825 | .small-content.section22 p{max-width: 814px;} 1826 | .space-50{padding-bottom: 50px;padding-top: 50px} 1827 | 1828 | .checkmark-list {width:100%; margin-top:15px; padding: 0;list-style-type: none} 1829 | .checkmark-list li {width: 100%; padding-left: 30px; background-size: 18px; line-height: 25px; font-size: 18px; margin-bottom: 10px;} 1830 | .dots-bottom .owl-pagination{top: inherit} 1831 | .wrap-mobile-col{ 1832 | box-shadow: 0 0 30px rgb(0 0 0 / 10%); 1833 | -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%); 1834 | padding: 24px; 1835 | height: 100%; 1836 | } 1837 | .flex-row .wrap-mobile-col .content-col, .flex-row .wrap-mobile-col .content-col{ 1838 | margin-bottom: 0; 1839 | } 1840 | .image-step{margin-bottom: 20px;} 1841 | .counter{ 1842 | background: #5d6bc4; 1843 | color: #fff; 1844 | width: 40px; 1845 | height: 40px; 1846 | border-radius: 50%; 1847 | -webkit-border-radius: 50%; 1848 | display:-webkit-box;display:-ms-flexbox;display:flex; 1849 | font-size: 24px; 1850 | font-weight: 600; 1851 | -webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important; 1852 | -webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important; 1853 | margin: 10px auto 20px; 1854 | } 1855 | .step-text { 1856 | max-width: 294px; 1857 | font-size: 19px; 1858 | font-weight: 600; 1859 | margin: auto; 1860 | } 1861 | @media (max-width: 680px){ 1862 | .flex.wrap-mobile-col{ 1863 | -ms-flex-wrap:wrap!important;flex-wrap:wrap!important; 1864 | text-align: center; 1865 | } 1866 | .flex.wrap-mobile-col .icon-box-rounded{ 1867 | margin: auto; 1868 | margin-bottom: 20px; 1869 | } 1870 | } 1871 | 1872 | 1873 | .ebook p{ 1874 | float: none; 1875 | max-width: 580px; 1876 | } 1877 | .ebook:before{ 1878 | display: none; 1879 | } 1880 | .ebookwrap{ 1881 | padding-top: 50px; 1882 | padding-bottom: 50px; 1883 | } 1884 | .white-box-radius-shadow { 1885 | text-align: left; 1886 | border-radius: 20px; 1887 | border: 1px solid #d0d0d0; 1888 | margin-top: 10px; 1889 | margin-bottom: 20px; 1890 | background: #fff; 1891 | } 1892 | .white-box-radius-shadow:hover { 1893 | box-shadow: 1px 1px 40px -8px #8c929780; 1894 | -webkit-box-shadow: 1px 1px 40px -8px #8c929780; 1895 | } 1896 | .content-spacing{ 1897 | padding: 25px 25px; 1898 | height: 275px; 1899 | } 1900 | .content-spacing p { 1901 | font-size: 14px !important; 1902 | color: #08223a; 1903 | font-weight: 600; 1904 | position: relative; 1905 | line-height: 22px; 1906 | } 1907 | .baner img { 1908 | width: 100%; 1909 | height: auto; 1910 | border-radius: 20px 20px 0 0; 1911 | -webkit-border-radius: 20px 20px 0 0; 1912 | } 1913 | .serviceheading { 1914 | font-size: 16px; 1915 | color: #08223a; 1916 | font-weight: 700; 1917 | margin-top: 15px; 1918 | margin-bottom: 15px; 1919 | position: relative; 1920 | } 1921 | .serviceheading::after { 1922 | border-bottom: 0; 1923 | position: absolute; 1924 | content: ""; 1925 | width: 5px; 1926 | height: 100%; 1927 | background: #5d6bc4; 1928 | top: -3px; 1929 | left: -25px; 1930 | border-radius: 0 20px 20px 0; 1931 | } 1932 | @media (min-width: 768px){ 1933 | .left-text *{ 1934 | text-align: left !important; 1935 | } 1936 | .ebook .industry-banner{ 1937 | padding-top: 100px; 1938 | padding-bottom: 50px; 1939 | } 1940 | .details-banner .industry-banner{ 1941 | padding-bottom: 100px; 1942 | } 1943 | } 1944 | @media (max-width: 767px){ 1945 | .ebook{padding-bottom: 45px;} 1946 | } 1947 | .details-banner .industry-banner:after{ 1948 | display: none; 1949 | } 1950 | .RchXe { 1951 | display: flex; 1952 | flex-wrap: wrap; 1953 | -moz-box-pack: justify; 1954 | justify-content: space-between; 1955 | -moz-box-align: center; 1956 | align-items: center; 1957 | box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 56px; 1958 | border-radius: 10px; 1959 | border: 1px solid rgba(181, 181, 181, 0.2); 1960 | padding: 30px; 1961 | background: #fff; 1962 | } 1963 | .ebook-details-wrap .content-spacing { 1964 | overflow: hidden; 1965 | max-height: 210px; 1966 | margin-bottom: 20px; 1967 | } 1968 | /*.laxcXX { 1969 | padding-top: 50px; 1970 | padding-bottom: 80px; 1971 | } 1972 | */ 1973 | blockquote{ 1974 | border-radius: 10px; 1975 | border: 1px solid rgba(181, 181, 181, 0.2); 1976 | border-left: 4px solid #159957; 1977 | background: #fff; 1978 | padding: 15px; 1979 | font-size: 18px; 1980 | font-weight: 400; 1981 | letter-spacing: normal; 1982 | line-height: 32px; 1983 | box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 10px; 1984 | } 1985 | 1986 | .laxcXX p{ 1987 | font-size: 18px; 1988 | font-weight: 400; 1989 | letter-spacing: normal; 1990 | line-height: 32px; 1991 | color: inherit; 1992 | } 1993 | .dot-content p{ 1994 | position: relative; 1995 | padding-left: 25px; 1996 | } 1997 | .dot-content p::before { 1998 | content: ""; 1999 | position: absolute; 2000 | left: 0px; 2001 | top: 12px; 2002 | width: 8px; 2003 | height: 8px; 2004 | border-radius: 50%; 2005 | display: inline-block; 2006 | background-color: #159957; 2007 | } 2008 | .mt-0 { 2009 | margin-top: 0 !important; 2010 | } 2011 | .details-banner h1{ 2012 | font-family: 'Circular Std'; 2013 | font-size: 36px; 2014 | font-weight: 900; 2015 | } 2016 | .details-banner p{ 2017 | color: #555; 2018 | } 2019 | .fa-download::before { 2020 | content: "\f019"; 2021 | } --------------------------------------------------------------------------------