first commit
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
/*----------------------------------------*/
|
||||
/* 08. ANIMATION CSS START
|
||||
/*----------------------------------------*/
|
||||
|
||||
|
||||
@keyframes dbRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cxuRipple {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes moveBottom {
|
||||
0% {
|
||||
transform: translateX(-25px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-25px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRight {
|
||||
0% {
|
||||
transform: translateX(25px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(25px);
|
||||
}
|
||||
}
|
||||
|
||||
.moveRight {
|
||||
animation: moveRight 2s 1;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes wcLoading {
|
||||
0% {
|
||||
transform: scaleY(0.1);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scaleY(1);
|
||||
background: var(--main-color-one);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleY(0.1);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Scroll
|
||||
@keyframes scroll {
|
||||
from {
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translateX(calc(-100% - 20px));
|
||||
-ms-transform: translateX(calc(-100% - 20px));
|
||||
transform: translateX(calc(-100% - 20px));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fade Up
|
||||
@keyframes cxufadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(50px);
|
||||
-ms-transform: translateY(50px);
|
||||
transform: translateY(50px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cxufadeUp {
|
||||
opacity: 0;
|
||||
-webkit-animation-name: cxufadeUp;
|
||||
animation-name: cxufadeUp;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.cxufadeUp2 {
|
||||
@extend .cxufadeUp;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.cxufadeUp3 {
|
||||
@extend .cxufadeUp;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
.cxufadeUp4 {
|
||||
@extend .cxufadeUp;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
|
||||
// Spin
|
||||
@-webkit-keyframes cxuSpin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cxuSpin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.cxuSpin-slow {
|
||||
animation: cxuSpin 10s linear infinite;
|
||||
}
|
||||
.cxuSpin-slow2 {
|
||||
animation: cxuSpin 20s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
.cxuSpin-medium {
|
||||
animation: cxuSpin 3s linear infinite;
|
||||
}
|
||||
|
||||
.cxuSpin-fast {
|
||||
animation: cxuSpin 2s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Shine */
|
||||
.shine {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shine::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -75%;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
|
||||
-webkit-transform: skewX(-25deg);
|
||||
transform: skewX(-25deg);
|
||||
}
|
||||
|
||||
.shine:hover::before {
|
||||
-webkit-animation: shine .75s;
|
||||
animation: shine .75s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes shine {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
/*----------------------------------------*/
|
||||
/* 05. BUTTON CSS START
|
||||
/*----------------------------------------*/
|
||||
|
||||
.btn-rollover {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--white);
|
||||
padding: 14px 32px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
border-radius: 6px;
|
||||
background: var(--main-color-one);
|
||||
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
left: 0%;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.db-btn {
|
||||
&-arrow {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 1.6px;
|
||||
text-transform: uppercase;
|
||||
color: var(--black-2);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: -8px;
|
||||
transition: all 0.3s;
|
||||
background-color: var(--black-2);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
color: var(--main-color-one);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--black-2);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-border {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
padding: 16px 22px;
|
||||
display: inline-block;
|
||||
letter-spacing: 1.6px;
|
||||
color: var(--black-2);
|
||||
text-transform: uppercase;
|
||||
border: 1px solid currentColor;
|
||||
|
||||
&::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.btn-rollover {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.color-1 {
|
||||
&:hover {
|
||||
color: var(--black-2);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-call {
|
||||
font-size: 20px;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
color: var(--black-2);
|
||||
display: inline-block;
|
||||
|
||||
span {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
box-shadow: 0px 4.8px 24.4px rgba(19, 16, 34, 0.1), 0px 4px 13px rgba(19, 16, 34, 0.06);
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
color: var(--blue);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main-color-one {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 24px 50px;
|
||||
letter-spacing: 1.6px;
|
||||
display: inline-block;
|
||||
color: var(--secondary);
|
||||
text-transform: uppercase;
|
||||
background-color: var(--yellow);
|
||||
|
||||
&:hover {
|
||||
color: var(--secondary);
|
||||
background-color: var(--main-color-one);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.db-arrow-up {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
|
||||
img {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.img-2 {
|
||||
transform: translate(-120px, 10px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.img {
|
||||
transform: translate(120px, -120px);
|
||||
}
|
||||
|
||||
.img-2 {
|
||||
transform: translate(0px, -106px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
// Preloader
|
||||
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--main-color-one);
|
||||
-webkit-animation: cxuSpin 2s linear infinite;
|
||||
animation: cxuSpin 2s linear infinite;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--black-2);
|
||||
-webkit-animation: cxuSpin 3s linear infinite;
|
||||
animation: cxuSpin 3s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--secondary);
|
||||
-webkit-animation: cxuSpin 1.5s linear infinite;
|
||||
animation: cxuSpin 1.5s linear infinite;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
/*----------------------------------------*/
|
||||
/* 10. MENU CSS START
|
||||
/*----------------------------------------*/
|
||||
|
||||
|
||||
.main-menu {
|
||||
text-align: right;
|
||||
|
||||
@media #{$lg} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
@media #{$xl} {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.main-dropdown {
|
||||
top: 80px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
top: 80px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
display: block;
|
||||
color: var(--black-2);
|
||||
font-size: 16px;
|
||||
padding: 30px 8px;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:hover {
|
||||
color: var(--main-color-one);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
&-dropdown {
|
||||
color: var(--white);
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
top: 100px;
|
||||
background: var(--black-4);
|
||||
padding: 20px 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s;
|
||||
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
|
||||
|
||||
li {
|
||||
padding: 0 30px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.sub-dropdown {
|
||||
left: 100%;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
@media #{$xxl} {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 10px 0;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub {
|
||||
&-dropdown {
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
left: 90%;
|
||||
top: 0;
|
||||
background: var(--blue);
|
||||
padding: 20px 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s;
|
||||
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
|
||||
|
||||
@media #{$xxl} {
|
||||
left: -90%;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 30px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-dropdown {
|
||||
position: relative;
|
||||
padding-right: 30px;
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
color: var(--main-color-one);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "\f107";
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 30px;
|
||||
color: var(--black-2);
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.has-megamenu {
|
||||
position: static;
|
||||
padding-right: 30px;
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
color: var(--main-color-one);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "\f107";
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 30px;
|
||||
color: var(--black-2);
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.main-dropdown .has-dropdown {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
color: var(--main-color-one);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "\f107";
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
color: var(--white);
|
||||
transform: rotate(-90deg);
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Mega Menu
|
||||
.mega-menu {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
z-index: 9;
|
||||
background-color: var(--blue);
|
||||
text-align: left;
|
||||
padding: 40px 230px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s;
|
||||
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
|
||||
|
||||
@media #{$xxl} {
|
||||
padding: 40px 50px;
|
||||
}
|
||||
|
||||
@media #{$xl} {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
&:first-child {
|
||||
font-size: 18px;
|
||||
color: var(--white);
|
||||
padding-bottom: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 8px 5px;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
/*----------------------------------------*/
|
||||
/* 11. MODAL CSS START
|
||||
/*----------------------------------------*/
|
||||
@@ -0,0 +1,290 @@
|
||||
.pt-100 {
|
||||
padding-top: 100px;
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-120 {
|
||||
padding-top: 120px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-125 {
|
||||
padding-top: 125px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-130 {
|
||||
padding-top: 130px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-140 {
|
||||
padding-top: 140px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-150 {
|
||||
padding-top: 150px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-170 {
|
||||
padding-top: 170px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// Padding Bottom
|
||||
.pb-100 {
|
||||
padding-bottom: 100px;
|
||||
|
||||
@media #{$md} {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-110 {
|
||||
padding-bottom: 110px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-120 {
|
||||
padding-bottom: 120px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-125 {
|
||||
padding-bottom: 125px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-130 {
|
||||
padding-bottom: 130px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-140 {
|
||||
padding-bottom: 140px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-150 {
|
||||
padding-bottom: 150px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Margin top
|
||||
.mt-130 {
|
||||
margin-top: 130px;
|
||||
|
||||
@media #{$lg} {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
.plr-50 {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
|
||||
@media #{$md} {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.plr-100 {
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.plr-90 {
|
||||
padding-left: 90px;
|
||||
padding-right: 90px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/*----------------------------------------*/
|
||||
/* 06. TITLE CSS START
|
||||
/*----------------------------------------*/
|
||||
|
||||
|
||||
.sec {
|
||||
&-title {
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.16px;
|
||||
text-transform: capitalize;
|
||||
color: var(--black-3);
|
||||
padding-bottom: 25px;
|
||||
|
||||
@media #{$xl} {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
@media #{$lg} {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@media #{$md} {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-subtitle {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 1.8px;
|
||||
text-transform: capitalize;
|
||||
color: var(--main-color-one);
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
-webkit-text-stroke: 2px var(--main-color-one);
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-52%);
|
||||
opacity: 0.1;
|
||||
|
||||
@media #{$sm} {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2 {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 1.8px;
|
||||
color: var(--main-color-one);
|
||||
text-transform: uppercase;
|
||||
text-decoration-line: underline;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
/*----------------------------------------*/
|
||||
/* 07. WIDGET CSS START
|
||||
/*----------------------------------------*/
|
||||
Reference in New Issue
Block a user