commit 78d68e0909fa04d2bfc2006e05d8f653a705e75e Author: Guillaume Date: Tue May 23 21:29:28 2023 +0200 Initial Commit diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..f7752dd --- /dev/null +++ b/Dockerfile @@ -0,0 +1,3 @@ + +FROM nginx:alpine +COPY . /usr/share/nginx/html diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..00e77bd --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,6 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +draft: true +--- + diff --git a/config.yaml b/config.yaml new file mode 100644 index 0000000..e46455b --- /dev/null +++ b/config.yaml @@ -0,0 +1,6 @@ +baseURL: "http://example.org/" +languageCode: "en-us" +params: + landingPageName: " About Direktil" +theme: "learn" +title: "NOVIT's Direktil" diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..3ab0b64 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,6 @@ +--- +Title: Documentation +--- + + + diff --git a/content/cli/_index.md b/content/cli/_index.md new file mode 100644 index 0000000..ef1028c --- /dev/null +++ b/content/cli/_index.md @@ -0,0 +1,9 @@ +--- +Title: CLI +Weight: 50 +--- + +NOVIT met à disposition des outils en ligne de commande faisant partie de la solution Direktil. + +{{% children description="true" %}} + diff --git a/content/cli/dir2config.md b/content/cli/dir2config.md new file mode 100644 index 0000000..89dbb69 --- /dev/null +++ b/content/cli/dir2config.md @@ -0,0 +1,39 @@ +--- +title: dir2config +description: Dir2config est un outil en ligne de commande utilisé pour générer la [configuration]({{< ref "configuration" >}}) *config.yaml* acceptée par le [Direktil Local Server]({{< ref "cli/dkl-local-server" >}}). +--- + +## Dkl-dir2config + +Dir2config est un outil en ligne de commande utilisé pour générer la [configuration]({{< ref "configuration" >}}) *config.yaml* acceptée par le [Direktil Local Server]({{< ref "cli/dkl-local-server" >}}). + +Les sources peuvent être trouvées sur [le repository git de Direktil](https://novit.tech/direktil/local-server). + +## Build + +``` +git clone git@novit.tech:direktil/local-server.git +cd local-server/cmd/dkl-dir2config +go build +``` + +## Usage + +Ce outil s'utilise dans un dossier de configuration, et recherche à minima des dossiers *clusters* et *hosts* pour construire la configuration de ces derniers. + +```bash +./dkl-dir2config + +# Help +./dkl-dir2config -h +Usage of dkl-dir2config: + -debug string + debug + -in string + Source directory (default ".") + -out string + Output file (default "config.yaml") + -template-details-dir string + write details of template execute in this dir (default "/tmp/dkl-dir2config") +``` + diff --git a/content/cli/dkl-local-server.md b/content/cli/dkl-local-server.md new file mode 100644 index 0000000..f2671d9 --- /dev/null +++ b/content/cli/dkl-local-server.md @@ -0,0 +1,62 @@ +--- +title: dkl-local-server +description: Dkl-local-server est le nom du service HTTP en charge de la génération des images et couches (*layers*) systèmes. Il a besoin d'un fichier *config.yaml* généré antérieurement par [dir2config]({{< ref "cli/dir2config" >}}). +--- + +## Direktil-local-server + +Dkl-local-server est le nom du service HTTP en charge de la génération des images et couches (*layers*) systèmes. Il a besoin d'un fichier *config.yaml* généré antérieurement par [dir2config]({{< ref "cli/dir2config" >}}). + +Les sources peuvent être trouvées sur [le repository git de Direktil](https://novit.tech/direktil/local-server). + +## Build + +La dernière version de dkl-local-server peut être compilée facilement grâce à un compilateur **go**. + +``` +git clone git@novit.tech:direktil/local-server.git +cd local-server/cmd/dkl-local-server +go build +``` + +## Usage + +``` +./dkl-local-server +``` + +Les paramètres par défaut importants impliquent que : +- **/var/lib/direktil** est le dossier data, c'est à dire là où doit se trouver le fichier *config.yaml* +- Le port d'écoute par défaut est **7606** + +Ils peuvent être changés via les arguments en ligne de commande. + +### Docker + +Docker peut être utilisé pour démarrer un dkl-local-server sans avoir à le compiler soi-même. Voici une ligne de commande utilisant le dossier courant comme dossier de configuration (où doit se trouver le fichier *config.yaml*). + +{{< highlight "bash" >}} +docker run --rm --net=host --name dls \ + -v /etc/ssl:/etc/ssl:ro \ + -v /etc/ca-certificates:/etc/ca-certificates:ro \ + -v .:/var/lib/direktil \ + -v /dev:/dev \ + --privileged \ + -e http_proxy="$http_proxy" \ + -e https_proxy="$https_proxy" \ + -e HTTP_PROXY="$HTTP_PROXY" \ + -e HTTPS_PROXY="$HTTPS_PROXY" \ + novit.tech/direktil/local-server:latest +{{< / highlight >}} + +### Secret-data + +Dkl-local-server maintient un fichier **secret-data.json** qui sera créé dans le dossier data (par défaut **/var/lib/direktil**) s'il n'est pas trouvé durant un lancement, et qui contient toutes les données sensibles d'une configuration, à savoir : +- Certificats CA de clusters et leurs clés privées +- Certificats TLS clients/serveurs et leurs clés privées +- Clés de ServiceAccount +- Tokens (admin, bootstrap, keepalived, etc...) + +{{% notice warning %}} +Ce fichier doit, dans l'idéal, être sauvegardé régulièrement et de façon securisée. Sa perte impliquerait la création de nouveaux certificats CA ce qui invaliderait toutes les connexions TLS déjà en place sur d'éventuelles machines en production. +{{% /notice %}} diff --git a/content/configuration/_index.md b/content/configuration/_index.md new file mode 100644 index 0000000..89af40f --- /dev/null +++ b/content/configuration/_index.md @@ -0,0 +1,17 @@ +--- +Title: Configuration +Weight: 30 +--- + +En tant que solution orientée Infrastructure As Code, Direktil n'est que fait de configuration structurée. Son rôle est de construire des configurations d'hôtes à la volée à partir de ces données. + +![Direktil Configuration](configuration.jpg) + +{{% notice tip %}} +Il est conseillé que toute configuration soit gardée dans un dépot git. La fonctionnalité d'[includes]({{< ref "configuration/includes" >}}) permet d'ailleurs l'utilisation du branching git comme stratégie de gestion du code permettant de respecter la méthode "DRY". +{{% /notice %}} + +Pour plus d'informations et d'exemples: + +{{% children description="true" %}} + diff --git a/content/configuration/clusters.md b/content/configuration/clusters.md new file mode 100644 index 0000000..49a637f --- /dev/null +++ b/content/configuration/clusters.md @@ -0,0 +1,76 @@ +--- +Title: Clusters +Description: Un cluster est un groupe d'hosts pouvant être de type différent mais travaillant ensemble dans un même environnement. +Weight: 20 +--- + +Les **Clusters** représentent les différents clusters Kubernetes d'une organisation. Ils sont la plupart du temps nommés selon un environnement bien défini, par exemple *prod*, *qual*, *dev*, etc... et permettent la séparation facile des application qui y sont déployées. Il est néanmoins possible de nommer librement ses clusters selon ses objectifs et ses contraintes, comme par exemple selon le nom d'une équipe de développement, d'une large application, etc... + +Les information des clusters sont stockés dans le dossier *clusters*, dans des fichiers yaml séparés selon les noms définis ci-dessus. Ces fichiers peuvent présenter un large nombre de variables permettant d'exprimer les différences entre tous les clusters gérés par la configuration globale. Ces variables vont s'appliquer à tous les [Hosts]({{< relref "configuration/hosts" >}}) déclarés comme faisant partie des-dits clusters, et à l'inverse, il n'est évidemment pas possible d'allouer un *host* à plusieurs *clusters* en même temps. + +{{< highlight yaml >}} +domain: cluster.local + +subnets: + services: 192.168.48.0/20 + pods: 192.168.64.0/20 + +addons: +- essentials + +vars: + kubernetes_version: v1.26.4 + + bootstrap_auths: + - name: "my-user" + sshKey: "ssh-ed25519 xxx my-user" + + ssh_keys: + - "ssh-ed25519 xxx my-user" + + devname_match: /dev/([shv]da|nmve[0-9]+n[0-9]+) + # to match a specific partition (here: 3): + #devname_match: /dev/([shv]da|nvme[0-9]+n[0-9]+p)3 + + vip_interface: main + public_vip: 10.42.0.10 + + netmask: 24 + gateway: 10.42.0.254 + dns: + - 10.42.0.1 + + dls_base_url: http://10.42.0.254:7606 + + etcd: + image: quay.io/coreos/etcd + version: v3.5.9 + cluster_state: new # set to existing to secure existing clusters + + keepalived: + image: novitnc/keepalived + version: 2.0.19 + garp_master_refresh: 60 + router_id: 1 + + control_plane: + api_port: 6443 + reserve_resources: true + + iface: "(en|eth).*" + containerd_size: 50%FREE + + local_storage_class: local + + encrypt_disks: false + + cni_provider: knet-wg + ingress_controller: nginx + kube_proxy: proxy + + k8s_registry: registry.k8s.io + + kernel_modules: [] + +{{< / highlight >}} + diff --git a/content/configuration/config.md b/content/configuration/config.md new file mode 100644 index 0000000..d2c3e87 --- /dev/null +++ b/content/configuration/config.md @@ -0,0 +1,19 @@ +--- +Title: Configs +Description: Type de configuration très détaillé exploitant toutes les variables présentes dans les autres fichiers de configuration de type Infrastructure As Code (clusters et hosts), pour générer un système Direktil valide +Weight: 40 +--- + +La *config* est le type de configuration le plus détaillé. Son rôle est de réunir toutes les variables spécifiées au sein des *clusters* et *hosts*, et de permettre la génération finale de systèmes à utiliser sur des machines virtuelles ou physiques. + +La *config* décrit plus spécifiquement ce qui se passe au démarrage d'un système, par exemple +- Definir les *layers* du système (dont les versions sont référencées au niveau des {{< relref "configuration/hosts" >}}). +- Definir la configuration réseau. +- Créer les volumes nécessaire, au moins au premier démarrage. +- Créer les fichiers locaux statique, la plupart dans /etc/ (hosts, resolv.conf, sysctl.conf, services...) +- Inclure les certificats TLS + +Le fichier de configuration utilise le [Go templating langage](https://pkg.go.dev/text/template) pour garantir un code concis et efficace respectant les préceptes du [DRY](https://fr.wikipedia.org/wiki/Ne_vous_répétez_pas). + + + diff --git a/content/configuration/configuration-schema.drawio b/content/configuration/configuration-schema.drawio new file mode 100644 index 0000000..1dd20fa --- /dev/null +++ b/content/configuration/configuration-schema.drawio @@ -0,0 +1 @@ +7Vptc5s4EP41mbn7UAYkJOBj6zRtZnqdTHM31/ZLRwYZqwHLBTmx79efBJKNkF/iBif1TD0ZGy0LWvTsPrtacgFH5fJdRebTv3hGiwvgZ8sLeHkBQOADcKH+/GzVSrAPW0FesUwrbQS37D9qrtTSBctobSkKzgvB5rYw5bMZTYUlI1XFH2y1CS/sWeckp47gNiWFK/2XZWLaSmMQbeTvKcunZuYAJ+2Zkhhl/ST1lGT8oSOCby/gqOJctEflckQLtXhmXdrrrnacXRtW0Zl4zAXXq+sUJPjHp6vyS0pG32m+SF7BUBsnVuaJaSYXQA95JaY85zNSvN1I31R8Mcuouq0vRxudD5zPpTCQwu9UiJVGkywEl6KpKAt9ls6y1wobORwXPL1rRVesMAqCVDkVN7RiJRW0up2TlM1yPWEtKn5HR7zgVWMxHMcoRJszBqdESibynh3NSZzSNFXTLZn4LGWvfM/3sRZ8URN4cWTGl0s9YzNYdQZry7TMxULDU/NFldJ9AOhwUKveuVJD+I5yOU21kgoVLYhg97ZbEu3d+VpvfekNZ9IW4JtIjLUb6jgEiW/forVUX9V1o/6NIvtGECH7Rhq7/o0k4GTVUZsrhXqPwaBnMEr22wW226X15UFrgRl1FncjakLmmPDR6N2TYqGRceLpnlaCSUL5QMa0uOE1E4zPlOdzIXgpnccovC5Yrk4IFUXdcJHMMVc3K5e5IllvTGqWenMipAPOVNR8apivcXYTuRkj+Sd63wQFVVGJ1grdGPE9YMk7sZI1n33OrQyny71ea84iG5xQDx82lBoa2bRDpwD1vLTr6B1oj0cuCBzkRsVCrlVVOwiSet6mlglbKtp7M++Ev5xL5iLaYYQudERjmsq1a86ts4CijYzU0zWP1i3J/d1wKJQCVja5yfxesjKXj1qwsfwmqeKCbxmrpGVcrcdVTSsJyLcJqUqvvs8HAi6JLeCCEDnIRVuAi06FG/QdeJ4lYUnbP5sEoAZtrkBmuEkVzcjkikfksW62OpgX++lsMgFNOnNSYobHGOEnZaZAU1n7DHsUTS00cAo7NmGAeG8COFb/NAnDLGqHdmTlOmG5tyLS286TeTKeLko5TT0c7zjgAOjh0KEe5HvhFvLBHsSnyhvxy/KPh2TJbnEQ8OEBFjLFri+XBVq1LorB0bVuh6RmfEYtjmppjVTCaKQFqWWxYsQdKmtMHL6OPshWz1VwQ2h7cNzLiAOVyTCwp0mCZyCx5IVjwPeRHQNxBA7FwFHu9st4Ueirp918Igts+fHCpPN5FhcL4v2Jta8PULzbJ920jCOveZYgDuI4hCjqT+75srzUfziJ7GfesY0dyvXBy/RL1gQew8QicIzg0QT+dJI9udfjxAukY0coimOMzJ6j4/UIxiEO2u8QPsoFDvspPg1Fo6AXtboFusuuMEyepo+tRuBpcgBwOx+jppC9UH0YTErVw2i/5bBQ7YlxJY9ydfSGcyG3LGQulW94dq47btVMljtuPqez4Spf5PfZdkuvBLtF78k6JdBtaT0j5QUW3aH9ZGcqBNXVDbBdIkAY/0yJ8PRNeoZonIXbNukxGEP8tE262Xsf3qQnQ1P3k5zK2N2hj0sZWXeCqUs/8JSo39umpXWm7JARQcakpt/axtxwDAGT3t44cBkigl7sckS/5z8cnMk+OG9XtaClPLhWK1e7+eAPr1lLObfvsZp7nvfnmYM+YCsE9TaSEAYu3L4XBi7eODkR3hDtyP6LijSvNyTWEnI3sctnFgfA6b8OKVmWNTnlYcoEVS1Uda8HVT3084zNsBmdkEXjaWuIg4G64odfZwT+lq54eKr4C1+oKz7oa9wsSsb+rpzbyez+WtJm9nAjOCazO710ipte+s8nY/jYZGy6wKfeR4H+u1psdxP8Xpd0oA0PQC/QWYdbKoq74pUkZ91hP9OMktOZtCG1q4hdRDcEt/V9JsBeDBx+2955P1mBAWMH3TPFs900PgOOvTe3ECMvCjq9wsjBFG5LWYE3wB5g+c88+Rj+V34NAV/WHyfXX3/IotGB9D2vxZnCujVMd2C2BdndxT62wxG7pQaIbVL3twTmEN2BrSC6baDfIDoghr2eTvKLgRj+BvERIMLE675rSUIL02DLLvxEoMrh5t9G2/pp88+38O3/ \ No newline at end of file diff --git a/content/configuration/configuration.jpg b/content/configuration/configuration.jpg new file mode 100644 index 0000000..0f4437e Binary files /dev/null and b/content/configuration/configuration.jpg differ diff --git a/content/configuration/hosts.md b/content/configuration/hosts.md new file mode 100644 index 0000000..e701c90 --- /dev/null +++ b/content/configuration/hosts.md @@ -0,0 +1,33 @@ +--- +Title: Hosts +Description: Réunit les variables propres aux rôles des machines prises individuellement. +Weight: 10 +--- + +Les fichiers d'**Hosts** décrivent une machine d'un *cluster*, qui peut alors être une machine virtuelle ou physique. Ces fichiers permettent de lier différents types de configurations, en décrivant : + +- Le nom du [cluster]({{< ref "configuration/clusters" >}}) de la machine +- Ses informations réseau, sa version de kernel, de layers systèmes, etc... +- Toute donnée unique à cette machine propre à son rôle au sein du cluster (par exemple master, compute node, etc...) + +Quand le Direktil Local Server génère sa configuration, il utilise ces liens pour génerer une configuration complète pour chaque machine. + +## Sample + +{{% notice note %}} +A noter que toutes données déjà présente dans la configuration de cluster sera héritée par cette configuration. Certaines données ci-dessous sont donc dispensables et affichées par commodité. +{{% /notice %}} + +{{< highlight yaml >}} +ip: 10.42.0.11 +cluster: base +kernel: 5.15.84 +versions: + init: 2.0.1 + system: v22.52.0 + kubernetes: v1.26.4_containerd.1.6.12 +vars: + enable_minio: true + (...) +{{< / highlight >}} + diff --git a/content/configuration/includes.md b/content/configuration/includes.md new file mode 100644 index 0000000..a1d398c --- /dev/null +++ b/content/configuration/includes.md @@ -0,0 +1,53 @@ +--- +Title: Includes +Description: Compatible avec tous les types de fichiers décrits précédemment, ils représentent le meilleur moyen d'appliquer la méthode "DRY" en faisant référence à un autre fichier de référence. +Weight: 80 +--- + +Au sein d'une organisation, les différents [clusters]({{< ref "configuration/clusters" >}}) ont la plupart du temps un vaste nombre de métriques en commun. Dans un souci de code "DRY", l'outil [dir2config]({{< ref "cli/dir2config" >}}) gère l'héritage de configurations par le biais d'un mécanisme intitulé "includes", et qui permet comme son nom l'indique d'inclure des fichiers parents depuis des enfants afin d'éviter d'en répéter la configuration sur ceux-ci. + +Les [configurations]({{< ref "configuration" >}}) documentées ici (sauf les [hosts]({{< ref "configuration/hosts" >}}) bien entendu car forcément propres aux clusters) peuvent être définies dans un dossier parent au nom voulu et pouvant être placé n'importe où dans l'arborescence, elles seront alors appliquées par défaut à toutes les configurations. Par convention, il est tout de même conseillé d'utiliser le nom **defaults** pour ce dossier et c'est le nom qui sera utilisé dans la suite de cette documentation. Les différents clusters, hosts et configs du dossier courant pourront alors en hériter automatiquement. + +{{% notice note %}} +Le dossier **defaults** PEUT être présent dans un répo git mais ce n'est pas obligatoire. +Egalement, il peut être situé dans un endroit totalement différent de l'arborescence et trouvable par dir2config grâce à l'utilisation d'un lien symbolique. +{{% /notice %}} + +Voici un exemple commun d'arborescence : + +``` +./ +├─ defaults/ +│ ├─ addons/ +│ ├─ cert-requests.yaml +│ ├─ clusters/ +│ ├─ configs/ +│ ├─ hosts/ +│ ├─ static-pods/ +│ ├─ ssl-config.json +├─ clusters/ +├─ hosts/ +├─ includes.yaml ## Ce fichier permet l'appel au dossier defaults +``` + +Les configurations héritées spécifient alors l'utilisation d'une configuration parente en appelant le dossier **defaults** voulu et la branche git optionnelle, par l'intermédiaire d'un fichier **includes.yaml** : + +``` +- path: defaults + branch: v1.25 ## Optionnel +``` + +Avec cette configuration, le dossier "defaults" est recherché à la racine du dossier de configuration, ce qui peut être atteignable par un lien symbolique. A la suite de cette spécification, il est possible d'inclure des fichiers grâce à la spécification `#!include` en première ligne de configurations *clusters* et *hosts*. + +Par exemple, le contenu du fichier **clusters/prod.yml** pourrait être : +``` +#!include clusters/metal + ^--------------- mot clé invariable + ^-------- nom du dossier à hériter, pouvant être présent localement ou dans le dossier defaults + ^--- nom du fichier à hériter (omettre l'extension .yaml) + +(... ajout des variables à écraser depuis le parent spécificé ci-dessus ...) +``` + +Ainsi, avec l'exemple précédent, le fichier **defaults/clusters/metal** dans la branche git v1.25 serait utilisé comme parent avec overwrite des variables enfants. + diff --git a/content/installation/_index.md b/content/installation/_index.md new file mode 100644 index 0000000..5a88465 --- /dev/null +++ b/content/installation/_index.md @@ -0,0 +1,12 @@ +--- +Title: Installation +Description: Différentes méthodes d'installation de la solution Direktil +Weight: 20 +--- + +{{% notice tip %}} +Il est conseillé de commencer par le [quick-start]({{< relref "quick-start" >}}) pour profiter d'une installation rapide d'un cluster local. Les méthodes ci-dessous s'adressent aux gestionnaires d'environnements de production ou ceux désireux d'installer la solution par eux-même. +{{% /notice %}} + + + diff --git a/content/quick-start/_index.md b/content/quick-start/_index.md new file mode 100644 index 0000000..5502045 --- /dev/null +++ b/content/quick-start/_index.md @@ -0,0 +1,162 @@ +--- +Title: Quick Start +Description: Démarrez votre clusters Kubernetes en quelques étapes simples +Weight: 10 +--- + +# Démarrage rapide + +Direktil est un système d'exploitation basé sur Linux Gentoo, généré rapidement et efficacement grâce à de l'[Infrastructure As Code](https://fr.wikipedia.org/wiki/Infrastructure_as_code) (configuration au format Yaml). Ces systèmes permettant la mise à disposition d'un cluster Kubernetes complet, sécurisé, maintenable, sans vendor lock-in, et à destination de machines virtuelles ou des machines bare-metal. + +Ces systèmes sont générés par un ensemble d'outil, notamment le Direktil Local Server, absorbant une configuration de base et générant les images système ainsi que les différents assets nécessaires à un cluster Kubernetes. + +Dans ce quick-start, vous allez intéragir avec ce serveur pour créer votre propre cluster en quelque minutes, dépendamment de la qualité de votre connexion Internet. Nous allons utiliser Qemu localement à notre machine de travail, et des conteneurs Docker. Vous pouvez également vous référer à la [documentation d'installation]({{< relref "installation" >}}) pour plus rentrer dans les détails quant aux options d'installation disponibles. + +## Prérequis + +Pour cette installation rapide, nous allons avoir besoin : +- Un système basé sur le noyau Linux 3+ +- [Docker](https://docs.docker.com/engine/install/) +- [Qemu](https://www.qemu.org/download/#linux) +- curl + +## TL;DR + +{{< highlight bash >}} +git clone git@novit.tech:direktil/config.git +cd config + +# A lancer avec l'utilisateur root ! +sudo ./scripts/0.start_dls.sh # Démarrage du serveur DLS +sudo ./scripts/1.qemu.sh # Démarrage de la ou des VMs et du cluster +# A lancer avec votre utilisateur local +./scripts/2.start_k8s.sh # Création du control plane +./scripts/3.install_addons.sh # Installation des additions + +mkdir -p ~/.kube +cp secrets/kubeconfig ~/.kube/config +{{< /highlight >}} + +## Récupération de la configuration de départ + +Nous avons compilé une configuration suffisante à la plupart des cas de figure, disponible sur notre [repository git](https://novit.tech/direktil/config). Vous pouvez alors soit [télécharger l'archive complète](https://novit.tech/direktil/config/archive/main.tar.gz) comme base de travail, ou alors [cloner le repo directement](git@novit.tech:direktil/config.git). + +A noter que cette configuration de départ présente une installation de cluster mono-noeud (master/compute). Il est tout à fait possible de la modifier pour spécifier 3 noeuds et ainsi avoir un cluster redondant et déjà prod-ready. + +Vous pouvez faire référence à la [documentation de configuration]({{< relref "configuration" >}}) à tout moment pour l'adapter à vos besoins. En deux mots, il suffit juste de créer deux nouveaux fichiers dans le dossier *hosts*. + +{{% notice tip %}} +Toutes les commandes qui vont suivre seront exécutées dans le contexte du dossier "config" correspondant à la racine du repo cloné. +{{% /notice %}} + +## Modification de la configuration + +Notre configuration est déjà fonctionnelle mais par souci d'automatisation, vous devriez y ajouter votre clé SSH publique afin que vous ayez accès aux VMs une fois créées, sans passer la console Qemu. Pour ce faire, modifiez avec l'éditeur de votre choix le fichier `clusters/base.yaml`, et ajouter les clés SSH dans le yaml `.vars.ssh_keys` : + +{{< highlight bash >}} +vars: + ssh_keys: + - "ssh-ed25519 xxx my-user" +{{< /highlight >}} + +Cette clé sera alors ajouté dans le trousseau de clés publiques de l'utilisateur root, vous permettant un accès direct post-installation. + +{{% notice info %}} +Vous pouvez ignorer la clé yaml `.vars.bootstrap_auths.sshKey` pour le moment, elle ne sert que pour l'étape de démarrage de l'initrd. +{{% /notice %}} + +## Démarrage du Direktil Local Server + +Exécutons notre serveur DLS en étant placé dans notre dossier de configuration cloné. + +{{< highlight bash >}} +# A lancer avec l'utilisateur root ! +sudo ./scripts/0.start_dls.sh +{{< /highlight >}} + +Dans ce script, deux outils NOVIT sont utilisés, [dir2config]({{< relref "cli/dir2config" >}}) et [dkl-local-server]({{< relref "cli/dkl-local-server" >}}). Le premier sert à transformer la configuration en un fichier intelligible pour le deuxième, qui lui sera responsable de la création de nos images systèmes et de la maintenance des fichiers secrets (certificats, tokens, etc...) + +## Instanciation d'une machine virtuelle + +{{< highlight bash >}} +# A lancer avec l'utilisateur root ! +sudo ./scripts/1.qemu.sh +{{< /highlight >}} + +Cette étape met en place un pont réseau (bridge), récupère les différents éléments nécessaire au démarrage d'une VM (kernel, initrd...) puis la démarre. Vous devriez voir un terminal apparaître si tout s'est bien passé. Lors du premier démarrage, l'étape dit du "bootstrap seed" se connectera au serveur DLS pour récupérations des couches systèmes permettant le démarrage du système complet. + +{{% notice note %}} +L'utilisateur local `root` n'a pas de mot de passe spécifié mais ne peut évidemment pas être accessible par protocole SSH. +{{% /notice %}} + +## Démarrage du cluster Kubernetes + +Cette étape rapide demande de se connecter aux machines et d'activer le control plane pour démarrer le cluster. Cela ne peut se faire de façon automatisée seulement si vous avez ajouté votre clé SSH à la configuration avant l'installation (voir partie *Modification de la configuration*). La manuelle est disponible ci-dessous dans les autres cas. + +{{< notice info >}} +Dans tous les cas, il n'est nécessaire de faire cette opération qu'une seule fois par cluster. Egalement, ces commandes doivent à partir de maintenance être lancées avec votre utilisateur système local et non *root* +{{< /notice >}} + +{{< tabs >}} +{{% tab name="Automatisée" %}} +```bash +./scripts/2.start_k8s.sh +``` +{{% /tab %}} +{{% tab name="Manuel" %}} +Sans connexion SSH, il est possible de d'activer le cluster Kubernetes en utilisant la console Qemu. Le compte à utiliser est "root", sans mot de passe. Y lancer alors les commandes suivantes: + +```bash +loadkeys fr # Pour passer en clavier AZERTY, si besoin +mv /etc/kubernetes/manifests.static/* /var/lib/kubernetes/manifests/ +``` +{{% /tab %}} +{{< /tabs >}} + + +## Configuration des additions + +{{< highlight bash >}} +./scripts/3.install_addons.sh +{{< /highlight >}} + +Dans les addons devant être installés dans le cluster, nous pouvons citer un fournisseur d'overlay réseau, kube-proxy, un contrôleur ingress, un dashboard, un coredns local, etc... + +Un cluster kubernetes sécurisé et fonctionnel nécessite des certificats TLS pour toute communication intra-cluster. Ce rôle de les générer est à majorité celui du DLS, à l'exception de deux certificats, tous deux utilisés par le processus Kubelet de la machine nouvellement installés (voir [TLS Bootstraping](https://kubernetes.io/docs/reference/access-authn-authz/kubelet-tls-bootstrapping/)). Ceux-là sont générés automatiquement au sein de Kubernetes mais nécessitent une approbation manuelle, ce qui est géré par ce script par facilité. + +## Utilisation du cluster + +Lors du démarrage du cluster, un fichier *kubeconfig* a été créé dans le dossier "secrets". Il vous servira à vous connecter avec [kubectl](https://kubernetes.io/fr/docs/tasks/tools/install-kubectl/) ou d'autres outils tiers. Par commodité, il est conseillé de le déplacer dans votre dossier personnel (dans le cas d'un système Linux) pour qu'il doit reconnu et utilisé par défaut. + +{{< highlight bash >}} +mkdir -p ~/.kube +cp secrets/kubeconfig ~/.kube/config + +kubectl get nodes +(...) +{{< /highlight >}} + +# Opérations futures + +## Redémarrage des machines virtuelles + +Dans le cas où les VMs ont été éteintes, il suffit de relancer le script de démarrage qemu, cela ne supprimera pas les données précédemment créées. + +{{< highlight bash >}} +# A lancer avec l'utilisateur root ! +sudo ./scripts/1.qemu.sh +{{< /highlight >}} + +## Suppression des machines et du cluster + +Pour repartir de zéro sur notre installation, il faut supprimer un ensemble de dossiers avant de relancer la procédure ci-dessus. + +{{% notice warning %}} +Les commandes ci-dessous vont supprimer toutes machines virtuelles et clusters kubernetes créés précédemment. +{{% /notice %}} + +{{< highlight bash >}} +# ATTENTION, CELA SUPPRIMERA TOUTES LES DONNEES +rm -rI data secrets kubeconfig +{{< /highlight >}} + diff --git a/plan.txt b/plan.txt new file mode 100644 index 0000000..281c258 --- /dev/null +++ b/plan.txt @@ -0,0 +1,21 @@ +About +Getting Started +Direktil OS +Installation: +- By container +- By building the binary +Configuration: +- Clusters +- Groups +- Hosts +- Configs +- Bootstrap Pods +- Addons +- TLS configuration +- Defaults : Configurations inheritance +Maintenance: +- Backups +- Upgrade +CLI: +- Dir2config +- Direktil Local Server diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png new file mode 100644 index 0000000..edf23e5 Binary files /dev/null and b/static/android-chrome-192x192.png differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png new file mode 100644 index 0000000..f10e14a Binary files /dev/null and b/static/android-chrome-512x512.png differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png new file mode 100644 index 0000000..6d2d2d5 Binary files /dev/null and b/static/apple-touch-icon.png differ diff --git a/static/css/icon-font.css b/static/css/icon-font.css new file mode 100644 index 0000000..a4b4235 --- /dev/null +++ b/static/css/icon-font.css @@ -0,0 +1,448 @@ +@charset "UTF-8"; + +@font-face { + font-family: "linea-arrows-10"; + src:url("fonts/linea-arrows-10.eot"); + src:url("fonts/linea-arrows-10.eot?#iefix") format("embedded-opentype"), + url("fonts/linea-arrows-10.woff") format("woff"), + url("fonts/linea-arrows-10.ttf") format("truetype"), + url("fonts/linea-arrows-10.svg#linea-arrows-10") format("svg"); + font-weight: normal; + font-style: normal; + +} + +[data-icon]:before { + font-family: "linea-arrows-10" !important; + content: attr(data-icon); + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="icon-arrows"]:before, +[class*=" icon-arrows"]:before { + font-family: "linea-arrows-10" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-arrows-anticlockwise:before { + content: "\e000"; +} +.icon-arrows-anticlockwise-dashed:before { + content: "\e001"; +} +.icon-arrows-button-down:before { + content: "\e002"; +} +.icon-arrows-button-off:before { + content: "\e003"; +} +.icon-arrows-button-on:before { + content: "\e004"; +} +.icon-arrows-button-up:before { + content: "\e005"; +} +.icon-arrows-check:before { + content: "\e006"; +} +.icon-arrows-circle-check:before { + content: "\e007"; +} +.icon-arrows-circle-down:before { + content: "\e008"; +} +.icon-arrows-circle-downleft:before { + content: "\e009"; +} +.icon-arrows-circle-downright:before { + content: "\e00a"; +} +.icon-arrows-circle-left:before { + content: "\e00b"; +} +.icon-arrows-circle-minus:before { + content: "\e00c"; +} +.icon-arrows-circle-plus:before { + content: "\e00d"; +} +.icon-arrows-circle-remove:before { + content: "\e00e"; +} +.icon-arrows-circle-right:before { + content: "\e00f"; +} +.icon-arrows-circle-up:before { + content: "\e010"; +} +.icon-arrows-circle-upleft:before { + content: "\e011"; +} +.icon-arrows-circle-upright:before { + content: "\e012"; +} +.icon-arrows-clockwise:before { + content: "\e013"; +} +.icon-arrows-clockwise-dashed:before { + content: "\e014"; +} +.icon-arrows-compress:before { + content: "\e015"; +} +.icon-arrows-deny:before { + content: "\e016"; +} +.icon-arrows-diagonal:before { + content: "\e017"; +} +.icon-arrows-diagonal2:before { + content: "\e018"; +} +.icon-arrows-down:before { + content: "\e019"; +} +.icon-arrows-down-double:before { + content: "\e01a"; +} +.icon-arrows-downleft:before { + content: "\e01b"; +} +.icon-arrows-downright:before { + content: "\e01c"; +} +.icon-arrows-drag-down:before { + content: "\e01d"; +} +.icon-arrows-drag-down-dashed:before { + content: "\e01e"; +} +.icon-arrows-drag-horiz:before { + content: "\e01f"; +} +.icon-arrows-drag-left:before { + content: "\e020"; +} +.icon-arrows-drag-left-dashed:before { + content: "\e021"; +} +.icon-arrows-drag-right:before { + content: "\e022"; +} +.icon-arrows-drag-right-dashed:before { + content: "\e023"; +} +.icon-arrows-drag-up:before { + content: "\e024"; +} +.icon-arrows-drag-up-dashed:before { + content: "\e025"; +} +.icon-arrows-drag-vert:before { + content: "\e026"; +} +.icon-arrows-exclamation:before { + content: "\e027"; +} +.icon-arrows-expand:before { + content: "\e028"; +} +.icon-arrows-expand-diagonal1:before { + content: "\e029"; +} +.icon-arrows-expand-horizontal1:before { + content: "\e02a"; +} +.icon-arrows-expand-vertical1:before { + content: "\e02b"; +} +.icon-arrows-fit-horizontal:before { + content: "\e02c"; +} +.icon-arrows-fit-vertical:before { + content: "\e02d"; +} +.icon-arrows-glide:before { + content: "\e02e"; +} +.icon-arrows-glide-horizontal:before { + content: "\e02f"; +} +.icon-arrows-glide-vertical:before { + content: "\e030"; +} +.icon-arrows-hamburger1:before { + content: "\e031"; +} +.icon-arrows-hamburger-2:before { + content: "\e032"; +} +.icon-arrows-horizontal:before { + content: "\e033"; +} +.icon-arrows-info:before { + content: "\e034"; +} +.icon-arrows-keyboard-alt:before { + content: "\e035"; +} +.icon-arrows-keyboard-cmd:before { + content: "\e036"; +} +.icon-arrows-keyboard-delete:before { + content: "\e037"; +} +.icon-arrows-keyboard-down:before { + content: "\e038"; +} +.icon-arrows-keyboard-left:before { + content: "\e039"; +} +.icon-arrows-keyboard-return:before { + content: "\e03a"; +} +.icon-arrows-keyboard-right:before { + content: "\e03b"; +} +.icon-arrows-keyboard-shift:before { + content: "\e03c"; +} +.icon-arrows-keyboard-tab:before { + content: "\e03d"; +} +.icon-arrows-keyboard-up:before { + content: "\e03e"; +} +.icon-arrows-left:before { + content: "\e03f"; +} +.icon-arrows-left-double-32:before { + content: "\e040"; +} +.icon-arrows-minus:before { + content: "\e041"; +} +.icon-arrows-move:before { + content: "\e042"; +} +.icon-arrows-move2:before { + content: "\e043"; +} +.icon-arrows-move-bottom:before { + content: "\e044"; +} +.icon-arrows-move-left:before { + content: "\e045"; +} +.icon-arrows-move-right:before { + content: "\e046"; +} +.icon-arrows-move-top:before { + content: "\e047"; +} +.icon-arrows-plus:before { + content: "\e048"; +} +.icon-arrows-question:before { + content: "\e049"; +} +.icon-arrows-remove:before { + content: "\e04a"; +} +.icon-arrows-right:before { + content: "\e04b"; +} +.icon-arrows-right-double:before { + content: "\e04c"; +} +.icon-arrows-rotate:before { + content: "\e04d"; +} +.icon-arrows-rotate-anti:before { + content: "\e04e"; +} +.icon-arrows-rotate-anti-dashed:before { + content: "\e04f"; +} +.icon-arrows-rotate-dashed:before { + content: "\e050"; +} +.icon-arrows-shrink:before { + content: "\e051"; +} +.icon-arrows-shrink-diagonal1:before { + content: "\e052"; +} +.icon-arrows-shrink-diagonal2:before { + content: "\e053"; +} +.icon-arrows-shrink-horizonal2:before { + content: "\e054"; +} +.icon-arrows-shrink-horizontal1:before { + content: "\e055"; +} +.icon-arrows-shrink-vertical1:before { + content: "\e056"; +} +.icon-arrows-shrink-vertical2:before { + content: "\e057"; +} +.icon-arrows-sign-down:before { + content: "\e058"; +} +.icon-arrows-sign-left:before { + content: "\e059"; +} +.icon-arrows-sign-right:before { + content: "\e05a"; +} +.icon-arrows-sign-up:before { + content: "\e05b"; +} +.icon-arrows-slide-down1:before { + content: "\e05c"; +} +.icon-arrows-slide-down2:before { + content: "\e05d"; +} +.icon-arrows-slide-left1:before { + content: "\e05e"; +} +.icon-arrows-slide-left2:before { + content: "\e05f"; +} +.icon-arrows-slide-right1:before { + content: "\e060"; +} +.icon-arrows-slide-right2:before { + content: "\e061"; +} +.icon-arrows-slide-up1:before { + content: "\e062"; +} +.icon-arrows-slide-up2:before { + content: "\e063"; +} +.icon-arrows-slim-down:before { + content: "\e064"; +} +.icon-arrows-slim-down-dashed:before { + content: "\e065"; +} +.icon-arrows-slim-left:before { + content: "\e066"; +} +.icon-arrows-slim-left-dashed:before { + content: "\e067"; +} +.icon-arrows-slim-right:before { + content: "\e068"; +} +.icon-arrows-slim-right-dashed:before { + content: "\e069"; +} +.icon-arrows-slim-up:before { + content: "\e06a"; +} +.icon-arrows-slim-up-dashed:before { + content: "\e06b"; +} +.icon-arrows-square-check:before { + content: "\e06c"; +} +.icon-arrows-square-down:before { + content: "\e06d"; +} +.icon-arrows-square-downleft:before { + content: "\e06e"; +} +.icon-arrows-square-downright:before { + content: "\e06f"; +} +.icon-arrows-square-left:before { + content: "\e070"; +} +.icon-arrows-square-minus:before { + content: "\e071"; +} +.icon-arrows-square-plus:before { + content: "\e072"; +} +.icon-arrows-square-remove:before { + content: "\e073"; +} +.icon-arrows-square-right:before { + content: "\e074"; +} +.icon-arrows-square-up:before { + content: "\e075"; +} +.icon-arrows-square-upleft:before { + content: "\e076"; +} +.icon-arrows-square-upright:before { + content: "\e077"; +} +.icon-arrows-squares:before { + content: "\e078"; +} +.icon-arrows-stretch-diagonal1:before { + content: "\e079"; +} +.icon-arrows-stretch-diagonal2:before { + content: "\e07a"; +} +.icon-arrows-stretch-diagonal3:before { + content: "\e07b"; +} +.icon-arrows-stretch-diagonal4:before { + content: "\e07c"; +} +.icon-arrows-stretch-horizontal1:before { + content: "\e07d"; +} +.icon-arrows-stretch-horizontal2:before { + content: "\e07e"; +} +.icon-arrows-stretch-vertical1:before { + content: "\e07f"; +} +.icon-arrows-stretch-vertical2:before { + content: "\e080"; +} +.icon-arrows-switch-horizontal:before { + content: "\e081"; +} +.icon-arrows-switch-vertical:before { + content: "\e082"; +} +.icon-arrows-up:before { + content: "\e083"; +} +.icon-arrows-up-double-33:before { + content: "\e084"; +} +.icon-arrows-upleft:before { + content: "\e085"; +} +.icon-arrows-upright:before { + content: "\e086"; +} +.icon-arrows-vertical:before { + content: "\e087"; +} diff --git a/static/css/responsive.css b/static/css/responsive.css new file mode 100644 index 0000000..2e30feb --- /dev/null +++ b/static/css/responsive.css @@ -0,0 +1,6066 @@ +@media screen and (min-width:1800px) and (max-width:1920px){ + html{ + font-size: 62.5%; + } + + .hero-right-image { + width: 124%; + height: auto; + transform: translateX(90px); + } + + .hero-heading-primary { + font-size: 6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 75%; + } + + .hero-heading-secondary { + font-size: 3rem; + color: #001123; + font-weight: 300; + width: 74%; + margin-top: 2rem; + margin-bottom: 0; + line-height: 44px; + } + + .hero-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 74%; + line-height: 28px; + } + + .hero-btn { + margin-top: 3rem; + } + + .hero-texts{ + margin-top: 13rem; + } + + .down-img{ + width: 3%; + height: auto; + } + + .right-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; + width: 79%; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 65%; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 70%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 66%; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -7rem; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 4rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 71%; + } + + .performance-right-paragraph { + font-size: 2rem; + font-weight: 300; + color: #001123; + width: 80%; + } + + .title-bottom-button { + margin-top: 4rem; + } + + #freedom-section { + padding: 5rem 0; + } + + .novit-text { + font-size: 2.6rem; + font-weight: 600; + color: #fff; + width: 46%; + line-height: 4rem; + margin-bottom: 0; + margin-top: 1rem; + } + + #novit-section { + padding-bottom: 25rem; + margin-top: -32rem; + } + .novit-background { + background-image: url(../image/novit-background.png); + background-size: 100%; + height: 33rem; + width: 100%; + padding: 6rem; + background-repeat: no-repeat; + border-radius: 35px; + } + + .novit-title-button{ + margin-top: 2rem; + } + + .novit-content{ + margin-top: 8px; + } + + .freedom-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 60%; + margin: auto; + margin-top: auto; + margin-top: 3rem; + } + + .freedom-section-content { + background: rgba(251, 252, 254, 1); + border-radius: 2rem; + height: 83rem; + width: 100%; + padding: 5rem; + transform: translateY(-25rem); + } + + .title-bottom-text { + font-size: 2.6rem; + color: #001123; + text-decoration: underline; + width: 60%; + margin: auto; + margin-top: auto; + margin-top: 4.7rem; + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-23px); + overflow: hidden; + } + + #footer-section{ + padding-bottom: 0; + } + + /* about page */ + + .about-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .about-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 30%; + text-align: center; + margin: auto; + } + + .about-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .about-breadcrumb ul{ + padding-left: 0; + } + + .text-background { + transform: translateX(260px) translateY(-65px); + z-index: -1; + position: absolute; + top: 177px; + left: 349px; + width: 27%; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 59%; + } + + .right-first-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + width: 140%; + } + + .right-second-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2.5rem; + width: 140%; + } + + .signal-control-1 { + transform: translateX(90rem) translateY(63rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .signal-control-2 { + transform: translateX(52rem) translateY(34rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .parple-signal { + transform: translateX(-223px) translateY(197px); + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + transform: translateX(-3rem) translateY(-281px); + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + transform: translateX(124px) translateY(32px); + opacity: 0.5; + overflow: hidden; + } + + .orange-signal { + transform: translateX(6px) translateY(12px); + opacity: 0.5; + overflow: hidden; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: 12rem; + } + + /* about page */ + + /* relibility page */ + + .relibility-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 53%; + margin: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 55px; + } + + .relibility-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .relibility-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 50%; + text-align: center; + margin: auto; + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .relibility-breadcrumb ul{ + padding-left: 0; + } + + /* relibility page */ + + /* prices page */ + + + .card-body { + padding: 3rem; + } + + .prices-header-text{ + width: 100%; + } + + .prices-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 49%; + text-align: center; + margin: auto; + } + + .prices-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .prices-breadcrumb ul{ + padding-left: 0; + } + + .include-button-4 { + margin-top: 80px; + } + + .include-text-width-4 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 3px; + } + + .include-text-width-3 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .include-text-width-2 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .include-text-4 { + font-size: 2rem; + font-weight: 300; + color: #fff; + } + + .includes-1 { + font-size: 2rem; + font-weight: 300; + color: #001123; + } + + .includes-2 { + font-size: 2rem; + font-weight: 300; + color: #001123; + } + + .includes-3 { + font-size: 2rem; + font-weight: 300; + color: #001123; + } + + .include-text-width-1 { + width: 75%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 3px; + } + + .include-text-width-2 { + width: 75%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 3px; + } + + .include-text-width-3 { + width: 75%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 3px; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 75%; + } + + /* prices page */ + +} + +@media screen and (min-width:1600px) and (max-width:1799px){ + html{ + font-size: 62.5%; + } + + .down-img{ + width: 3%; + height: auto; + } + + .hero-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 74%; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 74%; + margin-top: 2rem; + margin-bottom: 0; + } + + .hero-btn { + margin-top: 2rem; + } + + .hero-right-image { + width: 124%; + height: auto; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 75%; + } + + .right-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; + width: 88%; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 80%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 76%; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -7rem; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 4rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .performance-right-paragraph { + font-size: 2rem; + font-weight: 300; + color: #001123; + width: 90%; + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 80%; + } + + .title-bottom-button { + margin-top: 4rem; + } + + #freedom-section { + padding: 5rem 0; + } + + #novit-section { + padding-bottom: 25rem; + margin-top: -32rem; + } + + .novit-text { + font-size: 2.6rem; + font-weight: 600; + color: #fff; + width: 50%; + line-height: 4rem; + margin-bottom: 0; + margin-top: 1rem; + } + + .novit-background { + background-image: url(../image/novit-background.png); + background-size: 100%; + height: 33rem; + width: 100%; + padding: 6rem; + background-repeat: no-repeat; + border-radius: 22px; + } + + .novit-title-button{ + margin-top: 2rem; + } + + .novit-content{ + margin-top: 7px; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 80%; + } + + #footer-section{ + padding-bottom: 0; + } + + /* about page */ + + .about-header-text{ + width: 100%; + } + + .about-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 35%; + text-align: center; + margin: auto; + } + + .about-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 18rem); + } + + .about-breadcrumb ul{ + padding-left: 0; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 67%; + } + + .right-first-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + width: 140%; + } + + .right-second-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2.5rem; + width: 140%; + } + + .orange-signal { + transform: translateX(-3px) translateY(-6px); + opacity: 0.5; + overflow: hidden; + } + + /* about page */ + + /* relibility page */ + + .signal-control-1 { + transform: translateX(82rem) translateY(62rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .signal-control-2 { + transform: translateX(43rem) translateY(33rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .relibility-header-text{ + width: 100%; + } + + .relibility-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 49%; + text-align: center; + margin: auto; + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 18rem); + } + + .relibility-breadcrumb ul{ + padding-left: 0; + } + + .innovative-texts { + margin-top: 7rem; + } + + .relibility-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 59%; + margin: auto; + margin-top: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 55px; + } + + .text-background { + transform: translateX(167px) translateY(-67px); + z-index: -1; + position: absolute; + top: 177px; + left: 349px; + width: 31%; + } + + + .parple-signal { + transform: translateX(-122px) translateY(290px); + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + transform: translateX(106px) translateY(-22px); + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + transform: translateX(-4rem) translateY(-309px); + opacity: 0.5; + overflow: hidden; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: 11rem; + } + + /* relibility page */ + + /* prices page */ + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .prices-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 55%; + text-align: center; + margin: auto; + } + + .prices-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 18rem); + } + + .prices-breadcrumb ul{ + padding-left: 0; + } + + .card-body { + padding: 3rem; + } + + .include-text-width-1 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .include-text-width-2 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .include-text-width-3 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .include-text-width-4 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 3px; + } + + .include-text-4 { + font-size: 2rem; + font-weight: 300; + color: #fff; + } + + .include-button-4 { + margin-top: 84px; + } + + /* prices page */ + +} + +@media screen and (min-width:1400px) and (max-width:1599px){ + html{ + font-size: 58.5%; + } + + .hero-right-image { + width: 118%; + height: auto; + } + + .down-img{ + width: 3%; + height: auto; + } + + .hero-heading-primary { + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 90%; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 74%; + margin-top: 1.6rem; + margin-bottom: 0; + line-height: 26px; + } + + .hero-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 74%; + } + + .hero-btn { + margin-top: 2rem; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 80%; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 90%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 88%; + } + + .right-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; + width: 91%; + } + + .performance-right-paragraph { + font-size: 2rem; + font-weight: 300; + color: #001123; + width: 90%; + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 85%; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -8rem; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 4rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .title-bottom-text { + font-size: 2.6rem; + color: #001123; + text-decoration: underline; + width: 67%; + margin: auto; + margin-top: auto; + margin-top: 4.7rem; + } + + .title-bottom-button { + margin-top: 4rem; + } + + #freedom-section { + padding: 6rem 0; + } + + #novit-section { + padding-bottom: 27rem; + margin-top: -33rem; + } + + .novit-background { + background-image: url(../image/novit-background.png); + background-size: 100%; + height: 33rem; + width: 100%; + padding: 5rem; + background-repeat: no-repeat; + border-radius: 22px; + } + + .novit-text { + font-size: 2.6rem; + font-weight: 600; + color: #fff; + width: 53%; + line-height: 4rem; + margin-bottom: 0; + margin-top: 1rem; + } + + .novit-title-button{ + margin-top: 2rem; + } + + .novit-content{ + margin-top: 15px; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 90%; + } + + #footer-section{ + padding-bottom: 0; + } + + /* about page */ + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 70%; + } + + .right-first-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + width: 140%; + } + + .right-second-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2.5rem; + width: 140%; + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-23px); + overflow: hidden; + } + + figure{ + margin-bottom: 0 !important; + } + + /* about page */ + + /* relibility page */ + + .relibility-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .relibility-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 60%; + text-align: center; + margin: auto; + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 18rem); + } + + .relibility-breadcrumb ul{ + padding-left: 0; + } + + .relibility-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 64%; + margin: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 55px; + } + + .text-background { + transform: translateX(2px) translateY(-64px); + z-index: -1; + width: 34%; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: 10rem; + } + + .signal-control-1 { + transform: translateX(76rem) translateY(62rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .signal-control-2 { + transform: translateX(35rem) translateY(288px); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .parple-signal { + transform: translateX(-101px) translateY(226px); + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + transform: translateX(87px) translateY(-65px); + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + transform: translateX(-3rem) translateY(-339px); + opacity: 0.5; + overflow: hidden; + } + + .orange-signal { + transform: translateX(5px) translateY(-23px); + opacity: 0.5; + overflow: hidden; + } + + /* relibility page */ + + /* prices page */ + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .prices-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 58%; + text-align: center; + margin: auto; + } + + .include-text-width-1 { + width: 85%; + font-size: 1.8rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 3px; + } + + .check-mark-icon-1 { + margin-right: .6rem; + font-size: 2.4rem; + color: #001123; + } + + .price-1 { + font-size: 3.2rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + .price-2 { + font-size: 3.2rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + .price-3 { + font-size: 3.2rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + .includes-1 { + font-size: 2rem; + font-weight: 300; + color: #001123; + } + + .includes-2 { + font-size: 2rem; + font-weight: 300; + color: #001123; + } + + .includes-3 { + font-size: 2rem; + font-weight: 300; + color: #001123; + } + + .include-text-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + } + + .include-text-width-2 { + width: 100%; + font-size: 1.8rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 3px; + } + + .include-text-3 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + } + + .include-text-width-3 { + width: 100%; + font-size: 1.8rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 3px; + } + + .includes-4 { + font-size: 1.8rem; + font-weight: 600; + color: #fff; + } + + .include-text-4 { + font-size: 1.8rem; + font-weight: 300; + color: #fff; + } + + .include-text-width-4 { + width: 100%; + font-size: 1.8rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 3px; + } + + .include-btn-1:link, .include-btn-1:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.8rem; + transition: all .3s ease-in-out; + } + + .include-btn-2:link, .include-btn-2:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.8rem; + transition: all .3s ease-in-out; + } + + .include-btn-3:link, .include-btn-3:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.8rem; + transition: all .3s ease-in-out; + } + + .include-btn-4:link, .include-btn-4:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.8rem; + transition: all .3s ease-in-out; + } + + .include-button-4 { + margin-top: 70px; + } + + .include-text-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + } + + .prices-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 17rem); + } + + .prices-breadcrumb ul{ + padding-left: 0; + } + + .card-body { + padding: 3rem; + } + + /* prices page */ +} + +@media screen and (min-width:1200px) and (max-width:1399px){ + html{ + font-size: 54.5%; + } + + .hero-right-image { + width: 120%; + height: auto; + } + + .hero-heading-primary { + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 74%; + } + + .hero-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 74%; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 74%; + margin-top: 2rem; + margin-bottom: 0; + line-height: 26px; + } + + .hero-btn { + margin-top: 2rem; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 86%; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 90%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 90%; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -8rem; + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 90%; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 31px; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 33px; + } + + #freedom-section { + padding: 5rem 0; + } + + .novit-background { + background-image: url(../image/novit-background.png); + background-size: 100%; + height: 33rem; + width: 100%; + padding: 4rem; + background-repeat: no-repeat; + border-radius: 30px; + } + + .novit-title-button{ + margin-top: 2rem; + } + + .novit-content{ + margin-top: 6px; + } + + .title-bottom-button { + margin-top: 4rem; + } + + .novit-spaceing { + margin-bottom: 30rem; + margin-top: -33rem; + } + + #email-section { + background: rgba(0, 121, 255, 1); + padding: 7rem 0; + margin-top: -18rem; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 90%; + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-24px); + overflow: hidden; + } + + #footer-section{ + padding-bottom: 0; + } + + + /* about page */ + + #about-banner { + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 100vh; + width: auto; + background-position: center right; + } + + .signal-control-2 { + transform: translateX(29rem) translateY(24rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .signal-control-1 { + transform: translateX(71rem) translateY(500px); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .blue-signal { + transform: translateX(0rem) translateY(-369px); + opacity: 0.5; + overflow: hidden; + } + + .orange-signal { + transform: translateX(18px) translateY(-39px); + opacity: 0.5; + overflow: hidden; + } + + .innovative-title { + font-size: 2.6rem; + font-weight: 600; + width: 62%; + text-align: center; + margin: auto; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 76%; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: -4rem; + } + + .person-name-1 { + font-size: 2.2rem; + font-weight: 600; + color: #001123; + } + + .person-name-2 { + font-size: 2.2rem; + font-weight: 600; + color: #001123; + } + + .person-name-3 { + font-size: 2.2rem; + font-weight: 600; + color: #001123; + } + + .person-title-1 { + font-size: 1.6rem; + font-weight: 300; + color: #00CF84; + } + + .person-title-2 { + font-size: 1.6rem; + font-weight: 300; + color: #00CF84; + } + + .person-title-3 { + font-size: 1.6rem; + font-weight: 300; + color: #00CF84; + } + + /* about page */ + + /* relibility page */ + + .relibility-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 69%; + margin: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 55px; + } + + .green-signal { + transform: translateX(69px) translateY(-121px); + opacity: 0.5; + overflow: hidden; + } + + .innovative-texts { + margin-top: 9.5rem; + } + + /* relibility page */ + + /* prices page */ + + #priceing-banner { + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 100vh; + width: auto; + background-position: center; + } + + .card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; + background-position: center; + } + + .card-body { + padding: 2rem; + } + + .include-btn-1:link, .include-btn-1:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.5rem; + transition: all .3s ease-in-out; + } + + .includes-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + } + + .include-text-1 { + font-size: 1.8rem; + font-weight: 300; + } + + .check-mark-icon-1 { + margin-right: .6rem; + font-size: 2.2rem; + color: #001123; + } + + .include-text-width-1 { + width: 100%; + font-size: 1.8rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .price-1 { + font-size: 3rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + .price-2 { + font-size: 3rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + .price-3 { + font-size: 3rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + + .include-btn-2:link, .include-btn-1:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.5rem; + transition: all .3s ease-in-out; + } + + .includes-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + } + + .include-text-2 { + font-size: 1.8rem; + font-weight: 300; + } + + .check-mark-icon-2 { + margin-right: .6rem; + font-size: 2.2rem; + color: #001123; + } + + .include-text-width-2 { + width: 100%; + font-size: 1.8rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .include-btn-3:link, .include-btn-1:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.5rem; + transition: all .3s ease-in-out; + } + + .includes-3 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + } + + .include-text-3 { + font-size: 1.8rem; + font-weight: 300; + } + + .check-mark-icon-3 { + margin-right: .6rem; + font-size: 2.2rem; + color: #001123; + } + + .include-text-width-3 { + width: 100%; + font-size: 1.8rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; + } + + .includes-4 { + font-size: 1.8rem; + font-weight: 600; + color: #fff; + } + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .prices-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 62%; + text-align: center; + margin: auto; + } + + .prices-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 14rem); + } + + .prices-breadcrumb ul{ + padding-left: 0; + } + + .prices-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .include-text-4 { + font-size: 1.8rem; + font-weight: 300; + color: #fff; + } + + .include-text-width-4 { + width: 75%; + font-size: 1.8rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 2px; + } + + .include-text-width-4 { + width: 100%; + font-size: 1.8rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 2px; + } + + .include-btn-4:link, .include-btn-4:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #ffffff; + font-size: 1.5rem; + background: rgba(0, 121, 255, 1); + transition: all .3s ease-in-out; + } + + .include-button-4 { + margin-top: 57px; + } + + .prices-title-text{ + margin: auto; + text-align: center; + } + + .email-icon { + transform: translateX(-2.6rem) translateY(-.3rem); + width: 4%; + } + + /* prices page */ +} + +@media screen and (min-width:1020px) and (max-width:1199px){ + html{ + font-size: 55.5%; + } + + .hero-right-image { + width: 117%; + height: auto; + } + + .hero-heading-primary { + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 70%; + } + + .hero-texts { + margin-top: 7rem; + } + + .hero-down-button { + transition: all .3s ease-in-out; + position: relative; + top: -4rem; + text-decoration: none; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 87%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 90%; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 74%; + margin-top: 1.6rem; + margin-bottom: 0; + line-height: 25px; + } + + .hero-paragraph { + font-size: 1.6rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 74%; + } + + .hero-btn { + margin-top: 2rem; + } + + .catalyst-items { + transform: translateX(2rem); + } + + .catalyst-left-heading { + font-size: 3rem; + width: 88%; + } + + #catalyst-section { + padding: 10rem 0; + margin-top: -11rem; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -8rem; + } + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 2.6rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 2.9rem; + } + + #performance-section { + padding: 10rem 0; + margin-top: -6rem; + } + + #freedom-section { + padding: 4rem 0; + } + + .novit-text { + font-size: 2.6rem; + font-weight: 600; + color: #fff; + width: 47%; + line-height: 4rem; + margin-bottom: 0; + margin-top: 1rem; + } + + #novit-section { + padding-top: 6rem; + } + + #email-section { + background: rgba(0, 121, 255, 1); + padding: 7rem 0; + margin-top: -16rem; + } + + .novit-spaceing { + margin-bottom: 27rem; + margin-top: -32rem; + } + + .novit-title-button{ + margin-top: 2rem; + } + + .title-bottom-button { + margin-top: 4rem; + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-24px); + overflow: hidden; + } + + #footer-section{ + padding-bottom: 0; + } + + /* about page */ + + #about-banner { + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 75vh; + width: auto; + background-position: center; + } + + .about-header-text{ + width: 100%; + } + + .about-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 59%; + text-align: center; + margin: auto; + } + + .about-breadcrumb ul{ + padding-left: 0; + } + + .about-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 21rem); + } + + .person-name-1 { + font-size: 1.85rem; + font-weight: 600; + color: #001123; + } + + .person-name-2 { + font-size: 1.85rem; + font-weight: 600; + color: #001123; + } + + .person-name-3 { + font-size: 1.85rem; + font-weight: 600; + color: #001123; + } + + .person-title-1 { + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + } + + .person-title-2 { + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + } + + .person-title-3 { + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + } + + .about-header-part{ + transform: translateY(36rem); + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 90%; + } + + /* about page */ + + + /* relibility page */ + + #reliability-banner { + background-image: url(../image/reliability-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 75vh; + width: auto; + background-position: center; + } + + .text-background { + transform: translateX(18px) translateY(-68px); + z-index: -1; + position: absolute; + top: 177px; + left: 349px; + width: 41%; + } + + .relibility-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .relibility-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 89%; + text-align: center; + margin: auto; + } + + .relibility-header-part{ + transform: translateY(36rem); + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .signal-control-2 { + transform: translateX(18rem) translateY(11rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .signal-control-1 { + transform: translateX(60rem) translateY(44rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .orange-signal { + transform: translateX(28px) translateY(-52px); + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + transform: translateX(0rem) translateY(-390px); + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + transform: translateX(49px) translateY(-166px); + opacity: 0.5; + overflow: hidden; + } + + .parple-signal { + transform: translateX(-51px) translateY(91px); + opacity: 0.5; + overflow: hidden; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: -14rem; + } + + /* relibility page */ + + /* prices page */ + + #priceing-banner { + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 75vh; + width: auto; + background-position: center; + } + + .card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; + background-position: center; + } + + .prices-header-part { + transform: translateY(36rem); + } + + + .card-body { + padding: 4rem; + } + + .include-btn-1:link, .include-btn-1:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.8rem; + transition: all .3s ease-in-out; + } + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -72%); + color: #fff; + width: 100%; + } + + .prices-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 83%; + text-align: center; + margin: auto; + } + + .prices-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .prices-breadcrumb ul{ + padding-left: 0; + } + + .include-text-width-4 { + width: 79%; + font-size: 2rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 3px; + } + + + .prices-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .prices-title-text{ + margin: auto; + text-align: center; + } + + .card-3{ + margin-top: 5rem; + } + + .card-4{ + margin-top: 5rem; + } + + .include-button-4 { + margin-top: 67px; + } + + .include-text-4 { + font-size: 2rem; + font-weight: 300; + color: #fff; + } + + .email-icon { + transform: translateX(-2.6rem) translateY(-.3rem); + width: 5%; + } + + /* prices page */ +} + +@media screen and (min-width:992px) and (max-width:1019px){ + + html{ + font-size: 55.5%; + } + + .container{ + padding: 0 2.5rem; + } + + .hero-right-image { + width: 118%; + height: auto; + } + + .hero-heading-primary { + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 71%; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 74%; + margin-top: 1rem; + margin-bottom: 0; + line-height: 25px; + } + + .hero-paragraph { + font-size: 1.6rem; + font-weight: 300; + color: #778697; + margin-top: 1rem; + margin-bottom: 0; + width: 75%; + } + + .hero-btn { + margin-top: 2rem; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 83%; + } + + .catalyst-left-heading { + font-size: 3rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + width: 90%; + } + + + #catalyst-section { + padding: 10rem 0; + margin-top: -11rem; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 88%; + } + + .icon-Fast{ + margin-top: 2rem; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -7rem; + } + + .pragmatic-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-transform: capitalize; + width: 66%; + margin: auto; + margin-top: 2.2rem; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 1.5rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; + } + + #performance-section { + padding: 10rem 0; + margin-top: -7rem; + } + + #freedom-section { + padding: 2rem 0; + } + + .title-bottom-button { + margin-top: 4rem; + } + + #novit-section { + padding-top: 17rem; + } + + .novit-spaceing { + margin-bottom: 30rem; + margin-top: -33rem; + } + + .novit-title-button { + margin-top: 2rem; + } + + .novit-content{ + margin-top: -4px; + } + + #email-section { + background: rgba(0, 121, 255, 1); + padding: 7rem 0; + margin-top: -20rem; + } + + .email-icon { + transform: translateX(-25px) translateY(-2px); + width: 6%; + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-23px); + overflow: hidden; + } + + .footer-bottom-text { + margin-top: 1.6rem; + } + + /* about page */ + + #about-banner { + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 75vh; + width: auto; + background-position: center; + } + + .about-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .about-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 60%; + text-align: center; + margin: auto; + } + + .about-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .about-breadcrumb ul{ + padding-left: 0; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 85%; + } + + .person-name-1 { + font-size: 1.8rem; + font-weight: 600; + color: #001123; + } + + .person-name-2 { + font-size: 1.8rem; + font-weight: 600; + color: #001123; + } + + .person-name-3 { + font-size: 1.8rem; + font-weight: 600; + color: #001123; + } + + .person-title-1 { + font-size: 1.5rem; + font-weight: 300; + color: #00CF84; + } + + .person-title-2 { + font-size: 1.5rem; + font-weight: 300; + color: #00CF84; + } + + .person-title-3 { + font-size: 1.5rem; + font-weight: 300; + color: #00CF84; + } + + .about-header-part{ + transform: translateY(36rem); + } + + /* about page */ + + /* relibility page */ + + #reliability-banner { + background-image: url(../image/reliability-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 75vh; + width: auto; + background-position: center; + } + + .relibility-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .relibility-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 80%; + text-align: center; + margin: auto; + } + + .relibility-header-part{ + transform: translateY(35rem); + } + + .relibility-breadcrumb ul{ + padding-left: 0; + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .text-background { + transform: translateX(5px) translateY(-67px); + z-index: -1; + position: absolute; + top: 177px; + left: 349px; + width: 42%; + } + + .orange-signal { + transform: translateX(24px) translateY(-63px); + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + transform: translateX(-2px) translateY(-394px); + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + transform: translateX(51px) translateY(-179px); + opacity: 0.5; + overflow: hidden; + } + + .parple-signal { + transform: translateX(-70px) translateY(92px); + opacity: 0.5; + overflow: hidden; + } + + .signal-control-1 { + transform: translateX(58rem) translateY(47rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .signal-control-2 { + transform: translateX(17rem) translateY(125px); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + /* relibility page */ + + /* prices page */ + + #priceing-banner { + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 75vh; + width: auto; + background-position: center; + } + + .card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; + background-position: center; + } + + .prices-header-part { + transform: translateY(37rem); + } + + + .card-body { + padding: 4rem; + } + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -72%); + color: #fff; + width: 100%; + } + + .prices-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 75%; + text-align: center; + margin: auto; + } + + .prices-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 17rem); + } + + .include-text-width-4 { + width: 80%; + font-size: 2rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 3px; + } + + .include-text-4 { + font-size: 2rem; + font-weight: 300; + color: #fff; + } + + .includes-4 { + font-size: 2.2rem; + font-weight: 600; + color: #fff; + } + + .prices-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .prices-title-text{ + margin: auto; + text-align: center; + } + + .card-3{ + margin-top: 5rem; + } + + .card-4{ + margin-top: 45px; + } + + .include-button-4 { + margin-top: 65px; + } + + .email-icon { + transform: translateX(-2.6rem) translateY(-.3rem); + width: 5%; + } + + #footer-section { + background: rgba(0, 17, 35, 1); + color: #fff; + padding: 10rem 0; + padding-bottom: 0; + } + + /* prices page */ + + +} + +@media screen and (min-width:768px) and (max-width:991px){ + html { + font-size: 55.5%; + } + + .active .nav-link::after{ + width: 0; + } + + /* home section */ + + .hero-heading-primary { + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 75%; + margin: auto; + text-align: center; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 85%; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 82%; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-btn { + margin-top: 3.4rem; + text-align: center; + } + + .hero-right-image { + width: 110%; + height: auto; + margin-top: 7rem; + } + + .down-img{ + margin-top: 12rem; + } + + #catalyst-section { + padding: 10rem 0; + margin-top: -11rem; + } + + .catalyst-title { + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + text-align: center; + margin: auto; + } + + .catalyst-title-button{ + display: grid; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + text-align: center; + width: 80%; + margin: auto; + margin-top: 2rem; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 87%; + } + + .right-heading { + font-size: 2rem; + font-weight: 600; + color: #0079FF; + text-transform: capitalize; + text-align: center; + margin-top: 2rem; + } + + .right-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; + text-align: center; + width: 64%; + margin: auto; + margin-top: 2rem; + } + + .catalyst-img{ + text-align: center; + } + + .catalyst-items { + transform: translateX(4rem); + margin-top: 9rem; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 88%; + } + + .pragmatic-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-transform: capitalize; + width: 77%; + margin: auto; + margin-top: auto; + margin-top: 2.2rem; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -7rem; + } + + #performance-section { + padding: 10rem 0; + margin-top: -7rem; + } + + + .pragmatic-card-2{ + margin-top: 5rem; + } + + .pragmatic-card-3{ + margin-top: 5rem; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .pragmatic-card-heading-4 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 4rem; + } + + .right-content { + margin-top: 5rem; + } + + .performance-title { + font-size: 1.4rem; + font-weight: 300; + color: #3D00CF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(236, 222, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + margin: auto; + } + + .performance-title-button{ + display: grid; + margin: auto + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + text-align: center; + } + + .performance-right-paragraph { + font-size: 2rem; + font-weight: 300; + color: #001123; + text-align: center; + width: 73%; + margin: auto; + margin-top: 1rem; + } + + .performance-button { + margin-top: 2.2rem; + text-align: center; + } + + #freedom-section { + padding: 2rem 0; + } + + .left-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + margin-top: 4rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-card-content-1 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + margin-top: 4rem; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .title-bottom-button { + margin-top: 4rem; + } + + .novit-content{ + margin-top: .6rem; + } + + .novit-background { + background-image: url(../image/novit.png); + background-size: 100%; + width: 100%; + padding: 6rem; + background-repeat: no-repeat; + margin-top: 20rem; + border-radius: 26px; + } + + .novit-text { + font-size: 21px; + font-weight: 600; + color: #fff; + width: 100%; + line-height: 31px; + margin-bottom: 0; + margin-top: 10px; + text-align: center; + } + + .novit-title { + font-size: 2rem; + font-weight: 600; + color: #00CF84; + text-align: center; + } + + .novit-title-button { + margin-top: 2rem; + text-align: center; + } + + .novit-text { + font-size: 2.6rem; + font-weight: 600; + color: #fff; + width: 100%; + line-height: 4rem; + margin-bottom: 0; + margin-top: 1rem; + text-align: center; + } + + .novit-spaceing { + margin-bottom: 25rem; + margin-top: -11rem; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 70%; + text-align: center; + margin: auto; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 70%; + text-align: center; + margin: auto; + transform: translateY(-5rem); + } + + .email-contents { + position: absolute; + top: 50%; + left: 50%; + width: 68%; + transform: translate(-35%, -43%); + } + + #email-section { + background: rgba(0, 121, 255, 1); + padding: 12rem 0; + margin-top: -12rem; + } + + .email-icon { + transform: translateX(-3.4rem) translateY(-.5rem); + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-22px); + overflow: hidden; + } + + .terms { + font-size: 1.4rem; + font-weight: 300; + float: left; + margin-right: 3rem; + padding-bottom: 0; + transform: translateY(1px); + } + + #footer-section { + background: rgba(0, 17, 35, 1); + color: #fff; + padding: 10rem 0; + padding-bottom: 0; + } + + /* home section */ + + /* about page */ + + #about-banner { + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 70vh; + width: auto; + background-position: center; + } + + .about-header-part{ + transform: translateY(33rem); + } + + .about-header-text{ + width: 100%; + } + + .about-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 81%; + text-align: center; + margin: auto; + } + + .about-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20rem); + } + + .about-title-text { + font-size: 1.4rem; + font-weight: 300; + color: #0079FF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(229, 245, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .about-title{ + text-align: center; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 100%; + text-align: center; + } + + .right-first-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + text-align: center; + margin-top: 3rem; + } + + .right-second-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2.5-rem; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .person-1{ + margin-top: 10rem; + } + + .person-2{ + margin-top: 10rem; + } + + .person-3{ + margin-top: 10rem; + } + + /* about page */ + + /* reliability page */ + + + #reliability-banner { + background-image: url(../image/reliability-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 70vh; + width: auto; + background-position: center; + } + + .relibility-header-text{ + width: 100%; + } + + .relibility-header-part{ + transform: translateY(33rem); + } + + .relibility-breadcrumb ul{ + padding-left: 0; + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 19rem); + } + + .relibility-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 63%; + margin: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 53px; + } + + .innovative-title { + font-size: 2.6rem; + font-weight: 600; + width: 89%; + text-align: center; + margin: auto; + } + + .fa-whatsapp { + font-size: 3.1rem; + color: #fff; + margin-right: 0.3rem; + } + + .icon-right-text { + text-decoration: none; + color: #fff; + font-size: 1.6rem; + font-weight: 300; + display: inline-block; + transform: translateX(0.5rem) translateY(-4px); + } + + .relibility-title{ + font-size: 1.4rem; + font-weight: 300; + color: #FC8F66; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(255, 236, 229, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .relibility-title-text{ + margin: auto; + text-align: center; + } + + .text-background{ + transform: translateX(-3px) translateY(-61px); + width: 54%; + } + + .orange-signal { + transform: translateX(21px) translateY(-84px); + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + transform: translateX(1rem) translateY(-427px); + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + transform: translateX(34px) translateY(-245px); + opacity: 0.5; + overflow: hidden; + } + + .parple-signal { + transform: translateX(-27px) translateY(2rem); + opacity: 0.5; + overflow: hidden; + } + + .signal-control-1 { + transform: translateX(41rem) translateY(31rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + width: 38%; + } + + .signal-control-2 { + transform: translateX(3rem) translateY(3rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + width: 50%; + } + + .signal-control-1 { + transform: translateX(45rem) translateY(37.3rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + .signal-control-2 { + transform: translateX(3rem) translateY(4rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + } + + + #innovative-section { + margin-bottom: 25rem; + margin-top: -23rem; + } + + + /* reliability page */ + + + /* prices page */ + + #priceing-banner { + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 70vh; + width: auto; + background-position: center; + } + + .prices-header-text{ + width: 100%; + } + + .prices-header-part{ + transform: translateY(36rem); + } + + .include-text-4 { + font-size: 2rem; + font-weight: 300; + color: #fff; + } + + .include-text-width-4 { + width: 100%; + font-size: 2rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 3px; + } + + .card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; + background-position: center; + } + + + .card-body { + padding: 4rem; + } + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -72%); + color: #fff; + } + + + .prices-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .prices-title-text{ + margin: auto; + text-align: center; + } + + .card-3{ + margin-top: 5rem; + } + + .card-4{ + margin-top: 5rem; + } + + .include-button-4 { + margin-top: 67px; + } + + .email-icon { + transform: translateX(-2.6rem) translateY(-.3rem); + width: 4%; + } + + /* prices page */ + + +} + +@media screen and (min-width:576px) and (max-width:767px){ + html{ + font-size: 55.5%; + } + + .active .nav-link::after{ + width: 0; + } + + .hero-heading-primary { + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 100%; + margin: auto; + text-align: center; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 80%; + margin-top: 1.6rem; + margin-bottom: 0; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 84%; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-btn { + margin-top: 3.4rem; + text-align: center; + } + + .hero-right-image { + width: 110%; + height: auto; + margin-top: 7rem; + } + + .down-img{ + margin-top: 10rem; + } + + #catalyst-section { + padding: 10rem 0; + margin-top: -18rem; + } + + .catalyst-title { + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + text-align: center; + margin: auto; + } + + .catalyst-title-button{ + display: grid; + margin: auto; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + text-align: center; + width: 86%; + margin: auto; + margin-top: 2rem; + } + + + .right-heading { + font-size: 2rem; + font-weight: 600; + color: #0079FF; + text-transform: capitalize; + text-align: center; + margin-top: 1rem; + } + + .right-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; + text-align: center; + width: 70%; + margin: auto; + margin-top: auto; + margin-top: 1rem; + } + + .catalyst-img{ + text-align: center; + } + + .catalyst-items { + transform: translateX(4rem); + margin-top: 9rem; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 95%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 89%; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -8rem; + } + + .pragmatic-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-transform: capitalize; + width: 85%; + margin: auto; + margin-top: 2.2rem; + } + + .pragmatic-card-2{ + margin-top: 5rem; + } + + .pragmatic-card-3{ + margin-top: 5rem; + } + + .performance-title { + font-size: 1.4rem; + font-weight: 300; + color: #3D00CF; + display: block; + padding: .8rem 1.6rem; + background: rgba(236, 222, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + margin: auto; + } + + .performance-title-button{ + display: grid; + } + + .pragmatic-section-subtitle { + font-size: 2rem; + font-weight: 300; + color: #778697; + width: 95%; + margin: auto; + margin-top: 2.6rem; + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + text-align: center; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 3rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + } + + .right-content { + margin-top: 5rem; + } + + .performance-right-paragraph { + font-size: 2rem; + font-weight: 300; + color: #001123; + text-align: center; + margin-top: 1rem; + } + + .performance-button { + margin-top: 2.2rem; + text-align: center; + } + + .left-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + margin-top: 4rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-card-content-1 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + margin-top: 4rem; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .title-bottom-text { + font-size: 2.6rem; + color: #001123; + text-decoration: underline; + width: 100%; + margin: auto; + margin-top: auto; + margin-top: 4.7rem; + } + + .title-bottom-button { + margin-top: 4rem; + } + + .novit-title-button { + margin-top: 2rem; + text-align: center; + } + + #novit-section { + padding-top: 21rem; + } + + + .novit-content{ + transform: translateY(-23px); + } + + .novit-background { + background-image: url(../image/novit.png); + background-size: 100%; + width: 100%; + padding: 6rem; + background-repeat: no-repeat; + margin-top: 6rem; + } + + .novit-text { + font-size: 21px; + font-weight: 600; + color: #fff; + width: 100%; + line-height: 31px; + margin-bottom: 0; + margin-top: 10px; + text-align: center; + } + + .novit-title { + font-size: 2rem; + font-weight: 600; + color: #00CF84; + text-align: center; + } + + .novit-spaceing { + margin-bottom: 25rem; + margin-top: -11rem; + } + + #freedom-section { + padding: 12rem 0; + margin-top: -8rem; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 70%; + text-align: center; + margin: auto; + } + + .email-left-heading { + font-size: 3rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 88%; + text-align: center; + margin: auto; + transform: translateY(-5rem); + } + + .email-contents { + position: absolute; + top: 50%; + left: 50%; + width: 77%; + transform: translate(-34%, -42%); + } + + #email-section { + background: rgba(0, 121, 255, 1); + padding: 12rem 0; + margin-top: -18rem; + } + + .email-icon { + transform: translateX(-2.6rem) translateY(-.3rem); + width: 5%; + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-21px); + overflow: hidden; + } + + .terms { + font-size: 1.4rem; + font-weight: 300; + float: left; + margin-right: 3rem; + padding-bottom: 0; + transform: translateY(1px); + } + + .footer-first-col{ + text-align: center; + } + + .footer-second-col{ + text-align: center; + margin-top: 3rem; + } + + .footer-third-col{ + text-align: center; + margin-top: 3rem; + } + + .text-item-2-modified { + font-size: 1.4rem; + font-weight: 300; + width: 55%; + margin: auto; + } + + .whats-app { + margin-top: 8rem; + text-align: center; + } + + .border-top { + border-top: 1px solid #fff; + margin-top: 2rem; + } + + #footer-section { + background: rgba(0, 17, 35, 1); + color: #fff; + padding: 10rem 0; + padding-bottom: 0; + } + + /* about section */ + + #about-banner { + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 65vh; + width: auto; + background-position: center; + } + + .about-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 100%; + text-align: center; + margin: auto; + } + + .about-breadcrumb ul{ + padding-left: 0; + } + + .about-header-part{ + transform: translateY(29rem); + } + + .about-header-text{ + width: 100%; + } + + .about-title-text { + font-size: 1.4rem; + font-weight: 300; + color: #0079FF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(229, 245, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .about-title{ + text-align: center; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 100%; + text-align: center; + } + + .right-first-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + text-align: center; + margin-top: 3rem; + } + + .right-second-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2.5-rem; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .person-1{ + margin-top: 10rem; + } + + .person-2{ + margin-top: 10rem; + } + + .person-3{ + margin-top: 10rem; + } + + /* about section */ + + + /* reliability page */ + + + #reliability-banner { + background-image: url(../image/reliability-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 65vh; + width: auto; + background-position: center; + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 19rem); + } + + + .relibility-title{ + font-size: 1.4rem; + font-weight: 300; + color: #FC8F66; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(255, 236, 229, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .relibility-title-text{ + margin: auto; + text-align: center; + } + + .relibility-header-text{ + width: 100%; + } + + .relibility-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 78%; + margin: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 53px; + } + + .relibility-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 100%; + text-align: center; + margin: auto; + } + + .relibility-header-part{ + transform: translateY(30rem); + } + + .text-background{ + transform: translateX(-2px) translateY(-60px); + width: 72%; + } + + .orange-signal { + transform: translateX(36px) translateY(-89px); + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + transform: translateX(3rem) translateY(-437px); + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + transform: translateX(14px) translateY(-281px); + opacity: 0.5; + overflow: hidden; + } + + .parple-signal { + transform: translateX(2px) translateY(-6rem); + opacity: 0.5; + overflow: hidden; + } + + .signal-control-1 { + transform: translateX(34rem) translateY(29rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + width: 45%; + } + + .signal-control-2 { + transform: translateX(-2rem) translateY(-33px); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; + width: 61%; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: -30rem; + } + + .innovative-title { + font-size: 2.6rem; + font-weight: 600; + width: 80%; + text-align: center; + margin: auto; + } + + /* reliability page */ + + + /* prices page start */ + + + #priceing-banner { + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 65vh; + width: auto; + background-position: center; + } + + .card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; + background-position: center; + } + + .prices-header-part{ + transform: translateY(33rem); + } + + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -72%); + color: #fff; + width: 100%; + } + + + .prices-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .prices-title-text{ + margin: auto; + text-align: center; + } + + .card-body { + padding: 4rem; + } + + .card-2{ + margin-top: 5rem; + } + + .card-3{ + margin-top: 5rem; + } + + .card-4{ + margin-top: 5rem; + } + + .include-text-4 { + font-size: 2rem; + font-weight: 300; + color: #fff; + } + + .include-text-width-4 { + width: 75%; + font-size: 2rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 3px; + } + + /* prices end */ + +} + +@media screen and (min-width:480px) and (max-width:575px){ + html{ + font-size: 50.5%; + } + + .active .nav-link::after{ + width: 0; + } + + .container{ + padding: 0 5rem; + } + + .hero-down-button { + transition: all .3s ease-in-out; + position: relative; + top: -4rem; + text-decoration: none; + } + + .hero-heading-primary { + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 80%; + margin: auto; + text-align: center; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 80%; + margin-top: 1.6rem; + margin-bottom: 0; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-paragraph { + font-size: 1.6rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 87%; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-btn { + margin-top: 3.4rem; + text-align: center; + } + + .down-img { + width: 7%; + margin-top: 13rem; + } + + .hero-right-image { + width: 110%; + height: auto; + margin-top: 7rem; + } + + #catalyst-section { + padding: 10rem 0; + margin-top: -13rem; + } + + .catalyst-title { + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + text-align: center; + margin: auto; + } + + .catalyst-title-button{ + display: grid; + margin: auto; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + text-align: center; + width: 92%; + margin: auto; + + margin-top: 2rem; + } + + .right-heading { + font-size: 2rem; + font-weight: 600; + color: #0079FF; + text-transform: capitalize; + text-align: center; + margin-top: 3rem; + } + + .right-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; + text-align: center; + width: 70%; + margin: auto; + margin-top: 2rem; + } + + .catalyst-img{ + text-align: center; + } + + .catalyst-items { + margin-top: 9rem; + transform: translateX(0); + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 97%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 90%; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -8rem; + } + + .pragmatic-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-transform: capitalize; + width: 98%; + margin: auto; + margin-top: 2.2rem; + } + + .pragmatic-card-2{ + margin-top: 5rem; + } + + .pragmatic-card-3{ + margin-top: 5rem; + } + + .performance-title { + font-size: 1.4rem; + font-weight: 300; + color: #3D00CF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(236, 222, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + margin: auto; + text-align: center; + } + + .performance-title-button{ + display: grid; + margin: auto; + } + + .pragmatic-section-subtitle { + font-weight: 300; + color: #778697; + width: 100%; + margin: auto; + margin-top: auto; + margin-top: 2.6rem; + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + overflow-wrap: normal; + width: 90%; + margin: auto; + margin-top: 2.2rem; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 3rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + } + + #performance-section { + padding: 10rem 0; + margin-top: -10rem; + } + + .performance-right-paragraph { + font-size: 2rem; + font-weight: 300; + color: #001123; + text-align: center; + margin-top: 1rem; + } + + .performance-button { + margin-top: 2.2rem; + text-align: center; + } + + .left-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + margin-top: 4rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-content { + margin-top: 5rem; + } + + .right-card-content-1 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + margin-top: 4rem; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .title-bottom-text { + font-size: 2.6rem; + color: #001123; + text-decoration: underline; + width: 100%; + margin: auto; + margin-top: auto; + margin-top: 4.7rem; + } + + .title-bottom-button { + margin-top: 2rem; + } + + .freedom-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 88%; + margin: auto; + margin-top: 3rem; + } + + .novit-content{ + transform: translateY(-27px); + } + + #novit-section { + padding-top: 28rem; + } + + .novit-title-button{ + margin-top: 3rem; + } + + .novit-heading{ + width: 100%; + } + + .novit-background { + background-image: url(../image/mobile-responsive.png); + background-size: 100%; + background-repeat: no-repeat; + height: 76rem; + width: auto; + border-radius: 2.6rem; + background-position-y: center; + padding: 15rem; + text-align: center; + } + + .novit-text { + font-size: 26px; + font-weight: 600; + color: #fff; + width: 100%; + line-height: 39px; + margin-bottom: 0; + margin-top: 1rem; + } + + .novit-spaceing { + margin-bottom: 25rem; + margin-top: -11rem; + } + + #freedom-section { + padding: 12rem 0; + margin-top: -9rem; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 70%; + text-align: center; + margin: auto; + } + + .email-left-heading { + font-size: 3rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 85%; + text-align: center; + margin: auto; + transform: translateY(-5rem); + } + + .email-contents { + position: absolute; + top: 50%; + left: 50%; + width: 79%; + transform: translate(-34%, -38%); + } + + #email-section { + background: rgba(0, 121, 255, 1); + padding: 12rem 0; + margin-top: -11rem; + } + + .email-icon { + transform: translateX(-3.4rem) translateY(-.5rem); + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-21px); + overflow: hidden; + } + + .terms { + font-size: 1.4rem; + font-weight: 300; + float: left; + margin-right: 3rem; + padding-bottom: 0; + transform: translateY(1px); + } + + .footer-first-col{ + text-align: center; + } + + .footer-second-col{ + text-align: center; + margin-top: 3rem; + } + + .footer-third-col{ + text-align: center; + margin-top: 3rem; + } + + .text-item-2-modified { + font-size: 1.4rem; + font-weight: 300; + width: 55%; + margin: auto; + } + + .whats-app { + margin-top: 8rem; + text-align: center; + } + + .border-top { + border-top: 1px solid #fff; + margin-top: 2rem; + } + + .footer-bottom-text { + margin-top: -2.8rem; + transform: translateX(25rem) translateY(-2px); + } + + #footer-section { + background: rgba(0, 17, 35, 1); + color: #fff; + padding: 10rem 0; + padding-bottom: 0; + } + + /* about section */ + + #about-banner { + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 55vh; + width: auto; + background-position: center; + } + + .about-header-title { + font-size: 4rem; + font-weight: bold; + color: #fff; + width: 90%; + text-align: center; + margin: auto; + } + + .about-breadcrumb ul{ + padding-left: 0; + } + + .about-header-part{ + transform: translateY(27rem); + } + + .about-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .about-title-text { + font-size: 1.4rem; + font-weight: 300; + color: #0079FF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(229, 245, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .about-title{ + text-align: center; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 100%; + text-align: center; + } + + .right-first-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + text-align: center; + margin-top: 3rem; + } + + .right-second-text { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2.5-rem; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .person-1{ + margin-top: 10rem; + } + + .person-2{ + margin-top: 10rem; + } + + .person-3{ + margin-top: 10rem; + } + + /* about section */ + + /* reliability page */ + + + #reliability-banner { + background-image: url(../image/reliability-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 55vh; + width: auto; + background-position: center; + } + + .globe-background { + background-image: url(../image/glove-img.png); + background-size: 100%; + background-repeat: no-repeat; + margin-top: 7rem; + width: 100%; + } + + .relibility-header-part { + transform: translateY(27rem); + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 18rem); + } + + .relibility-header-text{ + width: 100%; + } + + .relibility-title{ + font-size: 1.4rem; + font-weight: 300; + color: #FC8F66; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(255, 236, 229, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .text-background{ + display: none; + } + + .relibility-title-text{ + margin: auto; + text-align: center; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: -33rem; + } + + .block-1{ + display: block; + text-align: right; + transform: translateX(83px) translateY(3px); + } + + .block-2{ + display: block; + text-align: right !important; + transform: translateX(-13px) translateY(-222px); + } + + .block-3{ + display: block; + text-align: left; + transform: translateX(3px) translateY(-226px); + } + + .block-4{ + display: block; + text-align: left !important; + transform: translateX(19px) translateY(6px); + } + + .orange-signal { + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + opacity: 0.5; + overflow: hidden; + } + + .parple-signal { + transform: translateX(14px) translateY(159px); + opacity: 0.5; + overflow: hidden; + } + + .signal-control-1 { + transform: translateX(18rem) translateY(30.1rem); + display: block; + overflow: hidden; + transition: all .80s ease-in-out; + margin: auto; + width: 44%; + text-align: right !important; + } + + .signal-control-2 { + transform: translateX(-14rem) translateY(-39px); + display: block; + overflow: hidden; + transition: all .80s ease-in-out; + margin: auto; + width: 59%; + } + + .relibility-heading { + font-size: 3.2rem; + font-weight: 600; + color: #001123; + width: 100%; + margin: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 46px; + } + + .innovative-title { + font-size: 2.6rem; + font-weight: 600; + width: 96%; + text-align: center; + margin: auto; + } + + /* reliability page */ + + + /* prices page start */ + + + #priceing-banner { + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 55vh; + width: auto; + background-position: center; + } + + .prices-header-part{ + transform: translateY(30rem); + } + + .prices-header-text{ + width: 100%; + } + + .card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; + background-position: center; + } + + .card-body { + padding: 4rem; + } + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -71%); + color: #fff; + } + + .prices-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .prices-title-text{ + margin: auto; + text-align: center; + } + + .email-icon { + transform: translateX(-2.6rem) translateY(-.3rem); + width: 5%; + } + + + .card-2{ + margin-top: 5rem; + } + + .card-3{ + margin-top: 5rem; + } + + .card-4{ + margin-top: 5rem; + } + + /* prices end */ + + +} + +@media screen and (min-width:320px) and (max-width:479px){ + html{ + font-size: 40.5%; + } + + .container{ + padding: 0 3rem; + } + + + .active .nav-link::after{ + width: 0; + } + + + .hero-heading-primary { + font-size: 4rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 100%; + margin: auto; + text-align: center; + } + + .hero-heading-secondary { + font-size: 2rem; + color: #001123; + font-weight: 300; + width: 100%; + margin-top: 1.6rem; + margin-bottom: 0; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2rem; + margin-bottom: 0; + width: 92%; + text-align: center; + margin: auto; + margin-top: 2rem; + } + + .hero-btn { + margin-top: 3.4rem; + text-align: center; + } + + .hero-right-image { + width: 110%; + height: auto; + margin-top: 7rem; + } + + .down-img{ + width: 7%; + margin-top: 13rem; + } + + #catalyst-section { + padding: 10rem 0; + margin-top: -18rem; + } + + .catalyst-title { + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + text-align: center; + margin: auto; + } + + .catalyst-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + text-align: center; + width: 100%; + margin: auto; + margin-top: 2rem; + } + + .right-heading { + font-size: 2rem; + font-weight: 600; + color: #0079FF; + text-transform: capitalize; + text-align: center; + margin-top: 2rem; + } + + .right-paragraph { + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; + text-align: center; + width: 100%; + margin: auto; + margin-top: 2rem; + } + + .catalyst-img{ + text-align: center; + } + + .catalyst-items { + margin-top: 9rem; + transform: translateX(0); + } + + .catalyst-title-button{ + display: grid; + margin: auto; + } + + .catalyst-paragraph-1 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 97%; + } + + .catalyst-paragraph-2 { + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; + width: 100%; + } + + #pragmatic-section { + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -8rem; + } + + .pragmatic-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-transform: capitalize; + width: 97%; + margin: auto; + margin-top: auto; + margin-top: 2.2rem; + } + + .pragmatic-card-icon-1{ + width: 20%; + height: auto; + } + + .pragmatic-card-icon-2{ + width: 20%; + height: auto; + } + + .pragmatic-card-icon-3{ + width: 20%; + height: auto; + } + + .pragmatic-card-2{ + margin-top: 5rem; + } + + .pragmatic-card-3{ + margin-top: 5rem; + } + + .performance-title { + font-size: 1.4rem; + font-weight: 300; + color: #31B0FA; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(229, 245, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + margin: auto; + } + + .pragmatic-section-subtitle { + font-weight: 300; + color: #778697; + width: 92%; + margin: auto; + margin-top: auto; + margin-top: 2.6rem; + } + + #performance-section { + padding: 10rem 0; + margin-top: -8rem; + } + + .performance-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; + text-align: center; + } + + .pragmatic-card-heading-1 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + } + + .pragmatic-card-heading-2 { + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 3rem; + width: 95%; + } + + .pragmatic-card-heading-3 { + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; + } + + .performance-right-paragraph { + font-size: 2rem; + font-weight: 300; + color: #001123; + text-align: center; + margin-top: 2rem; + } + + .performance-button { + margin-top: 2.2rem; + text-align: center; + } + + .left-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + margin-top: 4rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-card-content-1 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .right-content { + margin-top: 6rem; + } + + .right-card-content-2 { + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + margin-top: 4rem; + backface-visibility: hidden; + margin-top: 2.5rem; + } + + .performance-title{ + font-size: 1.4rem; + font-weight: 300; + color: #3D00CF; + display: inline-block; + padding: .8rem 1.6rem; + background: #ECDEFF; + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .performance-title-button{ + display: grid; + margin: auto; + } + + + .title-content-2{ + margin-bottom: 2rem !important; + } + + .title-bottom-text { + font-size: 2.4rem; + color: #001123; + text-decoration: underline; + width: 100%; + margin: auto; + margin-top: auto; + margin-top: 4.7rem; + } + + .title-bottom-button { + margin-top: 4rem; + } + + #freedom-section{ + margin-bottom: 1rem; + } + + .freedom-contents{ + margin-top: -1rem; + } + + .freedom-section-title { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 100%; + margin: auto; + margin-top: auto; + margin-top: 3rem; + } + + .button-novit:link, .button-novit:visited { + display: inline-block; + padding: 1.4rem 3.2rem; + font-size: 1.4rem; + font-weight: 300; + border-radius: 10rem; + cursor: pointer; + transition: all .3s; + outline: none; + border: 1px solid #fff; + text-decoration: none; + } + + #novit-section { + margin-top: 14rem; + } + + .novit-title-button{ + margin-top: 3rem; + } + + .novit-background { + background-image: url(../image/mobile-responsive.png); + background-size: 100%; + background-repeat: no-repeat; + height: 60rem; + width: 100%; + border-radius: 2.6rem; + background-position-y: center; + padding: 11rem; + text-align: center; + } + + .novit-heading{ + width: 100%; + } + + .novit-content{ + margin-top: -3rem; + } + + + .novit-text { + font-size: 17px; + font-weight: 600; + color: #fff; + width: 100%; + line-height: 32px; + margin-top: 15px; + } + + .novit-spaceing { + margin-top: 3rem; + } + + .title-content-2{ + margin-bottom: 1rem; + } + + #freedom-section { + padding: 4rem 0; + padding-bottom: 0; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 70%; + text-align: center; + margin: auto; + } + + .email-icon{ + width: 5%; + } + + .email-left-heading { + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; + width: 100%; + text-align: center; + margin: auto; + transform: translateY(-5rem); + } + + .email-contents { + position: absolute; + top: 50%; + left: 50%; + width: 93%; + transform: translate(-34%, -42%); + } + + #email-section { + background: rgba(0, 121, 255, 1); + padding: 12rem 0; + margin-top: 18rem !important; + } + + .email-icon { + transform: translateX(-4rem) translateY(-0.5rem); + } + + .privacy { + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-21px); + overflow: hidden; + } + + .terms { + font-size: 1.4rem; + font-weight: 300; + float: left; + margin-right: 3rem; + padding-bottom: 0; + transform: translateY(1px); + } + + .footer-first-col{ + text-align: center; + } + + .footer-second-col{ + text-align: center; + margin-top: 3rem; + } + + .footer-third-col{ + text-align: center; + margin-top: 3rem; + } + + .text-item-2-modified { + font-size: 1.4rem; + font-weight: 300; + width: 55%; + margin: auto; + } + + .whats-app { + margin-top: 8rem; + text-align: center; + } + + .border-top { + border-top: 1px solid #fff; + margin-top: 2rem; + } + + .footer-bottom-text { + margin-top: -2.8rem; + transform: translateX(27rem) translateY(-1px); + } + + #footer-section { + background: rgba(0, 17, 35, 1); + color: #fff; + padding: 10rem 0; + padding-bottom: 0; + } + + /* about section */ + + #about-banner { + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 45vh; + width: auto; + background-position: center; + } + + .about-header-title { + font-size: 4.6rem; + font-weight: bold; + color: #fff; + text-align: center; + margin: auto; + } + + .about-header-text{ + width: 100%; + } + + .about-breadcrumb ul{ + padding-left: 0; + } + + .about-header-part{ + transform: translateY(26rem); + } + + .about-title-text { + font-size: 1.6rem; + font-weight: 300; + color: #0079FF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(229, 245, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .about-title{ + text-align: center; + } + + .about-left-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 100%; + text-align: center; + } + + .right-first-text { + font-size: 2rem; + font-weight: 300; + color: #778697; + text-align: center; + margin-top: 3rem; + } + + .right-second-text { + font-size: 2rem; + font-weight: 300; + color: #778697; + margin-top: 2.5-rem; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .about-left-title-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-align: center; + } + + .person-1{ + margin-top: 10rem; + } + + .person-2{ + margin-top: 10rem; + } + + .person-3{ + margin-top: 10rem; + } + + + + /* about section */ + + /* reliability page */ + + + #reliability-banner { + background-image: url(../image/reliability-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 45vh; + width: auto; + background-position: center; + } + + .globe-background { + background-image: url(../image/glove-img.png); + background-size: 100%; + background-repeat: no-repeat; + margin-top: 7rem; + width: 100%; + } + + + .relibility-header-part { + transform: translateY(27rem); + } + + .relibility-header-text{ + width: 100%; + } + + .relibility-breadcrumb { + position: absolute; + top: 50%; + left: 48%; + transform: translate(-50%, 17rem); + } + + .relibility-title{ + font-size: 1.4rem; + font-weight: 300; + color: #FC8F66; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(255, 236, 229, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .text-background{ + display: none; + } + + .relibility-title-text{ + margin: auto; + text-align: center; + } + + + .relibility-heading { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 90%; + margin: auto; + margin-top: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 39px; + } + + .relibility-title{ + font-size: 1.4rem; + font-weight: 300; + color: #FC8F66; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(255, 236, 229, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .innovative-title { + font-size: 2.6rem; + font-weight: 600; + width: 87%; + text-align: center; + margin: auto; + } + + .text-background{ + display: none; + } + + .relibility-title-text{ + margin: auto; + text-align: center; + } + + #innovative-section { + margin-bottom: 25rem; + margin-top: -31rem; + } + + .block-1{ + display: block; + text-align: right; + transform: translateX(57px) translateY(2px); + } + + .block-2{ + display: block; + text-align: right !important; + transform: translateX(38px) translateY(-263px); + } + + .block-3{ + display: block; + text-align: left; + transform: translateX(-1px) translateY(-254px); + } + + .block-4{ + display: block; + text-align: left !important; + transform: translateX(-1px) translateY(-29px); + } + + .orange-signal { + opacity: 0.5; + overflow: hidden; + } + + .green-signal { + opacity: 0.5; + overflow: hidden; + } + + .blue-signal { + opacity: 0.5; + overflow: hidden; + } + + .parple-signal { + transform: translateX(-33px) translateY(153px); + opacity: 0.5; + overflow: hidden; + } + + .signal-control-1 { + transform: translateX(1rem) translateY(44rem); + display: block; + overflow: hidden; + transition: all .80s ease-in-out; + margin: auto; + width: 55%; + text-align: right !important; + } + + .signal-control-2 { + transform: translateX(1rem) translateY(-70px); + display: block; + overflow: hidden; + transition: all .80s ease-in-out; + margin: auto; + width: 77%; + } + + /* reliability page */ + + /* prices page start */ + + + #priceing-banner { + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 45vh; + width: auto; + background-position: center; + } + + .card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; + background-position: center; + } + + .prices-header-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + width: 100%; + } + + .prices-breadcrumb ul{ + padding-left: 0; + } + + .prices-header-title { + font-size: 4rem; + font-weight: bold; + color: #fff; + text-align: center; + margin: auto; + } + + + .prices-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + } + + .prices-breadcrumb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 17rem); + } + + .prices-header-part{ + transform: translateY(26rem); + } + + .prices-title-text{ + margin: auto; + text-align: center; + } + + .card-body { + padding: 4rem; + } + + .card-2{ + margin-top: 5rem; + } + + .card-3{ + margin-top: 5rem; + } + + .card-4{ + margin-top: 5rem; + } + + .email-icon { + transform: translateX(-3.8rem) translateY(-.3rem); + width: 5%; + } + + /* prices end */ + +} + + + +/* Container Responsive */ + +@media screen and (min-width: 1400px) { + .container { + max-width: 1320px !important; + } + } + + @media screen and (min-width: 1600px) { + .container { + max-width: 1500px !important; + } + } + + @media screen and (min-width: 1800px) { + .container { + max-width: 1680px !important; + } + } + + @media screen and (min-width: 2000px) { + .container { + max-width: 1880px !important; + } + } diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..d915a87 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,2744 @@ +*, +*::after, +*::before{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + text-rendering: optimizeSpeed; + overflow-x: hidden; + font-family: Manrope; +} + +html{ + font-size: 62.5%; + scroll-behavior: smooth; +} + +.clear-fix::after{ + content: ""; + clear: both; + display: block; +} + +@font-face { + font-family: Manrope; + src: url('../fonts/Manrope-ExtraBold.woff'); + font-weight: 700; + font-display: block; +} + +@font-face { + font-family: Manrope; + src: url('../fonts/Manrope-Bold.woff'); + font-weight: 600; + font-display: block; +} + +@font-face { + font-family: Manrope; + src: url('../fonts/Manrope-SemiBold.woff'); + font-weight: 500; + font-display: block; +} + +@font-face { + font-family: Manrope; + src: url('../fonts/Manrope-Medium.woff'); + font-weight: 400; + font-display: block; +} + +@font-face { + font-family: Manrope; + src: url('../fonts/Manrope-Regular.woff'); + font-weight: 300; + font-display: block; +} + + +/* reuse components */ + +/* btn effect 1 */ + +.btn:link, +.btn:visited{ + display: inline-block; + padding: 1.4rem 3.2rem; + font-size: 1.4rem; + font-weight: 300; + border-radius: 10rem; + text-transform: capitalize; + cursor: pointer; + transition: all .3s; + position: relative; + outline: none; + text-decoration: none; +} + +.btn:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); + color: #fff; +} + +.btn:active{ + transform: translateY(0); + color: #fff; +} + +.btn::after{ + content: ""; + display: inline-block; + border-radius: 10rem; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + transition: all .3s ease-in-out; +} + +.btn-gradient-blue{ + background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); + color: #fff; +} + +.btn-gradient-blue::after{ + background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); + +} + +.btn:hover::after{ + transform: scaleX(1.4) scaleY(1.6); + opacity: 0; +} + +/* about btn */ + +.about-btn:link, +.about-btn:visited{ + display: inline-block; + padding: 1.4rem 3.2rem; + font-size: 1.4rem; + font-weight: 300; + border-radius: 10rem; + text-transform: capitalize; + cursor: pointer; + transition: all .3s; + position: relative; + outline: none; + text-decoration: none; + color: #000; +} + +.about-btn:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); + color: rgba(0, 121, 255, 1); +} + +.about-btn:active{ + transform: translateY(0); + color: rgba(0, 121, 255, 1); +} + +.about-btn::after{ + content: ""; + display: inline-block; + border-radius: 10rem; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + transition: all .3s ease-in-out; +} + +.about-btn-white{ + background: #fff; + color: #fff; +} + +.about-btn-white::after{ + background: #fff; + +} + +.about-btn:hover::after{ + transform: scaleX(1.4) scaleY(1.6); + opacity: 0; +} + +/* btn effect 1 */ + +/* btn effect 2 */ + +.button:link, +.button:visited{ + display: inline-block; + padding: 1.4rem 3.2rem; + font-size: 1.4rem; + font-weight: 300; + border-radius: 10rem; + text-transform: capitalize; + cursor: pointer; + transition: all .3s; + outline: none; + border: 1px solid #0079FF; + text-decoration: none; +} + +.button:hover{ + transform: translateY(-.5rem); + box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); + border: 1px solid transparent; + background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); + color: #fff; +} + +.button:active{ + transform: translateY(0); + box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); +} + +/* novit button */ + +.button-novit:link, +.button-novit:visited{ + display: inline-block; + padding: 1.4rem 3.2rem; + font-size: 1.4rem; + font-weight: 300; + border-radius: 10rem; + text-transform: capitalize; + cursor: pointer; + transition: all .3s; + outline: none; + border: 1px solid #ffffff; + text-decoration: none; + color: #fff; +} + + +.button-novit:hover{ + transform: translateY(-.5rem); + box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); + border: 1px solid #fff; + background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); + color: #fff; +} + +.button-novit:active{ + transform: translateY(0); + box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); +} + +/* btn effect 2 */ + + +/* reuse components */ + + +/* navigation start */ + +.navbar-toggler{ + background: linear-gradient( to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); + outline: none; + padding: 4px; +} + +.navbar-toggler:focus{ + outline: none; + outline-offset: 1rem; +} + +.bar-1{ + width: 16px; + height: 3px; + background: #fff; +} + +.bar-2{ + width: 25px; + height: 3px; + background: #fff; + margin: 6px 0; +} + +.bar-3{ + width: 20px; + height: 3px; + background: #fff; +} + +.navbar .nav-item:not(:last-child){ + margin-right: 4rem; +} + +.navbar .nav-link{ + text-decoration: none; + text-transform: capitalize; + font-size: 1.4rem; + color: rgba(0, 17, 35, 1); + font-weight: 300; + transition: all .5s; +} + +.navbar-toggler{ + transition: all .5s ease-in-out; + +} + +.navbar-toggler:hover{ + transform: rotateY(180deg); +} + +.active .nav-link{ + color: #333; +} + +.active .nav-link::after{ + content: ""; + width: 2.5rem; + height: .4rem; + display: block; + background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); + margin: auto; + border-radius: 100px; + position: relative; + top: 4px; + left: 0; + backface-visibility: hidden; +} + + +.active .about-nav::after{ + content: ""; + width: 2.5rem; + height: .4rem; + display: block; + background: #fff; + margin: auto; + border-radius: 100px; + position: relative; + top: 4px; + left: 0; + backface-visibility: hidden; +} + +.active .reliability-nav::after{ + content: ""; + width: 2.5rem; + height: .4rem; + display: block; + background: #fff; + margin: auto; + border-radius: 100px; + position: relative; + top: 4px; + left: 0; + backface-visibility: hidden; +} + +.active .prices-nav::after{ + content: ""; + width: 2.5rem; + height: .4rem; + display: block; + background: #fff; + margin: auto; + border-radius: 100px; + position: relative; + top: 4px; + left: 0; + backface-visibility: hidden; +} + + +/* navigation end */ + +/* header section start */ + +#header-section{ + padding: 6rem 0; +} + +.hero-right-image { + width: 124%; + height: auto; +} + +.hero-texts{ + margin-top: 9rem; +} + +.hero-heading-primary{ + font-size: 4.6rem; + color: #0079FF; + font-weight: 600; + text-transform: capitalize; + width: 65%; +} + +.hero-heading-secondary{ + font-size: 2rem; + color: #001123; + font-weight: 300; + text-transform: capitalize; + width: 74%; + margin-top: 1.6rem; + margin-bottom: 0; +} + +.hero-paragraph{ + font-size: 1.4rem; + font-weight: 300; + color: #778697; + text-transform: capitalize; + margin-top: 2rem; + margin-bottom: 0; + width: 74%; +} + +.scroll-down{ + font-size: 1.4rem; + font-weight: 300; + color: #0079FF; + margin-top: .5rem; +} + +.hero-btn{ + margin-top: 1.4rem; +} + +.hero-down-button{ + transition: all .3s ease-in-out; + position: relative; + top: -8rem; + text-decoration: none; +} + +.down-link-text{ + text-decoration: none; +} + +.hero-down-button:hover{ + transform: translateY(-.5rem); +} + + +/* header section end */ + +/* catalyst section start */ + +#catalyst-section{ + padding: 10rem 0; + margin-top: -9rem; +} + +.catalyst-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; +} + +.catalyst-title:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); +} + +.catalyst-title:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); +} + +.catalyst-left-heading{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; +} + +.right-heading{ + font-size: 2rem; + font-weight: 600; + color: #0079FF; + text-transform: capitalize; +} + +.right-paragraph{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 1.4rem; +} + +/* second part */ + +.margin-second-part{ + margin-top: 10rem; +} + +.catalyst-items{ + transform: translateX(4rem); +} + + +.catalyst-icon-1{ + margin-right: 2rem; + background: rgba(242, 246, 249, 1); + padding: 1.3rem; + border-radius: 2rem; + border: 1px solid #D8EAFF; + margin-bottom: 6rem; +} + +.catalyst-icon-2{ + margin-right: 2rem; + background: rgba(242, 246, 249, 1); + padding: 1.3rem; + border-radius: 2rem; + border: 1px solid #D8EAFF; + margin-bottom: 6rem; +} + +.catalyst-icon-3{ + margin-right: 2rem; + background: rgba(242, 246, 249, 1); + padding: 1.3rem; + border-radius: 2rem; + border: 1px solid #D8EAFF; +} + +.catalyst-icon-heading-1{ + font-size: 2rem; + font-weight: 600; + color: #001123; +} + +.catalyst-icon-heading-2{ + font-size: 2rem; + font-weight: 600; + color: #001123; +} + +.catalyst-icon-heading-3{ + font-size: 2rem; + font-weight: 600; + color: #001123; +} + + +.catalyst-paragraph-1{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; +} + +.catalyst-paragraph-2{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; +} + +.catalyst-paragraph-3{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: 1rem; + margin-bottom: 0; +} + + +.catalyst-button{ + margin-top: 2.8rem; +} + + +/* second part */ + +/* catalyst section end */ + +/* pragmatic section start */ + + +#pragmatic-section{ + background: rgba(251, 252, 254, 1); + padding: 10rem 0; + margin-top: -5rem; +} + +.cards{ + width: 98%; + margin: auto; + margin-top: 9rem; +} + +.pragmatic-title{ + font-size: 1.4rem; + font-weight: 300; + color: #31B0FA; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(229, 245, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; +} + +.pragmatic-title:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); +} + +.pragmatic-title:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); +} + +.pragmatic-section-title{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; + text-transform: capitalize; + width: 65%; + margin: auto; + margin-top: 2.2rem; +} + +.pragmatic-section-subtitle{ + font-size: 2rem; + font-weight: 300; + color: #778697; + width: 70%; + margin: auto; + margin-top: 2.6rem; +} + +.pragmatic-card-1{ + background: #fff; + height: 35rem; + width: auto; + border-radius: 15px; + position: relative; + padding: 3rem; + border: none; + transition: all .3s ease-in-out; +} + +.pragmatic-card-2{ + background: #fff; + height: 35rem; + width: auto; + border-radius: 15px; + position: relative; + padding: 3rem; + border: none; + transition: all .3s ease-in-out; +} + +.pragmatic-card-3{ + background: #fff; + height: 35rem; + width: auto; + border-radius: 15px; + position: relative; + padding: 3rem; + border: none; + transition: all .3s ease-in-out; +} + +.pragmatic-card-1:hover{ + transform: translateY(-3rem); + box-shadow: 0 2rem 4rem rgba(207, 207, 207, .9); +} + +.pragmatic-card-2:hover{ + transform: translateY(-3rem); + box-shadow: 0 2rem 4rem rgba(207, 207, 207, .9); +} + +.pragmatic-card-3:hover{ + transform: translateY(-3rem); + box-shadow: 0 2rem 4rem rgba(207, 207, 207, .9); +} + +.pragmatic-card-heading-1{ + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 1rem; +} + +.pragmatic-card-heading-2{ + font-size: 2rem; + font-weight: 600; + color: #001123; + line-height: 3rem; + margin-top: 1rem; + width: 95%; +} + +.pragmatic-card-heading-3{ + font-size: 2rem; + font-weight: 600; + color: #001123; + margin-top: 1rem; +} + +.pragmatic-card-paragraph-1{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +.pragmatic-card-paragraph-2{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +.pragmatic-card-paragraph-3{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +.pragmatic-button{ + margin-top: 5.6rem; +} + +/* pragmatic section end */ + +/* performance section start */ + +#performance-section{ + padding: 10rem 0; + margin-top: -5rem; +} + +.performance-title{ + font-size: 1.4rem; + font-weight: 300; + color: #3D00CF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(236, 222, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; +} + +.performance-title:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); +} + + +.performance-title:active{ + transform: translateY(0); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); +} + + +.performance-left-heading{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2.2rem; +} + +.performance-right-paragraph{ + font-size: 2rem; + font-weight: 300; + color: #001123; +} + +.performance-button{ + margin-top: 2.2rem; +} + +.left-content{ + margin-top: 9.9rem; +} + +/* left part calculation */ + +.left-calculation-1{ + border-bottom: 2px solid transparent; + width: 85%; + transition: all .3s ease-in-out; + cursor: pointer; + border-bottom: 1px solid #DCDCDC; +} + +.left-calculation-1:hover{ + border-bottom: 1px solid rgba(0, 207, 132, 1); +} + +.left-calc-heading-1{ + font-size: 4rem; + font-weight: 300; + color: #00CF84; +} + +.left-calc-text-1{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: .4rem; +} + +.left-calculation-2{ + margin-top: 5rem; + border-bottom: 2px solid transparent; + width: 85%; + transition: all .3s ease-in-out; + cursor: pointer; + border-bottom: 1px solid #DCDCDC; +} + +.left-calculation-2:hover{ + border-bottom: 1px solid rgba(0, 207, 132, 1); +} + +.left-calc-heading-2{ + font-size: 4rem; + font-weight: 300; + color: #00CF84; +} + +.left-calc-text-2{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: .4rem; + width: 90%; +} + +/* right calculation part */ + +.right-content{ + margin-top: 10rem; +} + +.right-percent-1{ + border-bottom: 2px solid transparent; + transition: all .3s ease-in-out; + border-bottom: 1px solid #DCDCDC; + transition: all .3s ease-in-out; + cursor: pointer; +} + +.right-percent-1:hover{ + border-bottom: 1px solid rgba(0, 207, 132, 1); +} + +.right-percent-heading-1{ + font-size: 4rem; + font-weight: 300; + color: #00CF84; +} + +.right-percent-text-1{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: .4rem; +} + +.right-percent-2{ + border-bottom: 2px solid transparent; + transition: all .3s ease-in-out; + border-bottom: 1px solid #DCDCDC; + cursor: pointer; +} + +.right-percent-2:hover{ + border-bottom: 1px solid rgba(0, 207, 132, 1); +} + +.right-percent-heading-2{ + font-size: 4rem; + font-weight: 300; + color: #00CF84; +} + +.right-percent-text-2{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + margin-top: .4rem; +} + +.right-percent-2{ + margin-top: 5rem; +} + + +/* performance section end */ + +/* freedom section start */ + +#freedom-section{ + padding: 10rem 0; + +} + +.freedom-background-image{ + background-image: url(../image/freedom-background.png); + height: 73rem; + width: auto; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +.freedom-section-content{ + background: rgba(251, 252, 254, 1); + border-radius: 2rem; + height: 83rem; + width: 100%; + padding: 5rem; + transform: translateY(-25rem); +} + +.freedom-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; +} + +.freedom-title:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); +} + +.freedom-title:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); +} + +.freedom-section-title{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 70%; + margin: auto; + margin-top: 3rem; +} + + +/* all cards */ + +.freedom-cards{ + margin-top: 4.7rem; +} + +/* left content-1 */ + +.left-card-content-1{ + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; +} + +.left-card-content-1:hover{ + box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); + transform: translateY(-.5rem); +} + +.left-card-heading-1{ + font-size: 2rem; + font-weight: 600; + color: #0079FF; +} + +.left-card-text-1{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +/* left content-2 */ + +.left-card-content-2{ + background: rgb(255, 255, 255); + border-radius: 1.5rem; + margin-top: 4rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; +} + +.left-card-content-2:hover{ + box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); + transform: translateY(-.5rem); +} + +.left-card-heading-2{ + font-size: 2rem; + font-weight: 600; + color: #0079FF; +} + +.left-card-text-2{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + + +/* right content-1 */ + +.right-card-content-1{ + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + backface-visibility: hidden; +} + +.right-card-content-1:hover{ + box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); + transform: translateY(-.5rem); +} + +.right-card-heading-1{ + font-size: 2rem; + font-weight: 600; + color: #0079FF; +} + +.right-card-text-1{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +/* right content-2 */ + +.right-card-content-2{ + background: rgb(255, 255, 255); + border-radius: 1.5rem; + padding: 3rem; + transition: all .3s ease-in-out; + margin-top: 4rem; + backface-visibility: hidden; +} + +.right-card-content-2:hover{ + box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); + transform: translateY(-.5rem); +} + +.right-card-heading-2{ + font-size: 2rem; + font-weight: 600; + color: #0079FF; +} + +.right-card-text-2{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + + +/* title bottom */ + +.title-bottom-text{ + font-size: 2.6rem; + color: #001123; + text-decoration: underline; + width: 70%; + margin: auto; + margin-top: 4.7rem; +} + +.title-bottom-button{ + margin-top: 3rem; +} + + +/* freedom section end */ + +/* novit section start */ + +#novit-section{ + padding-top: 8rem; +} + +.novit-background{ + background-image:url(../image/novit-background.png); + background-size: 100%; + height: 33rem; + width: 100%; + padding: 4rem; + background-repeat: no-repeat; +} + +.novit-title{ + font-size: 2rem; + font-weight: 600; + color: #00CF84; +} + +.novit-text{ + font-size: 2.6rem; + font-weight: 600; + color: #fff; + width: 40%; + line-height: 4rem; + margin-bottom: 0; + margin-top: 1rem; +} + +/* novit section end */ + +/* email part start */ + +#email-section{ + background: rgba(0, 121, 255, 1); + padding: 7rem 0; + margin-top: -13rem; +} + +#about-email-section{ + background: rgba(0, 121, 255, 1); + padding: 12rem 0; + margin-top: -13rem; +} + +#relibility-email-section{ + background: rgba(0, 121, 255, 1); + padding: 12rem 0; + margin-top: -13rem; +} + +#prices-email-section{ + background: rgba(0, 121, 255, 1); + padding: 12rem 0; + margin-top: -13rem; +} + +.form-group{ + position: relative; +} + +.email-contents{ + position: absolute; + top: 50%; + left: 50%; + width: 90%; + transform: translate(-21%, -50%); +} + +.email-left-heading{ + font-size: 3.6rem; + font-weight: bold; + color: #fff; + margin-bottom: 0; +} + +input[type="email"]{ + font-size: 1.8rem; + font-weight: 300; + background: transparent; + border: none; + border-bottom: 1px solid rgb(255, 255, 255); + border-radius: 0; + transition: all .3s ease-in-out; + color: #fff; + display: inline-block; + width: 70%; + margin-top: 1rem; +} + +.form-group input::placeholder{ + color: #fff; +} + +input[type="email"]:focus{ + outline: none; + background: transparent; + border-bottom: 1px solid rgb(255, 255, 255); +} + +.email-icon{ + transform: translateX(-2.4rem) translateY(-.5rem); +} + +.input-label{ + color: #fff; + display: block; + font-size: 1.8rem; + font-weight: 600; +} + + +/* email part end */ + +/* footer section strat */ + +#footer-section{ + background: rgba(0, 17, 35, 1); + color: #fff; + padding: 10rem 0; +} + +/* first col */ + +.footer-icons{ + margin-top: 3rem; +} + +.icon-list{ + list-style-type: none; + padding-left: 0; +} + +.list-item{ + display: inline-block; + border: 1px solid #fff; + border-radius: 50; + height: 3.5rem; + width: 3.5rem; + text-align: center; + line-height: 3.5rem; + border-radius: 50%; + transition: all .3s ease-in-out; +} + +.list-item:hover{ + transform: rotate(360deg); +} + +.list-item:not(:last-child){ + margin-right: 1.6rem; +} + +.list-link{ + text-decoration: none; + font-size: 2rem; + color: #fff; +} + +.list-link:hover{ + color: #fff; +} + +.whats-app-text{ + text-decoration: none; +} + +.whats-app{ + margin-top: 19rem; +} + +.fa-whatsapp{ + font-size: 3.1rem; + color: #fff; + margin-right: 2.3rem; +} + +.icon-right-text{ + text-decoration: none; + color: #fff; + font-size: 1.8rem; + font-weight: 300; + display: inline-block; + transform: translateY(-.5rem); +} + +/* second col */ + +.footer-heading-title-1{ + font-size: 1.8rem; + font-weight: 600; + color: #fff; +} + +.footer-text-title-1{ + margin-top: 3rem; +} + +.text-list-1{ + list-style-type: none; + padding-left: 0; +} + +.text-item-1{ + font-size: 1.4rem; + font-weight: 300; +} + +.text-item-1:not(:last-child){ + margin-bottom: 2rem; +} + +/* third col */ + +.footer-heading-title-2{ + font-size: 1.8rem; + font-weight: 600; + color: #fff; +} + +.footer-text-title-2{ + margin-top: 3rem; +} + +.text-list-2{ + list-style-type: none; + padding-left: 0; +} + +.text-item-2{ + font-size: 1.4rem; + font-weight: 300; +} + +.text-item-2:not(:last-child){ + margin-bottom: 2rem; +} + +.text-item-2-modified{ + font-size: 1.4rem; + font-weight: 300; + width: 55%; +} + +/* footer bottom */ + +.border-top{ + border-top: 1px solid #fff; + margin-top: 1rem; +} + +.copyright-texts{ + margin-top: 1.5rem; +} + +.copyright{ + font-size: 1.4rem; + font-weight: 300; +} + +.footer-bottom-text{ + margin-top: 1.5rem; +} + +.terms{ + font-size: 1.4rem; + font-weight: 300; + float: left; + margin-right: 3rem; + padding-bottom: 0; +} + +.border{ + width: 2px; + display: inline-block; + height: 20px; + background: #fff; +} + +.privacy{ + font-size: 1.4rem; + font-weight: 300; + transform: translateX(15rem) translateY(-2.2rem); + overflow: hidden; +} + +/* footer section end */ + +/*********************** about page ***********************/ + + +/* about header start */ + +#about-banner{ + background-image: url(../image/about-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 100vh; + width: auto; + background-position: center; +} + +.about-header-text{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; +} + +.about-header-title{ + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 95%; + text-align: center; + margin: auto; +} + +.about-breadcrumb{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 17rem); +} + +.about-breadcrumb-list{ + display: inline-block; +} + +.about-breadcrumb-link{ + text-decoration: none; + font-size: 2rem; + font-weight: 600; + color: #fff; +} + +.about-breadcrumb-link:hover{ + color: #fff; +} + +.fa-angle-right{ + font-size: 2rem; + margin: 0 2rem; +} + + +/* about header end */ + +/* about us section start */ + +#about-section{ + padding-bottom: 25rem; + padding-top: 10rem; +} + +.about-title-text{ + font-size: 1.4rem; + font-weight: 300; + color: #0079FF; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(229, 245, 255, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; +} + +.about-title-text:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); +} + +.about-title-text:active{ + transform: translateY(0); +} + +.about-right-part-1{ + margin-left: -.6rem; +} + +/* about 1st part */ + +.about-1st-part{ + margin-top: 3rem; +} + +.about-left-heading{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 80%; +} + +.right-first-text{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +.right-text-color{ + color: #001123; +} + +.right-second-text{ + font-size: 1.8rem; + font-weight: 300; + color: #778697; + margin-top: 2.5rem; +} + +/* about 1st part */ + +/* about 2nd part */ + +.about-left-title-2{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; +} + +.about-2nd-part{ + margin-top: 7.2rem; +} + +/* person 1 */ + +.person-image-1{ + width: 100%; + height: auto; +} + +.person-1:hover .person-bio-1{ + transform: scale(1); + background: rgba(255, 255, 255, 1); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); +} + +.person-bio-1{ + padding: 1rem; + transform: scale(0); + transition: all .3s ease-in-out; + text-align: center; +} + +.person-name-1{ + font-size: 2.5rem; + font-weight: 600; + color: #001123; +} + +.person-title-1{ + font-size: 1.8rem; + font-weight: 300; + color: #00CF84; +} + + + +/* person 1 */ + +/* person 2 */ + +.person-image-2{ + width: 100%; + height: auto; +} + +.person-2:hover .person-bio-2{ + transform: scale(1); + background: rgba(255, 255, 255, 1); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); +} + +.person-bio-2{ + padding: 1rem; + transform: scale(0); + transition: all .3s ease-in-out; + text-align: center; +} + +.person-name-2{ + font-size: 2.5rem; + font-weight: 600; + color: #001123; +} + +.person-title-2{ + font-size: 1.8rem; + font-weight: 300; + color: #00CF84; +} + +/* person 2 */ + +/* person 3 */ + +.person-image-3{ + width: 100%; + height: auto; +} + +.person-3:hover .person-bio-3{ + transform: scale(1); + background: rgba(255, 255, 255, 1); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); +} + +.person-bio-3{ + padding: 1rem; + transform: scale(0); + transition: all .3s ease-in-out; + text-align: center; +} + +.person-name-3{ + font-size: 2.5rem; + font-weight: 600; + color: #001123; +} + +.person-title-3{ + font-size: 1.8rem; + font-weight: 300; + color: #00CF84; +} + +/* person 3 */ + +/* about 2nd part */ + +/* about us section end */ + + +/********************************* prices section start ***********************/ + + +/* prices section start */ + +#prices-section{ + padding-top: 10rem; + padding-bottom: 25rem; +} + +#priceing-banner{ + background-image: url(../image/prices-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 100vh; + width: auto; + background-position: center; +} + +.prices-header-text{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; +} + +.prices-header-title{ + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 100%; + text-align: center; + margin: auto; +} + +.prices-breadcrumb{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 14rem); +} + +.prices-breadcrumb-list{ + display: inline-block; +} + +.prices-breadcrumb-link{ + text-decoration: none; + font-size: 2rem; + font-weight: 600; + color: #fff; +} + +.prices-breadcrumb-link:hover{ + color: #fff; +} + +/* section title */ + +.plans-title{ + font-size: 1.4rem; + font-weight: 300; + color: #00CF84; + display: inline-block; + padding: .8rem 1.6rem; + background: rgba(222, 255, 243, 1); + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; + margin: auto; +} + +.plans-title:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); +} + +.plans-title:active{ + transform: translateY(0); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); +} + +.priceing-title{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 3rem; +} + +.priceing-subtitle{ + font-size: 2rem; + font-weight: 300; + color: #778697; + margin-top: 2.6rem; +} + + +/* section title */ + +/* include card itmes */ + +/* include card 1 */ + +.card-1{ + border-radius: 2rem; + border: 1px solid rgba(225, 231, 236, 1); + transition: all .3s ease-in-out; +} + +/* card hover-1 */ + +.card-1:hover{ + transform: translateY(-2rem); + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); + background: rgba(0, 207, 132, 1); +} + +.card-1:hover .fa-check-circle-o{ + color: #fff; +} + +.card-1:hover .include-text-1{ + color: #fff; +} + +.card-1:hover .include-text-width-1{ + color: #fff; +} + +.card-1:hover .includes-1{ + color: #fff; +} + +.card-1:hover .sliver-title-1{ + color: #fff; +} + +.card-1:hover .price-1{ + color: #fff; +} + +.card-1:hover .month-1{ + color: #fff; +} + +.card-1:hover .include-btn-1{ + background: #fff; + color: #00CF84; +} + +/* card hover-1 */ + +.card-content{ + margin-top: 8.2rem; +} + +.card-body{ + padding: 2rem; +} + +.include-items-1{ + margin-top: 3rem; +} + +.sliver-title-1{ + font-size: 1.4rem; + font-weight: 600; + color: #00CF84; +} + +.price-1{ + font-size: 2.6rem; + font-weight: 600; + color: #001123; + margin-top: 1rem; +} + +.month-1{ + font-size: 1.4rem; + font-weight: 300; + color: #778697; +} + +.includes-1{ + font-size: 1.2rem; + font-weight: 300; + color: #001123; +} + +.check-mark-icon-1{ + margin-right: .6rem; + font-size: 1.5rem; + color: #001123; +} + +.fa-check-circle-o{ + color: #00CF84; +} + +.include-text-1{ + font-size: 1.4rem; + font-weight: 300; + color: #001123; +} + +.include-list-1{ + margin-top: 1.3rem; +} + +.include-text-width-1{ + width: 75%; + font-size: 1.4rem; + font-weight: 300; + color: #001123; + display: inline-block; +} + +.include-button-1{ + margin-top: 5.2rem; +} + + +/* include btn 1 */ + +.include-btn-1:link, +.include-btn-1:visited{ + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 1.4rem; + transition: all .3s ease-in-out; +} + +.include-btn-color-1{ + background: rgba(0, 207, 132, 1); +} + +.include-btn-1:hover{ + transform: translateY(-.5rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); + background: #fff; + border: 1px solid rgba(0, 207, 132, 1); +} + +.include-btn-1:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); +} + + +/* include btn 1 */ + +/* include card 1 */ + + +/* include card 2 */ + +.card-2{ + border-radius: 2rem; + background: rgb(255, 255, 255); + color: rgb(0, 0, 0); + transition: all .3s ease-in-out; + border: 1px solid rgba(225, 231, 236, 1); +} + +.card-2:hover{ + transform: translateY(-2rem); + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .10); +} + + +/* card hover-2 */ + +.card-2:hover{ + transform: translateY(-2rem); + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); + background: rgba(0, 121, 255, 1); +} + +.card-2:hover .fa-check-circle-o{ + color: #fff; +} + +.card-2:hover .include-text-2{ + color: #fff; +} + +.card-2:hover .include-text-width-2{ + color: #fff; +} + +.card-2:hover .includes-2{ + color: #fff; +} + +.card-2:hover .sliver-title-2{ + color: #fff; +} + +.card-2:hover .price-2{ + color: #fff; +} + +.card-2:hover .month-2{ + color: #fff; +} + +.card-2:hover .include-btn-2{ + background: #fff; + color: rgba(0, 121, 255, 1); +} + +/* card hover-2 */ + +.card-content{ + margin-top: 8.2rem; +} + +.card-body{ + padding: 2rem; +} + +.include-items-2{ + margin-top: 3rem; +} + +.sliver-title-2{ + font-size: 1.4rem; + font-weight: 600; + color: #0079FF; +} + +.price-2{ + font-size: 2.6rem; + font-weight: 600; + color: rgb(0, 0, 0); + margin-top: 1rem; +} + +.month-2{ + font-size: 1.4rem; + font-weight: 300; + color: #778697; +} + +.includes-2{ + font-size: 1.2rem; + font-weight: 300; + color: rgb(0, 0, 0); +} + +.check-mark-img-2{ + width: 1.4rem; + height: auto; + margin-right: .6rem; +} + +.include-text-2{ + font-size: 1.4rem; + font-weight: 300; + color: rgb(0, 0, 0); +} + +.include-list-2{ + margin-top: 1.3rem; +} + +.include-text-width-2{ + width: 75%; + font-size: 1.4rem; + font-weight: 300; + color: rgb(0, 0, 0); + display: inline-block; + /*! margin-top: -.2rem; */ +} + +.include-button-2{ + margin-top: 5.2rem; +} + + +/* include btn 2 */ + +.include-btn-2:link, +.include-btn-2:visited{ + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #ffffff; + font-size: 1.4rem; + transition: all .3s ease-in-out; +} + +.include-btn-color-2{ + background: rgba(0, 121, 255, 1); +} + +.include-btn-2:hover{ + transform: translateY(-.5rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); +} + +.include-btn-2:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15); +} + + +/* include btn 2 */ + +/* include card 2 */ + +/* include card 3 */ + +.card-3{ + border-radius: 2rem; + background: #fff; + border: 1px solid rgba(225, 231, 236, 1); + transition: all .3s ease-in-out; +} + +.card-3:hover{ + transform: translateY(-2rem); + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); +} + + +/* card hover-3 */ + +.card-3:hover{ + transform: translateY(-2rem); + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); + background: rgba(134, 117, 255, 1); +} + +.card-3:hover .fa-check-circle-o{ + color: #fff; +} + +.card-3:hover .include-text-3{ + color: #fff; +} + +.card-3:hover .include-text-width-3{ + color: #fff; +} + +.card-3:hover .includes-3{ + color: #fff; +} + +.card-3:hover .sliver-title-3{ + color: #fff; +} + +.card-3:hover .price-3{ + color: #fff; +} + +.card-3:hover .month-3{ + color: #fff; +} + +.card-3:hover .include-btn-3{ + background: #fff; + color: rgba(134, 117, 255, 1); +} + +/* card hover-3 */ + +.card-content{ + margin-top: 8.2rem; +} + +.card-body{ + padding: 2rem; +} + +.include-items-3{ + margin-top: 3rem; +} + +.sliver-title-3{ + font-size: 1.4rem; + font-weight: 600; + color: #8675FF; +} + +.price-3{ + font-size: 2.6rem; + font-weight: 600; + color: #000; + margin-top: 1rem; +} + +.month-3{ + font-size: 1.4rem; + font-weight: 300; + color: #778697; +} + +.includes-3{ + font-size: 1.2rem; + font-weight: 300; + color: #001123; +} + +.check-mark-img-3{ + width: 1.4rem; + height: auto; + margin-right: .6rem; +} + +.include-text-3{ + font-size: 1.4rem; + font-weight: 300; + color: #001123; +} + +.include-list-3{ + margin-top: 1.3rem; +} + +.include-text-width-3{ + width: 75%; + font-size: 1.4rem; + font-weight: 300; + color: #001123; + display: inline-block; + /*! margin-top: -.2rem; */ +} + +.include-button-3{ + margin-top: 5.2rem; +} + + +/* include btn 3 */ + +.include-btn-3:link, +.include-btn-3:visited{ + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #ffffff; + font-size: 1.4rem; + transition: all .3s ease-in-out; +} + +.include-btn-color-3{ + background: rgba(134, 117, 255, 1); +} + +.include-btn-3:hover{ + transform: translateY(-.5rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); +} + +.include-btn-3:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); +} + + +/* include btn 3 */ + +/* include card 3 */ + + +/* include card 4 */ + +.card-4{ + border-radius: 2rem; + background-image: url(../image/card-4-background.png); + background-size: cover; + background-repeat: no-repeat; + transition: all .3s ease-in-out; +} + +.card-4:hover{ + transform: translateY(-2rem); + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .10); +} + +.card-content{ + margin-top: 8.2rem; +} + +.card-body{ + padding: 2rem; +} + +.include-items-4{ + margin-top: 2rem; +} + +.sliver-title-4{ + font-size: 1.4rem; + font-weight: 600; + color: #8675FF; +} + +.price-4{ + font-size: 2.6rem; + font-weight: 600; + color: #000; + margin-top: 1rem; +} + +.month-4{ + font-size: 1.4rem; + font-weight: 300; + color: #778697; +} + +.includes-4{ + font-size: 1.2rem; + font-weight: 600; + color: #fff; +} + +.check-mark-img-4{ + width: 1.4rem; + height: auto; + margin-right: .6rem; +} + +.include-text-4{ + font-size: 1.4rem; + font-weight: 300; + color: #fff; +} + +.include-list-4{ + margin-top: 1.3rem; +} + +.include-text-width-4{ + width: 75%; + font-size: 1.4rem; + font-weight: 300; + color: #fff; + display: inline-block; + /*! margin-top: -.2rem; */ +} + +.include-button-4{ + margin-top: 5.2rem; +} + + +/* include btn 4 */ + +.include-btn-4:link, +.include-btn-4:visited{ + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #ffffff; + font-size: 1.4rem; + background: rgba(0, 121, 255, 1); + transition: all .3s ease-in-out; +} + +.include-btn-color-4{ + background: rgba(134, 117, 255, 1); +} + +.include-btn-4:hover{ + transform: translateY(-.5rem); + box-shadow: 0 1rem 2rem rgba(255, 255, 255, 0.15); +} + +.include-btn-4:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(255, 255, 255, 0.15); +} + + +/* include btn 4 */ + +/* include card 4 */ + + +/* include itmes */ + +/* prices section end */ + +/* reliability section start */ + +#reliability-banner{ + background-image: url(../image/reliability-banner.png); + background-size: cover; + background-repeat: no-repeat; + height: 100vh; + width: auto; + background-position: center; +} + + +#reliability-section{ + padding: 10rem 0; +} + + +.relibility-header-text{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; +} + +.relibility-header-title{ + font-size: 4.6rem; + font-weight: bold; + color: #fff; + width: 100%; + text-align: center; + margin: auto; +} + +.relibility-breadcrumb{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 14rem); +} + +.relibility-breadcrumb-list{ + display: inline-block; +} + +.relibility-breadcrumb-link{ + text-decoration: none; + font-size: 2rem; + font-weight: 600; + color: #fff; +} + +.relibility-breadcrumb-link:hover{ + color: #fff; +} + +.relibility-breadcrumb-link:hover{ + color: #fff; +} + +.relibility-title-text{ + text-align: center; +} + +.relibility-title{ + font-size: 1.4rem; + font-weight: 300; + color: #FC8F66; + display: inline-block; + padding: .8rem 1.6rem; + background: #FFECE5; + border-radius: 100px; + transition: all .3s ease-in-out; + cursor: pointer; +} + +.relibility-title:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); +} + +.relibility-title:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); +} + +.relibility-heading{ + font-size: 3.6rem; + font-weight: 600; + color: #001123; + width: 70%; + margin: auto; + margin-top: 3rem; + text-align: center; + z-index: 1; + line-height: 55px; +} + +.text-background{ + background-image: url(../image/text-background.png); + background-size: 100%; + background-position: center; +} + +.relibility-title:hover{ + transform: translateY(-.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); +} + +.relibility-title:active{ + transform: translateY(0); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); +} + + +.text-background{ + transform: translateX(2px) translateY(-62px); + z-index: -1; + width: 36%; +} + +.relibility-heading-main{ + position: relative; +} + +.sliver-title-1 { + font-size: 2rem; + font-weight: 600; + color: #00CF84; +} + +.price-1 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; +} + +.month-1 { + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +.includes-1 { + font-size: 2.2rem; + font-weight: 300; + color: #001123; +} + +.include-text-1 { + font-size: 2rem; + font-weight: 300; + color: #001123; +} + +.include-text-width-1 { + width: 75%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; +} + +.check-mark-icon-1 { + margin-right: .6rem; + font-size: 2.5rem; + color: #001123; +} + +.include-btn-1:link, .include-btn-1:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #fff; + font-size: 2rem; + transition: all .3s ease-in-out; +} + + +.sliver-title-2 { + font-size: 2rem; + font-weight: 600; + color: #00CF84; +} + +.price-2 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; +} + +.month-2 { + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +.includes-2 { + font-size: 2.2rem; + font-weight: 300; + color: #001123; +} + +.include-text-2 { + font-size: 2rem; + font-weight: 300; + color: #001123; +} + +.include-text-width-2 { + width: 75%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; +} + +.include-btn-2:link, .include-btn-2:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #ffffff; + font-size: 2rem; + transition: all .3s ease-in-out; +} + + +.sliver-title-3 { + font-size: 2rem; + font-weight: 600; + color: #00CF84; +} + +.price-3 { + font-size: 3.6rem; + font-weight: 600; + color: #001123; + margin-top: 2rem; +} + +.month-3 { + font-size: 1.8rem; + font-weight: 300; + color: #778697; +} + +.includes-3 { + font-size: 2.2rem; + font-weight: 300; + color: #001123; +} + +.include-text-3 { + font-size: 2rem; + font-weight: 300; + color: #001123; +} + +.include-text-width-3 { + width: 75%; + font-size: 2rem; + font-weight: 300; + color: #001123; + display: inline-block; + margin-top: 2px; +} + +.include-btn-3:link, .include-btn-3:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #ffffff; + font-size: 2rem; + transition: all .3s ease-in-out; +} + +.includes-4 { + font-size: 2rem; + font-weight: 600; + color: #fff; +} + +.include-text-4 { + font-size: 2.2rem; + font-weight: 300; + color: #fff; +} + +.include-text-width-4 { + width: 75%; + font-size: 2.2rem; + font-weight: 300; + color: #fff; + display: inline-block; + margin-top: 1px; +} + +.include-btn-4:link, .include-btn-4:visited { + text-decoration: none; + display: block; + padding: 1rem 5rem; + border-radius: 100px; + color: #ffffff; + font-size: 2rem; + background: rgba(0, 121, 255, 1); + transition: all .3s ease-in-out; +} + +/* globe structure */ + + +.globe-background{ + background-image: url(../image/glove-img.png); + background-size: 100%; + background-repeat: no-repeat; + margin-top: 7rem; +} + +.signal-control-1{ + transform: translateX(59rem) translateY(40rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; +} + +.signal-control-2{ + transform: translateX(25rem) translateY(11rem); + display: inline-block; + overflow: hidden; + transition: all .80s ease-in-out; +} + +.orange-signal{ + transform: translateX(18px) translateY(-56px); + opacity: 0.5; + overflow: hidden; +} + +.blue-signal{ + transform: translateX(1rem) translateY(-390px); + opacity: 0.5; + overflow: hidden; +} + +.green-signal{ + transform: translateX(69px) translateY(-113px); + opacity: 0.5; + overflow: hidden; +} + +.parple-signal{ + transform: translateX(-59px) translateY(159px); + opacity: 0.5; + overflow: hidden; +} + +.signal-control-1:hover ~ .both-signal-1 .orange-signal{ + opacity: 1; +} + +.signal-control-1:hover ~ .both-signal-1 .parple-signal{ + opacity: 1; +} + +.signal-control-2:hover ~ .both-signal-2 .green-signal{ + opacity: 1; +} + +.signal-control-2:hover ~ .both-signal-2 .blue-signal{ + opacity: 1; +} + + +/* globe structure */ + + +/* reliability section end */ + +/* innovative section start */ + +#innovative-section{ + margin-bottom: 25rem; + margin-top: -10rem; +} + +.innovative-title{ + font-size: 2.6rem; + font-weight: 600; + width: 66%; + text-align: center; + margin: auto; +} + +.innovative-texts{ + margin-top: 5.5rem; +} + +.innovative-heading-1{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; + line-height: 30px; + margin-top: .9rem; +} + +.innovative-heading-2{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; +} + +.innovative-heading-2{ + font-size: 1.8rem; + font-weight: 300; + color: #001123; +} + +/* innovative section end */ + diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png new file mode 100644 index 0000000..ed4e8cf Binary files /dev/null and b/static/favicon-16x16.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png new file mode 100644 index 0000000..a3cc666 Binary files /dev/null and b/static/favicon-32x32.png differ diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..4006963 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..005a1ec Binary files /dev/null and b/static/favicon.png differ diff --git a/static/fonts/Manrope-Bold.woff b/static/fonts/Manrope-Bold.woff new file mode 100644 index 0000000..ce776da Binary files /dev/null and b/static/fonts/Manrope-Bold.woff differ diff --git a/static/fonts/Manrope-Bold.woff2 b/static/fonts/Manrope-Bold.woff2 new file mode 100644 index 0000000..60e8b5d Binary files /dev/null and b/static/fonts/Manrope-Bold.woff2 differ diff --git a/static/fonts/Manrope-ExtraBold.woff b/static/fonts/Manrope-ExtraBold.woff new file mode 100644 index 0000000..0ff12d2 Binary files /dev/null and b/static/fonts/Manrope-ExtraBold.woff differ diff --git a/static/fonts/Manrope-ExtraBold.woff2 b/static/fonts/Manrope-ExtraBold.woff2 new file mode 100644 index 0000000..8ba6008 Binary files /dev/null and b/static/fonts/Manrope-ExtraBold.woff2 differ diff --git a/static/fonts/Manrope-ExtraLight.woff b/static/fonts/Manrope-ExtraLight.woff new file mode 100644 index 0000000..df86421 Binary files /dev/null and b/static/fonts/Manrope-ExtraLight.woff differ diff --git a/static/fonts/Manrope-ExtraLight.woff2 b/static/fonts/Manrope-ExtraLight.woff2 new file mode 100644 index 0000000..69f2df5 Binary files /dev/null and b/static/fonts/Manrope-ExtraLight.woff2 differ diff --git a/static/fonts/Manrope-Light.woff b/static/fonts/Manrope-Light.woff new file mode 100644 index 0000000..c6d8cdc Binary files /dev/null and b/static/fonts/Manrope-Light.woff differ diff --git a/static/fonts/Manrope-Light.woff2 b/static/fonts/Manrope-Light.woff2 new file mode 100644 index 0000000..f1b1e97 Binary files /dev/null and b/static/fonts/Manrope-Light.woff2 differ diff --git a/static/fonts/Manrope-Medium.woff b/static/fonts/Manrope-Medium.woff new file mode 100644 index 0000000..deca141 Binary files /dev/null and b/static/fonts/Manrope-Medium.woff differ diff --git a/static/fonts/Manrope-Medium.woff2 b/static/fonts/Manrope-Medium.woff2 new file mode 100644 index 0000000..9fa8286 Binary files /dev/null and b/static/fonts/Manrope-Medium.woff2 differ diff --git a/static/fonts/Manrope-Regular.woff b/static/fonts/Manrope-Regular.woff new file mode 100644 index 0000000..d185d5b Binary files /dev/null and b/static/fonts/Manrope-Regular.woff differ diff --git a/static/fonts/Manrope-Regular.woff2 b/static/fonts/Manrope-Regular.woff2 new file mode 100644 index 0000000..8b35015 Binary files /dev/null and b/static/fonts/Manrope-Regular.woff2 differ diff --git a/static/fonts/Manrope-SemiBold.woff b/static/fonts/Manrope-SemiBold.woff new file mode 100644 index 0000000..e3e01b4 Binary files /dev/null and b/static/fonts/Manrope-SemiBold.woff differ diff --git a/static/fonts/Manrope-SemiBold.woff2 b/static/fonts/Manrope-SemiBold.woff2 new file mode 100644 index 0000000..e320361 Binary files /dev/null and b/static/fonts/Manrope-SemiBold.woff2 differ diff --git a/static/image/about-banner.png b/static/image/about-banner.png new file mode 100644 index 0000000..29966e0 Binary files /dev/null and b/static/image/about-banner.png differ diff --git a/static/image/blue.png b/static/image/blue.png new file mode 100644 index 0000000..6352512 Binary files /dev/null and b/static/image/blue.png differ diff --git a/static/image/card-4-background.png b/static/image/card-4-background.png new file mode 100644 index 0000000..78028c4 Binary files /dev/null and b/static/image/card-4-background.png differ diff --git a/static/image/card-img-4.png b/static/image/card-img-4.png new file mode 100644 index 0000000..c681197 Binary files /dev/null and b/static/image/card-img-4.png differ diff --git a/static/image/catalyst-icon-1.png b/static/image/catalyst-icon-1.png new file mode 100644 index 0000000..8d0f74f Binary files /dev/null and b/static/image/catalyst-icon-1.png differ diff --git a/static/image/catalyst-icon-2.png b/static/image/catalyst-icon-2.png new file mode 100644 index 0000000..4bce238 Binary files /dev/null and b/static/image/catalyst-icon-2.png differ diff --git a/static/image/catalyst-icon-3.png b/static/image/catalyst-icon-3.png new file mode 100644 index 0000000..cd004d0 Binary files /dev/null and b/static/image/catalyst-icon-3.png differ diff --git a/static/image/catalyst-img.png b/static/image/catalyst-img.png new file mode 100644 index 0000000..b04fed7 Binary files /dev/null and b/static/image/catalyst-img.png differ diff --git a/static/image/check-mark.png b/static/image/check-mark.png new file mode 100644 index 0000000..a9d6e00 Binary files /dev/null and b/static/image/check-mark.png differ diff --git a/static/image/ckeckmark-2.png b/static/image/ckeckmark-2.png new file mode 100644 index 0000000..c97daa3 Binary files /dev/null and b/static/image/ckeckmark-2.png differ diff --git a/static/image/email-icon.png b/static/image/email-icon.png new file mode 100644 index 0000000..955dc4b Binary files /dev/null and b/static/image/email-icon.png differ diff --git a/static/image/footer-logo.png b/static/image/footer-logo.png new file mode 100644 index 0000000..77fa31f Binary files /dev/null and b/static/image/footer-logo.png differ diff --git a/static/image/freedom-background.png b/static/image/freedom-background.png new file mode 100644 index 0000000..f7f75f4 Binary files /dev/null and b/static/image/freedom-background.png differ diff --git a/static/image/glove-img.png b/static/image/glove-img.png new file mode 100644 index 0000000..c0a4635 Binary files /dev/null and b/static/image/glove-img.png differ diff --git a/static/image/green-and-blue.png b/static/image/green-and-blue.png new file mode 100644 index 0000000..f9d6740 Binary files /dev/null and b/static/image/green-and-blue.png differ diff --git a/static/image/green.png b/static/image/green.png new file mode 100644 index 0000000..09ae0ed Binary files /dev/null and b/static/image/green.png differ diff --git a/static/image/hero-down.png b/static/image/hero-down.png new file mode 100644 index 0000000..5c007f6 Binary files /dev/null and b/static/image/hero-down.png differ diff --git a/static/image/hero-img.png b/static/image/hero-img.png new file mode 100644 index 0000000..cd596ea Binary files /dev/null and b/static/image/hero-img.png differ diff --git a/static/image/innovative-border.png b/static/image/innovative-border.png new file mode 100644 index 0000000..f3b82d4 Binary files /dev/null and b/static/image/innovative-border.png differ diff --git a/static/image/logo.png b/static/image/logo.png new file mode 100644 index 0000000..4393d26 Binary files /dev/null and b/static/image/logo.png differ diff --git a/static/image/mobile-responsive.png b/static/image/mobile-responsive.png new file mode 100644 index 0000000..46c0434 Binary files /dev/null and b/static/image/mobile-responsive.png differ diff --git a/static/image/novit-background.png b/static/image/novit-background.png new file mode 100644 index 0000000..d0f80db Binary files /dev/null and b/static/image/novit-background.png differ diff --git a/static/image/novit.png b/static/image/novit.png new file mode 100644 index 0000000..fff4511 Binary files /dev/null and b/static/image/novit.png differ diff --git a/static/image/orange-and-parpel.png b/static/image/orange-and-parpel.png new file mode 100644 index 0000000..81be6c5 Binary files /dev/null and b/static/image/orange-and-parpel.png differ diff --git a/static/image/orange.png b/static/image/orange.png new file mode 100644 index 0000000..6aa4460 Binary files /dev/null and b/static/image/orange.png differ diff --git a/static/image/perpal.png b/static/image/perpal.png new file mode 100644 index 0000000..71195da Binary files /dev/null and b/static/image/perpal.png differ diff --git a/static/image/pragmatic-icon-1.png b/static/image/pragmatic-icon-1.png new file mode 100644 index 0000000..6313a8e Binary files /dev/null and b/static/image/pragmatic-icon-1.png differ diff --git a/static/image/pragmatic-icon-2.png b/static/image/pragmatic-icon-2.png new file mode 100644 index 0000000..cab3465 Binary files /dev/null and b/static/image/pragmatic-icon-2.png differ diff --git a/static/image/pragmatic-icon-3.png b/static/image/pragmatic-icon-3.png new file mode 100644 index 0000000..0ebc25f Binary files /dev/null and b/static/image/pragmatic-icon-3.png differ diff --git a/static/image/prices-banner.png b/static/image/prices-banner.png new file mode 100644 index 0000000..d35b18c Binary files /dev/null and b/static/image/prices-banner.png differ diff --git a/static/image/reliability-banner.png b/static/image/reliability-banner.png new file mode 100644 index 0000000..f29807a Binary files /dev/null and b/static/image/reliability-banner.png differ diff --git a/static/image/text-background.png b/static/image/text-background.png new file mode 100644 index 0000000..98c63e3 Binary files /dev/null and b/static/image/text-background.png differ diff --git a/static/img/novit-logo.png b/static/img/novit-logo.png new file mode 100644 index 0000000..77fa31f Binary files /dev/null and b/static/img/novit-logo.png differ diff --git a/static/site.webmanifest b/static/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/static/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/themes/learn b/themes/learn new file mode 160000 index 0000000..e817f53 --- /dev/null +++ b/themes/learn @@ -0,0 +1 @@ +Subproject commit e817f53d690d35f181c896e0e320cb40f797e88c