mirror of
https://github.com/qdrant/landing_page.git
synced 2026-09-25 22:18:30 +02:00
WIP Cloud prices page (#43)
* cloud prices page * added link on the cloud page to main menu * Cloud form with steps (#46) * for with several steps, in progress * form with steps - some template and styles * rearranged scss * some styles * more styles * sliding to invalid input on submit * connected netlify * debug * fixes * fixes * fix * a button leading to the form with steps * changed questions * renamed a directory with the cloud form to Surveys to make it reusable * added more variant to the use-case questions, added terms checkbox * cloud button in the header (#52) * update items * upd pricing page * cloud -> pricing * pricing content * fixes for buttons border, added popovers * bg size * upd subtitles * add text to tooltips Co-authored-by: Andrey Vasnetsov <andrey@vasnetsov.com>
This commit is contained in:
trean
co-authored by
Andrey Vasnetsov
Andrey Vasnetsov
parent
19e400d65f
commit
9e428c70bc
@@ -5910,8 +5910,10 @@ img{
|
||||
}
|
||||
|
||||
.price-block .inner-box .content-box .start-btn{
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
position:relative;
|
||||
padding:13px 80px;
|
||||
padding:13px 20px;
|
||||
color:var(--brand-primary);
|
||||
font-size:18px;
|
||||
font-weight:400;
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
To rebuild scss to css:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
```bash
|
||||
npm install -g sass
|
||||
```
|
||||
|
||||
``` bash
|
||||
cd qdrant-landing
|
||||
sass --watch ./themes/qdrant/static/css/main.scss ./themes/qdrant/static/css/main.css
|
||||
sass --watch ./themes/qdrant/static/css/
|
||||
```
|
||||
+43
-17
@@ -40,7 +40,7 @@ keywords = "search engine, neural network, matching, filter, SaaS, approximate n
|
||||
email = "info@qdrant.tech"
|
||||
location = "Berlin"
|
||||
|
||||
mailchimp_contact_form = "https://us1.list-manage.com/contact-form?u=69617d79374ac6280dd2230b2&form_id=cce004c91b038a38e5ef1ece5318fd1e"
|
||||
mailchimp_contact_form = "https://qdrant.to/contact-us"
|
||||
|
||||
mailchimp_subscribe = "https://tech.us1.list-manage.com/subscribe/post?u=69617d79374ac6280dd2230b2&id=acb2b876fc"
|
||||
|
||||
@@ -62,42 +62,68 @@ keywords = "search engine, neural network, matching, filter, SaaS, approximate n
|
||||
[menu]
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "resources"
|
||||
name = "Resources"
|
||||
identifier = "product"
|
||||
name = "Product"
|
||||
weight = 1
|
||||
[menu.main.params]
|
||||
in_header = true
|
||||
in_footer = true
|
||||
|
||||
[[menu.main]]
|
||||
[[menu.main]]
|
||||
identifier = "use-case"
|
||||
name = "Use cases"
|
||||
weight = 1
|
||||
parent = "resources"
|
||||
parent = "product"
|
||||
url = "/use-cases/"
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "solutions"
|
||||
name = "Solutions"
|
||||
weight = 2
|
||||
parent = "resources"
|
||||
parent = "product"
|
||||
url = "/solutions/"
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "pricing"
|
||||
name = "Pricing"
|
||||
weight = 3
|
||||
parent = "product"
|
||||
url = "/pricing/"
|
||||
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "resources"
|
||||
name = "Resources"
|
||||
weight = 2
|
||||
[menu.main.params]
|
||||
in_header = true
|
||||
in_footer = false
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "documentation"
|
||||
name = "Documentation"
|
||||
parent = "resources"
|
||||
weight = 1
|
||||
url = "/documentation/"
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "articles"
|
||||
name = "Articles"
|
||||
weight = 3
|
||||
weight = 4
|
||||
parent = "resources"
|
||||
url = "/articles/"
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "blog"
|
||||
name = "Blog"
|
||||
weight = 4
|
||||
weight = 5
|
||||
parent = "resources"
|
||||
url = "/blog/"
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "roadmap"
|
||||
name = "Roadmap"
|
||||
weight = 5
|
||||
weight = 6
|
||||
parent = "resources"
|
||||
url = "https://qdrant.to/roadmap"
|
||||
[menu.main.params]
|
||||
@@ -106,22 +132,19 @@ keywords = "search engine, neural network, matching, filter, SaaS, approximate n
|
||||
[[menu.main]]
|
||||
identifier = "changelog"
|
||||
name = "Changelog"
|
||||
weight = 6
|
||||
weight = 7
|
||||
parent = "resources"
|
||||
url = "https://github.com/qdrant/qdrant/releases"
|
||||
[menu.main.params]
|
||||
external = true
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "documentation"
|
||||
name = "Documentation"
|
||||
weight = 2
|
||||
url = "/documentation/"
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "community"
|
||||
name = "Community"
|
||||
weight = 3
|
||||
weight = 4
|
||||
[menu.main.params]
|
||||
in_header = true
|
||||
in_footer = true
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "github"
|
||||
@@ -165,6 +188,9 @@ keywords = "search engine, neural network, matching, filter, SaaS, approximate n
|
||||
identifier = "company"
|
||||
name = "Company"
|
||||
weight = 4
|
||||
[menu.main.params]
|
||||
in_header = false
|
||||
in_footer = true
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "jobs"
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: Qdrant Cloud
|
||||
description: Qdrant Cloud
|
||||
---
|
||||
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: Surveys
|
||||
sitemapExclude: True
|
||||
---
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Join the waiting list for the Qdrant cloud-hosted version private beta.
|
||||
section_title: Request early access to the Qdrant Cloud
|
||||
form:
|
||||
- id: 0
|
||||
header: "Get <span style='color: var(--brand-primary);'>Early Access</span> to Qdrant Cloud"
|
||||
label: All right! 😊 What is your e-mail? *
|
||||
placeholder: name@example.com
|
||||
type: email
|
||||
name: email
|
||||
required: True
|
||||
- id: 1
|
||||
label: For what purpose do you/will you use a cloud-hosted solution?
|
||||
type: checkbox
|
||||
options:
|
||||
- For my company product
|
||||
- For one of my company internal project
|
||||
- For a client as an agency or a freelancer
|
||||
- For a personal project
|
||||
name: purpose
|
||||
- id: 2
|
||||
label: What's the size of your company?
|
||||
type: radio
|
||||
options:
|
||||
- 1
|
||||
- 2-10
|
||||
- 11-50
|
||||
- 51-200
|
||||
- 201-1000
|
||||
- 1001+
|
||||
name: companySize
|
||||
- id: 3
|
||||
label: What is your use case?
|
||||
type: radio
|
||||
options:
|
||||
- Semantic Text Search
|
||||
- Similar Image Search
|
||||
- Recommendations
|
||||
- Chat Bots
|
||||
- Matching Engines
|
||||
- Anomalies Detection
|
||||
- Other
|
||||
name: case
|
||||
- id: 4
|
||||
label: Have you ever used any vector search engines? If yes, which ones?
|
||||
type: text
|
||||
rows: 1
|
||||
placeholder: Type here your answer
|
||||
name: experienced
|
||||
---
|
||||
@@ -28,3 +28,4 @@
|
||||
<link rel="stylesheet" href="{{ "css/lang-switcher.css" | absURL }}">
|
||||
|
||||
<link rel="stylesheet" href="{{ "css/mathjax.css" | absURL }}">
|
||||
<link rel="stylesheet" href="/css/owl.css">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ if ne .Identifier "documentation" }}
|
||||
{{ if .Params.in_footer }}
|
||||
<div class="main-footer__widget">
|
||||
<div class="main-footer__title">
|
||||
{{ if .URL }}
|
||||
|
||||
@@ -101,7 +101,7 @@
|
||||
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ if ne .Identifier "company" }}
|
||||
{{ if .Params.in_header }}
|
||||
<li class="navigation__item {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}current{{end}}
|
||||
{{if .HasChildren }}dropdown{{ end }}">
|
||||
<a class="navigation__link" {{if not .HasChildren }}href="{{ .URL }}"{{end}}>{{ .Name }}
|
||||
@@ -126,9 +126,10 @@
|
||||
{{ end }}
|
||||
|
||||
<li>
|
||||
<a class="btn btn_in-header" href="{{ .Site.Params.github }}" target="_blank" title="github" role="button">
|
||||
<a class="btn btn_in-header mr-3" href="/surveys/cloud-request/" title="Cloud" role="button">
|
||||
<span class="btn btn__text"><i class="fas fa-cloud"></i> Cloud</span></a>
|
||||
<a class="btn btn_in-header" href="{{ .Site.Params.github }}" target="_blank" title="GitHub" role="button">
|
||||
<span class="btn btn__text"><i class="icon flaticon-github"></i> Github</span></a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
@@ -87,4 +87,15 @@
|
||||
});
|
||||
|
||||
</script>
|
||||
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||
<script src="/js/owl.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover({
|
||||
container: 'body'
|
||||
});
|
||||
$('.popover-dismiss').popover({
|
||||
trigger: 'focus'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
{{ $seed := "foo" }}
|
||||
{{ $random := delimit (shuffle (split (md5 $seed) "" )) "" }}
|
||||
<!--suppress XmlDuplicatedId -->
|
||||
<div class="steps-form row">
|
||||
<form class="steps-form__form col-12 col-md-10 col-lg-6" name="cloud-request"
|
||||
method="POST" id="{{ $random }}" novalidate data-netlify="true">
|
||||
<div class="spinner-border steps-form__spinner" role="status" style="width: 5rem; height: 5rem;">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
<section class="owl-carousel">
|
||||
{{ range .Params.Form }}
|
||||
<div class="form-group" data-step="{{ .id }}">
|
||||
<label class="steps-form__label steps-form__label_big" for="{{ .id }}{{ .name }}">
|
||||
{{ if .header }} <h2>{{ .header | safeHTML }}</h2> {{ end }}
|
||||
{{ .label | safeHTML }}
|
||||
{{ if eq .type "radio"}}(Choose one){{ end }}
|
||||
{{ if eq .type "checkbox"}}(Choose as many as you want){{ end }}
|
||||
</label>
|
||||
{{ if eq .type "select" }}
|
||||
<select class="steps-form__input custom-select" id="{{ .id }}{{ .name }}" name="{{ .name }}">
|
||||
<option selected>Open this select menu</option>
|
||||
{{ range .options }}
|
||||
<option value="{{ . }}">{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
{{ else if or (eq .type "radio") (eq .type "checkbox")}}
|
||||
{{ $input := . }}
|
||||
<div class="checkbox mb-5">
|
||||
{{ range .options }}
|
||||
<input class="checkbox__input" type="{{ $input.type }}" name="{{ $input.name }}"
|
||||
id="{{ $input.id }}{{ $input.name }}{{ . }}"
|
||||
value="{{ . }}">
|
||||
<label class="steps-form__label checkbox__label" for="{{ $input.id }}{{ $input.name }}{{ . }}">
|
||||
{{ . }}</label>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ else if eq .type "text"}}
|
||||
<textarea class="form-control steps-form__input" id="{{ .id }}{{ .name }}" name="{{ .name }}"
|
||||
rows="{{ .rows }}" {{ if .required }}required{{ end }} placeholder="{{ .placeholder }}"></textarea>
|
||||
{{ else }}
|
||||
<input type="{{ .type }}" name="{{ .name }}"
|
||||
class="steps-form__input form-control" id="{{ .id }}{{ .name }}"
|
||||
{{ if .required }}required{{ end }} placeholder="{{ .placeholder }}">
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid {{ .type }}.
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="form-group" data-step="{{ len .Params.Form }}">
|
||||
<p class="steps-form__label steps-form__label_big">Ta-da! We'll happily be in touch with you very soon! 🥳</p>
|
||||
<div class="checkbox">
|
||||
<input class="checkbox__input" type="checkbox" name="termsConsent"
|
||||
id="termsConsent" required>
|
||||
<label class="steps-form__label checkbox__label d-flex align-items-center mb-2" for="termsConsent">
|
||||
<span>I am consent to all of
|
||||
<a href="/legal/terms_and_conditions/" target="_blank">terms and conditions</a>
|
||||
and you agree to be contacted again for your onboarding.*</span>
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must accept the terms and conditions
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-style-four btn-style-four_reversed
|
||||
btn-style-four_big btn-style-four_border mt-4">
|
||||
<span class="text">Submit</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function checkForm(form)
|
||||
{
|
||||
if(!form.termsConsent.checked) {
|
||||
alert("Please indicate that you accept the Terms and Conditions");
|
||||
form.termsConsent.focus();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const form = document.getElementById({{ $random }});
|
||||
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const invalidFieldNames = Array.from(form.querySelectorAll(':invalid')).map(field => field)
|
||||
const nextInvalid = $(invalidFieldNames[0]).closest('[data-step]').data('step');
|
||||
|
||||
stepsFormCarousel.trigger('to.owl.carousel', [nextInvalid]);
|
||||
}
|
||||
|
||||
form.classList.add('was-validated');
|
||||
|
||||
/**
|
||||
* form.querySelectorAll('.form-group').forEach(input => {
|
||||
console.log(input)
|
||||
input.addEventListener('keypress', function(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
stepsFormCarousel.trigger('next.owl.carousel');
|
||||
}
|
||||
});
|
||||
}); */
|
||||
});
|
||||
|
||||
const stepsFormCarousel = $('.owl-carousel').owlCarousel({
|
||||
items: 1,
|
||||
mouseDrag: false,
|
||||
touchDrag: false,
|
||||
nav: true,
|
||||
rewind: false,
|
||||
slideTransition: 'easy',
|
||||
loop: false,
|
||||
margin: 10,
|
||||
stagePadding: 5,
|
||||
navText: ['<div class="btn btn-style-four btn-style-four_small btn-style-four_border"><span class="text"> <i class="fas fa-chevron-left"></i> Back</span></div>', '<div class="btn btn-style-four btn-style-four_small btn-style-four_border"><span class="text"> Next question <i class="fas fa-chevron-right"></i></span></div>'],
|
||||
onInitialized: () => {
|
||||
document.getElementsByClassName('spinner-border')[0].remove();
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,9 @@
|
||||
{{- partial "header.html" . -}}
|
||||
|
||||
{{- partial "second_header.html" . -}}
|
||||
|
||||
<div id="content">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
|
||||
{{- partial "footer.html" . -}}
|
||||
@@ -0,0 +1,145 @@
|
||||
{{ partial "header" . }}
|
||||
|
||||
<style>
|
||||
#mc_embed_signup input.mce_inline_error {
|
||||
border-color:#5C0A1C;
|
||||
}
|
||||
#mc_embed_signup div.mce_inline_error {
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
background-color: transparent;
|
||||
color:var(--brand-primary);
|
||||
}
|
||||
.main-header {
|
||||
background-image: url(/images/background/2.png);
|
||||
}
|
||||
#mce-success-response {
|
||||
padding-bottom: 25px;
|
||||
color: green;
|
||||
font-size: 140%;
|
||||
}
|
||||
#mce-error-response {
|
||||
padding-bottom: 25px;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="price-page-section">
|
||||
<div class="auto-container">
|
||||
<div class="row clearfix">
|
||||
<div class="title-column col-12">
|
||||
<div class="inner-column">
|
||||
<!-- Sec Title -->
|
||||
<div class="sec-title centered">
|
||||
<h2>Boost <span>Your Business</span> with Qdrant Solutions</h2>
|
||||
<div class="text"><h4>Enhance your product with Similarity Search</h4>
|
||||
|
||||
<p><small>Build your MVP on an Open Source stack, or run scale-ready products in the cloud. Choose the right plan for your project.
|
||||
</small></p>
|
||||
|
||||
<a class="theme-btn btn-style-three mt-4" href="/solutions/">
|
||||
<span class="txt">What can I use Qdrant for?</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix" id="price-offers">
|
||||
|
||||
<!-- Price Block -->
|
||||
<div class="price-block col-lg-4 col-md-6 col-sm-12 mb-5 pb-5">
|
||||
<div class="inner-box">
|
||||
<div class="title">Open Source</div>
|
||||
<div class="content-box">
|
||||
<div class="price-box">
|
||||
<span class="icon flaticon-skyline"></span> Free
|
||||
<span class="price-title"> </span>
|
||||
</div>
|
||||
<div class="text">Build your AI-based applications using our leading open-source vector search technology.
|
||||
</div>
|
||||
<a href="/documentation/quick_start/" class="start-btn theme-btn">Quick Start</a>
|
||||
<ul class="price-list">
|
||||
<li>Free & Open Forever</li>
|
||||
<li>Self-hosted</li>
|
||||
<li>Full-Featured</li>
|
||||
<li>Community support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Price Block -->
|
||||
<div class="price-block col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="inner-box">
|
||||
<div class="title">Managed Cloud</div>
|
||||
<div class="content-box">
|
||||
<div class="price-box">
|
||||
<span class="icon flaticon-skyline"></span> Pay as You Go
|
||||
<span class="price-title">Per pod/hour</span>
|
||||
</div>
|
||||
<div class="text">Scale your production solutions in the managed cloud without deployment and maintenance overhead.
|
||||
</div>
|
||||
<a href="/surveys/cloud-request/" class="start-btn theme-btn">Join Cloud Beta</a>
|
||||
<ul class="price-list">
|
||||
<li>Managed & Monitored by Us</li>
|
||||
<li>High Availability & Performance
|
||||
</li>
|
||||
<li>Turnkey Data Migration</li>
|
||||
<li>Expert Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Price Block -->
|
||||
<div class="price-block col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="inner-box">
|
||||
<div class="title">Enterprise</div>
|
||||
<div class="content-box">
|
||||
<div class="price-box">
|
||||
<span class="icon flaticon-skyline"></span> Price on Request
|
||||
<span class="price-title">/ per managed cluster</span>
|
||||
</div>
|
||||
<div class="text">Let us take care of your on-premise deployments to achieve the best possible performance and accuracy.
|
||||
</div>
|
||||
<a href="{{ .Site.Params.mailchimp_contact_form }}" class="start-btn theme-btn">Contact sales</a>
|
||||
<ul class="price-list">
|
||||
<li>Performance & Deployment Consulting
|
||||
<a class="ml-3" tabindex="0"
|
||||
data-container="body" data-toggle="popover" data-placement="right"
|
||||
data-trigger="focus" title="Performance & Deployment"
|
||||
data-content="We'll design a fault tolerant architecture that provides maximum performance for search and online updates.">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Neural Network Encoder Fine-Tuning
|
||||
<a class="ml-3" tabindex="0"
|
||||
data-container="body" data-toggle="popover" data-placement="right"
|
||||
data-trigger="focus" title="Fine-Tuning"
|
||||
data-content="We will analyze your data and offer improvements to your model training process. Or even train the model for you.">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Migration and Monitoring Tools
|
||||
<a class="ml-3" tabindex="0"
|
||||
data-container="body" data-toggle="popover" data-placement="right"
|
||||
data-trigger="focus" title="Migration and Monitoring"
|
||||
data-content="Ensure zero-downtime for model and service updates. Set up advanced performance monitoring.">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>Dedicated Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Pricing Page Section -->
|
||||
{{ partial "footer" . }}
|
||||
@@ -0,0 +1,2 @@
|
||||
{{ define "main" }}
|
||||
{{ end }}
|
||||
@@ -0,0 +1,9 @@
|
||||
{{- partial "header.html" . -}}
|
||||
|
||||
{{- partial "second_header.html" . -}}
|
||||
|
||||
<div id="content">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
|
||||
{{- partial "footer.html" . -}}
|
||||
@@ -0,0 +1,2 @@
|
||||
{{ define "main" }}
|
||||
{{ end }}
|
||||
@@ -0,0 +1,12 @@
|
||||
{{ partial "header" . }}
|
||||
<style>
|
||||
.main-header {
|
||||
background-image: url(/images/background/2.png);
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container-fluid clearfix pt-lg-3 pt-lg-5">
|
||||
<!-- Content Side -->
|
||||
{{ partial "steps-form" . }}
|
||||
</section>
|
||||
{{ partial "footer" . }}
|
||||
@@ -3,56 +3,61 @@
|
||||
|
||||
&_in-header {
|
||||
padding: 0.1rem 0.5rem;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
background: var(--white);
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
border-radius: inherit;
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
display: block;
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
&:hover {
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
}
|
||||
|
||||
.btn__text {
|
||||
color: var(--brand-primary);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-transform: uppercase;
|
||||
color: var(--brand-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
i {
|
||||
vertical-align: inherit;
|
||||
margin-right: 0.4rem;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -62,8 +67,389 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-header .btn_in-header {
|
||||
border-color: var(--brand-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--brand-primary);
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
display: inline-block;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Btn Style One */
|
||||
|
||||
.btn-style-one {
|
||||
display: inline-block;
|
||||
padding: 10px 44px 10px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border: 1px solid var(--brand-primary);
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
background-color: var(--brand-primary);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
|
||||
font-family: 'Roboto Condensed', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
& .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-webkit-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
-webkit-transform: scale(1, 0.5);
|
||||
transform: scale(1, 0.5);
|
||||
opacity: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--brand-primary);
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Btn Style Two */
|
||||
|
||||
.btn-style-two {
|
||||
display: inline-block;
|
||||
padding: 10px 44px 10px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
font-family: 'Roboto Condensed', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
& .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
border-color: var(--brand-primary);
|
||||
-moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
|
||||
-ms-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
|
||||
-o-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
|
||||
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Btn Style Three */
|
||||
|
||||
.btn-style-three {
|
||||
display: inline-block;
|
||||
padding: 12px 44px 12px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
background-color: var(--brand-primary);
|
||||
-moz-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.10);
|
||||
-ms-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.10);
|
||||
-o-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.10);
|
||||
-webkit-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.10);
|
||||
box-shadow: 0 10px 32px rgba(255, 98, 98, 0.10);
|
||||
font-family: 'Roboto Condensed', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
& .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Btn Style Four */
|
||||
|
||||
.btn-style-four {
|
||||
display: inline-block;
|
||||
padding: 10px 48px 10px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
background-color: var(--brand-secondary);
|
||||
-moz-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.10);
|
||||
-ms-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.10);
|
||||
-o-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.10);
|
||||
-webkit-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.10);
|
||||
box-shadow: 0 10px 30px rgba(255, 98, 98, 0.10);
|
||||
font-family: 'Roboto Condensed', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
& .text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&_rounded {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&_reversed {
|
||||
background-color: var(--brand-primary);
|
||||
|
||||
&:before {
|
||||
background-color: var(--brand-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
&_border {
|
||||
box-shadow: inset 0 0 0 2px var(--brand-primary);
|
||||
|
||||
&.btn-style-four_reversed {
|
||||
box-shadow: inset 0 0 0 2px var(--brand-primary);
|
||||
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 2px var(--brand-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_big {
|
||||
.text {
|
||||
font-size: 1rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&_small {
|
||||
padding: 3px 15px;
|
||||
|
||||
.text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
&_responsive {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Btn Style Five */
|
||||
|
||||
.btn-style-five {
|
||||
display: inline-block;
|
||||
padding: 9px 44px 9px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: var(--brand-primary);
|
||||
border: 1px solid var(--brand-primary);
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
font-family: 'Roboto Condensed', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
& .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
border-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.checkbox {
|
||||
$form-font-size: 1.4rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
padding-left: $form-font-size + 1rem;
|
||||
cursor: pointer;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
[type="radio"] + .checkbox__label:before,
|
||||
[type="checkbox"] + .checkbox__label:before {
|
||||
display: block;
|
||||
width: $form-font-size;
|
||||
height: $form-font-size;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
content: "";
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 0 1px white;
|
||||
}
|
||||
|
||||
[type="radio"]:checked + .checkbox__label:before,
|
||||
[type="checkbox"]:checked + .checkbox__label:before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
@use "sass:color";
|
||||
@use "checkbox";
|
||||
|
||||
.steps-form {
|
||||
$form-font-size: 1.4rem;
|
||||
|
||||
justify-content: center;
|
||||
height: 90vh;
|
||||
background-color: var(--brand-secondary);
|
||||
|
||||
&__spinner {
|
||||
align-self: center;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: calc(50% - 4rem);
|
||||
border-top-color: var(--brand-primary);
|
||||
border-bottom-color: var(--brand-primary);
|
||||
border-left-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
&__form {
|
||||
align-self: center;
|
||||
|
||||
&.was-validated .form-control:invalid:focus,
|
||||
.form-control.is-invalid:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
color: white;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--light);
|
||||
border-radius: 0;
|
||||
background-color: var(--brand-secondary);
|
||||
font-size: $form-font-size;
|
||||
|
||||
&:focus {
|
||||
color: white;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--white);
|
||||
outline: none;
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
font-size: $form-font-size;
|
||||
|
||||
&_big {
|
||||
font-size: $form-font-size + 0.4rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
label a {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
transition: 0.25s ease all;
|
||||
&:hover {
|
||||
color: var(--brand-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.owl-stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.owl-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.owl-prev.disabled .btn,
|
||||
.owl-next.disabled .btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10143,59 +10143,400 @@ body::after {
|
||||
|
||||
.btn_in-header {
|
||||
padding: 0.1rem 0.5rem;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
background: var(--white);
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.btn_in-header:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
border-radius: inherit;
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
.btn_in-header:hover::before {
|
||||
.btn_in-header:hover:before {
|
||||
display: block;
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.btn_in-header .btn__text {
|
||||
color: var(--brand-primary);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-transform: uppercase;
|
||||
color: var(--brand-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn_in-header i {
|
||||
vertical-align: inherit;
|
||||
margin-right: 0.4rem;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
.btn_in-header:hover .btn__text {
|
||||
color: var(--white);
|
||||
}
|
||||
.btn.disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-header .btn_in-header {
|
||||
box-shadow: inset 0 0 0 1px var(--brand-primary);
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
display: inline-block;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Btn Style One */
|
||||
.btn-style-one {
|
||||
display: inline-block;
|
||||
padding: 10px 44px 10px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border: 1px solid var(--brand-primary);
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
background-color: var(--brand-primary);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
font-family: "Roboto Condensed", serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-style-one .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-style-one:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-webkit-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
-webkit-transform: scale(1, 0.5);
|
||||
transform: scale(1, 0.5);
|
||||
opacity: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.btn-style-one:hover::before {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-style-one:hover {
|
||||
color: var(--brand-primary);
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Two */
|
||||
.btn-style-two {
|
||||
display: inline-block;
|
||||
padding: 10px 44px 10px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
font-family: "Roboto Condensed", serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-style-two:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
.btn-style-two:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.btn-style-two .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-style-two:hover {
|
||||
color: #ffffff;
|
||||
border-color: var(--brand-primary);
|
||||
-moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
-ms-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
-o-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Btn Style Three */
|
||||
.btn-style-three {
|
||||
display: inline-block;
|
||||
padding: 12px 44px 12px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
background-color: var(--brand-primary);
|
||||
-moz-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
-ms-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
-o-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
-webkit-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
font-family: "Roboto Condensed", serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-style-three:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
.btn-style-three:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.btn-style-three .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-style-three:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Four */
|
||||
.btn-style-four {
|
||||
display: inline-block;
|
||||
padding: 10px 48px 10px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
background-color: var(--brand-secondary);
|
||||
-moz-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
-ms-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
-o-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
-webkit-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
font-family: "Roboto Condensed", serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-style-four:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
.btn-style-four:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.btn-style-four .text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-style-four:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-style-four_rounded {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn-style-four_reversed {
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
.btn-style-four_reversed:before {
|
||||
background-color: var(--brand-secondary);
|
||||
}
|
||||
.btn-style-four_border {
|
||||
box-shadow: inset 0 0 0 2px var(--brand-primary);
|
||||
}
|
||||
.btn-style-four_border.btn-style-four_reversed {
|
||||
box-shadow: inset 0 0 0 2px var(--brand-primary);
|
||||
}
|
||||
.btn-style-four_border.btn-style-four_reversed:before {
|
||||
box-shadow: inset 0 0 0 2px var(--brand-primary);
|
||||
}
|
||||
.btn-style-four_big .text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.btn-style-four_big .text {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
.btn-style-four_small {
|
||||
padding: 3px 15px;
|
||||
}
|
||||
.btn-style-four_small .text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.btn-style-four_responsive {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.btn-style-four_responsive {
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* Btn Style Five */
|
||||
.btn-style-five {
|
||||
display: inline-block;
|
||||
padding: 9px 44px 9px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
color: var(--brand-primary);
|
||||
border: 1px solid var(--brand-primary);
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
font-family: "Roboto Condensed", serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-style-five:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
.btn-style-five:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.btn-style-five .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-style-five:hover {
|
||||
color: #ffffff;
|
||||
border-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
@@ -10332,6 +10673,114 @@ body::after {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox__label {
|
||||
display: block;
|
||||
padding-left: 2.4rem;
|
||||
cursor: pointer;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.checkbox [type=radio] + .checkbox__label:before,
|
||||
.checkbox [type=checkbox] + .checkbox__label:before {
|
||||
display: block;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
content: "";
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 0 1px white;
|
||||
}
|
||||
|
||||
.checkbox [type=radio]:checked + .checkbox__label:before,
|
||||
.checkbox [type=checkbox]:checked + .checkbox__label:before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.steps-form {
|
||||
justify-content: center;
|
||||
height: 90vh;
|
||||
background-color: var(--brand-secondary);
|
||||
}
|
||||
.steps-form__spinner {
|
||||
align-self: center;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: calc(50% - 4rem);
|
||||
border-top-color: var(--brand-primary);
|
||||
border-bottom-color: var(--brand-primary);
|
||||
border-left-color: var(--brand-primary);
|
||||
}
|
||||
.steps-form__form {
|
||||
align-self: center;
|
||||
}
|
||||
.steps-form__form.was-validated .form-control:invalid:focus,
|
||||
.steps-form__form .form-control.is-invalid:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.steps-form__input {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
color: white;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--light);
|
||||
border-radius: 0;
|
||||
background-color: var(--brand-secondary);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.steps-form__input:focus {
|
||||
color: white;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--white);
|
||||
outline: none;
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
.steps-form__label {
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.steps-form__label_big {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.steps-form label a {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
transition: 0.25s ease all;
|
||||
}
|
||||
.steps-form label a:hover {
|
||||
color: var(--brand-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.steps-form .owl-stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.steps-form .owl-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.steps-form .owl-prev.disabled .btn,
|
||||
.steps-form .owl-next.disabled .btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/***
|
||||
|
||||
====================================================================
|
||||
@@ -10706,15 +11155,6 @@ img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -10747,314 +11187,6 @@ img {
|
||||
font-family: "Flaticon";
|
||||
}
|
||||
|
||||
/* Btn Style One */
|
||||
.btn-style-one {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
padding: 10px 44px 10px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius: 50px;
|
||||
background-color: var(--brand-primary);
|
||||
border: 1px solid var(--brand-primary);
|
||||
text-transform: capitalize;
|
||||
font-family: "Roboto Condensed";
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-style-one .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-style-one:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
background-color: #ffffff;
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
-webkit-transform: scale(1, 0.5);
|
||||
transform: scale(1, 0.5);
|
||||
}
|
||||
|
||||
.btn-style-one:hover::before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.btn-style-one:hover {
|
||||
color: var(--brand-primary);
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Two */
|
||||
.btn-style-two {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
padding: 10px 44px 10px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius: 50px;
|
||||
background: none;
|
||||
border: 1px solid #ffffff;
|
||||
text-transform: capitalize;
|
||||
font-family: "Roboto Condensed";
|
||||
}
|
||||
|
||||
.btn-style-two:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color: var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
}
|
||||
|
||||
.btn-style-two:hover::before {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-two .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-style-two:hover {
|
||||
color: #ffffff;
|
||||
border-color: var(--brand-primary);
|
||||
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
-ms-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
-o-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Btn Style Three */
|
||||
.btn-style-three {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
color: #ffffff;
|
||||
padding: 12px 44px 12px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius: 50px;
|
||||
background-color: var(--brand-primary);
|
||||
text-transform: capitalize;
|
||||
font-family: "Roboto Condensed";
|
||||
-webkit-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
-moz-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
-ms-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
-o-box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
box-shadow: 0 10px 32px rgba(255, 98, 98, 0.1);
|
||||
}
|
||||
|
||||
.btn-style-three:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color: #2b2b2b;
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
}
|
||||
|
||||
.btn-style-three:hover::before {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-three .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-style-three:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Four */
|
||||
.btn-style-four {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
padding: 10px 48px 10px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius: 0px;
|
||||
background-color: var(--brand-secondary);
|
||||
text-transform: capitalize;
|
||||
font-family: "Roboto Condensed";
|
||||
-webkit-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
-moz-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
-ms-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
-o-box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
box-shadow: 0 10px 30px rgba(255, 98, 98, 0.1);
|
||||
}
|
||||
|
||||
.btn-style-four:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color: var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
}
|
||||
|
||||
.btn-style-four:hover::before {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-four .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-style-four:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Five */
|
||||
.btn-style-five {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: var(--brand-primary);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
background: none;
|
||||
border-radius: 50px;
|
||||
padding: 9px 44px 9px;
|
||||
border: 1px solid var(--brand-primary);
|
||||
text-transform: capitalize;
|
||||
font-family: "Roboto Condensed";
|
||||
}
|
||||
|
||||
.btn-style-five:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color: var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
}
|
||||
|
||||
.btn-style-five:hover::before {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-five .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-style-five:hover {
|
||||
color: #ffffff;
|
||||
border-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
/*Social Icon One*/
|
||||
.social-icon-one {
|
||||
position: relative;
|
||||
@@ -14497,7 +14629,7 @@ img {
|
||||
height: 981px;
|
||||
background-position: right top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 70%;
|
||||
background-size: 73%;
|
||||
}
|
||||
|
||||
.banner-section-two .content-column {
|
||||
@@ -16002,7 +16134,12 @@ img {
|
||||
***/
|
||||
.price-page-section {
|
||||
position: relative;
|
||||
padding: 95px 0px 0px;
|
||||
padding: 30px 0 0 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.price-page-section {
|
||||
padding-top: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.price-block {
|
||||
@@ -16038,7 +16175,7 @@ img {
|
||||
.price-block .inner-box .content-box .price-box {
|
||||
position: relative;
|
||||
color: var(--brand-primary);
|
||||
font-size: 66px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
font-family: "Roboto Condensed";
|
||||
}
|
||||
@@ -16071,8 +16208,10 @@ img {
|
||||
}
|
||||
|
||||
.price-block .inner-box .content-box .start-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 13px 80px;
|
||||
padding: 13px 20px;
|
||||
color: var(--brand-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
@import "blocks/hero-code";
|
||||
@import "blocks/widget-header";
|
||||
@import "blocks/post-preview";
|
||||
@import "blocks/steps-form";
|
||||
|
||||
@import "blocks/footer";
|
||||
|
||||
@@ -195,15 +196,6 @@ img{
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.theme-btn{
|
||||
display:inline-block;
|
||||
transition:all 0.3s ease;
|
||||
-moz-transition:all 0.3s ease;
|
||||
-webkit-transition:all 0.3s ease;
|
||||
-ms-transition:all 0.3s ease;
|
||||
-o-transition:all 0.3s ease;
|
||||
}
|
||||
|
||||
.centered{
|
||||
text-align:center;
|
||||
}
|
||||
@@ -237,319 +229,6 @@ img{
|
||||
font-family: "Flaticon";
|
||||
}
|
||||
|
||||
/* Btn Style One */
|
||||
|
||||
.btn-style-one{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
padding: 10px 44px 10px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius:50px;
|
||||
background-color:var(--brand-primary);
|
||||
border:1px solid var(--brand-primary);
|
||||
text-transform: capitalize;
|
||||
font-family: 'Roboto Condensed';
|
||||
box-shadow:0px 5px 10px rgba(0,0,0,0.10);
|
||||
}
|
||||
|
||||
.btn-style-one .txt{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.btn-style-one:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
background-color: #ffffff;
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
-webkit-transform: scale(1, 0.5);
|
||||
transform: scale(1, 0.5);
|
||||
}
|
||||
|
||||
.btn-style-one:hover::before{
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.btn-style-one:hover{
|
||||
color: var(--brand-primary);
|
||||
border-color:#ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Two */
|
||||
|
||||
.btn-style-two{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
padding: 10px 44px 10px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius:50px;
|
||||
background:none;
|
||||
border:1px solid #ffffff;
|
||||
text-transform: capitalize;
|
||||
font-family: 'Roboto Condensed' ;
|
||||
}
|
||||
|
||||
.btn-style-two:before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color: var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
}
|
||||
|
||||
.btn-style-two:hover::before{
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-two .txt{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.btn-style-two:hover{
|
||||
color:#ffffff;
|
||||
border-color:var(--brand-primary);
|
||||
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
|
||||
-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
|
||||
-ms-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
|
||||
-o-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.10);
|
||||
}
|
||||
|
||||
/* Btn Style Three */
|
||||
|
||||
.btn-style-three{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
color: #ffffff;
|
||||
padding: 12px 44px 12px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius:50px;
|
||||
background-color:var(--brand-primary);
|
||||
text-transform: capitalize;
|
||||
font-family: 'Roboto Condensed' ;
|
||||
-webkit-box-shadow: 0 10px 32px rgba(255,98,98,0.10);
|
||||
-moz-box-shadow: 0 10px 32px rgba(255,98,98,0.10);
|
||||
-ms-box-shadow: 0 10px 32px rgba(255,98,98,0.10);
|
||||
-o-box-shadow: 0 10px 32px rgba(255,98,98,0.10);
|
||||
box-shadow: 0 10px 32px rgba(255,98,98,0.10);
|
||||
}
|
||||
|
||||
.btn-style-three:before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color: #2b2b2b;
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
}
|
||||
|
||||
.btn-style-three:hover::before{
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-three .txt{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.btn-style-three:hover{
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Four */
|
||||
|
||||
.btn-style-four{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
padding: 10px 48px 10px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
border-radius:0px;
|
||||
background-color: var(--brand-secondary);
|
||||
text-transform: capitalize;
|
||||
font-family: 'Roboto Condensed' ;
|
||||
-webkit-box-shadow: 0 10px 30px rgba(255,98,98,0.10);
|
||||
-moz-box-shadow: 0 10px 30px rgba(255,98,98,0.10);
|
||||
-ms-box-shadow: 0 10px 30px rgba(255,98,98,0.10);
|
||||
-o-box-shadow: 0 10px 30px rgba(255,98,98,0.10);
|
||||
box-shadow: 0 10px 30px rgba(255,98,98,0.10);
|
||||
}
|
||||
|
||||
.btn-style-four:before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color:var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
}
|
||||
|
||||
.btn-style-four:hover::before{
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-four .txt{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.btn-style-four:hover{
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
/* Btn Style Five */
|
||||
|
||||
.btn-style-five{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: var(--brand-primary);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
background:none;
|
||||
border-radius:50px;
|
||||
padding: 9px 44px 9px;
|
||||
border:1px solid var(--brand-primary);
|
||||
text-transform: capitalize;
|
||||
font-family: 'Roboto Condensed' ;
|
||||
}
|
||||
|
||||
.btn-style-five:before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background-color: var(--brand-primary);
|
||||
-webkit-transform: scale(0, 1);
|
||||
-ms-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
-webkit-transform-origin: top right;
|
||||
-ms-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
}
|
||||
|
||||
.btn-style-five:hover::before{
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.btn-style-five .txt{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.btn-style-five:hover{
|
||||
color:#ffffff;
|
||||
border-color:var(--brand-primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*Social Icon One*/
|
||||
@@ -4011,7 +3690,7 @@ img{
|
||||
height:981px;
|
||||
background-position:right top;
|
||||
background-repeat:no-repeat;
|
||||
background-size: 70%;
|
||||
background-size: 73%;
|
||||
}
|
||||
|
||||
.banner-section-two .content-column{
|
||||
@@ -5540,7 +5219,11 @@ img{
|
||||
|
||||
.price-page-section{
|
||||
position:relative;
|
||||
padding:95px 0px 0px;
|
||||
padding: 30px 0 0 0;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.price-block{
|
||||
@@ -5576,7 +5259,7 @@ img{
|
||||
.price-block .inner-box .content-box .price-box{
|
||||
position:relative;
|
||||
color:var(--brand-primary);
|
||||
font-size:66px;
|
||||
font-size:36px;
|
||||
font-weight:700;
|
||||
font-family: 'Roboto Condensed' ;
|
||||
}
|
||||
@@ -5609,8 +5292,10 @@ img{
|
||||
}
|
||||
|
||||
.price-block .inner-box .content-box .start-btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position:relative;
|
||||
padding:13px 80px;
|
||||
padding:13px 20px;
|
||||
color:var(--brand-primary);
|
||||
font-size:18px;
|
||||
font-weight:400;
|
||||
|
||||
Reference in New Issue
Block a user