/*------------------------------------------------------------------
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
1. Variable css
2. Mixins Css
3. Typography css
4. Faq css
5. Theme Default css
6. Grids css
7. BG css
8. Margin Padding Css
9. BTN Css
10. Hero css
11. Footer css
12. Scroll top css
13. Navbar css
14. Breadcrumb css
15. RTL css
16. Vidz css
17. Blog Single css
18. Sidebar css
19. Pagination css
20. Gallery css
21. Topbar css
22. Heading css
23. Contact css
24. Text Color css
25. Header Hero Top css
26. About css
27. Service CSS
28. Counter Css
29. Why css
30. Work css
31. Container css
32. Price css
33. Team css
34. Review css
35. Blog css
36. Register css
37. Step css
38. Sub css
39. Project Single css
40. Service Single css
41. Feature css
42. Benefit css
43. Promo css
44. Requ css
45. CTA css
46. Marquee css
47. Team Single css
48. Partner css
49. Skill Progress
-------------------------------------------------------------------*/
/*Start Theme Basic*/
/*-------------------------------------------------------
01. Variable css #9C2460 #9627E3
---------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
:root {
--clr-heading: #232323;
--clr-body: #666;
--clr-body-2: #BBBBBB;
--clr-bg: #F5F8FF;
--clr-bg-2: #f6f6f6;
--clr-bg-3: #EEF3F9;
--clr-def: #01647A;
--clr-def-2: #A8040A;
--clr-def-3: #01647A;
--clr-menu: #FF4A17;
--clr-white: #fff;
--clr-black: #000;
--clr-black-2: #080821;
--font-1: 'Roboto', sans-serif;
--font-2: 'Fira Sans', sans-serif;
--clr-1:#16243E;
--clr-2:#0B1830;
--clr-3:#272b37;
--clr-4:#1e202c;
--clr-5:#2a2c38;
--clr-6:#232323;
--clr-ccc:#ccc;
--clr-orange:#F42222;
--clr-rgb:0, 102, 208;
--clr-gradient: linear-gradient(90deg, var(--clr-def) 0%, var(--clr-def-2) 35%, var(--clr-def-3) 100%);
--clr-gradient-2: linear-gradient(to right, var(--clr-def) 0%, transparent 100%);
--clr-gradient-3: linear-gradient(90deg, var(--clr-def, #00206e) 0%, var(--clr-def-2) 100%);
--clr-overlay: rgba(5, 20, 65, 0.8);
--box-shadow-1: 0 0 10px rgba(0, 0 , 0, .09); }
/*-------------------------------------------------------
02. Mixins Css #070E27 #5416CF #0B0F28;
---------------------------------------------------------*/
/*-------------------------------------------------------
03. Typography css
---------------------------------------------------------*/
*, *:before, *:after {
box-sizing: inherit; }
* {
scroll-behavior: inherit !important; }
html, body {
height: auto;
width: 100%;
margin: 0;
padding: 0;
font-size: 62.5%;
box-sizing: border-box; }
body {
font-family: var(--font-1);
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
/* color: var(--clr-body); */
}
main.main {
overflow: hidden; }
a {
color: var(--clr-body);
font-weight: 600; }
a,
a:active,
a:focus,
a:hover {
outline: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-decoration: none; }
ul {
margin: 0;
padding: 0; }
li {
list-style: none; }
h1, h2, h3, h4, h5, h6 {
color: var(--clr-heading);
margin: 0 0 1.5rem 0;
font-weight: 700;
font-family: var(--font-2);
line-height: 1.2; }
h1 {
font-size: 48px; }
h2 {
font-size: 36px; }
h3 {
font-size: 30px; }
h4 {
font-size: 24px; }
h5 {
font-size: 18px; }
h6 {
font-size: 14px; }
p {
margin-bottom: 1.5rem; }
.img, img {
max-width: 100%;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
height: auto; }
@media (max-width: 768px) {
.img, img {
max-width: 40%!important;
}
}
hr {
padding: 0px;
border-bottom: 1px solid #eceff8;
border-top: 0px; }
label {
color: #999;
cursor: pointer;
font-size: 1.4rem;
font-weight: 400; }
*::-moz-selection {
background: #d6b161;
color: #fff;
text-shadow: none; }
::-moz-selection {
background: #555;
color: #fff;
text-shadow: none; }
::selection {
background: #555;
color: #fff;
text-shadow: none; }
*::-moz-placeholder {
color: #999;
font-size: 1.4rem;
opacity: 1; }
*::placeholder {
color: #999;
font-size: 1.4rem;
opacity: 1; }
/*-------------------------------------------------------
04. Faq css
---------------------------------------------------------*/
.faq-header .faq-para {
padding-right: 71px; }
.shape-11 {
position: absolute;
right: 30px;
z-index: -1; }
.faq-2-shape img {
position: absolute;
z-index: -1; }
.faq-2-shape img.faq-2-shape-1 {
top: 5rem;
left: 5rem; }
.faq-2-shape img.faq-2-shape-2 {
bottom: 5rem;
right: 5rem; }
.faq-dot {
position: absolute;
right: 6px;
top: 60px;
z-index: -1;
width: 223px; }
.faq-pic-4::before {
position: absolute;
content: '';
height: 7rem;
width: 8rem;
z-index: -1;
background: var(--clr-def-3);
opacity: 1;
bottom: 104px;
right: 63px;
z-index: 1;
animation: to-left 5s linear infinite alternate; }
.faq-header {
margin-bottom: 4rem;
padding-bottom: 3.2rem;
border-bottom: 2px solid #ccc; }
.faq-header .faq-para {
padding-right: 31rem;
margin-bottom: 0; }
.accordion-header {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--clr-1); }
.accordion-item {
margin-bottom: -1px;
background-color: transparent;
border: none; }
.accordion-item:not(last-child) {
margin-bottom: 3rem; }
.accordion-button {
font-size: 1.6rem;
color: var(--clr-heading);
font-weight: 700;
border: none;
box-shadow: none;
padding: 0; }
.accordion-button:not(.collapsed) {
color: var(--clr-heading);
background: transparent;
border: none;
box-shadow: none; }
.accordion-button.collapsed {
box-shadow: none;
border: none;
background: transparent; }
.accordion-button::after {
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
font-family: 'Font Awesome\ 5 Free';
content: "\f067";
/* FontAwesome Unicode */
font-weight: 900;
background-image: inherit;
font-size: 1.4rem; }
.accordion-button:not(.collapsed)::after {
transform: rotate(180deg);
background-image: inherit;
font-family: 'Font Awesome\ 5 Free';
content: "\f068";
/* FontAwesome Unicode */
font-weight: 900;
font-size: 1.4rem; }
.accordion-collapse {
background: transparent;
color: var(--clr-body); }
.accordion-button:focus {
z-index: 3;
border: none;
outline: 0;
box-shadow: none; }
.accordion-body {
padding: 0; }
.accordion-body p {
font-size: 1.6rem; }
/*-------------------------------------------------------
05. Theme Default css
---------------------------------------------------------*/
.column-2 {
column-count: 2; }
.overflow-hidden {
overflow: hidden; }
.element-center {
height: 100%;
display: flex;
align-items: center; }
/*Theme button css*/
.about-title {
text-align: center;
padding-top: 9rem; }
.about-title .heading-2 {
font-weight: 500; }
.about-title::before {
position: absolute;
content: '';
height: 7rem;
width: 2px;
z-index: -1;
background: var(--clr-white);
opacity: 1;
left: 50%;
top: 0;
translate: -50% 0; }
.site-title {
margin-bottom: 6.4rem; }
.site-title h2 {
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.8px;
font-size: 42px; }
.site-title h2:first-letter {
text-transform: uppercase; }
.site-title h2 span {
color: var(--clr-def);
font-family: var(--font-3); }
.site-title p {
padding: 0 15%; }
.site-title.mb-0 {
margin-bottom: 0; }
.site-title.wh p,
.site-title.wh h2,
.site-title.wh h3 {
color: var(--clr-white); }
.pos-rel {
position: relative;
z-index: 1; }
.input-style-1 {
height: 7rem;
border: none;
outline: none;
border-radius: 2px;
font-size: 1.4rem;
color: var(--clr-heading); }
.input-style-1::placeholder {
color: #747070;
opacity: 1; }
.input-style-2 {
height: 7rem;
outline: none;
border-radius: 5px;
font-size: 1.4rem;
color: var(--clr-heading);
width: 100%;
background-color: transparent;
border: 1px solid #ccc; }
.input-style-2:focus {
outline: none;
box-shadow: none; }
.round-move {
animation: round-move 5s linear infinite; }
@keyframes round-move {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.up-move {
animation: up-move 5s ease-in-out infinite; }
@keyframes up-move {
0% {
transform: translateY(0); }
50% {
transform: translateY(-30px); }
100% {
transform: translateY(0px); } }
.small-big {
animation: small-big 5s ease-in-out infinite; }
@keyframes small-big {
0% {
transform: scale(0.5); }
51% {
transform: scale(1.1); }
100% {
transform: scale(0.5); } }
.to-left {
animation: to-left 5s linear infinite alternate; }
@-webkit-keyframes to-left {
0% {
transform: translateX(0px); }
50% {
transform: translateX(-30px); }
100% {
transform: translateX(0px); } }
.car-run {
animation: run 3s ease-in-out infinite; }
@-webkit-keyframes run {
0% {
transform: translateX(0); }
50% {
transform: translateX(50px); }
100% {
transform: translateX(0); } }
/*-------------------------------------------------------
06. Grids css
---------------------------------------------------------*/
.grid-2 {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(2, 1fr); }
.grid-3 {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(3, 1fr); }
.grid-4 {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(4, 1fr); }
.grid-5 {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(5, 1fr); }
.grid-6 {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(6, 1fr); }
.grid-px-2 {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); }
.gap-0 {
grid-gap: 0; }
.cs-gap-1 {
grid-gap: 1rem; }
.cs-gap-2 {
grid-gap: 2rem; }
.cs-gap-3 {
grid-gap: 3rem; }
.cs-gap-4 {
grid-gap: 4rem; }
.cs-gap-5 {
grid-gap: 5rem; }
.cs-gap-6 {
grid-gap: 6rem; }
.cs-gap-7 {
grid-gap: 7rem; }
.cs-gap-8 {
grid-gap: 8rem; }
.cs-gap-9 {
grid-gap: 9rem; }
.cs-gap-10 {
grid-gap: 10rem; }
/*-------------------------------------------------------
07. BG css
---------------------------------------------------------*/
.colmn-2 {
column-count: 2; }
.bg-fix {
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; }
.hero-bg {
background-position: top left !important;
background-size: cover !important;
background-repeat: no-repeat !important; }
.bg-top-center {
background-position: top center;
background-size: cover !important;
background-repeat: no-repeat !important; }
.bg-bottom-right {
background-size: 56%;
background-position: bottom right;
background-repeat: no-repeat; }
.pos-rel {
position: relative;
z-index: 1; }
.width-100 {
width: 100%; }
.overflow-hidden {
overflow: hidden; }
.text-right {
text-align: right; }
.space-between {
display: flex;
justify-content: space-between;
align-items: center; }
.rad-50 {
border-radius: 50%; }
.c-pd {
padding: 0 7rem; }
.s-pd {
padding: 0 12rem; }
.h-100vh {
height: 100vh; }
.bg {
background: var(--clr-bg); }
.bg-2 {
background: var(--clr-bg-2); }
.bg-3 {
background: var(--clr-bg-3); }
.bg-theme {
background: var(--clr-def); }
.bg-theme-2 {
background: var(--clr-def-2); }
.bg-theme-3 {
background: var(--clr-def-3); }
.bg-black {
background: var(--clr-black); }
.bg-grad {
background: var(--clr-gradient); }
.bg-grad-2 {
background: var(--clr-gradient-2); }
.bg-grad-3 {
background: var(--clr-gradient-3); }
.bg-clr-1 {
background: var(--clr-1); }
.bg-clr-2 {
background: var(--clr-2); }
div[data-bg] {
background: var(--custom-background-color); }
.bg-blur {
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7.5px);
border-radius: 10px;
padding: 32px 100px 36px 60px;
z-index: 2; }
.wh {
color: var(--clr-white); }
.bg-overlay {
position: relative;
z-index: 1; }
.bg-overlay::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: #000521;
opacity: 0.83;
top: 0;
left: 0; }
.hero-overlay {
position: relative;
z-index: 1; }
.hero-overlay::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: var(--clr-black);
opacity: 0.6;
top: 0;
left: 0; }
.hero-overlay-3 {
position: relative;
z-index: 1; }
.hero-overlay-3::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: var(--clr-def-3);
opacity: 0.8;
top: 0;
left: 0; }
.hero-overlay-2 {
position: relative;
z-index: 1; }
.hero-overlay-2::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: var(--clr-def-3);
opacity: 0.8;
top: 0;
left: 0; }
.grad-overlay {
position: relative;
z-index: 1; }
.grad-overlay::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: var(--clr-gradient-3);
opacity: 0.9;
top: 0;
left: 0; }
.bubble .drop {
width: 350px;
height: 350px;
position: relative;
box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.1), 25px 35px 20px rgba(0, 0, 0, 0.1), 25px 30px 30px rgba(0, 0, 0, 0.1), inset -20px -20px 25px rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem 0;
padding: 4rem;
transition: border-radius 0.5s;
overflow: hidden;
text-align: center;
animation: drop 2s infinite alternate ease-in-out; }
.bubble .drop:nth-child(1) {
border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; }
.bubble .drop:nth-child(2) {
border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; }
.bubble .drop:nth-child(3) {
border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; }
@keyframes drop {
from {
border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; }
to {
border-radius: 50%; } }
.bubble .drop::before {
content: "";
position: absolute;
top: 50px;
left: 75px;
width: 35px;
height: 35px;
background: white;
border-radius: 50%;
opacity: 0.7; }
.bubble .drop::after {
content: "";
position: absolute;
top: 90px;
left: 100px;
width: 15px;
height: 15px;
background: white;
border-radius: 50%;
opacity: 0.7; }
/*-------------------------------------------------------
08. Margin Padding Css
---------------------------------------------------------*/
/*margins paddings*/
.p-50 {
padding: 50px; }
.pb-140 {
padding-bottom: 14rem; }
.pd-50 {
padding: 5rem 0; }
.pr-120 {
padding-right: 12rem; }
.de-padding {
padding: 3rem 0; }
.de-pt {
padding-top: 12rem; }
.de-pb {
padding-bottom: 12rem; }
.pd-0 {
padding: 0; }
.pl-30 {
padding-left: 3rem; }
.pl-40 {
padding-left: 4rem; }
.pl-50 {
padding-left: 5rem; }
.pl-60 {
padding-left: 6rem; }
.pl-300 {
padding-left: 30rem; }
.pt-64 {
padding-top: 6.4rem; }
.pt-0 {
padding-top: 0rem; }
.pt-10 {
padding-top: 1rem; }
.pt-20 {
padding-top: 2rem; }
.pt-30 {
padding-top: 3rem; }
.pt-40 {
padding-top: 4rem; }
.pt-50 {
padding-top: 5rem; }
.pt-60 {
padding-top: 6rem; }
.pt-70 {
padding-top: 7rem; }
.pt-80 {
padding-top: 8rem; }
.pt-90 {
padding-top: 9rem; }
.pt-100 {
padding-top: 10rem; }
.pr-30 {
padding-right: 3rem; }
.pr-40 {
padding-right: 4rem; }
.pr-50 {
padding-right: 5rem; }
.pr-60 {
padding-right: 6rem; }
.pb-0 {
padding-bottom: 0rem; }
.pb-10 {
padding-bottom: 1rem; }
.pb-20 {
padding-bottom: 2rem; }
.pb-30 {
padding-bottom: 3rem; }
.pb-40 {
padding-bottom: 4rem; }
.pb-50 {
padding-bottom: 5rem; }
.pb-60 {
padding-bottom: 6rem; }
.pb-70 {
padding-bottom: 7rem; }
.pb-80 {
padding-bottom: 8rem; }
.pb-90 {
padding-bottom: 9rem; }
.pb-100 {
padding-bottom: 10rem; }
.pb-256 {
padding-bottom: 25.6rem; }
.pl-60 {
padding-left: 6rem; }
.mr-100 {
margin-right: 10rem; }
.mt-64 {
margin-top: 6.4rem; }
.mt-0 {
margin-top: 0; }
.mt-10 {
margin-top: 1rem; }
.mt-20 {
margin-top: 2rem; }
.mt-30 {
margin-top: 3rem; }
.mt-40 {
margin-top: 4rem; }
.mt-50 {
margin-top: 5rem; }
.mt-60 {
margin-top: 6rem; }
.mt-70 {
margin-top: 7rem; }
.mt-80 {
margin-top: 8rem; }
.mt-90 {
margin-top: 9rem; }
.mt-100 {
margin-top: 10rem; }
.mb-0 {
margin-bottom: 0; }
.mb-10 {
margin-bottom: 1rem; }
.mb-15 {
margin-bottom: 1.5rem; }
.mb-20 {
margin-bottom: 2rem; }
.mb-30 {
margin-bottom: 3rem; }
.mb-40 {
margin-bottom: 4rem; }
.mb-50 {
margin-bottom: 5rem; }
.mb-60 {
margin-bottom: 6rem; }
.mb-70 {
margin-bottom: 7rem; }
.mb-80 {
margin-bottom: 8rem; }
.mb-90 {
margin-bottom: 9rem; }
.mb-100 {
margin-bottom: 10rem; }
.ml-300 {
margin-left: 30rem; }
.ml-30 {
margin-left: 3rem; }
.ml-40 {
margin-left: 4rem; }
.ml-50 {
margin-left: 5rem; }
.ml-60 {
margin-left: 6rem; }
.ml-70 {
margin-left: 7rem; }
.ml-80 {
margin-left: 8rem; }
.ml-90 {
margin-left: 9rem; }
.ml-100 {
margin-left: 100rem; }
.mr-300 {
margin-right: 30rem; }
.mr-20 {
margin-right: 20px; }
.mr-30 {
margin-right: 3rem; }
.mr-40 {
margin-right: 4rem; }
.mr-50 {
margin-right: 5rem; }
.mr-60 {
margin-right: 6rem; }
.mr-70 {
margin-right: 7rem; }
.mr-80 {
margin-right: 8rem; }
.mr-90 {
margin-right: 9rem; }
.mr-100 {
margin-right: 100rem; }
.margin-center {
margin: 0 auto; }
/*-------------------------------------------------------
09. BTN Css
---------------------------------------------------------*/
/*Theme Button*/
.btn-transparent {
display: inline-block;
text-align: center;
font-size: 16px;
font-weight: 700;
padding: 1.5rem 3.5rem;
background-color: transparent;
border: none;
color: var(--clr-white);
border-radius: 5px;
outline: 1px solid var(--clr-white) !important;
line-height: 1;
transition: all .5s ease; }
.btn-transparent.btn-home-2 {
outline: 1px solid var(--clr-def) !important;
color: var(--clr-heading); }
.btn-transparent:hover {
background-color: var(--clr-white);
color: var(--clr-heading); }
.btn-transparent-md {
padding: 2rem 5.4rem; }
.btn-1 {
display: inline-block;
text-align: center;
font-size: 16px;
font-weight: 700;
padding: 2.5rem 5.5rem;
background-color: var(--clr-def);
color: var(--clr-white);
border-radius: 5px;
border: none;
outline: none;
line-height: 1;
transition: all .5s ease; }
.btn-1 i {
margin-left: 1rem; }
.btn-1:hover {
background-color: var(--clr-def-2);
color: var(--clr-white); }
.btn-2 {
display: inline-block;
padding: 2rem 4rem;
color: var(--clr-white);
border-radius: 4px;
text-align: center;
font-size: 16px;
font-weight: 700;
border: none;
outline: none;
line-height: 1;
position: relative;
z-index: 1;
transition: all .5s ease; }
.btn-2::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: var(--clr-def);
opacity: 1;
border-radius: 4px;
top: 0;
left: 0;
transition: all .5s ease;
border-radius: 100px; }
.btn-2 i {
margin-left: 1rem; }
.btn-2:hover {
background: var(--clr-black);
color: var(--clr-white); }
.btn-2:hover::before {
scale: 0; }
.btn-3 {
font-weight: 600;
color: var(--clr-white);
border: none;
background: var(--clr-def);
padding: 0 3rem;
height: 50px;
display: inline-block;
line-height: 50px; }
.btn-3:hover {
background: var(--clr-black);
color: var(--clr-white); }
.btn-3:hover::before {
scale: 0; }
.btn-4 {
display: inline-block;
text-align: center;
font-size: 16px;
font-weight: 700;
padding: 1.5rem 3.5rem;
background-color: var(--clr-white);
border: none;
color: var(--clr-heading);
border-radius: 5px;
line-height: 1;
transition: all .5s ease; }
.btn-4:hover {
background-color: var(--clr-def);
color: var(--clr-white); }
.btn-5 {
display: inline-block;
text-align: center;
font-size: 16px;
font-weight: 700;
padding: 2.5rem 5.5rem;
background-color: var(--clr-def);
color: var(--clr-white);
border-radius: 5px;
border: none;
outline: none;
line-height: 1;
transition: all .5s ease; }
.btn-5:hover {
background-color: var(--clr-white);
color: var(--clr-black); }
.btn-md {
padding: 2rem 5.4rem; }
.btn-sm {
padding: 1.5rem 3.5rem; }
.btn-second {
background-color: var(--clr-def-2); }
.btn-second:hover {
background-color: var(--clr-def);
color: var(--clr-white); }
.btn-gradient {
background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%); }
.btn-gradient:hover {
background: var(--clr-def);
color: var(--clr-white); }
.btn-circle {
border-radius: 100px; }
.btn-border {
border: 2px solid var(--clr-white);
background-color: transparent; }
.btn-border:hover {
background-color: var(--clr-def);
color: var(--clr-white);
border: 2px solid var(--clr-def); }
.btn-border-2 {
border: 2px solid var(--clr-heading);
color: var(--clr-heading);
background-color: transparent; }
.btn-border-2:hover {
background-color: var(--clr-def);
color: var(--clr-white);
border: 2px solid var(--clr-def); }
.btn-black {
background-color: var(--clr-black); }
.btn-black:hover {
background-color: var(--clr-white);
color: var(--clr-black); }
.btn-white {
background-color: var(--clr-white);
color: var(--clr-black); }
.btn-white:hover {
background-color: var(--clr-black);
color: var(--clr-white); }
.btn-no-rad {
border-radius: 0; }
.btn-sub {
height: 7rem;
width: 7rem;
border: none;
background-color: var(--clr-def);
border-radius: 2px;
outline: none; }
/*-------------------------------------------------------
10. Hero css
---------------------------------------------------------*/
.hero-single {
height: 780px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
overflow: hidden; }
.hero-single .hero-content .hero-sub-title {
margin-bottom: 2rem; }
.hero-single .hero-content h2 {
margin-bottom: 6rem;
font-size: 60px;
line-height: 1.3;
font-weight: 900;
color: var(--clr-white); }
.hero-single .hero-content p {
line-height: 3.2rem;
margin-bottom: 5rem;
padding-right: 21%;
font-size: 18px; }
.hero-single .hero-content .para {
line-height: 3.2rem;
padding-right: 31%;
margin-bottom: 6rem;
padding-left: 0; }
.hero-shapes img {
position: absolute;
z-index: -1; }
.hero-shapes img.hero-dot-3 {
top: 100px;
left: 50px; }
.hero-shapes span {
position: absolute;
z-index: -1; }
.hero-shapes span.hero-c-1 {
bottom: -70px;
left: -70px;
width: 300px;
height: 300px;
border: 10px solid var(--clr-def-2);
border-radius: 50%;
display: none; }
.hero-shapes span.hero-c-2 {
bottom: 44px;
right: 46px;
width: 152px;
height: 152px;
border: 50px solid var(--clr-def);
border-radius: 50%; }
.hero-shapes span.hero-c-3 {
bottom: 100px;
left: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid var(--clr-def-3); }
.hero-shapes span.hero-c-4 {
top: 50px;
left: 45%;
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid var(--clr-def); }
.hero-shapes span.hero-c-5 {
top: 44px;
right: -46px;
width: 152px;
height: 152px;
border: 20px solid var(--clr-def-2);
border-radius: 50%; }
.hero-btn .btn-1.btn-md {
margin-right: 30px; }
.mt-160 {
margin-top: 140px; }
.hero-2-before {
position: relative;
z-index: 1; }
.hero-2-before::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: var(--clr-gradient-5);
opacity: 1;
top: 0;
left: 0; }
.float {
position: fixed !important;
display: flex;
align-items: center;
justify-content: center;
width: 53px;
height: 53px;
bottom: 30px;
left: 20px;
color: #FFF;
border-radius: 50%;
text-align: center;
font-size: 30px;
z-index: 100;
/* background-color: #25d366; */
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.float2 {
position: fixed !important;
display: flex;
align-items: center;
justify-content: center;
width: 53px;
height: 53px;
bottom: 30px;
left: 20px;
color: #FFF;
border-radius: 50%;
text-align: center;
font-size: 30px;
z-index: 100;
/* background-color: #25d366; */
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.hero-single-2 {
height: 580px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
overflow: hidden; }
.hero-single-2::before {
content: "";
position: absolute;
left: -8%;
top: -7%;
max-width: 830px;
height: 640px;
background: var(--clr-def);
opacity: 0.7;
width: 100%;
z-index: -2;
border-radius: 0px 400px 400px 0px;
transform: rotate(40.45deg);
clip-path: polygon(50% 0%, 59% 20%, 94% 25%, 78% 77%, 18% 92%, 0 57%, 0 0);
display: none; }
.hero-single-2 .hero-content .hero-sub-title {
color: var(--clr-white);
margin-bottom: 2rem;
font-size: 15px; }
.hero-single-2 .hero-content .hero-sub-title .hero-line {
background: var(--clr-white);
z-index: 3; }
.hero-single-2 .hero-content .hero-sub-title .hero-line::before, .hero-single-2 .hero-content .hero-sub-title .hero-line::after {
background: var(--clr-white);
z-index: 3; }
.hero-single-2 .hero-content .hero-title {
margin-bottom: 5rem;
color: var(--clr-white);
font-size: 50px;
line-height: 1.2; }
.hero-single-2 .hero-content p {
padding-right: 15%;
color: var(--clr-white); }
.nm {
position: absolute;
bottom: 0;
left: 0;
z-index: -1; }
.about-mix-pic {
position: absolute;
z-index: -1;
bottom: 0;
right: 0; }
.mix-clean-5 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1; }
@keyframes grow {
0%, 20% {
transform: scale(1); }
75%, 100% {
transform: scale(1.15); } }
.swiper-slide.swiper-slide-active .hero-bg-animate {
scale: 1;
animation: grow 4s linear forwards; }
.animate-pos {
position: absolute;
left: 0;
top: 0;
content: "";
height: 100%;
width: 100%;
-webkit-transition: 10s ease-out;
transition: 10s ease-out;
-webkit-transform: scale(1.1);
transform: scale(1.1);
z-index: -5; }
.hero-sldr .swiper-button-next,
.hero-sldr .swiper-button-prev {
color: var(--clr-white);
height: 7rem;
width: 7rem;
line-height: 7rem;
text-align: center;
background: var(--clr-sec);
-webkit-border-radius: 50%;
border-radius: 50%;
font-size: 2rem; }
.hero-sldr .swiper-button-next:after,
.hero-sldr .swiper-button-prev:after {
font-size: 3rem; }
.hero-sldr .hero-single-2 .hero-content h2 {
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
transform: translateY(-20px); }
.hero-sldr .hero-single-2 .hero-content p {
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
transform: translateX(-50px); }
.hero-sldr .hero-single-2 .hero-content .hero-btn {
transform: scaleY(0);
transition: all 500ms ease;
transition-delay: 2000ms;
transform-origin: bottom; }
.hero-sldr .hero-single-2 .hdr-pic {
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
transform: translateY(50px); }
.hero-sldr .swiper-slide-active.hero-single-2 .hero-content h2 {
opacity: 1;
visibility: visible;
transition-delay: 800ms;
transform: translateY(0px); }
.hero-sldr .swiper-slide-active.hero-single-2 .hero-content p {
opacity: 1;
visibility: visible;
transition-delay: 1600ms;
transform: translateX(0px); }
.hero-sldr .swiper-slide-active.hero-single-2 .hero-content .hero-btn {
transform: scale(1); }
.hero-sldr .swiper-slide-active.hero-single-2 .hdr-pic {
opacity: 1;
visibility: visible;
transition-delay: 1200ms;
transform: translateY(0px); }
/*-------------------------------------------------------
11.Footer css
---------------------------------------------------------*/
/*footer Default*/
.footer {
position: relative;
z-index: 1; }
.footer::before {
position: absolute;
z-index: -1;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
color:#ffffff!important;
background-color:#01647A;
}
.footer-bio {
display: flex;
align-items: center;
gap: 1.5rem; }
.footer-bio .footer-bio-text h6 {
text-transform: capitalize;
margin-bottom: 5px; }
.footer-bio .footer-bio-text span {
display: block;
line-height: 1;
color: var(--clr-heading);
font-size: 1.6rem; }
.footer-know-more {
color: var(--clr-def); }
.dbr-top {
border-top: 1px solid var(--clr-ccc); }
.footer-upr-content h2 {
font-weight: 600; }
.footer-upr-content h4 a {
text-decoration: underline;
color: var(--clr-def); }
.footer-widget-title {
font-weight: 600;
margin-bottom: 4rem;
padding-bottom: 2rem;
position: relative;
z-index: 1; }
.footer-widget-title .footer-title-line {
width: 4rem;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
translate: 0 -50%;
z-index: 1;
background-color: var(--clr-heading); }
.footer-widget-title .footer-title-line::before {
position: absolute;
content: '';
height: 1px;
width: 30px;
z-index: -1;
background: var(--clr-heading);
opacity: 1;
top: 5px;
left: 0; }
.footer-widget-title .footer-title-line::after {
position: absolute;
content: '';
height: 1px;
width: 20px;
z-index: -1;
background: var(--clr-heading);
opacity: 1;
top: 10px;
left: 0; }
.footer-logo img {
height: 60px;
display: block; }
.about-us p a {
text-decoration: underline; }
.footer-list {
display: flex;
flex-direction: column;
gap: 1.5rem; }
.footer-list li a {
display: flex;
align-items: center;
gap: 5px;
color: var(--clr-heading);
font-weight: 400; }
.footer-list li a i {
font-size: 1.4rem; }
.footer-hours {
display: flex;
flex-direction: column;
gap: 1.5rem; }
.footer-hours li {
display: flex;
align-items: center;
justify-content: space-between; }
.footer-hours li span {
color: var(--clr-heading);
display: inline-block; }
.footer-social {
display: flex;
align-items: center;
gap: 1rem; }
.footer-social li a i {
display: inline-block;
height: 4.5rem;
width: 4.5rem;
line-height: 4.5rem;
border: 1px solid var(--clr-def);
text-align: center;
-webkit-border-radius: 50%;
border-radius: 50%;
color: var(--clr-def);
transition: all .5s ease; }
.footer-social li a i:hover {
background-color: var(--clr-def);
border: 1px solid var(--clr-def);
color: var(--clr-white); }
.subscribe-area form {
display: flex;
align-items: center;
position: relative;
z-index: 1; }
.subscribe-area form .input-style-4 {
width: 100%;
background-color: transparent;
padding: 8px 1.5rem 8px 2rem;
color: var(--clr-heading);
outline: none;
border: 1px solid var(--clr-ccc);
height: 60px; }
.subscribe-area form .input-style-4:focus {
outline: none;
box-shadow: none;
border: 1px solid var(--clr-ccc); }
.subscribe-area form .input-style-4::placeholder {
color: var(--clr-heading); }
.subscribe-area form .btn-subs {
outline: none;
box-shadow: none;
border: 1px solid var(--clr-ccc);
border-left: none;
background-color: transparent;
font-size: 1.6rem;
color: var(--clr-ccc);
width: 75px;
height: 60px; }
.subscribe-area form .btn-subs:hover {
color: var(--clr-def); }
.copyright-element p {
color: var(--clr-white); }
.copyright {
border-top: 1px solid var(--clr-ccc); }
.footer-widget p,
.footer-widget ul li a {
color: var(--clr-white); }
/*-------------------------------------------------------
12. Scroll top css
---------------------------------------------------------*/
#scrtop {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: 1px solid #ddd;
outline: none;
background-color: var(--clr-def);
color: var(--clr-white);
cursor: pointer;
padding: 15px;
border-radius: 4px;
line-height: 1; }
#scrtop:hover {
background-color: var(--clr-heading); }
/*-------------------------------------------------------
13. Navbar css
---------------------------------------------------------*/
@media (min-width: 1600px) {
.navbar-container-fluid {
max-width: 1600px; } }
.navbar-container {
display: grid;
grid-template-columns: 220px 1fr;
align-items: center;
padding: 0 20rem; }
.bsnav-mobile {
z-index: 102; }
.bsnav-mobile .navbar {
right: inherit;
transform: translate3d(-300px, 0, 0);
left: 0; }
.search-cart.nav-profile {
width: 200px;
text-align: end; }
.g-nop {
display: none; }
.navbar-brand-tog {
display: flex;
align-items: center;
justify-content: space-between; }
.nav-item.dropdown > .navbar-nav .nav-item .nav-link {
padding: 0; }
.navbar-bar-shape {
position: absolute;
top: 0;
left: 0;
z-index: 3;
height: 100%;
background: var(--clr-white);
width: 420px;
clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); }
.navbar-extra-logo {
position: relative;
z-index: 9;
padding-right: 3rem; }
.navbar-menu-opt {
position: relative;
z-index: 4; }
.top-header-menu {
padding-left: 0px; }
.navbar-brand.nop {
display: none; }
.header-3 .navbar {
background-color: transparent; }
.header-3 .bsnav-sidebar {
height: 100%;
position: relative; }
.header-3 .bsnav-sidebar .navbar-brand.align-self-start {
margin-left: 0;
height: 90px;
background-color: var(--clr-def);
display: flex;
align-items: center;
justify-content: center; }
.header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children .ti-on {
display: inline-block; }
.header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children .ti-off {
display: none; }
.header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children.in .ti-on {
display: none; }
.header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children.in .ti-off {
display: inline-block; }
.header-3 .bsnav-sidebar .navbar-nav .nav-item .navbar-nav {
padding: 0;
padding-left: 1.5rem;
margin: 0; }
.header-3 .bsnav-sidebar .navbar-nav .nav-item .navbar-nav .nav-item .nav-link {
line-height: 1;
height: inherit;
margin-bottom: 1.5rem;
margin-right: 0; }
.navbar-nav .nav-item.menu-item-has-children .ti-on {
display: inline-block; }
.navbar-nav .nav-item.menu-item-has-children .ti-off {
display: none; }
.navbar-nav .nav-item.menu-item-has-children.in .ti-on {
display: none; }
.navbar-nav .nav-item.menu-item-has-children.in .ti-off {
display: inline-block; }
.navbar {
display: inherit; }
.navbar.in {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.07); }
.navbar.in .navbar-brand.nop {
display: block; }
.navbar.in .navbar-bar-shape {
display: none; }
.navbar.in::before {
display: none; }
.navbar.in .top-bar-area {
display: none; }
.navbar.in .navbar-extra-logo {
display: none; }
.navbar.in .navbar-container {
grid-template-columns: 100% !important; }
.navbar.in .top-header-menu {
padding-left: 0; }
.navbar::before {
position: absolute;
z-index: -1;
background: var(--clr-gradient);
top: 0;
left: 0;
width: 34%;
height: 100%;
content: '';
clip-path: polygon(0 0, 100% 0, 93% 100%, 0% 100%);
display: none; }
.header-before-off .navbar.in::before {
display: none; }
.header-before-off .navbar::before {
display: none; }
.navbar .navbar-nav .nav-item .nav-link {
height: 70px;
line-height: 70px;
padding: 0;
text-transform: capitalize;
color: var(--clr-heading);
margin-right: 4rem;
font-size: 17px;
font-weight: 600; }
.navbar .navbar-nav .nav-item .nav-link i {
font-size: 1rem;
margin-left: 3px; }
.navbar .navbar-nav .nav-item:last-child .nav-link {
margin-right: 0; }
.navbar .navbar-nav .nav-item.dropdown {
border-radius: 0; }
.navbar .navbar-nav .nav-item.dropdown .navbar-nav {
padding: 3rem 2.5rem;
box-shadow: none;
border: 1px solid #ddd; }
.navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item .nav-link {
color: var(--clr-heading);
line-height: 1;
height: inherit;
margin-bottom: 1.8rem;
margin-right: 0; }
.navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item:last-child .nav-link {
margin-bottom: 0; }
.navbar.in .navbar-nav .nav-item .nav-link {
color: var(--clr-heading); }
.nav-item.dropdown > .navbar-nav {
width: 340px; }
.header-2 .navbar .navbar-nav .nav-item .nav-link {
color: var(--clr-heading); }
.header-2 .navbar .navbar-nav .nav-item:last-child .nav-link {
margin-right: 0; }
.header-2 .navbar .navbar-nav .nav-item.dropdown {
border-radius: 0; }
.header-2 .navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item .nav-link {
color: var(--clr-heading); }
.header-2 .navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item:last-child .nav-link {
margin-bottom: 0; }
.header-2 .navbar.in .navbar-nav .nav-item .nav-link {
color: var(--clr-heading); }
.header-2 .nav-item .caret {
border-top: solid 5px var(--clr-heading); }
.nav-item .caret {
border-top: solid 5px var(--clr-white); }
.in .nav-item .caret {
border-top: solid 5px var(--clr-heading); }
.header-border .navbar {
border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.header-border .navbar .navbar-brand {
padding-right: 3rem; }
.header-border .navbar .collapse.navbar-collapse {
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
padding-right: 3rem; }
.header-border-black .navbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
.header-border-black .navbar .navbar-brand {
padding-right: 3rem; }
.header-border-black .navbar .collapse.navbar-collapse {
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
padding-right: 3rem; }
.header-border-black .navbar.in {
border-bottom: none; }
.header-border-black .navbar.in .navbar-brand {
padding-right: 3rem; }
.header-border-black .navbar.in .collapse.navbar-collapse {
border-left: none;
border-right: none;
padding-right: 0; }
.dropdown.megamenu > .navbar-nav {
width: 100%;
padding: 0;
left: 0;
overflow: hidden; }
.bsnav-sticky.bsnav-sticky-slide.sticked.in {
transition: transform .4s .2s;
transform: translate3d(0, 0, 0);
background-color: var(--clr-white);
top: 0; }
.navbar .navbar-brand .logo-display {
display: none; }
.navbar .navbar-brand .logo-scrolled {
display: none; }
.navbar.in .navbar-brand .logo-display {
display: none; }
.navbar.in .navbar-brand .logo-scrolled {
display: block;
width:85%;
}
.navbar-toggler.active, .navbar-toggler.active.btn, .navbar-toggler.active.focus.btn, .navbar-toggler.btn:active, .navbar-toggler.btn:active:focus, .navbar-toggler.btn:active:hover, .navbar-toggler.btn:focus, .navbar-toggler.btn:hover, .navbar-toggler.btn:not(:disabled):not(.disabled).active, .navbar-toggler.btn:not(:disabled):not(.disabled):active, .navbar-toggler.focus.btn, .navbar-toggler:active, .navbar-toggler:active:focus, .navbar-toggler:focus, .navbar-toggler:hover, .navbar-togglerbutton.active, .navbar-togglerbutton.active.focus, .navbar-togglerbutton.focus, .navbar-togglerbutton:active, .navbar-togglerbutton:active:focus, .navbar-togglerbutton:active:hover, .navbar-togglerbutton:focus, .navbar-togglerbutton:hover, .navbar-togglerbutton:not(:disabled):not(.disabled).active, .navbar-togglerbutton:not(:disabled):not(.disabled):active {
background: 0 0 !important;
border: transparent !important;
outline: none;
box-shadow: none; }
.bsnav-transparent .nav-item.dropdown > .navbar-nav, .bsnav-transparent .nav-item.dropdown > .navbar-nav .navbar-nav {
border-radius: 0; }
/* -------------------------------------------------------
14. Breadcrumb css
---------------------------------------------------------*/
.site-breadcrumb {
height: 23vh;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 3;
margin-top: 160px; }
.site-breadcrumb::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: linear-gradient(to top, var(--clr-def) 0%, transparent 100%);
opacity: 0.7;
top: 0;
left: 0; }
.site-breadcrumb .breadcrumb-title {
font-size: 5rem;
text-transform: capitalize;
color: var(--clr-white);
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 0.0025em;
display: inline-block;
line-height: 1;
position: relative;
z-index: 1; }
.site-breadcrumb .breadcrumb-menu li {
position: relative;
display: inline-block;
margin-left: 3rem;
color: var(--clr-white);
font-weight: 500;
text-transform: capitalize; }
.site-breadcrumb .breadcrumb-menu li a {
color: var(--clr-white);
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease; }
.site-breadcrumb .breadcrumb-menu li.active {
color: var(--clr-white); }
.site-breadcrumb .breadcrumb-menu li::before {
position: absolute;
content: '/';
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
width: 2rem;
right: -24px;
top: 3px;
text-align: center;
font-size: 1.4rem;
color: var(--clr-white); }
.site-breadcrumb .breadcrumb-menu li:first-child {
margin-left: 0; }
.site-breadcrumb .breadcrumb-menu li:last-child:before {
display: none; }
.site-breadcrumb .breadcrumb-menu li:hover {
color: #d63031; }
.site-breadcrumb-wpr {
position: relative;
z-index: 1; }
/*-------------------------------------------------------
15. RTL css
---------------------------------------------------------*/
body.rtl-mode {
direction: rtl; }
body.rtl-mode .item-area {
direction: ltr; }
body.rtl-mode .price-wpr {
direction: rtl; }
@media (min-width: 992px) {
body.rtl-mode .navbar-brand {
margin-left: 3rem; }
body.rtl-mode .navbar .nav-item .nav-link {
margin-left: 3rem;
margin-right: 0; } }
/*-------------------------------------------------------
16. Vidz css
---------------------------------------------------------*/
.mfp-hide {
display: none; }
#vidz {
display: flex;
align-items: center;
justify-content: center; }
#vidz iframe {
width: 853px;
height: 480px; }
.mfp-close-btn-in .mfp-close {
color: #fff !important; }
.pl {
position: absolute;
bottom: 20px;
left: 15px; }
.pl .play-bt {
width: 9rem;
height: 9rem;
text-align: center;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
z-index: 1;
display: inline-block;
background-color: var(--clr-def);
line-height: 115px;
padding-left: 5px; }
.pl .play-bt i {
color: var(--clr-white);
font-size: 4rem; }
.pl .play-bt:hover {
color: var(--clr-def); }
.pl .play-bt .wave-3, .pl .play-bt::before, .pl .play-bt::after {
content: '';
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
z-index: -1;
background: var(--clr-def);
height: 15rem;
width: 15rem; }
.pl .play-bt::before {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.pl .play-bt::after {
-webkit-animation-delay: 1s;
animation-delay: 1s; }
.pl .play-bt .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s; }
@keyframes waves {
0% {
-webkit-transform: translate(-50%, -50%) scale(0.2, 0.2);
transform: translate(-50%, -50%) scale(0.2, 0.2);
opacity: 0; }
50% {
opacity: 0.9; }
100% {
-webkit-transform: translate(-50%, -50%) scale(0.9, 0.9);
transform: translate(-50%, -50%) scale(0.9, 0.9);
opacity: 0; } }
@-webkit-keyframes button_wave {
0% {
transform: translate(-50%, -50%) scale(0.5); }
50% {
transform: translate(-50%, -50%) scale(1.2); }
100% {
transform: translate(-50%, -50%) scale(0.5); } }
/*-------------------------------------------------------
17. Blog Single css
---------------------------------------------------------*/
.blockqoute {
padding: 4rem 4rem;
font-size: 20px;
font-weight: 500;
background: var(--clr-def-3);
position: relative;
z-index: 1;
font-style: italic;
color: rgba(255, 255, 255, 0.6); }
.blockqoute::before {
position: absolute;
content: '';
height: 100%;
width: 5px;
z-index: -1;
background: var(--clr-def);
opacity: 1;
top: 0;
left: 0; }
.blockqoute::after {
position: absolute;
right: 50px;
content: "\efcd";
font-family: "IcoFont";
bottom: -95px;
font-weight: 100;
opacity: 0.2;
font-size: 140px;
font-style: normal;
color: var(--clr-white); }
.blockqoute span {
display: block;
position: relative;
padding-left: 6rem;
color: var(--clr-white);
font-size: 15px;
margin-top: 2rem; }
.blockqoute span::before {
position: absolute;
content: '';
height: 2px;
width: 50px;
z-index: -1;
background: var(--clr-def-3);
opacity: 1;
top: 50%;
left: 0;
transalate: 0 -50%; }
.blockqoute .block-qoute {
position: absolute;
content: '';
left: 3rem;
top: 2.5rem;
z-index: -1; }
.single-content-img {
position: relative;
z-index: 1; }
.single-content-img img {
border-radius: 6px;
width: 100%; }
.single-content-img .single-sci-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 6px;
background-color: rgba(7, 14, 39, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1; }
.single-commentor-user img {
-webkit-border-radius: 50%;
border-radius: 50%; }
.theme-single.blog-single {
background: var(--clr-white); }
.single-comments-section.blg-single {
background: var(--clr-white);
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
padding: 4rem 5rem;
margin-top: 3rem; }
.single-comments-section.blg-single .single-content-title {
margin-bottom: 3rem;
font-size: 23px;
font-weight: 700;
letter-spacing: 0.0015em; }
.single-comments-section.blg-single .single-comments-section-form h4 {
margin-bottom: 3rem; }
.single-comments-section.blg-single .single-comments-section-form form .input-style-2 {
border: 1px solid #ccc; }
.single-comments-section.blg-single .single-commentor {
margin-bottom: 0rem; }
.single-comments-section.blg-single .single-commentor ul {
display: flex;
flex-direction: column;
gap: 3rem; }
.single-comments-section.blg-single .single-commentor .single-commentor-user {
display: flex;
align-items: center;
gap: 3rem; }
.single-comments-section.blg-single .single-comments-section-form form .form-control {
margin-bottom: 0; }
textarea.input-style-2 {
height: 15rem; }
.blog-single-pic {
margin-bottom: 6rem;
display: block; }
.blog-single-info .blog-single-header .blog-single-title {
font-weight: 400;
margin-bottom: 3rem; }
.blog-single-info .blog-single-header .blog-single-meta {
display: flex;
align-items: center;
gap: 3rem;
border-bottom: 1px solid #eaeaea;
padding-bottom: 1.3rem; }
.blog-single-info .blog-single-header .blog-single-meta li i {
margin-right: 1rem; }
.blog-single-info .blog-single-header .blog-single-meta li:first-child i {
color: #2878eb; }
.blog-single-info .blog-single-header .blog-single-meta li:nth-child(2) i {
color: #f14d5d; }
.blog-single-info .blog-single-header .blog-single-meta li:nth-child(3) i {
color: #00d2ff; }
.blog-single-info .blog-single-header .blog-single-meta li:nth-child(4) i {
color: #f14d5d; }
.blog-single-info .blog-single-header .blog-single-meta li:nth-child(5) i {
color: #1a01ff; }
.blog-single-info .blog-tag-links {
gap: 2rem; }
.blog-single-info .blog-single-nxt-prev {
display: flex;
gap: 1.5rem; }
.blog-single-info .blog-single-nxt-prev a i {
-webkit-border-radius: 50%;
border-radius: 50%;
width: 70px;
height: 70px;
line-height: 70px;
background-color: var(--clr-def);
text-align: center;
color: var(--white-color);
display: inline-block;
font-size: 3rem; }
.blog-single-info .blog-single-nxt-prev a:last-child i {
background-color: #f14d5d; }
.blog-single-info .blog-single-comment .blog-single-single {
display: grid;
grid-template-columns: 10rem 1fr;
grid-gap: 4rem;
align-items: center;
margin-bottom: 3rem; }
.blog-single-info .blog-single-comment .blog-single-single:last-child {
margin-bottom: 0; }
.blog-single-info .blog-single-comment .blog-single-single .blog-single-single-bio h5 {
font-weight: 500; }
.blog-single-info .blog-single-comment .blog-single-single .blog-single-single-bio h5 .reply {
color: var(--clr-body);
font-size: 1.6rem;
font-weight: 400; }
.blog-single-info .blog-single-comment .blog-single-single .blog-single-single-bio span {
display: block;
margin-bottom: 1.5rem; }
.single-comments-section-form .input-style-2 {
padding: 2.1rem 2rem;
border: 1px solid #eaeaea;
-webkit-border-radius: 5px;
border-radius: 5px;
outline: none;
line-height: 1;
background-color: var(--clr-white); }
.single-comments-section-form .input-style-2::placeholder {
font-size: 1.6rem;
color: #787781;
opacity: 1; }
.single-comments-section-form .input-style-2:focus {
outline: none;
box-shadow: none; }
.blog-single-area .single-comments-section .single-commentor .single-commentor-user p {
margin-bottom: 2rem; }
textarea.input-style-2 {
height: 15rem !important; }
button.theme-btn {
border: none; }
.single-user-title {
font-weight: 500;
margin-bottom: 6rem; }
.b-qoute {
padding: 3rem 6rem;
font-style: italic;
border: 1px solid #eaeaea; }
.theme-single {
box-shadow: 0px 0px 50px 0px rgba(34, 34, 34, 0.1);
border-radius: 5px;
background-color: var(--clr-white); }
.theme-info {
padding: 5rem 5rem 5rem 5rem; }
.theme-pic {
position: relative;
z-index: 1; }
.theme-pic .big-pic {
width: 100%;
border-radius: 5px 5px 0 0; }
.theme-pic .pdt-title {
position: absolute;
bottom: -5rem;
left: 3%;
box-shadow: 0px 0px 29px 0px rgba(34, 34, 34, 0.1);
padding: 1.5rem 2rem;
border-radius: 5px;
background-color: var(--clr-white);
text-transform: capitalize;
font-size: 2.4rem; }
.theme-opt-title {
font-size: 16px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.0015em; }
.de-list {
column-count: 2;
column-gap: 4rem; }
.de-list li {
margin-bottom: 2rem; }
.de-list li:last-child {
margin-bottom: 0; }
.de-list li .de-wpr {
display: flex;
align-items: flex-start;
gap: 2rem; }
.de-list li .de-wpr .de-icon {
font-size: 5rem;
color: var(--clr-def); }
.theme-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem; }
.theme-meta .theme-meta-left ul {
display: flex;
align-items: center;
gap: 3rem; }
.theme-meta .theme-meta-left ul li i {
color: var(--clr-def);
margin-right: 1rem; }
.theme-meta .theme-meta-right {
display: flex;
align-items: center;
gap: 3rem; }
.theme-meta .theme-meta-right a i {
color: var(--clr-def);
margin-right: 8px; }
.theme-meta .theme-meta-right .footer-social li a i {
height: 4rem;
width: 4rem;
line-height: 4rem;
text-align: center;
border: 1px solid var(--clr-def);
font-size: 1.6rem;
color: var(--clr-def); }
.theme-meta .share-btn a {
display: flex;
align-items: center; }
.theme-meta .share-btn a i {
font-size: 2rem;
margin-right: 1rem; }
.theme-desc h2 {
margin-bottom: 2rem; }
.img-grid {
display: grid;
grid-template-columns: 255px 1fr;
gap: 3rem; }
.theme-opt {
margin-bottom: 3rem; }
.theme-opt:last-child {
margin-bottom: 0; }
.theme-opt ul {
display: flex;
flex-direction: column;
gap: 3px; }
.theme-opt ul li {
font-size: 16px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0.0015em;
position: relative;
z-index: 1;
padding-left: 2rem; }
.theme-opt ul li a {
text-decoration: underline; }
.theme-opt ul li::before {
position: absolute;
content: '';
height: 1rem;
width: 1rem;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: var(--clr-heading);
top: 50%;
left: 0;
transform: translate(0, -50%); }
.theme-price-plan .theme-price-single {
display: flex;
justify-content: space-between;
align-items: center; }
.theme-price-plan .theme-price-single .form-check-input {
margin-top: 0;
outline: none;
vertical-align: middle;
position: relative;
z-index: 1; }
.theme-price-plan .theme-price-single .form-check-input:focus {
outline: none;
box-shadow: none; }
.theme-price-plan .theme-price-single .form-check-input:checked {
background-color: transparent;
border: 1px solid var(--clr-def); }
.theme-price-plan .theme-price-single .form-check-input:checked::before {
position: absolute;
content: '';
height: 8px;
width: 8px;
border-radius: 50%;
background-color: var(--clr-def);
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.plan-title {
font-size: 16px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0.005em;
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(7, 14, 39, 0.1); }
.theme-price-single .form-check-label {
margin-left: 1rem;
font-size: 14px;
font-weight: 400;
line-height: 10px;
letter-spacing: 0.005em;
color: var(--clr-heading); }
.theme-price-single .theme-price-value {
color: var(--clr-def);
font-size: 16px;
font-weight: 700;
line-height: 10px;
letter-spacing: 0.005em; }
.theme-bottom-price-btuoon {
display: flex;
justify-content: space-between;
margin-top: 3rem; }
.theme-bottom-price-port {
margin-top: 3rem; }
.price {
padding: 3rem 2rem; }
.theme-bottom-price-btuoon .btn-6 {
padding: 1.2rem 3rem; }
.theme-single-pill {
box-shadow: 0px 0px 50px 0px rgba(7, 14, 39, 0.1);
background-color: var(--clr-white); }
.theme-single-pill .nav {
display: flex;
flex-wrap: inherit;
padding-left: 0;
margin-bottom: 0;
justify-content: space-between; }
.theme-single-pill .nav-pills .nav-item {
width: 100%; }
.theme-single-pill .nav-pills .nav-item .nav-link {
border: 3px solid transparent;
border-radius: 5px 5px 0 0;
padding: 2rem;
line-height: 1;
margin-right: 0;
color: var(--clr-body);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.0015em;
width: 100%; }
.theme-single-pill .nav-pills .nav-link.active,
.theme-single-pill .nav-pills .show > .nav-link {
color: var(--clr-white); }
.blog-page-single {
box-shadow: 0 0 29px rgba(0, 0, 0, 0.09);
margin-bottom: 3rem;
background-color: var(--clr-white); }
.blog-page-single .blog-pic {
margin-bottom: 0rem;
position: relative;
z-index: 1; }
.blog-page-single .blog-content {
position: relative;
z-index: 1;
padding: 4rem 4rem 4rem 4rem; }
.blog-page-single .blog-content .blog-page-shape {
position: absolute;
top: 0;
left: 0;
z-index: -1; }
.blog-page-single .blog-content .blog-text {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px dashed #ccc;
line-height: 3.4rem; }
.blog-page-single .blog-content .blog-page-title {
line-height: 1.4;
text-transform: capitalize; }
.blog-page-single .blog-content .blog-user {
display: flex;
align-items: center;
justify-content: space-between; }
.blog-page-single .blog-content .blog-user .blog-user-info {
display: flex;
align-items: center;
gap: 2rem;
line-height: 1; }
.blog-page-single .blog-content .blog-user .blog-user-info .blog-user-bio h4 {
font-size: 2.2rem;
text-transform: capitalize;
line-height: 1;
margin-bottom: 1rem; }
.blog-page-single .blog-content .blog-user .blog-user-info .blog-user-bio span {
color: var(--clr-heading);
display: block;
font-size: 1.4rem;
line-height: 1; }
.blog-page-single .blog-content .blog-user .blog-mta {
display: flex;
align-items: center;
gap: 2rem; }
.blog-page-single .blog-content .blog-user .blog-mta li i {
color: var(--clr-def);
margin-right: 2rem; }
.blog-user-date-yr {
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
left: 0;
bottom: 0; }
.blog-user-date-yr .blog-user-date {
background-color: var(--clr-black);
font-size: 2rem;
font-weight: 600;
line-height: 1;
color: var(--clr-white);
padding: 1rem 2rem;
text-transform: uppercase;
border-radius: 0 2rem 0 0; }
.blog-user-date-yr .blog-user-yr {
background-color: var(--clr-def);
font-size: 2rem;
font-weight: 600;
line-height: 1;
color: var(--clr-white);
padding: 1rem 2rem; }
.red-more {
line-height: 1; }
/*-------------------------------------------------------
18. Sidebar css
---------------------------------------------------------*/
.widget {
padding: 4rem 3.7rem;
box-shadow: 0px 0px 50px 0px rgba(7, 14, 39, 0.1);
margin-bottom: 3rem;
background-color: var(--clr-white);
border-radius: 5px; }
.widget:last-child {
margin-bottom: 0; }
.ps.g-5 {
--bs-gutter-x: 5rem; }
.work-title {
margin-bottom: 30px;
padding-bottom: 15px;
font-weight: 800;
position: relative;
z-index: 1;
font-size: 24px; }
.work-title::before {
position: absolute;
z-index: -1;
height: 2px;
width: 6rem;
border-radius: 2rem;
content: '';
bottom: 0;
left: 0;
background-color: var(--clr-def); }
.search-form {
position: relative;
z-index: 1; }
.search-form .input-style-2 {
padding-left: 1rem; }
.search-form button {
position: absolute;
top: 0;
right: 0;
border-radius: 4px; }
.search-form button i {
color: var(--clr-white); }
.category-list ul {
display: flex;
flex-direction: column;
gap: 1.5rem; }
.category-list ul li {
padding: 1.2rem 2rem;
border: 1px dashed #E7E7E7; }
.category-list ul li:hover {
background-color: var(--clr-def);
border: 1px solid transparent; }
.category-list ul li:hover a {
color: var(--clr-white); }
.category-list ul li:hover a i {
color: var(--clr-white); }
.category-list ul li a {
display: flex;
align-items: center;
justify-content: space-between; }
.category-list ul li a i {
color: var(--clr-heading);
display: inline-block;
font-size: 1.6rem; }
.subs.bg-overlay::before {
border-radius: 5px; }
.subs .work-title {
color: var(--clr-white); }
.subs .subs-title {
color: #BBBBBB;
margin-bottom: 25px; }
.subs-sub .ipp {
margin-bottom: 2rem; }
.subs-sub .ipp input {
width: 100%;
border-radius: 5px;
height: 50px;
padding-left: 0;
text-align: center;
border: 2px solid var(--clr-white);
background: transparent; }
.subs-sub .ipp input::placeholder {
color: var(--clr-white);
font-size: 1.5rem; }
.subs-sub button {
background: var(--clr-def);
width: 100%;
border: none;
border-radius: 5px;
color: var(--clr-white);
font-size: 1.5rem;
height: 50px;
padding: 1.2rem 2rem;
text-align: center; }
.slidecontainer {
width: 100%; }
.slidecontainer .slider {
-webkit-appearnce: none;
width: 100%;
height: 4px;
background: var(--clr-bg-2);
outline: none;
border: none; }
.slidecontainer .slider:hover {
opacity: 1; }
.slidecontainer .slider::-webkit-slider-thumb {
-webkit-appearnce: none;
width: 5px;
height: 5px;
background: red;
cursor: pointer; }
.slidecontainer .slider::-moz-range-thumb {
width: 5px;
height: 5px;
background: red;
cursor: pointer; }
.sidebar-rating {
display: flex;
flex-direction: column;
gap: 1.5rem; }
.sidebar-rating li {
display: flex;
justify-content: space-between;
position: relative;
z-index: 1;
padding-left: 3rem; }
.sidebar-rating li::before {
position: absolute;
content: '';
width: 16px;
height: 16px;
border: 1px solid var(--clr-def);
border-radius: 50%;
left: 0;
top: 50%;
transform: translate(0, -50%); }
.sidebar-rating li::after {
width: 8px;
height: 8px;
position: absolute;
content: '';
z-index: -1;
background: var(--clr-def);
left: 4px;
border-radius: 50%;
top: 50%;
transform: translate(0, -50%); }
.recent-post-single {
display: grid;
gap: 2rem;
align-items: center;
margin-bottom: 2rem;
grid-template-columns: 80px 1fr; }
.recent-post-single:last-child {
margin-bottom: 0; }
.recent-post-single .recent-post-bio h6 {
font-size: 15px;
font-weight: 800;
line-height: 20px;
margin-bottom: 0; }
.recent-post-single .recent-post-bio span {
font-size: 13px;
font-weight: 600;
line-height: 1;
display: flex;
gap: 8px;
margin-bottom: 10px; }
.recent-post-single .recent-post-bio span i {
color: var(--clr-def); }
.content-tags {
display: flex;
align-items: center;
gap: 1.5rem; }
.content-tags h5 {
font-size: 19px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.0015em; }
.content-tags ul {
display: flex;
align-items: center;
gap: 1.5rem; }
.tags-link {
padding: 1.5rem 2rem;
background-color: var(--clr-bg);
border-radius: 4px;
font-size: 14px;
font-weight: 500;
line-height: 10px;
letter-spacing: 0.0025em;
color: var(--clr-heading);
display: inline-block; }
.tags-link:hover {
background-color: var(--clr-def);
color: var(--clr-white); }
.sidebar-tags .tags a {
margin: 8px 8px 8px 0; }
.share {
font-size: 14px;
font-weight: 500;
line-height: 10px;
letter-spacing: 0.0025em;
text-transform: capitalize;
color: var(--clr-heading); }
.share img {
margin-right: 7px; }
.de-bpd {
padding-left: 10rem; }
.service-sidebar ul li {
margin-bottom: 1.5rem;
display: block; }
.service-sidebar ul li:last-child {
margin-bottom: 0; }
.service-sidebar ul li a {
display: flex;
padding: 15px 20px;
font-size: 18px;
border-radius: 5px;
border: 2px solid #e6ecf7;
background-color: var(--clr-bg);
align-items: center;
justify-content: space-between; }
.theme-pic .pdt-title {
margin-right: 3rem; }
.project-sidebar-single {
box-shadow: 0 0 10px #eee;
padding: 30px;
margin-bottom: 3rem;
background-color: var(--clr-white); }
.project-sidebar-single:last-child {
margin-bottom: 0; }
.project-sidebar-single ul li {
border-bottom: 1px solid #e7e7e7;
display: block;
margin-bottom: 10px;
padding-bottom: 10px;
text-transform: uppercase;
font-family: var(--font-2);
font-weight: 600;
line-height: 33px; }
.project-sidebar-single ul li:last-child {
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom: none; }
.project-sidebar-single ul li span {
display: block;
font-weight: normal;
margin: 0;
text-transform: capitalize; }
.rating a i {
color: var(--clr-def); }
.range-label {
color: var(--clr-heading);
cursor: pointer;
font-size: 1.8rem;
font-weight: 400;
display: block;
margin-bottom: 1.5rem; }
.range-slider {
width: 100%; }
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0; }
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background 0.15s ease-in-out;
transition: background 0.15s ease-in-out; }
.range-slider__range::-webkit-slider-thumb:hover {
background: var(--clr-def); }
.range-slider__range:active::-webkit-slider-thumb {
background: var(--clr-def); }
.range-slider__range:active::-moz-range-thumb {
background: var(--clr-def); }
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-moz-transition: background 0.15s ease-in-out;
transition: background 0.15s ease-in-out; }
.range-slider__range::-moz-range-thumb:hover {
background: var(--clr-def); }
.range-slider__range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--clr-def); }
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px; }
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: ""; }
::-moz-range-track {
background: #d7dcdf;
border: 0; }
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0; }
ul.chk {
display: flex;
flex-direction: column;
gap: 1.5rem; }
.styled-checkbox {
position: absolute;
opacity: 0; }
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
line-height: 18px;
color: var(--clr-heading);
font-size: 1.8rem;
font-weight: 400; }
.styled-checkbox + label:before {
content: "";
margin-right: 10px;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: var(--clr-def); }
.styled-checkbox:hover + label:before {
background: var(--clr-def); }
.styled-checkbox:focus + label:before {
box-shadow: none; }
.styled-checkbox:checked + label:before {
background: var(--clr-def); }
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto; }
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd; }
.styled-checkbox:checked + label:after {
content: "";
position: absolute;
left: 5px;
top: 9px;
background: var(--clr-white);
width: 2px;
height: 2px;
box-shadow: 2px 0 0 var(--clr-white), 4px 0 0 var(--clr-white), 4px -2px 0 var(--clr-white), 4px -4px 0 var(--clr-white), 4px -6px 0 var(--clr-white), 4px -8px 0 var(--clr-white);
transform: rotate(45deg); }
/*-------------------------------------------------------
19. Pagination css
---------------------------------------------------------*/
.pagination {
display: block;
margin-top: 6rem;
margin-bottom: 0px;
text-align: center; }
.pagination .page-value {
width: 43px;
height: 43px;
line-height: 45px;
text-align: center;
display: inline-block;
background-color: var(--clr-white);
font-size: 15px;
font-weight: 600;
margin: 0 2px 10px;
padding: 0;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s; }
.pagination .page-value.current {
background-color: var(--clr-def-2);
color: var(--clr-white); }
.pagination .page-value:hover {
background-color: var(--clr-def-2);
color: var(--clr-white); }
.pagination .page-value i {
font-size: 15px; }
/*-------------------------------------------------------
20. Gallery css
---------------------------------------------------------*/
:root {
--swiper-image-ratio: 33.3%;
/* ratio 16:9 = 56.25% */
--swiper-width: 50%;
--swiper-inactive-scale: .85;
/* makes the other slide smaller */
/* responsive settings */
--swiper-mobile-width: 90%;
--swiper-mobile-inactive-scale: .95; }
.gallery-pic {
position: relative;
z-index: 1; }
.gallery-pic::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: linear-gradient(to top, var(--clr-def) 0%, transparent 100%);
opacity: 0.7;
top: 0;
left: 0;
z-index: 0; }
.gallery-pic .gallery-desc {
position: absolute;
bottom: 50px;
left: 50%;
translate: -50% 0;
padding: 50px;
z-index: 1;
min-width: 50%;
opacity: 0; }
.gallery-pic .gallery-desc::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
background: var(--clr-def);
opacity: 0.7;
top: 0;
left: 0; }
.gallery-pic .gallery-desc .heading-3 {
color: var(--clr-white); }
.gallery-pic .gallery-desc p {
color: var(--clr-white);
margin-bottom: 3rem; }
.gallery-btn {
color: var(--clr-white); }
.gallery-btn i {
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: var(--clr-def);
display: inline-block;
color: var(--clr-white);
margin-right: 1.5rem; }
.gallery-shape {
position: absolute;
z-index: -1;
top: 0;
right: -90px;
height: 790px;
opacity: .3; }
.port-sldr.swiper .swiper-pagination .swiper-pagination-bullet {
background: transparent;
height: 20px;
width: 20px;
border: 1px solid #dfdbdb;
position: relative;
z-index: 1;
opacity: 1; }
.port-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
border-color: var(--clr-def); }
.port-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
position: absolute;
left: 50%;
top: 50%;
content: "";
height: 5px;
width: 5px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--clr-def);
transition: all 0.35s ease-in-out; }
.port-sldr .swiper-horizontal > .swiper-pagination-bullets,
.port-sldr .swiper-pagination-bullets.swiper-pagination-horizontal,
.port-sldr .swiper-pagination-custom,
.port-sldr .swiper-pagination-fraction {
bottom: 33px; }
.port-sldr .swiper-slide {
flex-shrink: 0;
width: 50%;
opacity: 1;
transform: scale(0.94);
transition: all .3s ease-in-out;
overflow: hidden; }
.swiper-slide.swiper-slide-active .gallery-pic .gallery-desc {
opacity: 1; }
@media only screen and (min-width: 4000px) {
.port-sldr .swiper {
height: calc(var(--swiper-mobile-width) * var(--swiper-image-ratio) / 100%) !important; }
.port-sldr .swiper-slide {
width: var(--swiper-mobile-width) !important;
transform: scale(var(--swiper-mobile-inactive-scale)) !important; } }
/*-------------------------------------------------------
21. Topbar css
---------------------------------------------------------*/
.top-bar-area {
height: 65px;
line-height: 65px; }
.top-bar-area::before {
position: absolute;
background: var(--clr-def-3);
content: '';
z-index: -1;
top: 0;
left: -245px;
height: 100%;
width: 100%;
clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%); }
.top-barshp {
position: absolute;
z-index: -1;
top: 0;
right: 0; }
.top-social {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end; }
.top-social li a i {
color: var(--clr-white);
font-size: 1.5rem;
background: var(--clr-def-3);
display: inline-block;
height: 4rem;
width: 4rem;
text-align: center;
line-height: 4rem;
border-radius: 4px; }
.topbar-before-off::before {
display: none; }
.top-box {
display: flex;
align-items: center;
gap: 2rem;
color: var(--clr-heading); }
.top-box i {
color: var(--clr-def);
height: 4rem;
width: 4rem;
line-height: 4rem;
text-align: center;
border-radius: 50%;
background-color: var(--clr-white); }
.top-box.top-location.hm-2 span {
font-size: 2rem;
letter-spacing: 1px; }
.top-box.top-location.hm-2 span:first-letter {
text-transform: uppercase; }
.top-box.top-login {
justify-content: flex-end; }
.topbar-white .top-box {
color: var(--clr-white); }
.topbar-white .top-box a {
color: var(--clr-white); }
/*-------------------------------------------------------
22. Heading css
---------------------------------------------------------*/
.heading-1 {
font-size: 42px;
line-height: 1.2;
font-weight: 700; }
.heading-light-1 {
font-size: 42px;
line-height: 1.2;
font-weight: 200; }
.heading-2 {
font-size: 36px;
line-height: 1.2;
font-weight: 700; }
.heading-light-2 {
font-size: 36px;
line-height: 1.2;
font-weight: 200; }
.heading-3 {
font-size: 28px;
line-height: 1.2;
font-weight: 700; }
.heading-light-3 {
font-size: 28px;
line-height: 1.2;
font-weight: 200; }
.heading-4 {
font-size: 24px;
line-height: 1.2;
font-weight: 700; }
.heading-light-4 {
font-size: 24px;
line-height: 1.2;
font-weight: 200; }
.heading-5 {
font-size: 20px;
line-height: 1.2;
font-weight: 700; }
.heading-light-5 {
font-size: 20px;
line-height: 1.2;
font-weight: 200; }
.heading-6 {
font-size: 16px;
line-height: 1.2;
font-weight: 700; }
.heading-light-6 {
font-size: 16px;
line-height: 1.2;
font-weight: 200; }
.para {
font-size: 1.6rem;
line-height: 3.2rem; }
.faq-para {
font-size: 16px;
line-height: 32px;
font-weight: 400;
color: var(--clr-heading); }
.hero-title {
font-size: 9rem;
line-height: 1.2;
font-weight: 700;
font-family: var(--font-2); }
.hero-title span {
color: var(--clr-def-2);
font-family: var(--font-2);
font-weight: 200;
border-bottom: 3px solid var(--clr-def); }
.hero-title-light {
font-size: 7.2rem;
line-height: 1.2;
font-weight: 300;
font-family: var(--font-2); }
.hero-title-light span {
color: var(--clr-def);
font-family: var(--font-2);
font-weight: 200; }
.hero-title-2 {
font-size: 36px;
line-height: 1.2;
font-weight: 400; }
.hero-sub-title {
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
display: inline-block;
font-family: var(--font-2);
color: var(--clr-def);
text-transform: uppercase;
position: relative;
z-index: 1;
padding-left: 5rem; }
.hero-sub-title .hero-line {
width: 4rem;
height: 1px;
position: absolute;
top: 18%;
left: 0;
translate: 0 -50%;
z-index: 1;
background-color: var(--clr-def); }
.hero-sub-title .hero-line::before {
position: absolute;
content: '';
height: 1px;
width: 30px;
z-index: -1;
background: var(--clr-def);
opacity: 1;
top: 5px;
left: 0; }
.hero-sub-title .hero-line::after {
position: absolute;
content: '';
height: 1px;
width: 20px;
z-index: -1;
background: var(--clr-def);
opacity: 1;
top: 10px;
left: 0; }
.hero-sub-title.wh {
color: var(--clr-white); }
.hero-sub-title.wh .hero-line {
background-color: var(--clr-white); }
.hero-sub-title.wh .hero-line::before {
position: absolute;
content: '';
height: 1px;
width: 30px;
z-index: -1;
background: var(--clr-white);
opacity: 1;
top: 5px;
left: 0; }
.hero-sub-title.wh .hero-line::after {
position: absolute;
content: '';
height: 1px;
width: 20px;
z-index: -1;
background: var(--clr-white);
opacity: 1;
top: 10px;
left: 0; }
.hero-sub-title-light {
font-size: 2.2rem;
font-weight: 300;
line-height: 1;
display: inline-block;
font-family: var(--font-2);
color: var(--clr-def);
text-transform: uppercase;
position: relative;
z-index: 1; }
/* CSS Document */
/*-------------------------------------------------------
23. Contact css
---------------------------------------------------------*/
.contact-cn-1 {
position: absolute;
bottom: 0;
right: -95px;
width: 370px; }
.contact-tech {
position: absolute;
right: 100px;
bottom: -93px;
z-index: -2;
opacity: .1;
height: 700px; }
.contact-tech-2 {
position: absolute;
right: 27px;
bottom: -260px;
z-index: -1; }
.contact-cnt {
box-shadow: 3px 4px 20px rgba(0, 0, 0, 0.15);
background-color: var(--clr-white); }
.contact-cta {
position: absolute;
top: 0;
left: 0;
z-index: -1; }
.white-overlay {
position: relative;
z-index: 1;
background-repeat: repeat;
background-position: top left; }
.white-overlay::before {
position: absolute;
content: '';
height: 100%;
width: 90%;
z-index: -1;
background: var(--clr-bg);
opacity: 1;
top: 0;
right: 0;
-webkit-border-radius: 0 0 0 50%;
border-radius: 0 0 0 50%; }
.contact-home textarea {
height: 205px !important; }
.contact-home .contact-form {
padding: 60px;
background: var(--clr-def-3);
border-radius: 10px; }
.contact-home .contact-form .contact-form-title .heading-1 {
font-size: 36px;
color: var(--clr-white); }
.contact-home .contact-form .contact-form-title .heading-5 {
color: var(--clr-white);
margin-bottom: 5px; }
.contact-home .contact-form .contact-form-title p {
color: var(--clr-white); }
.contact-home .contact-form .form-check-input[type=checkbox] {
border-radius: 0;
margin-top: 0;
vertical-align: top;
float: none;
margin-left: 0; }
.contact-home .contact-form .form-check-label {
color: var(--clr-white); }
.contact-home .contact-form .form-check-label span {
color: var(--clr-white); }
.contact-home .form-control.input-style-2 {
border: 1px solid var(--clr-white);
height: 50px;
outline: none;
border-radius: 5px;
box-shadow: none;
padding-left: 20px;
font-size: 14px;
background-color: transparent;
color: var(--clr-white); }
.contact-home .form-control.input-style-2::placeholder {
color: var(--clr-white); }
.contact-home .sub-btn {
margin-top: 4rem; }
.contact-right {
padding-left: 3rem; }
.contact-up-title {
margin-bottom: 4rem;
padding-bottom: 3rem;
border-bottom: 1px solid #d4d4d4; }
.addr-home .addr-box .addr-box-single:nth-child(2) .addr-icon i {
background-color: var(--clr-def-2); }
.addr-home .addr-box .addr-box-single:nth-child(3) .addr-icon i {
background-color: #0077B5; }
.addr-home .addr-box-single {
display: flex;
align-items: flex-start;
gap: 3rem;
margin-bottom: 3rem; }
.addr-home .addr-box-single:last-child {
margin-bottom: 0; }
.addr-home .addr-box-single .addr-icon i {
height: 6rem;
width: 6rem;
line-height: 6rem;
text-align: center;
font-size: 2.4rem;
display: block;
color: var(--clr-white);
border-radius: 5px;
background-color: var(--clr-def); }
.addr-home .addr-box-single .addr-desc h5 {
margin-bottom: 5px; }
.contact-title p {
padding-right: 10rem; }
.contact-page .addr-box-single {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 5rem; }
.contact-page .addr-box-single:last-child {
margin-bottom: 0; }
.contact-page .addr-box-single .addr-icon i {
font-size: 4.5rem;
display: block;
color: var(--clr-def); }
.contact-page .addr-box-single .addr-desc h5 {
margin-bottom: 5px; }
.contact-page .addr-box-single .addr-desc p {
line-height: 1.5; }
.contact-us-wpr.contact-page .input-style-2 {
color: var(--clr-white); }
.contact-ads form {
background: var(--clr-gradient);
padding: 6rem; }
.contact-ads form .btn-4 {
border: none;
margin-top: 5rem; }
.contact-ads form .form-control {
background-color: transparent; }
.contact-ads form .form-control::placeholder {
color: var(--clr-white);
opacity: .7; }
.contact-ads form .form-control::placeholder:focus {
border: none;
box-shadow: none;
outline: none; }
.form-control.input-style-2 {
border: 1px solid #fff;
height: 50px;
outline: none;
border-radius: 5px;
box-shadow: none;
padding-left: 20px;
font-size: 14px; }
.form-control.input-style-2:focus {
box-shadow: none;
outline: none;
border: 1px solid #19ce67; }
.form-title {
margin-bottom: 3rem;
text-transform: capitalize; }
.btn-submit {
border: none;
text-transform: uppercase;
background-color: var(--clr-white);
color: var(--clr-heading);
padding: 1.2rem 4rem;
border-radius: 5px;
transition: all .5s ease;
display: inline-block; }
.btn-submit:hover {
background-color: #000;
text-decoration: none;
color: var(--clr-white); }
.contact-opt-box i {
height: 7rem;
width: 7rem;
line-height: 7rem;
text-align: center;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: var(--clr-def);
font-size: 3rem;
display: inline-block;
color: var(--clr-white);
margin-bottom: 3rem; }
.btn-4.sub-btn {
border: none;
margin-top: 5rem; }
.appointment-here-form form .form-group {
position: relative;
z-index: 1; }
.appointment-here-form form .form-group i {
position: absolute;
top: 50%;
left: 10px;
translate: 0 -50%;
color: var(--clr-def);
font-size: 14px; }
/*Google Maps*/
.g-map-area {
height: 50vh; }
.g-map--wrapper iframe {
width: 100%;
height: 100vh;
border: none; }
/*-------------------------------------------------------
24. Text COlor css
---------------------------------------------------------*/
.text-grad {
background: var(--clr-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.text-grad-2 {
background: var(--clr-gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.text-theme {
background: var(--clr-def);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.text-theme-2 {
background: var(--clr-def-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.text-theme-3 {
background: var(--clr-def-3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
/*End Theme Basic*/
/*-------------------------------------------------------
25. Header Hero Top css
---------------------------------------------------------*/
.header-hero-top {
display: grid;
grid-template-columns: 250px 1fr; }
/*-------------------------------------------------------
26. About css
---------------------------------------------------------*/
.about-pics {
padding-left: 50px;
padding-top: 115px;
padding-bottom: 70px; }
.about-2 {
position: absolute;
bottom: 0;
right: 0; }
.about-3 {
position: absolute;
top: 0;
left: 0px; }
.about-v-4 {
position: absolute;
z-index: -1;
top: 0;
right: 0; }
.custom-text {
font-size: 2.4rem;
font-weight: 500;
line-height: 1.4;
color: var(--clr-heading);
text-transform: uppercase; }
.about-opt {
display: grid;
grid-template-columns: 1fr 150px;
align-items: center;
background: var(--clr-black);
padding-left: 2rem; }
.about-opt-list {
display: flex;
flex-direction: column;
gap: 10px; }
.about-opt-list li {
display: flex;
align-items: center;
gap: 10px;
color: var(--clr-white); }
.about-opt-list li i {
width: 23px;
height: 23px;
line-height: 23px;
text-align: center;
display: inline-block;
color: var(--clr-white);
border: 1px solid var(--clr-white);
font-size: 12px;
border-radius: 50%; }
.about-one-opt {
width: 150px;
background: var(--clr-def);
padding: 4rem 3rem; }
.about-one-opt h3 {
color: var(--clr-white); }
.about-one-opt h6 {
color: var(--clr-white);
margin-bottom: 0; }
.progress-box .chart {
height: 140px;
width: 140px;
position: relative;
display: inline-block; }
.progress-box .chart span {
position: absolute;
height: 90px;
width: 90px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ececec;
display: block;
border-radius: 50%;
text-align: center;
line-height: 90px;
color: var(--clr-def);
font-size: 2.2rem;
font-weight: 700; }
.progress-box .chart span::before {
position: absolute;
content: '';
height: 160px;
width: 160px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ececec;
border-radius: 50%;
z-index: -1; }
.progress-box h4 {
text-transform: capitalize;
margin-bottom: 0;
line-height: 1;
margin-top: 2.5rem;
font-weight: 700; }
.about-left-pics-2 {
padding: 0 5rem 0 5rem;
margin-bottom: 100px; }
.about-left-pics-2::before {
position: absolute;
content: '';
z-index: -1;
top: 40px;
left: 0;
width: 200px;
height: 230px;
background: var(--clr-def);
clip-path: polygon(100% 1%, 0 0, 0 100%); }
.about-2-2 {
position: absolute;
clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 25% 100%, 0% 50%);
bottom: -100px;
left: 0;
width: 350px; }
.about-exp-yr {
position: absolute;
bottom: 5rem;
right: 40px;
padding: 3rem 17rem 3rem 3rem;
z-index: 1; }
.about-exp-yr::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--clr-def);
clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 10% 100%, 0 75%, 0 0);
z-index: -1; }
.about-exp-yr .about-exp .heading-2 {
line-height: 1;
margin-bottom: 5px;
color: var(--clr-white); }
.about-exp-yr .about-exp .heading-5 {
color: var(--clr-white); }
.about-exp-yr .about-exp-pic {
position: absolute;
bottom: 0;
right: -35px;
width: 200px; }
.about-opt-list-2 {
column-count: 2;
column-gap: 1.5rem;
margin-bottom: 1.5rem; }
.about-opt-list-2 li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1.5rem; }
.about-opt-list-2 li i {
width: 23px;
height: 23px;
line-height: 23px;
text-align: center;
display: inline-block;
font-size: 12px;
border-radius: 50%;
color: var(--clr-def);
border: 1px solid var(--clr-def); }
.about-contact-2 {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 3rem; }
.about-contact-2 .about-cnt-icon i {
height: 9rem;
width: 9rem;
line-height: 9rem;
background: var(--clr-def);
text-align: center;
font-size: 4rem;
color: var(--clr-white);
clip-path: polygon(20% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 20% 100%, 0% 80%, 0 0);
display: inline-block; }
.about-contact-2 .about-cnt-text .heading-5 {
margin-bottom: 10px; }
.about-contact-2 .about-cnt-text p {
line-height: 1; }
/*-------------------------------------------------------
27. Service CSS
---------------------------------------------------------*/
.service-box {
padding: 5rem 3rem;
border: 1px solid var(--clr-ccc);
position: relative;
z-index: 1; }
.service-box .service-icon {
margin-bottom: 3rem; }
.service-box .service-icon i {
height: 9rem;
width: 9rem;
line-height: 10rem;
display: inline-block;
background: var(--clr-def);
color: var(--clr-white);
text-align: center;
font-size: 4.5rem;
position: relative;
z-index: 1;
border-radius: 5px; }
.service-box .service-desc .heading-4 {
text-transform: capitalize;
font-weight: 500; }
.service-box .service-desc p {
margin-bottom: 2rem; }
.service-wash {
position: absolute;
bottom: 10px;
right: 10px;
z-index: -1;
height: 130px;
opacity: .08; }
.service-c-1 {
position: absolute;
height: 4rem;
width: 4rem;
border: 10px solid var(--clr-def-3);
display: inline-block;
border-radius: 50%;
top: -35px;
left: 126px;
opacity: .2; }
.btn-text {
color: var(--clr-def);
display: inline-block; }
.service-minus-margin {
margin-top: -135px; }
.service-top-padding {
padding-top: 80px; }
.service-box-2 {
padding: 5rem 4rem 0 4rem;
border: 1px solid var(--clr-ccc);
position: relative;
z-index: 1;
background: var(--clr-white); }
.service-box-2 .service-up-2 {
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
padding-bottom: 4rem;
border-bottom: 1px solid var(--clr-ccc);
align-items: center;
position: relative;
z-index: 1; }
.service-box-2 .service-up-2 .service-icon-2 i {
height: 9rem;
width: 9rem;
line-height: 10rem;
display: inline-block;
background: var(--clr-def);
color: var(--clr-white);
text-align: center;
font-size: 4.5rem;
position: relative;
z-index: 1;
border-radius: 5px; }
.service-box-2 .service-up-2 .service-value-2 span {
display: inline-block;
font-size: 3rem;
color: var(--clr-heading);
font-weight: 800;
border-top: 1px solid var(--clr-ccc); }
.service-box-2 .service-desc-2 h5 {
font-weight: 500;
line-height: 1.4; }
.service-box-2 .service-desc-2 p {
margin-bottom: 2rem; }
.service-btn-2 {
display: inline-block; }
.service-btn-2 i {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
height: 5rem;
width: 8rem;
line-height: 6.5rem;
display: inline-block;
background: var(--clr-def);
color: var(--clr-white);
text-align: center;
font-size: 1.8rem;
transition: all .5s ease; }
.service-btn-2 i:hover {
background-color: var(--clr-black);
color: var(--clr-white); }
/*-------------------------------------------------------
28. Counter Css
---------------------------------------------------------*/
.center-right {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%; }
.counter-1 .fun-fact {
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 3rem 0;
border-radius: 10px; }
.counter-1 .fun-fact .counter-icon {
margin-bottom: 2rem; }
.counter-1 .fun-fact .counter-icon i {
font-size: 70px;
display: inline-block;
color: var(--clr-white);
line-height: 1; }
.counter-1 .fun-fact .counter {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: 600;
line-height: 1;
margin-bottom: 2rem;
color: var(--clr-white); }
.counter-1 .fun-fact span {
font-weight: 600;
display: block;
font-size: 1.5rem;
line-height: 1;
color: var(--clr-white); }
.counter-top-minus {
position: relative;
z-index: 10;
margin-top: -120px; }
.counter-wpr {
padding: 7rem;
background: var(--clr-def-3); }
.cta-btm {
padding-bottom: 240px; }
/*-------------------------------------------------------
29. Why css
---------------------------------------------------------*/
.why-right {
text-align: right; }
.why-pic {
border-radius: 260px; }
.why-ui {
position: absolute;
bottom: 30px;
left: 90px;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
border-radius: 10px; }
.why-opt {
display: flex;
flex-direction: column;
gap: 2rem; }
.why-opt li {
display: flex;
align-items: center;
gap: 2rem; }
.why-opt li img {
width: 90px; }
.why-box {
position: absolute;
top: 80px;
left: 20px;
z-index: -1; }
/*-------------------------------------------------------
30. Work css
---------------------------------------------------------*/
.sub-shape {
top: -140px;
right: -80px;
z-index: -1;
position: absolute;
opacity: .1; }
.work-single:hover .work-pic .work-content {
background: var(--clr-def); }
.work-pic {
position: relative;
z-index: 1;
padding: 0 0 5rem 5rem; }
.work-pic .work-content {
position: absolute;
bottom: 0;
left: 0;
background: var(--clr-def-3);
padding: 4rem 3rem;
width: 300px;
transition: all .5s ease; }
.work-content span {
display: inline-block;
color: var(--clr-white);
margin-bottom: 2rem;
line-height: 1;
font-weight: 500;
text-transform: capitalize;
padding-bottom: 1rem;
border-bottom: 1px solid var(--clr-white); }
.work-content h5 {
color: var(--clr-white);
line-height: 1.5;
margin-bottom: 2rem; }
.work-btn {
color: var(--clr-white);
text-transform: capitalize;
font-weight: 500; }
.work-btn:hover {
color: var(--clr-black); }
.work-left-content .swiper-button-next,
.work-left-content .swiper-button-prev {
position: inherit;
top: inherit;
margin-top: 0;
display: inherit;
width: 80px;
height: 35px;
color: var(--clr-white);
background-color: var(--clr-def-3);
text-align: center;
border-radius: 5px; }
.work-left-content .swiper-button-prev:after,
.work-left-content .swiper-button-next:after {
font-family: 'IcoFont';
font-size: 36px; }
.work-left-content .swiper-button-next:after {
content: '\ea93'; }
.work-left-content .swiper-button-prev:after {
content: '\ea94'; }
.work-slider-ico {
background: var(--clr-white);
display: inline-block;
padding: 24px 4rem;
border-radius: 5px;
line-height: 1; }
.work-sldr.swiper .swiper-pagination {
position: inherit;
margin-bottom: -18px;
margin-top: 40px; }
.work-sldr.swiper .swiper-pagination .swiper-pagination-bullet {
background: transparent;
height: 20px;
width: 20px;
border: 1px solid var(--clr-def);
position: relative;
z-index: 1;
opacity: 1; }
.work-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
border-color: var(--clr-def); }
.work-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
position: absolute;
left: 50%;
top: 50%;
content: "";
height: 5px;
width: 5px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--clr-def);
transition: all 0.35s ease-in-out; }
/*-------------------------------------------------------
31. Container css
---------------------------------------------------------*/
@media (min-width: 1250px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1250px; } }
.container-full {
padding: 0 15px;
margin: auto;
max-width: 1400px; }
@media (max-width: 576px) {
.container-full {
max-width: 100%;
width: 100%; } }
@media (min-width: 576px) {
.container-full {
max-width: 540px;
width: 100%; } }
@media (min-width: 768px) {
.container-full {
max-width: 720px;
width: 100%; } }
@media (min-width: 992px) {
.container-full {
max-width: 960px;
width: 100%; } }
@media (min-width: 1200px) {
.container-full {
max-width: 95%;
width: 95%; } }
.container-fill {
padding: 0 15px;
margin: auto;
max-width: 100%; }
@media (min-width: 576px) {
.container-fill {
max-width: 540px;
width: 100%; } }
@media (min-width: 768px) {
.container-fill {
max-width: 720px;
width: 100%; } }
@media (min-width: 992px) {
.container-fill {
max-width: 960px;
width: 100%; } }
@media (min-width: 1200px) {
.container-fill {
width: 100%;
max-width: 100%; } }
@media (max-width: 1199px) {
.container-fill {
padding: 0 15px;
width: 100%; } }
@media only screen and (min-width: 1367px) {
.container-stage {
margin-left: calc((100% - 1250px)/ 2);
width: auto;
max-width: inherit;
padding-right: 0; } }
@media only screen and (max-width: 767px) {
.row {
--bs-gutter-x: 1.5rem; } }
.bg-cover {
background-position: center center !important;
background-size: cover !important; }
.bg-fixed {
background-attachment: fixed !important;
background-position: center center !important;
background-size: cover !important; }
.bg-fit {
background-size: 100% 100% !important;
background-position: center !important; }
/*-------------------------------------------------------
32. Price css
---------------------------------------------------------*/
.price-area .site-title {
z-index: 78;
position: relative; }
.price-top-bg {
position: relative;
z-index: 1; }
.price-top-bg::before {
position: absolute;
content: '';
z-index: -1;
top: -270px;
left: 0;
height: 500px;
width: 100%;
background: var(--clr-bg); }
.price-box-content {
position: relative;
z-index: 1;
padding: 6rem 4rem;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
height:450px;
background-color: var(--clr-white); }
.price-box-content::before {
position: absolute;
content: '';
z-index: -1;
top: 0;
right: 0;
background: var(--clr-def);
height: 240px;
width: 240px;
clip-path: polygon(0 0, 100% 100%, 100% 0); }
.price-box-content::after {
position: absolute;
content: '';
z-index: -1;
top: 0;
right: 0;
background: var(--clr-def-3);
height: 120px;
width: 120px;
clip-path: polygon(0 0, 100% 100%, 100% 0); }
.price-box-content .price-ribbon {
text-align: right;
position: relative;
z-index: 1;
font-size: 1.7rem;
font-weight: 500;
color: var(--clr-heading);
margin-bottom: 0;
line-height: 1;
padding: 1.4rem ;
display: inline-block;
margin-right: -4rem;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.09)); }
.price-box-content .price-ribbon::before {
position: absolute;
content: '';
z-index: -1;
top: 0;
right: 0;
background: var(--clr-white);
height: 100%;
width: 100%;
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%); }
.price-box-content .price-up {
margin-bottom: 3rem; }
.price-box-content .price-up .price-value {
font-size: 50px;
line-height: 1.2;
font-weight: 500;
margin-bottom: 0; }
.price-box-content .price-up .price-value span {
display: block;
font-weight: 400;
font-size: 18px; }
.price-box-content .price-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 3rem; }
.price-box-content .price-list li {
display: flex;
align-items: center;
gap: 5px; }
.price-popular {
position: absolute;
display: inline-block;
top: 2rem;
left: 3rem;
padding: 7px 1rem 7px 2rem;
border: 1px solid var(--clr-def);
border-radius: 3rem;
font-size: 1.3rem;
text-transform: uppercase;
line-height: 1;
color: var(--clr-heading);
font-weight: 500; }
.price-popular::before {
position: absolute;
content: '';
height: 6px;
width: 6px;
background: var(--clr-def);
top: 50%;
left: 8px;
transform: translate(0, -50%);
border-radius: 50%; }
.price-btn {
padding: 2rem 4rem;
background: var(--clr-def-3);
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
line-height: 1;
color: var(--clr-white);
font-weight: 500;
display: inline-block;
transition: all .5s ease; }
.price-btn:hover {
background: var(--clr-def);
color: var(--clr-white); }
/*-------------------------------------------------------
33. Team css
---------------------------------------------------------*/
.team-box:hover .team-pic .team-content {
background: var(--clr-def-3); }
.team-box:hover .team-pic .team-content span {
color: var(--clr-white);
border-bottom: 1px solid var(--clr-white); }
.team-box:hover .team-pic .team-content h5 {
color: var(--clr-white); }
.team-box .team-pic {
position: relative;
z-index: 1;
padding-right: 10rem;
padding-bottom: 5rem; }
.team-box .team-pic .team-content {
position: absolute;
z-index: 1;
bottom: 0;
left: 5rem;
background: var(--clr-white);
padding: 4rem 3rem;
width: 292px; }
.team-box .team-pic .team-content span {
display: inline-block;
color: var(--clr-heading);
margin-bottom: 2rem;
line-height: 1;
font-weight: 500;
text-transform: capitalize;
padding-bottom: 1rem;
border-bottom: 1px solid var(--clr-def-3);
font-size: 1.4rem; }
.team-box .team-pic .team-content h5 {
color: var(--clr-heading);
font-weight: 500;
margin-bottom: 20px; }
.team-line {
position: absolute;
z-index: 0;
bottom: 5px;
right: 5px;
opacity: .2;
z-index: -1; }
.pls {
position: absolute;
bottom: 0;
right: 0;
height: 6rem;
width: 6rem;
line-height: 6rem;
text-align: center;
background: var(--clr-1);
color: var(--clr-white); }
.team-social {
display: flex;
align-items: center;
gap: 1rem; }
.team-social li a i {
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
background: var(--clr-def);
color: var(--clr-white);
font-size: 1.6rem;
-webkit-border-radius: 50%;
border-radius: 50%; }
.team-social li a i:hover {
color: var(--clr-def);
background: var(--clr-white); }
.team-wavy {
position: absolute;
z-index: -1;
top: 44%;
left: 50%;
translate: -50% -50%; }
/*-------------------------------------------------------
34. Review css
---------------------------------------------------------*/
.review-single {
padding: 6rem 5rem;
background: var(--clr-white);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.07); }
.review-single h5 {
font-weight: 500;
position: relative;
z-index: 1;
padding-left: 6rem;
font-size: 16px;
margin-bottom: 2rem; }
.review-single h5::before {
position: absolute;
content: '';
height: 2px;
width: 5rem;
z-index: -1;
background: var(--clr-def);
opacity: 1;
top: 50%;
left: 0;
transform: translate(0, -50%); }
.review-single p {
margin-bottom: 4rem; }
.review-single span {
color: var(--clr-def);
font-weight: 500; }
.reveiw-wpr {
margin-left: -12rem; }
.review-slider-ico {
display: inline-block; }
.review-left-content h2 {
font-size: 5rem;
color: var(--clr-white); }
.review-left-content img {
filter: brightness(0.5); }
.review-left-title-arrow {
position: absolute;
top: 50%;
left: 30px;
translate: 0 -50%; }
.review-left-content .swiper-button-next, .review-left-content .swiper-button-prev {
position: inherit;
top: inherit;
margin-top: 0;
display: inherit;
width: 80px;
height: 35px;
color: var(--clr-white);
background-color: var(--clr-def);
text-align: center;
border-radius: 5px; }
.review-left-content .swiper-button-prev:after, .review-left-content .swiper-button-next:after {
font-family: 'IcoFont';
font-size: 36px; }
.review-left-content .swiper-button-next:after {
content: '\ea93'; }
.review-left-content .swiper-button-prev:after {
content: '\ea94'; }
.review-shapes img {
position: absolute;
z-index: -1; }
.review-shapes img.review-shape {
bottom: -500px;
left: 0;
width: 1200px; }
.review-sldr.swiper .swiper-pagination {
position: inherit;
margin-bottom: -18px;
margin-top: 40px; }
.review-sldr.swiper .swiper-pagination .swiper-pagination-bullet {
background: transparent;
height: 20px;
width: 20px;
border: 1px solid var(--clr-def);
position: relative;
z-index: 1;
opacity: 1; }
.review-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
border-color: var(--clr-def); }
.review-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
position: absolute;
left: 50%;
top: 50%;
content: "";
height: 5px;
width: 5px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--clr-def);
transition: all 0.35s ease-in-out; }
/*-------------------------------------------------------
35. Blog css
---------------------------------------------------------*/
.blog-box {
box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06); }
.blog-box .blog-desc {
padding: 3rem; }
.blog-box .blog-desc .blog-meta-item {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
border-bottom: 1px solid var(--clr-ccc);
padding-bottom: 2.5rem; }
.blog-box .blog-desc .blog-meta-item li i {
color: var(--clr-def);
margin-right: 5px;
display: inline-block; }
.blog-box .blog-desc .blog-meta-item li a {
font-weight: 400; }
.blog-box .blog-desc .blog-content {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 3rem; }
.blog-box .blog-desc .blog-content .heading-4 {
font-weight: 500;
font-size: 24px;
letter-spacing: -0.96px;
line-height: 1.3;
margin-bottom: 0; }
.blog-box .blog-desc .blog-content .blog-date-item {
background: var(--clr-white);
text-align: center;
border-radius: 5px;
border-bottom: 2px solid var(--clr-def);
padding: 20px;
box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06); }
.blog-box .blog-desc .blog-content .blog-date-item h4 {
background: linear-gradient(90deg, var(--clr-def) 0%, var(--clr-def-2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
font-weight: 500;
font-size: 20px;
letter-spacing: -0.8px;
margin-bottom: 5px; }
.blog-box .blog-desc .blog-content .blog-date-item p {
font-size: 16px;
font-weight: 400;
color: var(--clr-heading);
line-height: 1;
margin-bottom: 0px; }
.blog-btn {
display: flex;
align-items: center;
color: var(--clr-def); }
.blog-btn i {
display: inline-block;
margin-left: 5px; }
.blog-btn-2 {
font-size: 16px;
font-weight: 600;
padding: 1.5rem 4rem;
border: 1px solid #1D71CE;
display: inline-block;
line-height: 1;
color: var(--clr-black);
transition: all .5s ease; }
.blog-btn-2:hover {
border: 1px solid transparent;
background: var(--clr-gradient-4);
color: var(--clr-white); }
.blog-df.blog-page-df {
grid-template-columns: 550px 1fr;
align-items: center; }
.blog-page-shadow {
box-shadow: 3px 4px 20px rgba(0, 0, 0, 0.15);
background: var(--clr-white);
margin-bottom: 3rem;
border-radius: 0 0 10px 10px;
font-size: 1.4rem; }
.blog-page-shadow .blog-meta {
display: flex;
align-items: center;
gap: 3rem; }
.blog-page-shadow .blog-meta i {
margin-right: 1rem;
color: var(--clr-def); }
.blog-page-shadow .blog-meta .blog-like-com {
display: flex;
align-items: center;
gap: 20px; }
.blog-page-shadow .blog-desc {
padding: 5rem; }
.blog-page-shadow .blog-desc .blog-text {
font-size: 1.8rem; }
/*-------------------------------------------------------
36. Reg css
---------------------------------------------------------*/
.reg-area {
position: relative;
z-index: 1; }
.reg-area::before {
position: absolute;
content: '';
height: 50%;
width: 100%;
z-index: -1;
background: linear-gradient(90deg, var(--clr-def) 0, var(--clr-def-3) 100%);
opacity: 1;
clip-path: polygon(100% 100%, 100% 0, 0 100%);
bottom: 0;
left: 0; }
.reg-wpr {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1; }
.login-shape {
position: absolute;
z-index: -1;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
width: 100%; }
.login-form {
text-align: center;
width: 47rem;
padding: 6rem 5rem;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
border-radius: 2rem;
background-color: var(--clr-white); }
.login-form .header-icon {
display: block;
margin-bottom: 3rem; }
.login-form .input-style-2 {
height: 5.5rem;
border-radius: 4px;
border: 1px solid #eee; }
.login-form .input-style-2::placeholder {
font-size: 1.6rem; }
.login-form .login-btn {
display: block;
width: 100%;
text-align: center; }
.login-form .reg-acc {
display: block;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.005em;
margin-top: 3rem; }
.login-form .reg-acc a {
color: var(--clr-def); }
.form-check {
display: block;
min-height: 1.5rem;
padding-left: 0;
margin-bottom: 0;
line-height: 1; }
.form-check-input[type=checkbox] {
border-radius: 0;
margin-top: 0;
vertical-align: top;
float: inherit;
margin-left: -3em; }
.rs-ps {
margin-top: -7px;
display: block;
font-size: 1.4rem; }
.form-check-label {
color: var(--clr-body);
margin-left: 1rem; }
.register-title {
font-size: 23px;
font-weight: 700;
letter-spacing: 0.005em; }
/*-------------------------------------------------------
37. Step css
---------------------------------------------------------*/
.step-box {
text-align: center; }
.step-box .step-icon {
position: relative;
z-index: 1;
margin-bottom: 2rem; }
.step-box .step-icon .step-note-icon {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 60px; }
.step-box .step-icon .step-num {
position: absolute;
top: 35px;
right: 5px;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
font-size: 1.6rem;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: var(--clr-def);
color: var(--clr-white); }
.step-box .step-desc {
transform: translateX(-50px); }
.step-elm-elm {
position: relative;
z-index: 1; }
.step-elm {
display: flex;
align-items: center;
gap: 3rem; }
/*-------------------------------------------------------
38. Sub css
---------------------------------------------------------*/
.sub-wpr {
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
padding: 70px 60px;
background: var(--clr-1);
position: relative;
z-index: 1; }
.sub-left .heading-1 {
color: var(--clr-white); }
.cta-shape-1 {
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: 190px; }
/*-------------------------------------------------------
39. Project Single css
---------------------------------------------------------*/
.project-client-single h5 {
line-height: 1;
margin-bottom: 1rem; }
.project-single-text p {
padding-right: 6rem; }
.pw {
width: 100%; }
.project-client-info {
background: var(--clr-def);
padding: 50px; }
.project-client-single h5 {
color: var(--clr-white); }
.project-client-single p {
color: var(--clr-white); }
/*-------------------------------------------------------
40. Service Single css
---------------------------------------------------------*/
.service-single-list {
display: flex;
flex-direction: column;
gap: 1rem; }
.service-single-list li {
display: flex;
align-items: center;
gap: 1.5rem;
font-weight: 500; }
.service-single-list li i {
font-size: 1.4rem;
color: var(--clr-def); }
/*-------------------------------------------------------
41. Feature css
---------------------------------------------------------*/
.feature-p-1 {
position: absolute;
top: 0;
right: 0;
z-index: -1; }
.feature-p-2 {
position: absolute;
top: 0;
right: 40px;
z-index: -1; }
.feature-box {
box-shadow: 0 2px 35px rgba(0, 0, 0, 0.15); }
.feature-box .feature-icon-no {
padding: 3rem 4rem;
background-color: var(--clr-def-2);
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1; }
.feature-box .feature-icon-no .feature-no span {
color: white;
-webkit-text-fill-color: transparent;
/* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
font-size: 60px;
font-weight: 800;
line-height: 1; }
.feature-box .feature-desc {
padding: 4rem 5rem; }
.feature-box .feature-desc h4 {
margin-bottom: 2rem; }
.feature-box .feature-desc p {
margin-bottom: 3rem; }
.feature-btn i {
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: var(--clr-def);
display: inline-block;
color: var(--clr-white); }
/*-------------------------------------------------------
42. Benefit css
---------------------------------------------------------*/
.benefit-single {
padding: 5rem 3rem;
border-radius: 10px; }
.benefit-single i {
width: 7rem;
display: block;
margin-bottom: 30px; }
.benefit-one {
background: rgba(11, 77, 245, 0.1); }
.benefit-one h4 {
text-transform: capitalize; }
.benefit-one p {
margin-bottom: 0; }
.benefit-two {
box-shadow: 0 3px 40px 0 rgba(0, 0, 0, 0.1);
background-color: var(--clr-white); }
.benefit-two h4 {
margin-bottom: 0;
line-height: 1; }
.heading-regular {
line-height: 5.3rem;
font-weight: 500;
font-size: 42px; }
.benefit-star {
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
width: 30rem; }
/*-------------------------------------------------------
43. Promo css
---------------------------------------------------------*/
.promo-margin {
margin-left: 333px; }
.promo-area {
background-size: cover;
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat; }
.pattern-1 {
position: absolute;
z-index: -1;
top: 0;
left: 0; }
.promo-right-content .heading-5 {
color: var(--clr-white);
margin-bottom: 3rem; }
.promo-right-content .promo-number {
display: block;
color: var(--clr-white);
font-size: 72px;
line-height: 1;
font-weight: 700;
margin-bottom: 5rem; }
/*-------------------------------------------------------
44. Requ css
---------------------------------------------------------*/
.requ-delivery {
background-color: #1A207F; }
.mr-33-5 {
margin-right: 33.5rem; }
.requ-contact {
padding: 8rem 8rem 8rem 8rem;
background-color: #1A207F;
max-width: 850px; }
.requ-contact .heading-1 {
color: var(--clr-white); }
.req-delivery-two {
max-width: 610px; }
.requ-contact-pic {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%; }
.contact-form-requ .input-style-2 {
background-color: #000671;
border: none;
color: var(--clr-white);
margin-bottom: 2.9rem; }
.contact-form-requ .input-style-2::placeholder {
color: var(--clr-white);
font-size: 1.5rem; }
.contact-form-requ .input-style-2:focus {
border: none;
outline: none;
box-shadow: none; }
.requ-left-pic {
height: 100%; }
select.form-control.input-style-2.form-select {
color: var(--clr-white);
position: relative;
z-index: 1;
background-image: url("data:image/svg+xml,"); }
.requ-contact-white {
background-color: var(--clr-white); }
.requ-contact-white .heading-1 {
color: var(--clr-heading); }
.requ-contact-white .btn-1 {
width: 100%; }
.requ-contact-white input[type=number] {
color: var(--clr-body) !important; }
.requ-contact-white .contact-form-requ .input-style-2 {
background-color: transparent;
border: 1px solid var(--clr-body);
color: var(--clr-heading);
margin-bottom: 2.9rem; }
.requ-contact-white .contact-form-requ .input-style-2::placeholder {
color: var(--clr-body);
font-size: 1.5rem; }
.requ-contact-white .contact-form-requ .input-style-2:focus {
border: 1px solid var(--clr-body);
outline: none;
box-shadow: none; }
.requ-contact-white .contact-form-requ select.form-control.input-style-2.form-select {
color: var(--clr-body);
background-image: url("data:image/svg+xml,"); }
.requ-contact-white .contact-form-requ .sst-title {
color: var(--clr-body); }
.requ-contact-white .contact-form-requ .styled-checkbox + label {
color: var(--clr-body); }
.requ-contact-white .contact-form-requ .styled-checkbox + label:before {
border: 1px solid var(--clr-body); }
.destination {
display: flex;
align-items: center;
gap: 1.5rem; }
.styled-checkbox {
position: absolute;
opacity: 0; }
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
line-height: 18px;
color: var(--clr-white);
font-size: 1.5rem;
font-weight: 400; }
.styled-checkbox + label:before {
content: "";
margin-right: 10px;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: transparent;
border: 1px solid var(--clr-white); }
.styled-checkbox:hover + label:before {
background: var(--clr-def); }
.styled-checkbox:focus + label:before {
box-shadow: none; }
.styled-checkbox:checked + label:before {
background: var(--clr-def); }
.styled-checkbox:checked + label:after {
content: "";
position: absolute;
left: 5px;
top: 9px;
background: var(--clr-white);
width: 2px;
height: 2px;
box-shadow: 2px 0 0 var(--clr-white), 4px 0 0 var(--clr-white), 4px -2px 0 var(--clr-white), 4px -4px 0 var(--clr-white), 4px -6px 0 var(--clr-white), 4px -8px 0 var(--clr-white);
transform: rotate(45deg); }
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto; }
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd; }
.requ-input-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem; }
.requ-input-label label {
font-size: 1.5rem;
color: var(--clr-white);
display: block; }
.requ-input-label input {
font-size: 1.5rem;
color: var(--clr-white);
display: block;
background-color: transparent;
border: none;
text-align: end; }
.requ-input-label input:focus {
outline: none;
border: none;
box-shadow: none; }
.requ-sldr {
margin-bottom: 3rem;
/* Firefox */ }
.requ-sldr input::-webkit-outer-spin-button,
.requ-sldr input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.requ-sldr input[type=number] {
-moz-appearance: textfield;
width: auto;
height: auto;
background: transparent;
font-size: 15px;
color: var(--clr-white); }
.requ-sldr input[type=number]:focus {
outline: none;
box-shadow: none;
border: none; }
.requ-sldr .ui-slider.ui-widget-content {
background: var(--clr-def);
border: none; }
.requ-sldr .ui-slider.ui-slider-horizontal {
height: 5px; }
.requ-sldr .ui-slider .ui-slider-handle {
border-radius: 50%;
width: 12px;
height: 12px;
top: -4px; }
.requ-sldr .ui-slider .ui-widget-header {
background: var(--clr-def); }
/*-------------------------------------------------------
45. CTA css
---------------------------------------------------------*/
.cta-wpr .heading-1 {
color: var(--clr-white);
line-height: 1.3; }
.cta-contact {
display: flex;
align-items: center;
gap: 2rem;
justify-content: center; }
.cta-contact .cta-contact-icon i {
height: 65px;
width: 65px;
line-height: 65px;
text-align: center;
background-color: var(--clr-white);
display: inline-block;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
z-index: 1; }
.cta-contact .cta-contact-desc {
text-align: left; }
.cta-contact .cta-contact-desc span {
display: block;
margin-bottom: 10px;
line-height: 1;
color: var(--clr-white); }
.cta-contact .cta-contact-desc h4 {
color: var(--clr-white);
line-height: 1; }
/*-------------------------------------------------------
45.Woocommerce css
---------------------------------------------------------*/
.woocommerce-message,
.woocommerce-info {
position: relative;
border: 1px solid #d8d8d8;
padding: 11px 20px;
background-color: var(--clr-body);
color: var(--clr-white);
font-size: 14px;
font-weight: 700;
margin-bottom: 20px;
border-radius: 5px; }
.woocommerce-message a,
.woocommerce-info a {
color: inherit; }
.woocommerce-message a:hover,
.woocommerce-info a:hover {
text-decoration: underline; }
.woocommerce-message:before,
.woocommerce-info:before {
content: '\f06a';
font-family: #ddd;
font-weight: 900;
margin-right: 10px; }
.woocommerce-notices-wrapper .woocommerce-message {
background-color: var(--clr-def); }
.woocommerce-notices-wrapper .woocommerce-message:before {
content: '\f14a';
font-weight: 300; }
.woocommerce-form-coupon,
.woocommerce-form-login {
display: none; }
.woocommerce-form-login-toggle .woocommerce-info {
background-color: var(--clr-def); }
.woocommerce-checkout .form-select,
.woocommerce-checkout .form-group {
margin-bottom: 0.5rem; }
.woocommerce-checkout .form-control {
margin-bottom: 15px; }
.woocommerce-checkout .shipping_address {
display: none; }
.woocommerce-product-rating .star-rating {
display: inline-block;
vertical-align: middle; }
.woocommerce-cart-form {
text-align: center; }
.cart_table {
border: 1px solid #eaf0f2;
margin-bottom: 45px; }
.cart_table thead {
background-color: #ecf0f1; }
.cart_table td:before,
.cart_table th {
font-family: var(--font-2);
color: var(--clr-heading);
font-weight: 700;
text-transform: uppercase;
border: none;
padding: 27px 15px; }
.cart_table td:before {
content: attr(data-title);
position: absolute;
left: 15px;
top: 50%;
vertical-align: top;
padding: 0;
transform: translateY(-50%);
display: none; }
.cart_table td {
border: none;
border-bottom: 1px solid #f3f3f3;
color: #8b8b8b;
padding: 20px 10px;
position: relative; }
.cart_table .product-quantity {
color: var(--clr-heading); }
.cart_table .cart-productname {
font-weight: 600;
font-family: var(--font-2);
color: inherit; }
.cart_table .cart-productimage {
display: inline-block;
border: 1px solid #ddd; }
.cart_table .remove {
color: #29af8a;
font-size: 18px; }
.cart_table .quantity {
display: inline-flex;
align-items: center; }
.cart_table .qut-btn {
border: 2px solid var(--clr-menu);
background-color: transparent;
color: #b8c6d0;
padding: 0;
width: 30px;
height: 30px;
font-size: 16px;
border-radius: 4px;
position: relative;
top: 0;
left: 0; }
.cart_table .qut-btn.quantity-minus {
top: 0; }
.cart_table .qut-btn:hover {
background-color: var(--clr-def);
color: var(--clr-white);
border-color: transparent; }
.cart_table .qty-input {
vertical-align: middle;
border: 2px solid var(--clr-menu);
width: 70px;
height: 30px;
font-size: 14px;
text-align: center;
color: #2c3e50;
font-weight: 700;
margin: 0 10px;
border-radius: 4px;
padding-right: 0;
/* Firefox */ }
.cart_table .qty-input::-webkit-outer-spin-button, .cart_table .qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.cart_table .qty-input[type=number] {
-moz-appearance: textfield; }
.cart_table .actions {
text-align: right;
vertical-align: middle; }
.cart_table .actions > .vs-btn {
margin-right: 15px; }
.cart_table .actions > .vs-btn:last-child {
margin-right: 0; }
.cart_table .tb-cart-coupon {
float: left;
margin: 0;
width: 455px;
max-width: 100%;
display: flex; }
.cart_table .tb-cart-coupon input {
height: 5rem;
width: calc(100% - 200px);
margin-right: 10px;
padding-left: 20px; }
.cart_table .tb-cart-coupon .vs-btn {
width: 200px;
padding-left: 0;
padding-right: 0; }
.cart_totals {
border: 1px solid #ecf0f1; }
.cart_totals th,
.cart_totals td {
vertical-align: top;
padding: 20px 20px;
border: none;
border-bottom: 1px solid #ecf0f1;
font-size: 14px;
color: var(--clr-heading);
width: 55%; }
.cart_totals th:first-child,
.cart_totals td:first-child {
width: 45%;
background-color: #f9fbfb;
font-weight: 700;
font-size: 14px;
color: #333333; }
.cart_totals .shipping-calculator-button {
display: inline-block;
border-bottom: 1px solid;
color: var(--clr-heading);
font-weight: 700; }
.cart_totals .shipping-calculator-button:hover {
color: var(--clr-def); }
.cart_totals .woocommerce-shipping-destination {
margin-bottom: 10px; }
.cart_totals .woocommerce-shipping-methods {
margin-bottom: 0; }
.cart_totals .shipping-calculator-form {
display: none; }
.cart_totals .shipping-calculator-form p:first-child {
margin-top: 20px; }
.cart_totals .shipping-calculator-form p:last-child {
margin-bottom: 0; }
.cart_totals .shipping-calculator-form .vs-btn {
padding: 5px 30px; }
.cart_totals .amount {
font-weight: 700; }
.cart_totals .order-total .amount {
color: #1abc9c; }
.shipping-calculator-form .form-select,
.shipping-calculator-form .form-control {
height: 40px;
padding-left: 15px;
font-size: 16px;
border-radius: 0;
background-position: right 13px center; }
.shipping-calculator-form .vs-btn {
font-size: 14px;
padding: 0 20px;
width: max-content;
height: 40px; }
.checkout-ordertable th,
.checkout-ordertable td {
border: none;
vertical-align: top;
padding: 5px 0;
font-size: 14px;
font-weight: 700;
color: var(--clr-body);
border: 1px solid #ededed;
text-align: right;
padding: 5px 20px; }
.checkout-ordertable th {
text-align: left; }
.checkout-ordertable ul {
margin: 0;
padding: 0; }
.checkout-ordertable .order-total .amount {
color: #29af8a; }
.checkout-ordertable input[type="hidden"] ~ label {
color: #29af8a; }
.woocommerce-checkout-payment ul {
margin: 0;
padding: 0;
list-style-type: none; }
.woocommerce-checkout-payment ul li {
padding-top: 10px;
border-bottom: 1px solid #d8d8d8;
border-radius: 4px; }
.woocommerce-checkout-payment .place-order {
padding-top: 30px; }
.woocommerce-checkout-payment .payment_box {
color: #a1b1bc;
background-color: var(--clr-def);
border: 1px solid #d8d8d8;
border-bottom: none;
font-size: 14px;
padding: 10px 20px;
border-radius: 4px;
display: none; }
.woocommerce-checkout-payment .payment_box p {
margin: 0; }
.woocommerce-checkout-payment input[type="radio"] ~ label {
margin-bottom: 15px;
color: var(--clr-body); }
.woocommerce-checkout-payment input[type="radio"] ~ label img {
margin-bottom: -2px;
margin-left: 10px; }
.star-rating {
overflow: hidden;
position: relative;
width: 100px;
height: 1.2em;
line-height: 1.2em;
display: block;
font-family: #ddd;
font-weight: 700;
font-size: 14px; }
.star-rating:before {
content: "\f005\f005\f005\f005\f005";
color: var(--clr-def-3);
float: left;
top: 0;
left: 0;
font-weight: 400;
position: absolute;
letter-spacing: 3px; }
.star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em; }
.star-rating span:before {
content: "\f005\f005\f005\f005\f005";
top: 0;
position: absolute;
left: 0;
color: var(--clr-def-3);
letter-spacing: 3px; }
.rating-select label {
margin: 0;
margin-right: 10px; }
.rating-select p.stars {
margin-bottom: 0;
line-height: 1; }
.rating-select p.stars a {
position: relative;
height: 14px;
width: 18px;
text-indent: -999em;
display: inline-block;
text-decoration: none; }
.rating-select p.stars a::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 14px;
line-height: 1;
font-family: #ddd;
content: "\f005";
font-weight: 400;
text-indent: 0;
color: var(--clr-def-3); }
.rating-select p.stars a:hover ~ a::before {
content: "\f005";
font-weight: 400; }
.rating-select p.stars:hover a::before {
content: "\f005";
font-weight: 700; }
.rating-select p.stars.selected a.active::before {
content: "\f005";
font-weight: 700; }
.rating-select p.stars.selected a.active ~ a::before {
content: "\f005";
font-weight: 400; }
.rating-select p.stars.selected a:not(.active)::before {
content: "\f005";
font-weight: 700; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.cart_table th {
padding: 23px 8px;
font-size: 14px; }
.cart_table .cart-productname {
font-size: 14px; }
.cart_table .tb-cart-coupon {
width: 100%;
margin-bottom: 20px; }
.cart_table .actions {
text-align: center; }
.cart_table .tb-udp button {
margin-bottom: 2rem; } }
@media only screen and (max-width: 767px) {
.tb-udp button {
margin-bottom: 1rem; }
.cart_table {
text-align: left;
min-width: auto;
border-collapse: separate;
border-spacing: 0 20px;
border: none;
margin-right: 0;
padding-right: 0;
width: 100%; }
.cart_table thead {
display: none; }
.cart_table td {
padding: 15px;
display: block;
width: 100%;
padding-left: 25%;
text-align: right;
border: 1px solid #f3f3f3;
border-bottom: none;
font-size: 1.3rem; }
.cart_table td::before {
display: block; }
.cart_table td:last-child {
border-bottom: 1px solid #f3f3f3; }
.cart_table td.actions {
padding-left: 15px;
text-align: center; }
.cart_table td.actions > .vs-btn {
margin-top: 10px;
margin-right: 0;
display: block;
width: max-content;
margin-left: auto;
margin-right: auto; }
.cart_table td.actions > .vs-btn:last-child {
margin-right: auto; }
.cart_table .tb-cart-coupon {
width: 100%;
text-align: center;
float: none;
justify-content: center;
display: block;
padding-bottom: 10px; }
.cart_table .tb-cart-coupon input {
width: 100%;
margin-bottom: 10px; }
tfoot.checkout-ordertable th {
display: none; }
.woocommerce-checkout-payment ul input[type="radio"] ~ label img {
max-width: 150px; }
.woocommerce-message,
.woocommerce-info {
font-size: 12px;
padding: 5px 10px; }
.cart_totals th,
.cart_totals td {
padding: 15px 10px; }
.cart_totals th:first-child,
.cart_totals td:first-child {
width: 17%;
line-height: 1.4; } }
/*-------------------------------------------------------
46.Shop css
---------------------------------------------------------*/
/*Shop Page*/
.tb-pagination {
text-align: center; }
.tb-pagination ul {
display: flex;
align-items: center;
gap: 8px;
justify-content: center; }
.tb-pagination ul li a {
display: inline-block;
height: 5rem;
width: 5rem;
line-height: 4.5rem;
font-size: 1.6rem;
font-weight: 700;
border: 2px solid #eef1f5;
border-radius: 50%; }
.tb-pagination ul li a.active, .tb-pagination ul li a:hover {
color: var(--clr-white);
background-color: var(--clr-def);
border-color: transparent; }
.select-opt {
display: flex;
gap: 5rem;
justify-content: flex-end; }
.select-opt .select-option {
display: grid;
align-items: center;
grid-template-columns: 7rem 1fr; }
.select-opt .select-option label {
font-size: 14px;
margin-bottom: 0;
margin-right: 15px;
font-weight: 500;
line-height: 1;
color: var(--clr-heading); }
.select-opt .select-option .form-select {
height: 35px;
border-width: 2px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: auto;
color: var(--clr-heading);
padding-right: 30px;
padding-left: 20px;
font-size: 14px;
margin: 0; }
.shop-filter {
display: flex;
align-items: center;
gap: 1.5rem; }
.shop-filter a {
height: 5rem;
width: 5rem;
line-height: 5rem;
text-align: center;
background-color: var(--clr-def);
color: var(--clr-white);
display: inline-block; }
.products-wpr.product-list.grid-2 {
grid-row-gap: 4.5rem; }
.product-list .products-box {
display: flex;
align-items: center;
background-color: var(--clr-white); }
.product-list .products-box .products-desc {
border: none; }
/*Shop details*/
.sh-de-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
grid-gap: 6rem; }
.shop-datails-pic img,
.sh-pic img {
border: 1px solid #ddd; }
.sh-de-left .nav-tabs {
border-bottom: none; }
.sh-de-left .nav-tabs .nav-link {
border: none;
padding: 0; }
.sh-de-left .nav-tabs .nav-link:last-child {
margin-right: 0; }
.sh-de-left nav {
margin-top: 2rem; }
.sh-pic img {
background-color: #FAFAFA;
width: 100%; }
.shop-datails-pic img {
background-color: #FAFAFA;
width: 100%; }
/*Shop Quantity Number*/
.quantity {
display: inline-block; }
.quantity .input-text.qty {
width: 35px;
height: 39px;
padding: 0 5px;
text-align: center;
background-color: transparent;
border: 1px solid #efefef; }
.quantity.buttons_added {
text-align: left;
position: relative;
white-space: nowrap;
vertical-align: top; }
.quantity.buttons_added input {
display: inline-block;
margin: 0;
vertical-align: top;
box-shadow: none; }
.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
padding: 7px 10px 8px;
height: 41px;
background-color: #ffffff;
border: 1px solid #efefef;
cursor: pointer; }
.quantity.buttons_added .minus {
border-right: 0; }
.quantity.buttons_added .plus {
border-left: 0; }
.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
background: #eeeeee; }
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0; }
.quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
outline: none; }
.sh-de-header h4 {
text-transform: capitalize;
font-weight: 700; }
.sh-de-header p {
margin-bottom: 2rem; }
.sh-de-rating {
margin-bottom: 1.5rem; }
.sh-de-rating i {
color: #F9C936;
margin-right: 8px; }
.sh-de-price {
margin-bottom: 2rem; }
.sh-de-price span {
font-size: 2.4rem;
font-weight: 700;
color: var(--clr-heading);
font-family: var(--font-2);
display: block; }
.sh-de-quantity {
display: flex;
align-items: center;
margin-bottom: 2rem; }
.sh-de-quantity .quantity.buttons_added {
margin-right: 0; }
.sh-de-color {
margin-bottom: 1.5rem; }
.sh-de-color ul li {
display: inline-block;
margin-right: 1rem; }
.sh-de-color ul li:last-child {
display: inline-block;
margin-right: 0; }
.sh-de-color ul li .d-colors span {
display: inline-block;
height: 1rem;
width: 1rem;
border-radius: 50%; }
.sh-de-color ul li .d-colors span:first-child {
background-color: #FA3150; }
.sh-de-color ul li .d-colors span:nth-child(2) {
background-color: #F9C936; }
.sh-de-color ul li .d-colors span:nth-child(3) {
background-color: #92B8B9; }
.sh-de-btn {
margin-bottom: 2rem; }
.sh-de-btn a {
display: inline-block;
padding: 1rem 3rem;
border: 1px solid #ECEBEB;
margin-right: 1rem;
transition: .5s ease;
text-transform: uppercase;
line-height: 1;
color: var(--heading-color); }
.sh-de-btn a:hover {
background: var(--clr-black);
border: 1px solid transparent;
color: var(--clr-white); }
.sh-de-btn .sh-de-btn-1 i {
margin-left: 7px; }
.sh-de-btn .sh-de-btn-2 i {
margin-right: 7px; }
.product-rev-wrapper .nav-item {
width: 25%;
overflow: hidden;
display: inline-block; }
.product-rev-wrapper .nav-pills .nav-link {
border-radius: 0;
text-align: center;
border: 1px solid #eaeaea;
width: 100%; }
.product-rev-wrapper div#pills-tabContent {
margin-top: 3rem; }
.nav-pills .nav-link.active {
color: var(--clr-heading);
background-color: #f8f8f8; }
.nav-pills .show > .nav-link {
color: var(--clr-heading);
background-color: #f8f8f8; }
/*Cart Page Css*/
.form-cop .input-style-2 {
height: 7rem;
margin-right: 1rem; }
.ui-w-40 {
width: 40px !important;
height: auto; }
.ui-product-color {
display: inline-block;
overflow: hidden;
margin: .144em;
width: .875rem;
height: .875rem;
border-radius: 10rem;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
vertical-align: middle; }
.cart-qty .card {
box-shadow: none;
border: none;
background-color: transparent; }
.cart-qty .card-body {
padding: 0; }
.cart-qty .card-body .media {
display: flex;
align-items: center;
gap: 1rem; }
.cart-qty .table thead th {
border-bottom: none;
font-weight: 400;
font-size: 1.6rem;
color: var(--clr-body); }
.cart-qty .close {
color: #DDDDDD;
font-size: 4.6rem;
font-weight: 100;
opacity: 1; }
.cart-qty .form-control.bk {
padding: 17px 1rem;
border: none;
border-radius: 1.25rem;
background-color: #fff;
font-size: 1.6rem;
outline: none; }
.cart-tl ul li {
margin-bottom: 1rem;
border-bottom: 1px solid #ddd;
padding-bottom: 1.5rem; }
.cart-tl .cart-tl-title {
color: var(--clr-heading);
border-bottom: 1px solid #dfdfdf;
padding-bottom: 1.5rem; }
.cart-tt {
display: flex;
justify-content: space-between;
align-items: center; }
.cart-n p {
margin-bottom: 1.2rem;
line-height: 1; }
.cart-n p:last-child {
margin-bottom: 0; }
.cr-tl-btn {
margin-top: 3rem;
display: flex;
justify-content: center; }
.cr-tl-btn a {
padding: 1rem 3rem;
text-align: center;
border: 1px solid #dfdfdf;
display: inline-block;
margin-right: 3rem;
transition: .5s ease; }
.cr-tl-btn a:hover {
background-color: var(--clr-def);
color: var(--clr-heading); }
.cr-tl-btn a:last-child {
margin-right: 0; }
.course-over-fet {
background-color: var(--clr-white);
box-shadow: 0 3px 1.5rem rgba(139, 139, 139, 0.16);
padding: 6rem; }
.course-over-bio {
display: flex;
align-items: center;
margin-bottom: 2rem; }
.course-over-name {
margin-left: 2.5rem; }
.course-over-name h5 {
line-height: 1;
margin-bottom: 9px; }
.course-over-name h6 {
line-height: 1;
margin-bottom: 3px; }
.course-over-rating i {
color: var(--clr-def); }
.course-ovr-wrp .single-content-title {
margin-bottom: 2.5rem; }
.course-ovr-wrp .single-comments-section {
margin-top: 3rem; }
.course-ovr-wrp .row.csf.align-items-center {
margin-top: -3.5rem; }
.single-comments-section-form h2 {
margin-bottom: 3rem; }
/*Comment Section*/
.single-comments-section .single-commentor .single-commentor-user {
display: grid;
grid-template-columns: 7rem 1fr;
align-items: center;
grid-gap: 2rem; }
.single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head {
display: flex;
justify-content: space-between;
align-items: center; }
.single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head h6 {
text-transform: capitalize;
margin-bottom: 7px; }
.single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head h6 span {
text-transform: uppercase;
color: var(--clr-body);
position: relative;
z-index: 1;
padding-left: 2rem; }
.single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head h6 span::before {
position: absolute;
content: '';
top: 50%;
left: 1rem;
height: 1.6rem;
width: 1px;
background: #5156ea;
transform: translate(0, -50%); }
.single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head a i {
font-size: 1.4rem;
margin-right: 7px; }
.single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head a:hover i {
color: #5156ea; }
.single-comments-section .single-commentor .single-commentor-user p {
margin-bottom: 0; }
.single-comments-section .single-commentor ul li {
margin-bottom: 3rem; }
.single-comments-section .single-commentor .single-commentor-user.rlp .single-commentor-user-bio-head h6 {
color: var(--clr-def); }
.single-commentor-user.rlp {
padding-left: 7rem; }
/*single-comments-section-form*/
.single-comments-section-form form .form-control {
outline: none;
height: 5rem;
border: 1px solid #e5e5e5;
background: #f8f8f8;
padding: 1rem 3rem;
line-height: 1;
margin-bottom: 3.5rem; }
.single-comments-section-form form .form-control::placeholder {
font-size: 1.6rem;
font-weight: 300;
color: var(--clr-body);
line-height: 1;
text-transform: capitalize; }
.single-comments-section-form form textarea.form-control {
height: 15rem; }
.single-comments-section-form form button {
padding: 1rem 3rem;
font-family: var(--font-2);
font-size: 2.2rem;
border: none;
font-weight: 400;
background: var(--clr-def);
color: var(--clr-white); }
/*Slider wrp*/
.sldr.owl-theme .owl-nav [class*=owl-] {
color: var(--clr-def);
font-size: 3rem;
margin: 0;
padding: 0;
background: none;
display: inline-block;
cursor: pointer;
border-radius: 0; }
.sldr.owl-theme .owl-nav [class*=owl-]:hover {
background: none;
color: var(--clr-def);
text-decoration: none; }
.sldr.owl-theme .owl-nav .owl-prev {
left: 0rem; }
.sldr.owl-theme .owl-nav .owl-next {
right: 0rem; }
.sldr.owl-theme .owl-nav .owl-prev,
.sldr.owl-theme .owl-nav .owl-next {
position: absolute;
top: 50%;
transform: translate(0, -50%); }
/*-------------------------------------------------------
12. Products css
---------------------------------------------------------*/
.product-tree img {
position: absolute;
z-index: -1; }
.product-tree img:first-child {
bottom: 0;
right: 0; }
.product-tree img:nth-child(2) {
top: 0;
left: 2rem; }
.products-wpr.grid-4 {
row-gap: 4.5rem; }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
/* Firefox */
input[type=number] {
-moz-appearance: textfield; }
@-webkit-keyframes circle-hover {
0% {
opacity: 1; }
40% {
opacity: 1; }
to {
width: 200%;
height: 200%;
opacity: 0; } }
@keyframes circle-hover {
0% {
opacity: 1; }
40% {
opacity: 1; }
to {
width: 200%;
height: 200%;
opacity: 0; } }
.products-box {
text-transform: capitalize;
position: relative;
z-index: 1;
background-color: var(--clr-white); }
.products-box .products-pic {
position: relative;
z-index: 1;
overflow: hidden; }
.products-box .products-pic img {
background: #f8f8f8; }
.products-box .products-pic::before {
position: absolute;
top: 50%;
left: 50%;
display: block;
content: "";
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 10; }
.products-box .products-pic .carts {
position: absolute;
top: 1.5rem;
right: 1.5rem;
flex-direction: column;
gap: 1.5rem;
transform: translateY(-140%);
transition: all .5s ease-in-out; }
.products-box .products-pic .carts li a i {
height: 3rem;
width: 3rem;
line-height: 3.2rem;
text-align: center;
background-color: var(--clr-def);
color: var(--clr-white);
display: block;
font-size: 1.4rem;
border-radius: 50%;
transition: all .5s ease-in-out;
padding-left: 2px; }
.products-box .products-pic .carts li a i:hover {
background-color: var(--clr-def-2);
color: var(--clr-white); }
.products-box .products-desc {
border: 1px solid #eee;
border-top: none;
padding: 3rem 2rem 4.5rem 2rem; }
.products-box .products-desc h5 {
text-transform: capitalize;
margin-bottom: 2rem; }
.products-box .products-desc p {
margin-bottom: 2rem; }
.products-box .products-desc .products-price {
line-height: 1;
margin-bottom: 2rem; }
.products-box .products-desc .products-price span {
font-weight: 600;
color: var(--clr-def);
display: inline-block; }
.products-box .products-desc .add-to-cart {
line-height: 1; }
.products-box .products-desc .add-to-cart .cart-btn {
padding: 7px 1.5rem;
line-height: 1;
background-color: var(--clr-def);
color: var(--clr-white);
border-radius: 2rem;
display: inline-block;
position: relative;
z-index: 1;
overflow: hidden;
font-size: 1.6rem; }
.products-box .products-desc .add-to-cart .cart-btn::before {
position: absolute;
height: 0%;
width: 100%;
top: 0;
left: 0;
background-color: var(--clr-def-2);
content: '';
z-index: -1;
transition: all .5s ease-in-out;
border-radius: 2rem 2rem 0 0; }
.products-box .products-desc .add-to-cart .cart-btn::after {
position: absolute;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
background-color: var(--clr-def-2);
content: '';
z-index: -1;
transition: all .5s ease-in-out;
border-radius: 0 0 2rem 2rem; }
.products-box:hover .carts {
transform: translateY(0%); }
.products-box:hover .add-to-cart .cart-btn::before {
height: 50%; }
.products-box:hover .add-to-cart .cart-btn::after {
height: 50%; }
.products-box:hover .products-pic::before {
-webkit-animation: circle-hover .75s;
animation: circle-hover .75s; }
.load-more {
line-height: 14px; }
/*-------------------------------------------------------
20. Checkout css
---------------------------------------------------------*/
.checkout-wrapper {
display: flex;
justify-content: center;
animation: slideUp 2000ms ease; }
@keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
.checkout h2 {
align-self: center; }
.checkout {
background-color: var(--clr-def);
-webkit-box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18);
box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18);
border-radius: 1rem;
padding: 6rem 4rem; }
.checkout input {
width: 100%;
min-height: 25px;
border: 0;
font-size: 1.5rem;
letter-spacing: .15rem;
color: var(--clr-heading);
border-radius: 10px;
margin-bottom: 2rem; }
.checkout label {
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
color: var(--clr-white);
margin-bottom: 1rem; }
.checkout h2 {
font-size: 24px;
line-height: 1;
color: var(--clr-white);
letter-spacing: 1px; }
.name {
justify-content: space-between;
display: flex;
width: 100%; }
.name div {
width: 45%; }
.address-info {
display: flex;
justify-content: space-between; }
.address-info div {
width: 30%; }
.cc-info {
display: flex;
justify-content: space-between; }
.cc-info div {
width: 45%; }
.btns {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
margin-top: 2rem; }
.btns button {
margin: 0;
color: var(--clr-def);
background-color: var(--clr-white);
text-transform: uppercase;
border: 0;
border-radius: 1rem;
letter-spacing: -1px;
font-weight: 600;
padding: 1.2rem 3rem;
line-height: 1; }
.btns button:hover {
animation-name: btn-hov;
animation-duration: 550ms;
animation-fill-mode: forwards; }
@keyframes btn-hov {
100% {
background-color: #cfc9e1;
color: #4a3b76;
transform: scale(1.05); } }
input:focus,
button:focus {
outline: none;
box-shadow: none; }
.p-info {
font-size: 24px;
line-height: 1;
color: var(--clr-white);
letter-spacing: 1px;
margin-top: 3rem;
margin-bottom: 2rem; }
@media (max-width: 736px) {
.checkout-wrapper {
width: 100%; }
.btns {
flex-direction: column; }
.btns button {
width: 100%; }
.checkout h2 {
text-align: center;
line-height: 1.4; }
.name,
.address-info,
.cc-info {
flex-direction: column;
width: 100%;
justify-content: space-between; }
.name div,
.address-info div,
.cc-info div {
align-items: center;
flex-direction: column;
width: 100%;
display: flex; }
.street,
.cc-num {
text-align: center; }
.checkout input {
margin: 5px 0;
min-height: 30px; } }
/*-------------------------------------------------------
46. About css
---------------------------------------------------------*/
.marquee {
position: relative;
z-index: 1;
height: 100px;
background: var(--clr-def); }
.marquee:hover .mrg-wrp {
animation-play-state: paused; }
.mrg-wrp {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: center;
grid-gap: 3rem;
position: absolute;
width: 200%;
height: 100%;
overflow: hidden;
animation: marquee 20s linear infinite;
left: 0;
top: 0; }
.lk {
font-size: 2.2rem;
font-weight: 500;
text-transform: capitalize;
color: var(--clr-white);
position: relative;
z-index: 1;
padding-left: 10rem; }
.lk::before {
position: absolute;
content: '';
top: 20px;
left: 0;
width: 80px;
height: 1px;
background: #fff; }
@keyframes marquee {
0% {
left: 0; }
100% {
left: -100%; } }
/*-------------------------------------------------------
47. Team Single css
---------------------------------------------------------*/
/*Team Single*/
.team-details-wrapper {
display: grid;
grid-template-columns: 300px 1fr;
grid-gap: 4rem; }
.team-details-wrapper .team-single-box .team-single-desc {
padding: 3rem;
background-color: white;
box-shadow: 0px 19px 109px 0px rgba(0, 0, 0, 0.04); }
.team-details-wrapper .team-single-box .team-single-desc h4 {
margin-bottom: 6px;
text-transform: capitalize; }
.team-details-wrapper .team-single-box .team-single-desc p {
margin-bottom: 5px; }
.team-details-wrapper .team-single-box .team-single-desc span {
margin-bottom: 1rem;
display: block; }
.team-details-wrapper .team-single-box .team-single-desc .team-single-social {
display: flex;
align-items: center; }
.team-details-wrapper .team-single-box .team-single-desc .team-single-social li {
margin-right: 1.5rem; }
.team-details-wrapper .team-single-box .team-single-desc .team-single-social li:last-child {
margin-right: 0; }
.team-details-wrapper .team-single-box .team-single-desc .team-single-social li a i:hover {
color: var(--theme-color-3); }
.team-details-wrapper .table {
width: 80%;
margin-bottom: 0;
color: var(--body-color); }
.team-single-personal {
padding: 3rem;
background-color: white;
box-shadow: 0px 19px 109px 0px rgba(0, 0, 0, 0.04);
margin-top: 3rem; }
.team-single-personal ul li {
display: flex;
margin-bottom: 1rem; }
.team-single-personal ul li:last-child {
margin-bottom: 0; }
.team-single-personal ul li p {
margin-bottom: 0rem;
margin-right: 2rem; }
h4.team-single-title {
text-transform: capitalize;
position: relative;
z-index: 1;
padding-bottom: 1.5rem; }
h4.team-single-title::before {
position: absolute;
content: '';
background-image: -moz-linear-gradient(90deg, #0e8cd1 0%, #192fab 99%);
background-image: -webkit-linear-gradient(90deg, #0e8cd1 0%, #192fab 99%);
background-image: -ms-linear-gradient(90deg, #0e8cd1 0%, #192fab 99%);
width: 65px;
height: 2px;
bottom: 0;
left: 0; }
.team-single-about.about p {
margin-bottom: 0; }
.team-single-about {
margin-bottom: 3rem; }
.team-single-about:last-child {
margin-bottom: 0; }
.team-area.t-de .site-title {
margin-top: 0; }
/*-------------------------------------------------------
48. Partner css
---------------------------------------------------------*/
.partner-wpr {
padding: 6rem;
background: var(--clr-def-3);
clip-path: polygon(0 0, 95% 1%, 100% 50%, 95% 100%, 0 100%, 0% 50%); }
.partner-left {
padding-right: 30px;
margin-right: 20px;
border-right: 1px solid #ccc; }
.partner-left .heading-3 {
line-height: 1.4;
margin-bottom: 10px;
color: var(--clr-white); }
.partner-left p {
color: var(--clr-white); }
/*-------------------------------------------------------
49. Skill Progress css
---------------------------------------------------------*/
.progress-box {
margin-bottom: 3rem; }
.progress-box:last-child {
margin-bottom: 0; }
.progress-box h5 {
display: flex;
align-items: center;
justify-content: space-between; }
.progress-box .progress .progress-bar {
background-color: var(--clr-def); }