/*
#4a4f55
site color
*/
/*
|----------------------------------------------------------------------
| Body Main Css
|----------------------------------------------------------------------
*/
html {
scroll-behavior: smooth;
}
body,
html {
overflow-x: hidden;
}
:root {
--chevron: url('data:image/svg+xml;utf8,');
--tick: url('data:image/svg+xml;utf8,');
}
/* ============ fonts ============== */
@font-face {
font-family: "Poppins Bold";
src: url("../webfonts/Poppins-Bold.ttf");
}
@font-face {
font-family: "Poppins SemiBold";
src: url("../webfonts/Poppins-SemiBold.ttf");
}
@font-face {
font-family: "Poppins Regular";
src: url("../webfonts/Poppins-Regular.ttf");
}
@font-face {
font-family: "Poppins Italic";
src: url("../webfonts/Poppins-Italic.ttf");
}
@font-face {
font-family: "Poppins Medium";
src: url("../webfonts/Poppins-Medium.ttf");
}
@font-face {
font-family: "FireSans Bold";
src: url("../webfonts/FiraSans-Bold.ttf");
}
@font-face {
font-family: "FireSans Medium";
src: url("../webfonts/FiraSans-Medium.ttf");
}
@font-face {
font-family: "FireSans Regular";
src: url("../webfonts/FiraSans-Regular.ttf");
}
@font-face {
font-family: "FireSans Italic";
src: url("../webfonts/FiraSans-Italic.ttf");
}
@font-face {
font-family: "FireSans SemiBold";
src: url("../webfonts/FiraSans-SemiBold.ttf");
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
background-color: #fff;
color: #67687a;
font-size: 14px;
font-family: "Poppins Regular";
margin: 0;
padding: 0;
line-height: 1.6;
word-break: break-word;
transition: all ease 0.5s;
overflow-x: hidden;
}
body {
display: flex;
flex-flow: column;
}
body.flow {
overflow: hidden !important;
}
::selection {
background: #4a4f55;
color: #fff;
}
::-moz-selection {
background: #4a4f55;
color: #fff;
}
body a {
color: #080a0f;
word-break: break-word;
}
body a,
body span {
display: inline-block;
text-decoration: none;
}
body a:hover {
color: #0070e2;
}
body a:focus,
body a:hover {
outline: none !important;
text-decoration: none !important;
}
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
}
ul li a {
transition: all ease 0.5s;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Poppins Bold";
line-height: 1.1;
margin: 0;
margin-bottom: 10px;
color: #000;
}
p {
margin-bottom: 20px;
}
p:nth-last-child(1) {
margin: 0;
}
.relative {
position: relative;
}
.tableDv {
display: table;
width: 100%;
height: 100%;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.toggle {
position: absolute;
top: 35px;
right: 5px;
display: flex;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 10px;
transition: all ease 0.5s;
z-index: 4;
}
.toggle span,
.toggle span:before,
.toggle span:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #080a0f;
border-radius: 50px;
transition: all ease 0.5s;
}
.toggle span {
position: relative;
display: block;
width: 22px;
margin: 8px auto;
}
.toggle span:before {
top: -7px;
}
.toggle span:after {
bottom: -7px;
}
.toggle.active span {
width: 22px;
background: transparent !important;
}
.toggle.active span:before,
.toggle.active span:after {
top: 0;
}
.toggle.active span:before {
transform: rotate(405deg);
}
.toggle.active span:after {
transform: rotate(-45deg);
}
.blockquote {
background: #fafafa;
color: #151d23;
padding: 10px 10px 10px 20px;
border: 1px solid #f0f5f9;
border-left: 4px solid #4a4f55;
}
/*
|----------------------------------------------------------------------
| Body Main Button
|----------------------------------------------------------------------
*/
.webBtn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
height: 46px;
background: #e44839;
background-position: 100% 0;
background-size: 100% 100%;
color: #fff;
font-size: 14px;
font-family: "Poppins Medium";
text-align: center;
padding: 0 30px;
white-space: nowrap;
/*text-transform: uppercase;
*/
border: 0;
border-radius: 5px;
outline: none !important;
/*box-shadow: rgb(15 78 126 / 5%) 0 16px 48px 0;
*/ /*box-shadow: rgb(81 24 24 / 20%) 0 5px 10px 0;
*/
box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
-webkit-border-radius: 5px;
transition: all 0.3s ease-in-out;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.webBtn:hover {
background: #f35749;
color: #fff;
transform: translateY(-5px);
}
.smBtn {
min-width: 40px;
height: 36px;
padding: 0 20px;
}
.mdBtn {
min-width: 80px;
height: 40px;
}
.lgBtn {
height: 54px;
font-size: 16px;
padding: 0 40px;
}
.blankBtn {
background: #fff;
color: #4682f0;
}
sub {
font-family: "Poppins Regular";
}
.blankBtn:hover {
background: #e74433;
color: #fff;
}
.lightBtn {
background: #fff4f4;
color: #fff;
}
.lightBtn:not(:hover) {
box-shadow: none;
}
.lightBtn:hover {
background: #f5821f;
color: #fff;
}
.labelBtn {
min-width: initial;
height: auto;
background: transparent;
color: #f5821f;
padding: 0;
border: 0;
box-shadow: none;
}
.labelBtn:hover {
background: transparent;
color: #fff;
}
.labelBtn > i {
font-size: 100%;
}
.simpleBtn {
background: #fff;
color: #fff;
/* border: 1px solid #b5bcc0; */
}
.simpleBtn:hover {
background: #fff;
color: #f5821f;
/* border-color: #f5821f; */
}
.simpleBtn.icoBtn > img {
filter: none;
}
.grayBtn {
background: #fff;
color: #8b9593;
border: 1px solid #eee;
}
.grayBtn:hover {
background: #fafafa;
color: #8b9593;
}
.borderBtn {
border: 2px solid #f5821f;
}
.arrowBtn {
display: flex !important;
width: 46px;
min-width: 46px;
padding: 0 5px;
}
.arrowBtn > i {
font-weight: bold;
margin: 0 !important;
}
.arrowBtn > img {
width: 18px;
}
.icoBtn > img {
width: 18px;
margin-right: 10px;
filter: brightness(0.2) invert(0.2);
}
.roundBtn {
border-radius: 50px;
}
.blockBtn {
width: 100%;
}
.blockBtn em {
flex: 1;
text-align: left;
}
.webBtn i {
margin-right: 10px;
}
.webBtn i.fi-arrow-right,
.webBtn i.fi-arrow-left {
font-size: 120%;
font-weight: bold;
}
.webBtn i.fi-arrow-right {
margin-left: 10px;
margin-right: 0;
}
.webBtn i.fi-arrow-left {
margin-left: 0;
margin-right: 10px;
}
/*_____ webBtn spinner _____*/
.webBtn .spinner {
width: auto;
height: auto;
background: inherit;
border-radius: inherit;
overflow: hidden;
}
.webBtn .spinner ~ i {
visibility: hidden;
}
.webBtn .spinner,
.webBtn .spinner:before,
.webBtn .spinner:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.webBtn .spinner:before,
.webBtn .spinner:after {
content: "";
width: 18px;
height: 18px;
border: 3px solid;
animation: spinner 0.5s linear infinite;
border-radius: 75%;
}
.webBtn .spinner:before {
border-right-color: transparent;
border-bottom-color: transparent;
}
.webBtn .spinner:after {
border-top-color: transparent;
border-left-color: transparent;
opacity: 0.5;
}
.webBtn.smBtn .spinner:before,
.webBtn.smBtn .spinner:after {
width: 14px;
height: 14px;
}
.webBtn.lgBtn .spinner:before,
.webBtn.lgBtn .spinner:after {
width: 20px;
height: 20px;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
*[disabled] {
cursor: not-allowed !important;
}
a[disabled],
button[disabled] {
opacity: 0.8;
}
/*
|----------------------------------------------------------------------
| Body Inner Css
|----------------------------------------------------------------------
*/
h1 {
font-size: 40px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
img {
width: 100%;
display: block;
}
em {
font-style: normal;
}
input,
button,
select,
textarea {
text-decoration: none !important;
outline: none !important;
}
.ease,
body a,
body button,
body .webBtn {
transition: all ease 0.5s;
}
.contain,
.contain-fluid {
position: relative;
max-width: 1140px;
padding: 0 15px;
margin: auto;
min-height: 1px;
}
.contain-fluid {
max-width: 1600px;
padding: 0 15px;
}
.contain:before,
.contain:after,
.contain-fluid:before,
.contain-fluid:after {
content: "";
display: table;
}
.contain:after,
.contain-fluid:after {
clear: both;
}
section {
position: relative;
padding: 70px 0;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.formRow {
display: flex;
flex-wrap: wrap;
margin: -10px;
}
.formRow > [class*="col-"],
.formRow > [class^="col-"] {
padding: 10px;
}
.flexBox {
display: flex;
align-items: center;
justify-content: center;
}
.flexDv {
width: 100%;
}
.flexRow {
margin: -15px;
}
.flexRow > .col {
padding: 15px;
}
.bTn {
display: flex;
flex-flow: wrap;
gap: 10px;
}
.bTn.formBtn {
margin-top: 20px;
}
.text-left.bTn,
.text-left .bTn {
justify-content: flex-start;
}
.text-center.bTn,
.text-center .bTn {
justify-content: center;
}
.text-right.bTn,
.text-right .bTn {
justify-content: flex-end;
}
/* ======== error or spinner ========== */
input.error {
border-color: Red !important;
border-style: solid;
border-width: 1px;
}
textarea.error {
border-color: Red !important;
border-style: solid;
border-width: 1px;
}
select.error {
border-color: Red !important;
border-style: solid;
border-width: 1px;
}
label.error {
color: red;
font-size: 11px;
}
input[type="“radio”"].error:after,
input[type="“checkbox”"].error:after {
border-color: red;
}
/* ================= popup ================== */
.popup .inside {
max-width: 700px;
margin: 0 auto;
}
.tableDv {
display: table;
width: 100%;
height: 100%;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(25, 33, 37, 0.95);
padding: 20px 0;
overflow: auto;
z-index: 99999;
/* display: flex; */
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.popup ._inner {
position: relative;
max-width: 600px;
/*background: #f7f8f9;*/
background: #fff;
padding: 20px;
margin: auto;
border-radius: 10px;
-webkit-box-shadow: 0 7px 14px 0 rgba(59, 65, 94, 0.1),
0 3px 6px 0 rgba(0, 0, 0, 0.07);
box-shadow: 0 7px 14px 0 rgba(59, 65, 94, 0.1),
0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
.popup.big-popup ._inner {
max-width: 800px;
}
.popup.small-popup ._inner {
max-width: 420px;
}
.popup ._inner h3 {
padding-right: 25px;
margin-bottom: 20px;
}
.popup ._inner h4 {
padding-right: 25px;
margin-bottom: 15px;
}
.popBtn {
cursor: pointer;
}
.crosBtn {
position: absolute;
top: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
right: 5px;
width: 28px;
height: 28px;
color: #8b9593;
font-size: 18px;
text-align: center;
cursor: pointer;
z-index: 5;
}
.crosBtn:before {
content: "\2715";
line-height: 1;
}
.popup .list > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
}
.popup .list > li > div:nth-child(1) {
width: 120px;
min-width: 120px;
font-family: "Poppins Bold";
margin-right: 10px;
}
.popup .list > li > div:nth-child(2) {
width: 100%;
color: #8b9593;
}
.popup .blockLst {
margin: -15px;
}
/*
|----------------------------------------------------------------------
| Dropdown
|----------------------------------------------------------------------
*/
.dropBtn {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.dropBtn > i.chevron {
display: inline-block;
width: 10px;
min-width: 10px;
height: 10px;
background-image: var(--chevron);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0;
margin-left: 5px;
transition: inherit;
}
.dropDown {
position: relative;
z-index: 1;
}
.dropCnt {
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
max-width: 260px;
background: #fff;
margin-top: 10px;
visibility: hidden;
opacity: 0;
/* border: 1px solid #eee; */
border-radius: 7px;
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
transition: all ease 0.5s;
overflow: hidden;
}
.dropCnt.right {
left: initial;
right: 0;
}
.dropCnt.active {
margin-top: 0;
visibility: visible;
opacity: 1;
}
.dropLst {
/* border: 1px solid #eee; */
padding: 6px 0;
/* border-radius: 7px; */
}
.dropLst > li,
.dropLst > li > * {
display: block;
}
/* .dropLst > li:nth-child(1) > * {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.dropLst > li:nth-last-child(1) > * {
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.dropLst > li:not(:nth-last-child(1)) {
border-bottom: 1px solid #eee;
} */
.dropLst > li > * {
display: flex;
align-items: center;
width: 100%;
background: #fff;
text-align: left;
padding: 6px 15px;
border: 0;
}
.dropLst > li > *:hover {
background: #fafafa;
}
.dropLst > li > * > i {
margin-right: 6px;
}
/*
|----------------------------------------------------------------------
| Editor
|----------------------------------------------------------------------
*/
.ckEditor {
/* Font */
/* Emoji fonts are added to visualise them nicely in Internet Explorer. */
font-family: "Poppins Regular", sans-serif, Arial, Verdana, "Trebuchet MS",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
/* Text color */
color: #333;
}
.ckEditor .cke_editable {
font-size: 13px;
line-height: 1.6;
/* Fix for missing scrollbars with RTL texts. (#10488) */
word-wrap: break-word;
}
.ckEditor blockquote {
font-style: italic;
font-family: "Poppins Regular", Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.ckEditor .cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.ckEditor .cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.ckEditor a {
display: inline;
color: #4a4f55;
}
.ckEditor ol,
.ckEditor ul,
.ckEditor dl {
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* Preserved spaces for list items with text direction different than the list. (#6249,#8049)*/
padding: 0 40px;
}
.ckEditor ul,
.ckEditor ol {
padding: 0;
padding-left: 20px;
margin: 0 0 10px;
list-style-position: inside;
}
.ckEditor ul > li,
.ckEditor ol > li {
display: list-item;
margin-bottom: 5px;
}
.ckEditor ul > li ul,
.ckEditor ol > li ol {
margin: 5px 0 7px;
}
.ckEditor h1,
.ckEditor h2,
.ckEditor h3,
.ckEditor h4,
.ckEditor h5,
.ckEditor h6 {
font-weight: normal;
line-height: 1.2;
}
.ckEditor hr {
border: 0px;
border-top: 1px solid #ccc;
}
.ckEditor img.right {
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.ckEditor img.left {
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.ckEditor pre {
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
-moz-tab-size: 4;
tab-size: 4;
}
.ckEditor .marker {
background-color: #4a4f55;
}
.ckEditor span[lang] {
font-style: italic;
}
.ckEditor figure {
text-align: center;
outline: solid 1px #ccc;
background: rgba(0, 0, 0, 0.05);
padding: 10px;
margin: 10px 20px;
display: inline-block;
}
.ckEditor figure > figcaption {
text-align: center;
display: block; /* For IE8 */
}
.ckEditor a > img {
padding: 1px;
margin: 1px;
border: none;
outline: 1px solid #0782c1;
}
/* Widget Styles */
.ckEditor .code-featured {
border: 5px solid #4a4f55;
}
.ckEditor .math-featured {
padding: 20px;
box-shadow: 0 0 2px #4a4f55;
background-color: rgba(255, 0, 0, 0.05);
margin: 10px;
}
.ckEditor .image-clean {
border: 0;
background: none;
padding: 0;
}
.ckEditor .image-clean > figcaption {
font-size: 0.9em;
text-align: right;
}
.ckEditor .image-grayscale {
background-color: white;
color: #666;
}
.ckEditor .image-grayscale img,
.ckEditor img.image-grayscale {
filter: grayscale(100%);
}
.ckEditor .embed-240p {
max-width: 426px;
max-height: 240px;
margin: 0 auto;
}
.ckEditor .embed-360p {
max-width: 640px;
max-height: 360px;
margin: 0 auto;
}
.ckEditor .embed-480p {
max-width: 854px;
max-height: 480px;
margin: 0 auto;
}
.ckEditor .embed-720p {
max-width: 1280px;
max-height: 720px;
margin: 0 auto;
}
.ckEditor .embed-1080p {
max-width: 1920px;
max-height: 1080px;
margin: 0 auto;
}
.ckEditor i,
.ckEditor em {
font-style: italic;
}
.ckEditor b,
.ckEditor strong {
font-weight: bold;
}
.ckEditor u {
text-decoration: underline;
}
.ckEditor span {
display: initial;
text-decoration: inherit;
}
/*_____ owl-nav _____*/
#services .owl-carousel .owl-stage-outer {
overflow: unset !important;
}
.owl-carousel.owl-theme .owl-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0;
}
.owl-carousel.owl-theme .owl-nav [class*="owl-"] {
position: absolute;
top: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #4682f0 !important;
color: #fff;
font-size: 14px;
margin: -20px 0 0;
border-radius: 75%;
box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}
/*
.owl-carousel.owl-theme .owl-nav [class*="owl-"]:hover {
color: #f5821f;
} */
.owl-carousel.owl-theme .owl-nav .owl-prev {
left: -50px;
}
.owl-carousel.owl-theme .owl-nav .owl-next {
right: -50px;
}
.owl-carousel.owl-theme .owl-nav [class*="owl-"] > i {
font-weight: bold;
}
/*_____ owl-dots _____*/
.owl-dots {
text-align: center;
position: relative;
margin-top: 20px;
line-height: 0;
z-index: 5;
}
.owl-dots .owl-dot {
display: inline-block;
padding: 0 2px !important;
}
.owl-dots .owl-dot span {
display: block;
width: 10px !important;
height: 4px !important;
margin: auto;
background-color: #aaa !important;
border-radius: 50px;
transition: all ease 0.5s;
margin: 2px;
}
.owl-dots .owl-dot.active span {
width: 24px;
height: 4px;
background-color: #f9bc09 !important;
}
/*
|----------------------------------------------------------------------
| Form
|----------------------------------------------------------------------
*/
label {
display: block;
font-weight: normal;
cursor: pointer;
}
label > a {
color: #3c9cdb;
}
label > a:hover {
color: #4a4f55;
}
.txtGrp {
position: relative;
}
.txtGrp:not(:nth-last-child(1)) {
margin-bottom: 20px;
}
.infoHead {
margin-top: 40px;
margin-bottom: 20px;
}
form h5 + p {
margin: -10px 0 20px;
}
.txtBox {
display: block;
width: 100%;
height: 46px;
background: #fefefe;
text-align: left;
padding: 6px 12px;
border: 1px solid #eee;
border-radius: 2px;
outline: none !important;
transition: all ease 0.5s;
border-color: rgb(192 185 185);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.txtGrp label ~ .txtBox:not(button) {
padding: 16px 12px 6px;
}
.txtBox:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
}
textarea.txtBox {
height: 190px;
resize: none;
border-radius: 6px !important;
-webkit-border-radius: 6px !important;
-moz-border-radius: 6px !important;
-ms-border-radius: 6px !important;
-o-border-radius: 6px !important;
}
.txtGrp .txtBox.uploadImg:not([data-upload]) {
background: #fff;
color: #4a4f55;
text-align: center;
border-color: #4a4f55;
box-shadow: inset 1px 1px 4px #fcfcfc;
}
.txtGrp .txtBox.uploadImg[data-upload] {
display: flex;
align-items: center;
color: #8b9593;
}
.txtGrp .txtBox.uploadImg[data-upload]:before {
content: attr(data-text);
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.txtGrp .txtBox.uploadImg[data-upload]:after {
content: "Hochladen";
color: #4a4f55;
margin-left: 5px;
}
.txtGrp .txtBox.uploadImg[data-upload].uploaded:after {
content: "Entfernen";
}
.txtGrp:not(.lblBtn) > label {
position: absolute;
top: 0;
display: flex;
align-items: center;
min-height: 46px;
color: #8b9593;
line-height: 1;
margin: 0;
margin-left: 13px;
pointer-events: none;
transition: all ease 0.5s;
z-index: 1;
}
.txtGrp:not(.lblBtn) > label.move {
font-size: 10px;
transform: translateY(-12px);
}
.txtBox:disabled {
background: #e3e8ee;
cursor: not-allowed;
border-color: #d8dee6 !important;
}
.txtBox::placeholder {
color: #575759;
}
.txtBox:focus::placeholder {
opacity: 0.4;
}
.txtGrp .txtBox:focus::placeholder {
opacity: 0;
}
.txtBox:hover,
.txtBox:focus {
border-color: #4a4f55;
}
input[type="radio"],
input[type="checkbox"] {
position: relative;
width: 18px;
min-width: 18px;
height: 18px;
margin-top: 0;
cursor: pointer;
}
input[type="radio"],
input[type="checkbox"] {
display: inline-block;
appearance: initial;
}
input[type="radio"]:before,
input[type="checkbox"]:before,
input[type="radio"]:after,
input[type="checkbox"]:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
input[type="checkbox"]:before,
input[type="checkbox"]:after {
transition: all linear 0.3s;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
background-position: center;
background-repeat: no-repeat;
background-size: 8px;
z-index: 1;
}
input[type="radio"]:after,
input[type="checkbox"]:after {
background: #fff;
border: 1px solid #d9dade;
border-radius: 4px;
box-shadow: inset 1px 1px 4px #f2f3f7;
}
input[type="radio"]:after {
border-radius: 75%;
}
input[type="checkbox"]:checked:before {
background-image: var(--tick);
}
input[type="radio"]:checked:after {
border-color: #4a4f55;
box-shadow: inset 0 0 0 4px #4a4f55;
}
input[type="checkbox"]:checked:after {
background: #4a4f55;
border-color: #4a4f55;
box-shadow: none;
}
.lblBtn {
display: flex;
text-align: left;
}
.lblBtn > input[type="radio"],
.lblBtn > input[type="checkbox"] {
margin-top: 2px;
}
.lblBtn label {
align-self: center;
font-family: "Poppins Bold";
line-height: 1.5;
cursor: pointer;
margin: 0 0 0 10px;
}
input[type="file"].uploadFile {
display: none;
}
.uploadImg {
position: relative;
cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
select.txtBox {
background-image: var(--chevron);
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 10px;
padding-right: 24px !important;
-webkit-appearance: none;
appearance: none;
}
/*
|----------------------------------------------------------------------
| Page Loader
|----------------------------------------------------------------------
*/
#pageloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #f5f6f8;
z-index: 999999;
}
.loader {
width: 40px;
height: 40px;
border: 4px solid #f5821f;
border-right: 4px solid #f0f5f9;
border-radius: 75%;
animation: spin 0.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
/* ================top nav============ */
.topNav {
padding: 10px 0px;
background: linear-gradient(110deg, #000000 45%, #ff651c 40%);
}
.topNav p {
margin-bottom: 0px;
font-size: 14px;
color: #fff;
}
.topNav .colL {
width: 20%;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.topNav .colR {
width: 80%;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.topNav ul li a {
color: rgb(255, 255, 255);
font-family: "Poppins Regular";
padding: 0px 10px;
/* text-transform: uppercase; */
font-size: 13px;
letter-spacing: 1px;
}
.topNav ul li:first-child,
.topNav ul li:nth-child(2) {
margin-right: 20px;
}
.topNav .colR li p {
align-self: center;
}
.topNav .colR li p:first-child {
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
color: #ff651c;
}
.topNav .colR li p span {
display: block;
font-size: 13px;
color: #f7f7f7;
font-family: "Poppins Regular";
}
.topNav .colR li p span:first-child {
margin-bottom: 2px;
font-family: "Poppins Bold";
color: #fff;
font-size: 14px;
letter-spacing: 1px;
}
.topNav .social li a {
padding: 0;
color: #e41e2f;
font-size: 19px;
margin-right: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hideBig {
display: none;
}
/*
|----------------------------------------------------------------------
| Header
|----------------------------------------------------------------------
*/
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
z-index: 9999;
background: transparent;
/* box-shadow: 0px 0px 4px #ddd; */
}
#pg header {
box-shadow: 0px 0px 4px #ddd;
}
header.fix {
box-shadow: 0px 0px 4px #ddd;
background: #fff;
}
.logo {
float: left;
width: 88px;
padding: 2px 0;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
.logo > a {
display: block;
}
nav {
float: right;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100px;
}
nav {
display: flex;
align-items: center;
}
nav > ul {
display: flex;
align-items: center;
justify-content: center;
margin: 0 -20px;
}
nav > #nav {
margin: 0 auto;
}
nav > ul > li {
position: relative;
padding: 0 15px;
}
nav > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
color: #000;
text-align: center;
font-family: "Poppins Medium";
}
nav > ul > li > a:hover,
nav > ul > li.active > a:not(.webBtn) {
color: #e44839;
}
#nav > li.drop > a {
position: relative;
}
#nav > li.drop > a:after {
content: "\e93d";
font-size: 12px;
font-family: "font-icon";
font-weight: bold;
margin-left: 6px;
line-height: 1;
}
#nav > li > .sub {
position: absolute;
top: 100%;
left: -194px;
width: 580px;
background: #fff;
text-align: left;
margin-top: 10px;
visibility: hidden;
opacity: 0;
border-radius: 4px;
transition: none;
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 7%);
overflow: hidden;
padding: 4rem;
}
#nav > li:hover > .sub {
visibility: visible;
opacity: 1;
margin-top: 0;
transition: all 0.2s ease-out;
}
#nav > li > .sub > li,
#nav > li > .sub > li > a {
display: block;
}
#nav > li > .sub li a {
font-size: 14px;
padding: 3px 2px;
/* border-bottom: solid 1px #eee; */
}
#nav > li > .sub > li > a:hover {
color: #4a4f55;
}
#nav > li > .sub .flex .col-md-6 li {
display: block;
}
nav #cta {
margin-left: 20px;
}
nav #cta li {
padding: 0 8px;
}
header .webBtn {
color: #fff;
}
/*
|----------------------------------------------------------------------
| Footer
|----------------------------------------------------------------------
*/
footer {
position: relative;
/* background: #1d1d1d; */
background-image: url(../images/bg-footer1.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
font-family: "Poppins Regular";
padding-top: 80px;
overflow: hidden;
}
footer .flexRow {
margin: -15px;
}
footer h5 {
color: #fff;
}
footer .flexRow > .col {
width: 25%;
padding: 15px;
}
footer .footerLogo {
max-width: 130px;
}
footer h5 {
position: relative;
margin-bottom: 15px;
padding-bottom: 10px;
}
footer p {
font-size: 14px;
}
footer .lst > li {
display: block;
margin-bottom: 10px;
}
footer .lst > li:nth-last-child(1) {
margin-bottom: 0 !important;
}
footer a {
color: inherit;
}
footer a:hover {
color: #4682f0;
}
footer .smLst {
margin: -5px -10px;
}
footer .infoLst > li {
display: flex;
margin-bottom: 20px;
}
footer .infoLst > li > img {
width: 16px;
min-width: 16px;
height: 16px;
margin-top: 2px;
margin-right: 10px;
filter: brightness(0) invert(1);
}
footer .smLst > li {
padding: 5px 10px;
}
footer .social {
margin: 30px -3px -3px;
}
footer .social > li {
padding: 3px;
}
footer .social > li > a {
display: flex !important;
align-items: center;
justify-content: center;
width: 32px;
min-width: 32px;
height: 32px;
background: #fff;
/* background: rgb(255 255 255 / 10%); */
padding: 9px;
border-radius: 75%;
}
footer .social > li > a:hover {
background: #e9e9e9;
}
footer form > label {
font-size: 12px;
margin-bottom: 7px;
}
footer form .txtGrp,
.txtGrp.affiliate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #080a0f;
margin: 10px 0 30px;
}
.txtGrp:not(.lblBtn) > label {
position: absolute;
top: 0;
display: flex;
align-items: center;
min-height: 46px;
color: #919292;
line-height: 1;
margin: 0;
margin-left: 13px;
pointer-events: none;
transition: all ease 0.5s;
z-index: 1;
}
footer form .txtBox,
.txtGrp.affiliate .txtBox {
padding-right: 46px;
}
footer form button,
.txtGrp.affiliate button {
position: absolute;
top: 0;
right: 16px;
bottom: 0;
background: transparent;
font-size: 16px;
padding: 0;
line-height: 0;
border: 0;
cursor: pointer;
}
/* footer .social > li > a img {
filter: invert(1) brightness(0);
} */
/* =============== Copyright ================= */
.copyright {
padding: 25px 0;
margin-top: 60px;
border-top: 1px solid rgb(255 255 255 / 7%);
z-index: 1;
}
.copyright .inner {
display: flex;
justify-content: center;
}
.copyright p {
flex: 1;
margin: 0;
text-align: center;
}
.copyright p > a {
color: #fff;
}
.copyright p > a:hover {
color: #4682f0;
}
/* ================ banner ============= */
#banner {
/* background-image: url("../images/8.jpg");
margin-top: 100px;
background-size: cover;
background-position: center;
height: 600px;*/
display: flex;
background-image: url(../images/right-shape.png);
background-position: top right;
background-repeat: no-repeat;
background-size: auto;
/* width: 2293px;
left: 4.00391px; */
/* height: 670px; */
}
.background-overlay {
background-image: url(../images/bl1.png);
background-position: bottom left;
background-repeat: no-repeat;
opacity: 0.5;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#banner .mini {
color: #4682f0;
font-family: "Poppins Bold";
margin-bottom: 10px;
}
#banner .col {
width: 50%;
padding-right: 80px;
align-self: center;
}
#banner .col .col1 {
width: calc(100% / 3);
padding: 10px;
}
#banner .col .col1 .box {
border-radius: 12px;
padding: 20px 12px;
box-shadow: 0 8px 29px rgba(33, 33, 128, 0.1);
background-color: #fff;
display: flex;
height: 100%;
align-self: center;
}
#banner .col .ml {
margin: 0 -10px;
}
#banner .col .col1 .box .icon {
width: 32px;
position: relative;
align-self: center;
}
#banner .col .col1 .box .icon:before {
content: "";
height: 16px;
width: 1px;
background-color: #b4b4b4;
position: absolute;
top: 18%;
right: -10px;
}
#banner .col .col1 .box p {
font-size: 12px;
}
#banner .col h1 {
color: #000;
font-size: 52px;
line-height: 1.2;
}
#banner .col h1 span {
color: #e3471f;
}
#banner .col .col1 .box .tex {
padding-left: 20px;
}
#banner .colr {
width: 50%;
align-self: center;
position: relative;
}
#banner .colr .image {
position: relative;
padding-bottom: 68%;
overflow: hidden;
border-radius: 6px;
}
#banner .flex {
margin-top: 70px;
}
#banner .colr .pos {
/* width: 100%;
height: 100%; */
}
#banner .colr .movable:nth-child(1) {
top: -67px;
left: -27px;
width: 60px;
height: 60px;
}
#banner .colr .movable:nth-child(2) {
top: 0;
left: 11px;
width: 188px;
height: 194px;
z-index: 99;
}
#banner .colr .movable:nth-child(3) {
top: -82px;
right: -184px;
width: 232px;
height: 232px;
z-index: 999;
}
#banner .colr .movable:nth-child(4) {
bottom: 8px;
right: 172px;
width: 70px;
height: 70px;
}
#banner .colr .image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.one.element.movable {
z-index: 999;
position: relative;
position: absolute;
content: "";
}
/*
|----------------------------------------------------------------------
| intro
|----------------------------------------------------------------------
*/
#intro .col {
width: 50%;
padding-right: 50px;
position: relative;
align-self: center;
}
#intro .image {
position: relative;
padding-bottom: 76%;
overflow: hidden;
border-radius: 6px;
}
#intro .image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
#intro .col ul li {
display: flex;
margin-bottom: 18px;
color: #454347;
}
#intro .col ul li .no {
box-shadow: 0 10px 13px rgba(255, 180, 0, 0.21);
background-image: linear-gradient(to right, #f3001d, #ffb400);
min-width: 27px;
height: 27px;
width: 27px;
line-height: 27px;
text-align: center;
font-size: 16px;
color: #fff;
border-radius: 100%;
margin-right: 14px;
margin-top: 4px;
}
#intro .col ul li:nth-child(2) .no {
background-image: linear-gradient(to right, #00b3f5, #4938f1);
box-shadow: 0 10px 13px rgba(73, 56, 241, 0.21);
}
#intro .col ul li:nth-child(3) .no {
background-image: linear-gradient(to right, #00f511, #2e9700);
box-shadow: 0 10px 13px rgba(46, 151, 0, 0.21);
}
#intro .colr {
width: 50%;
}
strong {
color: #fabc0a;
}
.title {
background-image: linear-gradient(to bottom, #4f3dff, #ffffff);
position: absolute;
top: -20px;
left: 0;
right: 0;
z-index: -1;
line-height: 1;
opacity: 0.2;
font-size: 120px;
background-color: initial;
background-clip: text;
-o-background-clip: text;
-ms-background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-o-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
font-family: "FireSans Bold";
}
.mini-heading {
font-size: 14px;
font-family: "Poppins Medium";
color: #e3471f !important;
margin-bottom: 14px;
position: relative;
width: fit-content;
padding: 0 14px;
}
.mini-heading:before {
background-color: #e3471f !important;
left: 0;
content: "";
width: 7px;
height: 7px;
position: absolute;
top: 37%;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
}
.mini-heading:after {
background-color: #e3471f !important;
right: 0;
content: "";
width: 7px;
height: 7px;
position: absolute;
top: 37%;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
}
/* working */
.center-content {
max-width: 500px;
margin: 0 auto 30px;
text-align: center;
}
#working .center-content {
max-width: 950px;
}
#working .mini-heading {
text-align: center;
margin: 0 auto 14px;
}
#working .flex {
margin: 0 -10px;
}
#working .col {
width: calc(100% / 3);
padding: 20px;
}
#working .col .inner {
padding: 40px 20px;
background-color: #fff;
box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1);
border-radius: 10px 10px 10px 10px;
text-align: center;
height: 100%;
}
#working .col .inner .icon {
width: 68px;
margin: 0 auto 10px;
background-color: #4682f0;
border-radius: 50px;
padding: 14px;
display: flex;
justify-content: center;
align-items: center;
}
#working .col .inner .icon img {
filter: brightness(0) invert(1);
-webkit-filter: brightness(0) invert(1);
}
#working .col .inner h4,
#working .col .inner p {
color: #000;
}
/* why_choose_us */
#why_choose_us .col {
width: 50%;
padding-right: 70px;
}
#why_choose_us .colr {
width: 50%;
position: relative;
}
#why_choose_us .colr ul {
display: flex;
flex-wrap: wrap;
/* margin: 0 -10px; */
}
#why_choose_us .colr ul li {
width: 50%;
padding: 10px;
display: flex;
padding-bottom: 10px;
position: relative;
padding-left: 30px;
}
#why_choose_us .colr ul li:before {
background-image: url(../images/tick.png);
background-size: cover;
position: absolute;
top: 14px;
left: 0;
width: 16px;
height: 16px;
content: "";
filter: brightness(0) invert(1);
-webkit-filter: brightness(0) invert(1);
}
#why_choose_us h2 {
color: #fff;
}
section#why_choose_us {
background-image: linear-gradient(to right, #4682f0 0%, #02b5ff 100%);
color: #fff;
padding: 100px 0;
}
/************** progress **************/
.skills-progress:not(:last-child) {
margin: 0 0 28px;
}
.skills-progress .progress {
background: #ebeced none repeat scroll 0 0;
border-radius: 25px;
height: 5px;
overflow: visible;
margin-bottom: 0;
}
.skills-progress .progress .progress-bar {
background: #4682f0 none repeat scroll 0 0;
border-radius: 25px;
overflow: visible;
position: relative;
}
.skills-progress:nth-child(2) .progress .progress-bar {
background: #ff571c none repeat scroll 0 0;
}
.skills-progress:nth-child(3) .progress .progress-bar {
background: #fabd0a none repeat scroll 0 0;
}
.skills-progress .progress .progress-bar span {
bottom: -26px;
color: #333333;
display: inline-block;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 20px;
position: absolute;
right: 0;
}
.skills-progress .progressbar-title {
color: #333333;
font-weight: 500;
letter-spacing: 0;
margin: 6px 0 0;
font-family: "Poppins Medium";
font-size: 14px;
}
/* services */
#services .inner {
text-align: center;
padding: 40px 10px;
background-color: #f1f2fa;
border-radius: 20px;
overflow: hidden;
margin: 20px 0;
display: block;
color: #000;
transition: all 0.4s ease;
}
#services .inner .icon {
filter: drop-shadow(5px 15px 20px rgba(7, 57, 114, 0.3333333333));
margin: 0 auto 25px;
width: 70px;
-webkit-filter: drop-shadow(5px 15px 20px rgba(7, 57, 114, 0.3333333333));
}
#services .mini-heading {
text-align: center;
margin: auto;
}
#services .center .inner {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
filter: drop-shadow(5px 50px 30px rgba(7, 57, 114, 0.0666666667));
-webkit-filter: drop-shadow(5px 50px 30px rgba(7, 57, 114, 0.0666666667));
transition: all 0.4s ease;
}
#services .item:nth-child(3) {
margin-top: 60px;
}
#services .active:has(+ .center) {
transform: scale(0.9);
transition: all 0.4s ease;
}
#services .center + .active {
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transition: all 0.4s ease;
}
/* #services .inner .text h4 {
font-family: "FireSans Medium";
} */
/* video */
#video {
min-height: 500px;
background: url(../images/bgimg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/* background-attachment: fixed; */
display: flex;
justify-content: center;
align-items: center;
}
/* #video:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: 0.4;
z-index: 1;
} */
#video .center-content {
margin-bottom: 0;
}
#video .center-content h2,
#video .center-content p {
color: #fff;
}
@keyframes lineScale {
50% {
-webkit-transform: translate(-50%, -50%) scale(1.5);
-moz-animation: translate(-50%, -50%) scale(1.5);
transform: translate(-50%, -50%) scale(1.5);
}
50% {
-webkit-transform: translate(-50%, -50%) scale(0.35);
-moz-animation: translate(-50%, -50%) scale(0.35);
transform: translate(-50%, -50%) scale(0.35);
}
}
.video-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
width: 50px;
height: 50px;
background-color: #4682f0;
background-image: linear-gradient(to left, #4682f0, #9000ff);
border-radius: 50%;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
box-shadow: 0px 21px 30px 0px rgb(0 0 0 / 10%);
margin: 0 auto 20px;
z-index: 1;
}
.video-btn i {
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
font-size: 23px;
z-index: 2;
color: #fff;
border-radius: 50%;
}
.video-btn:after {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: #4682f0;
border-radius: 50%;
animation: pulse-border2 1500ms ease-out infinite;
-webkit-animation: pulse-border2 1500ms ease-out infinite;
z-index: -1;
opacity: 0.65;
}
@keyframes pulse-border2 {
0% {
transform: scale(1);
opacity: 0.67;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
@-webkit-keyframes pulse-border2 {
0% {
transform: scale(1);
opacity: 0.67;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
/* yellowbg */
.yellowbg {
width: 120vw;
height: 250px;
top: 59px;
left: -10vw;
position: absolute;
transform: rotate(3deg);
background: #f9bc09;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
}
.bgblue {
background-color: #1869ff;
padding: 80px 40px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
background-size: cover;
background-position: center;
background-image: url(../images/counter-bg.png);
}
section#counter {
padding: 0;
}
#counter .col {
width: calc(100% / 4);
padding: 10px;
}
#counter .col:not(:last-child) {
border-right: 1px solid #558cf2;
}
#counter .col .icon {
width: 90px;
background-color: #74a1f454;
padding: 18px;
border-radius: 50%;
margin: 0 auto 20px;
}
#counter .col h5,
#counter .col h2 {
color: #fff;
text-align: center;
}
#counter .col span {
font-size: 40px;
}
/* features */
#features .col {
width: 50%;
padding-right: 40px;
}
#features .col .image {
position: relative;
padding-bottom: 76%;
overflow: hidden;
border-radius: 6px;
}
#features .col .image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
#features .colr {
width: 50%;
position: relative;
}
/* =============== testimonials ================= */
#folio {
overflow: hidden;
/* background-image: linear-gradient(#fafafa, transparent); */
}
#folio:before {
content: "";
position: absolute;
height: 55%;
top: 0;
width: 100%;
/* background-image: url(../images/dots.png); */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.5;
}
#folio .owlBlock {
/* margin: -40px; */
}
#folio .inner {
padding: 20px 10px;
position: relative;
}
#folio .content {
position: relative;
background: #fff;
box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding: 40px 30px;
border-radius: 7px;
/* box-shadow: 0 3px 15px 0 rgb(0 0 0 / 10%); */
z-index: 1;
width: 400px;
}
#folio .inner:after {
content: "";
position: absolute;
background-color: #eee;
z-index: 0;
background-repeat: no-repeat;
background-position: center;
top: 74px;
bottom: 0px;
left: 0px;
right: 0px;
height: 300px;
background-color: #f0f2f7;
}
#folio .content ul li:not(:last-child) {
margin-bottom: 8px;
}
/* #folio p:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 65px;
height: 65px;
background-image: url(../images/comma.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
} */
#folio .content p {
margin-bottom: 8px;
position: relative;
}
#folio .content .icoBlk {
margin-top: 20px;
}
/* #folio .content .icoBlk {
display: flex;
align-items: center;
justify-content: center;
} */
#folio .content .ico {
width: 100px;
min-width: 100px;
height: 100px;
margin: 0 auto 40px;
box-shadow: 0 2px 5px 0 rgba(59, 65, 94, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
}
#folio .content .icoBlk h5 {
text-align: center;
margin: 0;
margin-left: 15px;
}
#folio .content .icoBlk h5 > span {
display: block;
margin-top: 10px;
font-size: 1.3rem;
font-family: "Poppins Regular";
color: #e35834;
}
/* #folio .owl-dots {
margin: -10px 0 20px;
} */
#folio .content .ico {
overflow: hidden;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
}
#folio .mini-heading {
margin: auto;
text-align: center;
}
/* faqs */
#faq {
/* background: url(../images/callbg.jpg); */
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
#faq h3 {
margin: 0 auto 10px;
}
#faq .center-content {
margin-bottom: 60px;
}
#faq .col {
width: 50%;
padding-left: 30px;
}
#faq .colr {
width: 50%;
}
#faq {
padding-top: 0;
/* background-image: url("../images/h3-bg-section-02.jpg"); */
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
#faq .mini-heading {
text-align: center;
margin: auto;
}
.faqLst > .faqBlk {
position: relative;
display: block;
background: #ffffff;
padding: 20px 0;
margin-bottom: 20px;
border-radius: 10px;
transition: all ease 0.5s;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.199);
}
.faqLst > .faqBlk h5 {
position: relative;
padding: 0 25px 0 20px;
margin: 0;
cursor: pointer;
transition: all ease 0.5s;
z-index: 2;
color: #2e2e2e;
}
.faqLst > .faqBlk h5:after {
content: "\e93d";
position: absolute;
top: 5px;
right: 12px;
font-size: 70%;
font-family: "font-icon";
font-weight: bold;
color: #2e2e2e;
}
.faqLst > .faqBlk.active h5:after {
content: "\e943";
}
.faqLst > .faqBlk .txt {
display: none;
color: #2e2e2e;
margin: 0 0 -20px;
padding: 20px 25px;
}
.last-link {
margin-top: 30px;
}
.last-link .link-icon {
width: 45px;
height: 45px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
background: #37454e;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #fff;
}
.last-link .cntnt {
flex: 1;
margin-left: 20px;
}
.last-link .cntnt h5 {
font-size: 16px;
color: #2e2e2e;
margin-bottom: 0px;
}
.last-link .cntnt a {
color: #29747a;
font-size: 16px;
}
/* small-banner */
#small-banner {
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
/* background-image: linear-gradient(180deg, #e7f1ff 25%, #ffffff 100%); */
background-image: url(../images/1.jpg);
background-position: center;
position: relative;
}
#small-banner:before {
background: linear-gradient(19deg, #0a0a73, #0e021b);
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.7;
}
#small-banner .mini-heading {
margin: auto;
text-align: center;
}
#small-banner h2,
#small-banner p {
color: #fff;
}
#small-banner .image {
background-color: #fff;
overflow: hidden;
padding: 9px;
border-radius: 10px;
box-shadow: 0 10px 50px rgba(0, 10, 80, 0.15);
height: 450px;
width: 900px;
}
#small-banner .image img {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
overflow: hidden;
height: 100%;
object-fit: cover;
object-position: top;
}
/* about */
#about {
/* background-image: url(../images/h3-bg-section-01.jpg); */
/* background-size: cover;
background-position: center;
z-index: -1; */
}
#about .col {
width: 50%;
padding-left: 40px;
}
#about .colr {
width: 50%;
position: relative;
}
#about .colr ul li {
display: block;
padding-bottom: 8px;
position: relative;
padding-left: 38px;
}
#about .colr ul li:before {
background-image: url("../images/correct.png");
background-size: cover;
background-position: center;
height: 20px;
width: 20px;
position: absolute;
left: 0;
top: 0;
content: "";
}
#about .image {
position: relative;
padding-bottom: 80%;
overflow: hidden;
border-radius: 6px;
}
#about .image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
#security .image {
position: relative;
padding-bottom: 100%;
overflow: hidden;
border-radius: 6px;
}
#security .image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.center-content .mini-heading {
margin: auto;
text-align: center;
}
.brand-obj1 {
position: absolute;
top: -9px;
right: 0px;
opacity: 0.05;
width: 150px;
z-index: -1;
animation: float-obj-y infinite 3s;
}
@-webkit-keyframes float-obj-y {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(-10px);
}
}
/* security */
#security .col {
width: 50%;
padding-right: 60px;
}
#security .colr {
width: 50%;
position: relative;
}
#security {
/* background-image: url(../images/h3-bg-section-02.jpg);
background-size: cover;
background-position: center;
z-index: -1; */
}
/* team */
#team {
background-color: #f1f6ff;
background-image: url(../images/ser-bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#team .col {
width: calc(100% / 4);
padding: 10px;
}
#team .col .inner {
-webkit-box-shadow: 0 10px 50px rgba(132, 132, 132, 0.1);
-khtml-box-shadow: 0 10px 50px rgba(132, 132, 132, 0.1);
-moz-box-shadow: 0 10px 50px rgba(132, 132, 132, 0.1);
-ms-box-shadow: 0 10px 50px rgba(132, 132, 132, 0.1);
-o-box-shadow: 0 10px 50px rgba(132, 132, 132, 0.1);
box-shadow: 0 10px 50px rgba(132, 132, 132, 0.1);
background-color: #fff;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
padding: 32px 20px;
}
#team .col .inner .image {
width: 130px;
height: 130px;
padding: 3px;
position: relative;
margin: 0 auto 24px;
-webkit-border-radius: 130px;
-khtml-border-radius: 130px;
-moz-border-radius: 130px;
-ms-border-radius: 130px;
-o-border-radius: 130px;
border-radius: 130px;
z-index: 1;
}
#team .col .inner .image:before {
background-image: linear-gradient(to left, #4682f0, #e74433);
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-border-radius: 130px;
-khtml-border-radius: 130px;
-moz-border-radius: 130px;
-ms-border-radius: 130px;
-o-border-radius: 130px;
border-radius: 130px;
}
#team .col .inner .image img {
border: 7px solid #fff;
-webkit-border-radius: 130px;
-khtml-border-radius: 130px;
-moz-border-radius: 130px;
-ms-border-radius: 130px;
-o-border-radius: 130px;
border-radius: 130px;
height: 100%;
object-fit: cover;
object-position: center;
}
#team .col .inner .text {
text-align: center;
}
#team .col .inner .text h4 {
margin-bottom: 6px;
}
#team .social {
margin-top: 20px;
justify-content: center;
}
#team .social > li {
padding: 3px;
}
#team .social > li > a {
display: flex !important;
align-items: center;
justify-content: center;
width: 32px;
min-width: 32px;
height: 32px;
background: #4682f0;
/* background: rgb(255 255 255 / 10%); */
padding: 9px;
border-radius: 75%;
}
#team .social > li > a img {
filter: invert(1);
-webkit-filter: invert(1);
}
#team .social > li > a:hover {
background: #7aa8fc;
}
/* services */
#services .col {
width: calc(100% / 4);
padding: 12px;
}
.servicepg .inner {
height: 100%;
margin: 0;
}
.servicepg {
padding-top: 0;
}
/* =========== service-detail =========== */
#service-detail .col {
width: 30%;
padding-right: 15px;
}
#service-detail .colr {
width: 70%;
padding-left: 10px;
}
/* tabs */
.tabs-lst {
background: #ffffff;
box-shadow: 4px 4px 50px 4px rgba(47, 47, 47, 0.08);
border-radius: 5px;
padding: 40px 30px;
overflow: hidden;
}
.tabs-lst li {
width: 100%;
}
.tabs-lst li a {
width: 100%;
color: #000;
padding: 15px;
position: relative;
}
.tabs-lst li.active a {
color: #fff;
background: #e74433;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.tabs-lst li a:before {
position: absolute;
content: "\f054";
top: 0px;
right: 0px;
color: #000;
font-family: "FontAwesome";
font-size: 11px;
font-weight: 600;
bottom: 0;
width: 32px;
display: flex;
justify-content: center;
align-items: center;
}
.tabs-lst li.active a:before {
color: #fff;
}
/* ============== tab end ==========*/
.btns {
margin-top: 30px;
}
.btns .blankBtn {
margin-top: 20px;
}
.btns .webBtn {
min-width: 100%;
}
.btns .webBtn i {
font-size: 22px;
}
#service-detail .card {
margin-top: 30px;
}
/* ============ btns end ========= */
#service-detail .colr .image {
height: 400px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
overflow: hidden;
margin-bottom: 30px;
}
#service-detail .colr .image img {
height: 100%;
object-fit: cover;
object-position: top;
}
#service-detail .colr .col1 {
width: calc(100% / 3);
padding: 8px;
}
#service-detail .colr .first {
margin: 0 -8px;
}
#service-detail .colr .col1 .inner {
background: #ffffff;
box-shadow: 2px 2px 40px rgba(155, 155, 155, 0.25);
border-radius: 18px;
padding: 30px;
height: 100%;
}
.blue {
position: relative;
z-index: 1;
}
.blue .inner {
background-color: #4682f0;
background-size: 300% 100%;
background-image: linear-gradient(
to right,
#4682f0,
#4682f0,
#144ebc,
#144ebc
);
color: #fff;
/* display: flex;
justify-content: center;
align-items: center;
height: 350px; */
padding: 40px 20px;
border-radius: 6px;
/* margin-top: 20px; */
}
.blue .inner h3 sub {
font-size: 1.3rem;
}
.blue .inner h4 {
color: #fff;
margin-bottom: 20px;
}
.blue .inner .webBtn {
width: 100%;
background: #f7c300;
}
.blue .inner h3 {
color: #fff;
font-size: 28px;
}
#service-detail .colr .col1 .inner .icon {
width: 74px;
height: 74px;
background: rgb(70 130 240 / 18%);
padding: 20px;
margin: 0 auto 20px;
border-radius: 50%;
}
#service-detail .colr .col1 .inner h4 {
text-align: center;
}
#service-detail .colr .col2 {
width: 50%;
}
#service-detail .colr .col3 {
width: 50%;
}
#service-detail .colr .col3 .image1 {
height: 300px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
overflow: hidden;
}
#service-detail .colr .col3 .image1 img {
height: 100%;
object-fit: cover;
object-position: center;
}
#service-detail .colr .second {
margin: 30px 0 !important;
}
#service-detail .colr .col2 ul li {
padding: 8px 0;
position: relative;
}
#service-detail .colr .col2 ul li i {
color: #e35834;
padding-right: 8px;
}
.para {
width: 500px;
}
.card {
background-image: url(../images/card.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 300px;
position: relative;
display: flex;
justify-content: center;
/* align-items: center; */
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
overflow: hidden;
margin-top: 10px;
}
/* .card::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #111111;
opacity: 0.2;
} */
.card .text {
color: #fff;
z-index: 99;
padding: 40px 20px;
}
.card .text h3 {
color: #ffffff;
}
.card .text a {
color: #fff;
}
/* ========== contact page ========== */
#contact .flexRow > .col {
padding: 15px;
}
#contact .flexRow > .col1 {
width: 35%;
}
#contact .txtBox {
border-radius: 5px 5px 5px 5px;
background-color: #f6f7f9;
border: 1px solid #eaeaea;
}
#contact .form_blk {
margin-bottom: 16px;
}
#contact .flexRow > .col1 .content {
background-image: linear-gradient(to right, #4682f0 0%, #02b5ff 100%);
padding: 80px 50px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
#contact .flexRow > .col1 .content h3,
#contact .flexRow > .col1 .content a,
#contact .flexRow > .col1 .content h5 {
color: #fff;
}
#contact .flexRow > .col1 .content h5 {
margin-bottom: 2px;
}
#contact .flexRow > .col2 {
width: 65%;
padding-left: 30px;
}
#contact .content .pre {
font-size: 16px;
}
#contact .content h4 {
font-size: 16px;
margin: 25px 0 15px;
}
#contact .infoLst > li {
display: flex;
color: #778ca3;
font-size: 16px;
margin-bottom: 30px;
align-items: center;
}
#contact .infoLst > li > i {
width: 40px;
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #4682f0;
font-size: 18px;
margin-right: 10px;
border-radius: 75%;
box-shadow: rgba(0, 0, 0, 0.04) 0 0 10px 0;
}
/* #contact form {
height: 100%;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
overflow: hidden;
z-index: 1;
position: relative;
} */
#contact h3 {
margin-bottom: 25px;
}
#contact form .bTn {
margin-top: 20px;
}
/* ============== portfoli ============ */
#portfolio .labelBtn {
margin-bottom: 10px;
}
.tabs li.active a {
color: #fff;
background: #4682f0;
border-radius: 6px;
padding: 6px 44px;
border-radius: 50px;
}
.tabs {
margin-bottom: 30px;
display: flex;
justify-content: center;
}
.tabs li {
padding-right: 28px;
}
#portfolio .col {
width: calc(100% / 3);
padding: 20px 10px;
}
#portfolio .flex {
margin: 0 -10px;
}
#portfolio .col .inner .image {
height: 270px;
margin-bottom: 20px;
}
#portfolio .col .inner .image img {
height: 100%;
object-fit: cover;
object-position: center;
}
.category {
color: #e3471f;
text-transform: uppercase;
margin-bottom: 10px;
}
#portfolio .col .inner h4 {
margin-bottom: 6px;
}
/* section#portfolio {
padding-top: 0;
} */
#portfolio a {
display: block !important;
}
/* work_detail */
#work_detail .col {
width: 70%;
}
#work_detail .col .image {
height: 400px;
overflow: hidden;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
margin-bottom: 20px;
}
#work_detail .col .image img {
height: 100%;
object-fit: cover;
object-position: center;
}
#work_detail .col .image2 {
height: 283px;
overflow: hidden;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
#work_detail .col .image2 img {
height: 100%;
object-fit: cover;
object-position: center;
}
#work_detail .col .col1 {
width: 30%;
}
#work_detail .col .col2 {
width: 70%;
padding-left: 20px;
}
/* #work_detail .col .flex {
margin: 20px 0;
} */
.date {
font-size: 12px;
color: #525252;
margin-bottom: 8px;
}
#work_detail .col .second-flex .col2 {
padding-left: 0;
padding-right: 20px;
}
#work_detail .col .second-flex .col1 .image2 {
height: 270px;
}
#work_detail .colr {
width: 30%;
}
#work_detail .colr {
width: 25%;
padding-left: 10px;
}
.sideCat ul li {
width: 100%;
display: list-item;
list-style-position: inside;
line-height: 1.2;
margin-bottom: 14px;
}
.sideCat ul li a {
width: 100%;
display: inline;
}
.sideCat ul li a:hover {
color: #4682f0;
}
#work_detail .colr .inner h4 {
margin-bottom: 15px;
}
#work_detail .colr .inner {
background: #fbfbfb;
padding: 10px 10px 10px;
margin-bottom: 30px;
border-radius: 5px;
/*box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);*/
overflow: hidden;
}
/*
|----------------------------------------------------------------------
| Checkout
|----------------------------------------------------------------------
*/
#checkout {
/* margin: -80px 0 0; */
/* padding: 0 0 20px !important; */
overflow: hidden;
/* padding-top: 0; */
}
#checkout .logo {
float: none;
margin: 0 0 20px;
}
#checkout hr {
border-color: #fe3a37;
}
/* #checkout .flexRow {
margin: -10px -50px;
} */
/* #checkout .flexRow > .col {
padding: 0px 50px;
} */
#checkout .flexRow > .col1 {
width: 50%;
}
#checkout .flexRow > .col2 {
width: 50%;
}
#checkout .shopTbl {
padding: 10px 0 0;
border: 0;
border-top: 1px solid;
}
#checkout .shopTbl > table tr > * {
border: 0;
}
#checkout .policyLst {
margin: -2px -10px;
}
#checkout .policyLst > li {
padding: 2px 10px;
display: inline-block;
}
#checkout [data-payment] .topHead .lblBtn {
flex: 1;
margin-right: 10px;
}
/*_____ smryBlk _____*/
.smryBlk {
padding: 15px;
border: 1px solid #eee;
}
.smryBlk > ._header {
margin-bottom: 15px;
}
.smryBlk > ._header > h5 {
margin: 0;
}
.smryBlk .priceLst > li {
display: flex;
padding-bottom: 10px;
}
.smryBlk .priceLst > li:nth-child(2) {
color: #fe3a37 !important;
}
.smryBlk .priceLst > li > div {
flex: 1;
}
.smryBlk .priceLst > li > div:nth-last-child(1) {
flex: auto;
text-align: right;
}
.smryBlk .priceLst > li:nth-last-child(1) {
/* color: #f53737; */
padding-top: 15px;
padding-bottom: 0;
border-top: 1px solid;
}
/*
|----------------------------------------------------------------------
| Checkout Form
|----------------------------------------------------------------------
*/
#checkout .formRow > [class*="col-"],
#checkout.formRow > [class^="col-"] {
padding: 10px;
}
#checkout .txtGrp {
position: relative;
}
#checkout .txtGrp:not(.lblBtn) > label {
position: absolute;
top: 0;
display: flex;
align-items: center;
min-height: 46px;
color: #8d9297;
line-height: 1;
margin: 0;
margin-left: 13px;
pointer-events: none;
transition: all ease 0.5s;
z-index: 1;
}
label {
display: inline-block;
font-weight: normal;
cursor: pointer;
}
#checkout .txtGrp label + .txtBox:not(button) {
padding: 16px 12px 6px;
}
#checkout .txtBox {
display: block;
width: 100%;
height: 46px;
background: #fff;
text-align: left;
padding: 6px 12px;
border: 1px solid #eeeeee;
border-radius: 0;
outline: none !important;
transition: all ease 0.5s;
}
.txtGrp:not(.lblBtn) > label.move {
font-size: 10px;
transform: translateY(-12px);
}
#checkout .topHead {
display: flex;
align-items: center;
}
#checkout ul > li {
color: rgb(0 0 0 / 82%);
}
#checkout [data-payment] .topHead .lblBtn {
flex: 1;
margin-right: 10px;
}
#checkout [data-payment] .topHead .lblBtn > input[type="radio"] {
margin-top: 0;
}
#checkout .cardLst {
margin-bottom: -4px;
}
#checkout .cardLst > li {
display: inline-block;
}
#checkout .cardLst > li > img {
width: 28px;
}
#checkout [data-payment] .inside {
margin-top: 15px;
}
#checkout .blk > .hr {
margin: 20px 0 0;
}
#checkout [data-payment] > [data-payment="paypal"] > .inside {
display: none;
}
#checkout [data-payment] > [data-payment="paypal"] .cardLst > li > img {
width: 62px;
}
.bTn.formBtn {
margin-top: 20px;
}
[cart] #placed .blk .icon {
width: 100px;
min-width: 100px;
height: 100px;
margin: 0 auto 20px;
}
.blk {
background: #fff;
padding: 25px;
margin-bottom: 20px;
border-radius: 7px;
box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}
#checkout ::placeholder {
color: #919191;
}
.qtyBtn {
display: flex;
align-items: center;
}
.qtyBtn .readBtn {
padding: 0px;
font-size: 22px;
min-width: 34px;
line-height: 1;
background: #fff;
color: #666 !important;
border: 1px solid #ddd !important;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.qtyBtn input {
width: 34px;
height: 34px;
margin-left: 5px;
margin-right: 5px;
}
.qtyBtn .qty {
background: #fafafa;
width: 34px;
color: #dd6710;
border: 1px solid #ddd;
margin: 0px 5px;
padding: 0px 3px;
font-size: 16px;
text-align: center;
line-height: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
/*====================cart page==================*/
.shoppingCartCntnt {
margin-bottom: 20px;
}
.checkList {
border-bottom: 1px solid #eee;
}
.checkList > li._head {
padding: 10px 0px;
font-size: 15px;
}
.checkList > li {
position: relative;
display: flex;
align-items: center;
padding: 20px 0px;
border: 1px solid #eee;
border-bottom: transparent;
margin-bottom: 0px;
background: white;
text-align: center;
}
.checkList > li .pro_cart {
text-align: left;
display: flex;
}
.checkList > li .pro_cart {
width: 50%;
color: #333;
}
.checkList > li > div {
padding: 0px 10px;
}
.checkList > li .qty_cart {
width: 30%;
color: #333;
}
.checkList > li .price_cart {
width: 20%;
color: #333;
}
.checkList > li .pro_cart .ico {
width: 70px;
height: 70px;
margin-right: 15px;
min-width: 70px;
min-height: 70px;
border: 1px solid #eee;
border-radius: 0px;
}
.checkList > li .pro_cart .ico a {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.checkList > li .pro_cart .ico img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: center;
}
.checkList > li .pro_cart h4 {
font-size: 16px;
margin-bottom: 5px;
text-transform: uppercase;
}
.checkList > li .price_cart .price {
font-size: 16px;
margin-bottom: -3px;
}
.checkList > li .price_cart .dlt {
color: #cc3232;
cursor: pointer;
font-size: 11px;
}
.topNegativeMrgn {
margin-top: 0px !important;
}
.orderTable {
background: #f9f5f1;
margin: 15px 0px 15px;
}
.orderTable table {
width: 100%;
}
.orderTable table tr td:nth-child(1) {
width: 65%;
font-size: 15px;
}
.orderTable table tr td {
padding: 10px 10px 8px;
border: 1px solid #eee;
color: #333;
}
.orderTable table tr td:nth-child(2) {
width: 35%;
font-size: 12px;
text-align: right;
}
.qtyBtn .qty {
background: #fafafa;
width: 36px;
height: 32px;
color: #000000;
border: 1px solid #ddd;
margin: 0px 5px;
padding: 0px 2px;
font-size: 18px;
text-align: center;
/* line-height: 1; */
}
/* ========shop page========== */
.product_grid .col .inner .image {
position: relative;
background: #fff;
padding: 2.5rem;
border-radius: 1rem;
/* box-shadow: 0 0.7rem 3.5rem -0.5rem rgba(24, 24, 24, 0.1), 0 -0.5rem 1rem -0.6rem rgba(24, 24, 24, 0.1); */
-webkit-border-radius: 1rem;
-moz-border-radius: 1rem;
-ms-border-radius: 1rem;
-o-border-radius: 1rem;
padding: 0;
padding-bottom: 100%;
overflow: hidden;
box-shadow: none;
}
.product_grid .col .inner .image img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.product_grid .col .inner .image .cntnt {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-orient: vertical;
gap: 1rem;
background-color: rgba(24, 24, 24, 0.8);
opacity: 0;
transition: all ease 0.5s;
}
.product_grid .col .inner .image .cntnt a i {
display: flex !important;
align-items: center !important;
justify-content: center !important;
-webkit-box-orient: vertical !important;
width: 4rem !important;
height: 4rem !important;
border-radius: 50px !important;
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px !important;
-ms-border-radius: 50px !important;
-o-border-radius: 50px !important;
font-size: 1.8rem !important;
font-weight: unset !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.product_grid .col .inner .image .cntnt a:hover,
.product_grid .col .inner .image .cntnt a.active {
border-color: #f7c300;
color: #f7c300;
}
.product_grid .col .inner .image:hover .cntnt {
transition: all ease 0.5s;
opacity: 1;
}
.product_grid .col .inner h5 {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.product_grid .col .inner .price {
color: #e44839;
font-family: "Poppins SemiBold";
}
.shop_page .colL {
width: 25%;
padding-right: 2rem;
}
@media (max-width: 1024px) {
.shop_page .colL {
width: 100%;
padding-right: 0;
background: rgb(249 249 249);
margin-bottom: 30px;
border-radius: 10px;
position: relative;
}
.shop_page .colL:after {
position: absolute;
top: 2.3rem;
right: 1.5rem;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: currentColor;
color: inherit;
transition: inherit;
width: 2rem;
height: 2rem;
}
}
@media (max-width: 1024px) and (max-width: 475px) {
.shop_page .colL:after {
top: 2.6rem;
width: 1.5rem;
height: 1.5rem;
}
}
.shop_page .colL .inner h3 {
margin-bottom: 2rem;
}
@media (max-width: 1024px) {
.shop_page .colL .inner h3 {
margin-bottom: 0rem;
padding: 2rem;
}
}
.shop_page .colL .inner .inBlk {
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
.shop_page .colL .inner .inBlk:last-child {
border-bottom: none;
}
@media (max-width: 1024px) {
.shop_page .colL .inner .inBlk {
display: none;
padding: 2rem;
}
}
.shop_page .colL .inner .inBlk h4 {
/* color: #3e85f1; */
/* font-family: "Regular"; */
font-size: 1.7rem;
}
.shop_page .colL .inner .inBlk ul {
list-style: none;
padding: 0;
margin: 0;
}
.shop_page .colL .inner .inBlk ul li {
display: block;
}
.shop_page .colL .inner .inBlk ul li:not(:last-child) {
margin-bottom: 1rem;
}
.shop_page .colL .inner .inBlk ul li .lbl_btn label {
display: flex;
-webkit-box-orient: vertical;
gap: 1rem;
margin-left: 0;
width: 100%;
background: #fbfbfb;
border: 1px solid rgba(221, 221, 221, 0.368627451);
padding: 1rem;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: all ease 0.5s;
}
.shop_page .colL .inner .inBlk ul li .lbl_btn label:hover,
.shop_page .colL .inner .inBlk ul li .lbl_btn label.active {
border-color: #3e85f1;
transition: all ease 0.5s;
}
.shop_page .colL .inner .inBlk ul li .lbl_btn label img {
width: 5rem;
height: 5rem;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.shop_page .colL .inner .inBlk ul li .lbl_btn label h6 {
align-self: center;
margin-bottom: 0;
font-family: "Poppins SemiBold";
color: #6c727f;
}
.shop_page .colL .inner .inBlk ul li .lbl_btn label h6 span {
color: #3e85f1;
font-family: "Poppins SemiBold";
font-size: 1.2rem;
}
.shop_page .colL .inner .inBlk .simple_blk .lbl_btn:not(:last-child) {
margin-bottom: 1rem;
}
/* .shop_page .colL .inner .inBlk .simple_blk .lbl_btn label {
font-family: "Poppins SemiBold";
} */
.shop_page .colL .inner .inBlk .simple_blk .lbl_btn label span {
color: #c40101;
/* font-family: "Poppins SemiBold"; */
font-size: 1.2rem;
}
.shop_page .colR {
width: 75%;
padding-left: 2rem;
}
@media (max-width: 1024px) {
.shop_page .colR {
width: 100%;
padding-left: 0;
margin-top: 1rem;
}
}
.shop_page .colR .search_result {
display: flex;
justify-content: space-between;
-webkit-box-orient: vertical;
margin-bottom: 2rem;
}
.shop_page .colR .search_result p {
margin-bottom: 0;
align-self: center;
font-size: 1.7rem;
}
.shop_page .colR .search_result .sort_btn {
display: flex;
-webkit-box-orient: vertical;
gap: 0.5rem;
}
.shop_page .colR .search_result .sort_btn .drop {
position: relative;
}
.shop_page .colR .search_result .sort_btn .drop .drop_cnt {
left: unset;
right: 0;
}
.shop_page .colR .search_result .sort_btn .drop .drop_cnt.active {
pointer-events: visible;
transition: all ease 0.5s;
opacity: 1;
visibility: visible;
}
.shop_page .colR .search_result .sort_btn .drop .drop_cnt .drop_lst {
padding: 0;
}
.shop_page .colR .search_result .sort_btn span {
align-self: center;
font-size: 1.3rem;
opacity: 0.7;
}
.shop_page .colR .search_result .sort_btn button {
flex: 1;
border: none;
background-color: transparent;
}
.shop_page .colR .flex {
margin: -1rem;
}
.shop_page .colR .flex .col {
width: 25%;
padding: 1rem;
}
@media (max-width: 991px) {
.shop_page .colR .flex .col {
width: 33.3333333333%;
}
}
@media (max-width: 767px) {
.shop_page .colR .flex .col {
width: 50%;
}
}
.pagination {
display: flex;
margin-top: 50px;
justify-content: center;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.pagination a.active {
color: #0070e2;
background: #f7f7f7;
}
#detailProduct,
#checkout {
margin-top: 10.1rem;
}
#detailProduct .colL {
width: 30%;
padding-right: 2rem;
}
@media (max-width: 991px) {
#detailProduct .colL {
width: 100%;
padding-right: 0;
margin-bottom: 2rem;
}
}
#detailProduct .colR {
width: 70%;
padding-left: 2rem;
}
@media (max-width: 991px) {
#detailProduct .colR {
width: 100%;
padding-left: 0;
}
}
#detailProduct .colR .itemPrice {
font-size: 24px;
color: #e44839;
font-family: "Poppins SemiBold";
}
#detailProduct .colR .itemPrice del {
font-size: 20px;
margin-left: 10px;
color: #ccc;
}
#detailProduct .colR h5 {
color: #333;
margin-top: 10px;
/* font-family: "Poppins Bold"; */
font-size: 1.5rem;
}
#detailProduct .colR .main_detail {
margin-bottom: 2rem;
}
#detailProduct .colR .main_detail p {
margin-bottom: 0.2rem;
}
.lSAction > a {
filter: brightness(0.5);
}
#lightSlider > li {
border: 1px solid #eee;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.lSSlideOuter .lslide img {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.lSSlideOuter .lSPager.lSGallery li {
border: 1px solid transparent;
border-radius: 0px !important;
opacity: 1;
transition: all ease 0.5s;
}
.lSSlideOuter .lSPager.lSGallery li a {
display: flex;
align-items: center;
justify-content: center;
height: 75px;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
overflow: hidden;
}
@media (max-width: 991px) {
.lSSlideOuter .lSPager.lSGallery li a {
height: auto;
}
}
.lSSlideOuter .lSPager.lSGallery li a img {
display: block;
max-width: 100%;
max-height: 100%;
}
.description_detail_blk {
margin-top: 8rem;
}
.description_detail_blk h4 {
margin-bottom: 2rem;
border-bottom: 1px solid #ddd;
padding-bottom: 1rem;
}
.description_detail_blk h6 {
opacity: 0.7;
}
.description_detail_blk h5 {
color: #e44839;
}
.description_detail_blk ul li {
display: block;
}
/* ==========cart========== */
.checkList {
border-bottom: 1px solid #eee;
list-style: none;
padding: 0;
margin: 0;
}
.checkList > li {
position: relative;
display: flex;
align-items: center;
padding: 20px 0px;
border: 1px solid #eee;
border-bottom: transparent;
margin-bottom: 0px;
background: white;
text-align: center;
}
@media (max-width: 767px) {
.checkList > li {
flex-direction: column;
}
}
.checkList > li._head {
padding: 10px 0px;
font-size: 15px;
}
.checkList > li > div {
padding: 0px 10px;
}
.checkList > li .pro_cart {
text-align: left;
display: flex;
/* width: 60%; */
color: #333;
}
@media (max-width: 767px) {
.checkList > li .pro_cart {
width: 100%;
justify-content: center;
}
}
.checkList > li .pro_cart .ico {
width: 70px;
height: 70px;
margin-right: 15px;
min-width: 70px;
min-height: 70px;
border: 1px solid #eee;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
}
.checkList > li .pro_cart .ico a {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.checkList > li .pro_cart .ico a img {
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.checkList > li .pro_cart h4 {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.checkList > li .pro_cart p {
font-size: 1.4rem;
}
.checkList > li .qty_cart {
/* width: 20%; */
color: #333;
}
@media (max-width: 767px) {
.checkList > li .qty_cart {
margin: 10px 0px;
width: 100%;
}
}
.checkList > li .price_cart {
width: 20%;
color: #333;
}
@media (max-width: 767px) {
.checkList > li .price_cart {
width: 100%;
}
}
.checkList > li .price_cart .price {
font-size: 16px;
margin-bottom: -3px;
}
.checkList > li .price_cart .dlt {
color: #cc3232;
cursor: pointer;
font-size: 11px;
}
.orderTable {
background: #ffffff;
margin: 15px 0px 15px;
}
.orderTable table {
width: 100%;
}
.orderTable table tr td {
padding: 10px 10px 8px;
border: 1px solid #eee;
color: #333;
}
.orderTable table tr td:nth-child(1) {
width: 65%;
font-size: 15px;
}
.orderTable table tr td:nth-child(2) {
width: 35%;
font-size: 14px;
text-align: right;
}
.btn_space {
justify-content: space-between;
display: flex;
}
.btn_space .blankBtn {
background-color: #fe3a37;
color: #fff;
}
@media (max-width: 475px) {
.btn_space .site_btn {
width: 100%;
}
}
.center_jstify {
justify-content: center;
}
.blank_page_heading {
margin-bottom: 3rem;
}
.shop_page .txtBox {
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
height: 42px;
}
select.txtBox {
padding-right: 0px !important;
}
.main_detail strong {
color: #fabc0a;
}
/* Remove default styles */
/* input[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 300px;
height: 10px;
background-color: #fff;
border-radius: 5px;
outline: none;
} */
/* Track style */
/* input[type="range"]::-webkit-slider-runnable-track {
background-color: #4682f0;
height: 5px;
border-radius: 2.5px;
} */
/* Thumb style */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #4682f0;
border-radius: 50%;
cursor: pointer;
}
/* Thumb hover style */
input[type="range"]::-webkit-slider-thumb:hover {
background-color: #4682f0;
}
/* Thumb active style */
input[type="range"]::-webkit-slider-thumb:active {
background-color: #4682f0;
}
/* Value indicator style */
/* input[type="range"]::after {
content: attr(value);
position: absolute;
top: -30px;
left: 0;
display: block;
width: 100%;
text-align: center;
color: #eee;
} */
.bTnss {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.fil {
height: 30px;
line-height: 30px;
padding: 0 20px;
text-transform: capitalize;
color: #ffffff;
background: #4682f0;
border: 0;
border-radius: 30px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
}
.fil:hover {
color: #fff;
background: #000;
}
.video-button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 25px;
}
.video-button .button-text {
color: var(--heading-font-color);
font-size: 16px;
font-weight: 600;
line-height: 1.188;
text-transform: capitalize;
text-decoration: underline;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.video-button .play-icon {
position: relative;
width: 50px;
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4682f0;
color: #fff;
border-radius: 50%;
font-size: 14px;
margin-right: 20px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.video-button .play-icon:after {
box-shadow: 0px 0px 10px 0px #4682f0;
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
animation: pulse-border-2 1s ease-out infinite;
}
@keyframes pulse-border-2 {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
#services-hardware {
background-color: #f1f6ff;
background-image: url(../images/ser-bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
#services-hardware .col {
width: calc(100% / 2);
padding: 10px;
}
#services-hardware .inner {
padding: 30px 35px;
background-color: #fff;
position: relative;
overflow: hidden;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
transition: all 300ms ease;
border-radius: 5px;
display: flex;
}
/* #services-hardware .inner:before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: linear-gradient(to left, #4682f0, #124094);
width: 0;
content: "";
transition: all 300ms ease;
} */
/* #services-hardware .inner::after {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url("/images/icon-lines.png");
content: "";
right: 0;
} */
#services-hardware .icon {
width: 101px;
/* padding-right: 20px; */
transition: 0.8s;
}
/* #services-hardware .inner:hover {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
} */
#services-hardware .inner:hover:before {
width: 100%;
}
#services-hardware .inner:hover .icon {
transform: rotateY(180deg);
}
#services-hardware .inner .text {
padding-left: 20px;
}
#services-hardware .inner .text h4 {
margin-bottom: 4px;
}
.videoBlk {
position: relative;
display: block;
padding-bottom: 72%;
overflow: hidden;
box-shadow: rgb(81 24 24 / 20%) 0 5px 10px 0;
overflow: hidden;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
video[poster] {
height: 100%;
width: 100%;
object-position: center;
object-fit: cover;
}
.videoBlk video {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: block;
width: 100%;
margin: 0% auto;
}
.videoBtn {
font: normal normal normal 14px/1 FontAwesome;
position: absolute;
top: 50%;
left: 0px;
right: 0px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
height: 75px;
width: 75px;
margin: -20px auto 0px;
background: rgb(255 255 255);
color: #e44839;
font-size: 24px;
border: 2px solid #f3226700;
border-radius: 75%;
line-height: 1;
cursor: pointer;
-webkit-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
transition: all linear 0.5s;
z-index: 5;
}
.videoBtn::after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 20px;
height: 70px;
width: 70px;
border-radius: 50%;
animation: ripple-wave 1s linear infinite;
animation-play-state: running;
opacity: 1;
visibility: visible;
transform: scale(1);
}
@keyframes ripple-wave {
from {
box-shadow: 0 0 rgb(255 255 255/10%), 0 0 0 15px rgb(255 255 255/10%),
0 0 0 30px rgb(255 255 255/10%);
}
to {
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1),
0 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 45px rgba(255, 255, 255, 0.02);
}
}
.videoBtn.fa-pause:before {
padding-left: 0px;
}
.videoBtn.fa-pause {
opacity: 0;
}
.videoBlk:hover .videoBtn.fa-pause {
opacity: 1;
}
#partners .col {
width: calc(100% / 4);
padding: 10px;
}
#partners {
background-color: #f7f7f7;
}
#partners .col .inner {
background-color: #fff;
padding: 40px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
height: 100%;
}
#partners .col .inner .image {
width: 150px;
margin: auto;
height: 70px;
}
#partners .col .inner .image img {
height: 100%;
object-fit: contain;
}
#folio .col {
width: 50%;
padding-left: 40px;
}
#folio .colr {
width: 50%;
}
.btnss {
display: flex;
justify-content: space-between;
align-items: center;
}
#small-banner .center-content {
margin-bottom: 0;
}
/*
|----------------------------------------------------------------------
| Oops 404
|----------------------------------------------------------------------
*/
#oops {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #fafafa;
padding: 120px 0 60px;
overflow: auto;
}
#oops .blk,
#oops .inner {
max-width: 440px;
margin: 0 auto;
}
#oops .logoDv {
position: absolute;
top: 40px;
left: 0;
right: 0;
width: 40px;
margin: 0 auto 30px;
}
#oops .icon {
/* color: #fff; */
color: #2d8cff;
font-size: 140px;
font-family: "Poppins Bold";
line-height: 0.8;
margin-bottom: 25px;
/* text-shadow: 0 0 2px #2d8cff, 1px 5px 24px rgba(68, 102, 242, 0.05); */
}