gova/rootxwire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Dhanraj
2024-07-07 14:31:05 +05:30
commit 1d502a2cf1
1089 changed files with 161249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/assets/scss/elements/_404_page.scss Normal file
View File

@ -0,0 +1,33 @@
/* --------------- faq-page style-5 --------------- */
.erorr-404-page.style-5{
position: relative;
color: #000;
.erorr-page{
background-image: url(../img/comming_back1.png);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 100px 0;
.content{
padding-top: 125px;
.info{
.icon{
width: 100px;
margin-bottom: 30px;
}
}
.img{
img{
height: 550px;
}
}
}
}
}

690
static/assets/scss/elements/_about.scss Normal file
View File

@ -0,0 +1,690 @@
/* --------------- about styles --------------- */
.about.style-1 {
position: relative;
.content {
padding: 65px 120px;
background: var(--color-main-grad);
position: relative;
border-radius: 10px;
overflow: hidden;
z-index: 5;
.about_shap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
opacity: 30%;
pointer-events: none;
}
.about_logos {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 40px;
border-bottom: 1px solid #fff4;
position: relative;
z-index: 5;
}
.about-info {
padding: 60px 0;
position: relative;
z-index: 5;
.title {
h3 {
color: #fff;
font-weight: 600;
font-size: 30px;
}
small {
color: #fff;
text-transform: uppercase;
font-size: 11px;
margin-top: 35px;
display: block;
}
}
.info {
h6 {
color: #fff;
font-size: 14px;
line-height: 1.6;
margin-bottom: 25px;
}
p {
font-size: 14px;
color: #c7e9ff;
}
.butn {
margin-top: 50px;
}
}
}
.about-numbers {
position: relative;
z-index: 5;
.num-item {
display: flex;
align-items: center;
.num {
color: #fff;
font-size: 32px;
font-weight: bold;
flex-shrink: 0;
margin-right: 15px;
min-width: 70px;
text-align: center;
i {
font-size: 21px;
}
}
.inf {
color: #fff;
}
}
}
}
}
// ----------- about style 3 -----------
.about.style-3{
position: relative;
.top-content{
min-height: 510px;
margin-bottom: 100px;
padding-top: 20px;
}
.info{
h5{
font-size: 19px;
line-height: 28px;
font-style: italic;
margin-bottom: 25px;
}
.text{
color: #666;
}
ul{
li{
font-size: 14px;
font-weight: 600;
margin: 15px 0;
i{
color: var(--color-blue2);
}
}
}
}
.img-left{
position: absolute;
left: 0;
top: 190px;
max-width: 50%;
.info-circle{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50% , -40%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 230px;
height: 230px;
background-color: #4a00e1;
color: #fff;
border-radius: 50%;
overflow: hidden;
outline: 10px solid #fff;
// -webkit-animation: scale_up_down 2s ease-in-out infinite alternate both;
// animation: scale_up_down 2s ease-in-out infinite alternate both;
h2{
font-size: 56px;
}
small{
font-size: 11px;
text-transform: uppercase;
}
&:nth-of-type(2){
width: 200px;
height: 200px;
left: auto;
right: 0;
top: 50%;
transform: translate(-14%, -57%);
z-index: 5;
h2{
font-size: 50px;
}
}
&:nth-of-type(3){
width: 150px;
height: 150px;
left: auto;
right: 0;
top: 50%;
transform: translate(-88%, 32%);
background-color: #8d3dfa;
z-index: 0;
h2{
font-size: 37px;
}
}
&:nth-of-type(4){
width: 180px;
height: 180px;
left: 0;
top: 50%;
transform: translate(20%, -20%);
background-color: #00bcf2;
z-index: 0;
h2{
font-size: 46px;
}
}
}
}
.btm-content{
position: relative;
min-height: 510px;
padding-top: 50px;
.img-right{
position: absolute;
right: 0;
top: 0;
max-width: 60%;
}
}
}
// ----------- about style 4 -----------
.about.style-4{
overflow: hidden;
position: relative;
.top-wave{
position: absolute;
top: -2px;
width: 100%;
}
.bottom-wave{
position: absolute;
bottom: -2px;
width: 100%;
transform: rotate(180deg);
}
.content{
position: relative;
padding: 60px 0;
ul{
li{
h6{
font-size: 15px;
}
}
}
&.frs-content,
&.trd-content{
.lines{
position: absolute;
left: 0;
top: -80px;
width: 40%;
max-width: unset;
max-height: unset;
}
.bubble{
position: absolute;
left: 0;
top: 0;
width: 50%;
max-width: unset;
max-height: unset;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
&.sec-content{
.bubble2{
position: absolute;
right: 0;
top: 0;
width: 50%;
max-width: unset;
max-height: unset;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
}
.btn-img{
text-align: initial;
display: inline-flex;
background-color: #f4f2fb;
align-items: center;
.icon{
flex-shrink: 0;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #0001;
width: 45px;
}
.inf{
height: max-content;
display: flex;
flex-wrap: wrap;
flex-direction: column;
small{
font-size: 10px;
color: #666;
}
h6{
font-size: 12px;
color: #000;
font-weight: bold;
line-height: 1.5;
}
}
}
.integration{
position: relative;
.intg-back{
position: absolute;
left: 0;
bottom: 19%;
width: 100%;
max-height: unset;
object-fit: cover;
}
.content{
display: flex;
justify-content: space-between;
position: relative;
.img{
-webkit-animation: slide_up_down 1.7s ease-in-out infinite alternate both;
animation: slide_up_down 1.7s ease-in-out infinite alternate both;
&:nth-of-type(1){
animation-delay: -0.5s;
}
&:nth-of-type(2){
animation-delay: -1s;
}
&:nth-of-type(3){
animation-delay: -1.5s;
}
&:nth-of-type(4){
animation-delay: -2s;
}
&:nth-of-type(5){
animation-delay: -2.5s;
}
}
}
}
}
// ----------- about style 5 -----------
.about.style-5{
.content{
padding: 50px 0;
p{
font-size: 12.5px;
color: #777;
line-height: 2;
}
.line-links{
margin-top: 35px;
a{
position: relative;
color: #000;
font-size: 15px;
font-weight: bold;
border-bottom: 1px solid #9993;
padding: 13px 0;
display: block;
width: 100%;
&:last-of-type{
border-bottom: 0;
}
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
height: 1px;
width: 0%;
background-color: var(--color-blue5);
transition: all 0.3s ease;
}
&:hover{
&::after{
width: 100%;
}
}
}
}
.list-icon {
margin-top: 40px;
li {
display: flex;
margin-bottom: 15px;
.icon {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-blue5);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
h6 {
font-size: 15px;
font-weight: 700;
}
}
}
.img{
position: relative;
text-align: right;
&.main-img1{
.img-body{
position: relative;
z-index: 2;
top: 50px;
-webkit-animation: slide_up_down 3s ease-in-out infinite alternate both;
animation: slide_up_down 3s ease-in-out infinite alternate both;
}
img{
position: absolute;
object-fit: contain;
&.sm-circle{
right: -50px;
top: 20%;
z-index: 1;
-webkit-animation: rotate-center 20s linear infinite both reverse;
animation: rotate-center 20s linear infinite both reverse;
}
&.lg-circle{
left: 0;
top: 0;
z-index: 1;
-webkit-animation: rotate-center 50s linear infinite both;
animation: rotate-center 50s linear infinite both;
}
&.card1{
position: absolute;
right: 0;
top: 0;
width: 100%;
// height: 100%;
z-index: 3;
-webkit-animation: scale_up_down 10s ease-in-out infinite alternate both;
animation: scale_up_down 10s ease-in-out infinite alternate both;
}
&.card2{
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
-webkit-animation: scale_up_down 7s ease-in-out infinite alternate both;
animation: scale_up_down 7s ease-in-out infinite alternate both;
transition-delay: -5s;
}
}
}
&.main-img2{
.img-body{
position: relative;
z-index: 2;
-webkit-animation: slide_up_down 3s ease-in-out infinite alternate both;
animation: slide_up_down 3s ease-in-out infinite alternate both;
}
img{
position: absolute;
&:nth-of-type(1){
right: 0;
top: 0;
width: 100%;
z-index: 1;
-webkit-animation: rotate-center 70s linear infinite both;
animation: rotate-center 70s linear infinite both;
}
}
}
&.main-img3{
position: relative;
.img-body{
position: relative;
z-index: 1;
max-height: 500px;
object-fit: contain;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
img{
position: absolute;
right: 0;
top: 20%;
width: 100%;
&:nth-of-type(2){
z-index: 3;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
}
&:nth-of-type(3){
z-index: 1;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
animation-delay: 1s;
}
&:nth-of-type(4){
z-index: 2;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
animation-delay: 2s;
}
&:nth-of-type(5){
z-index: 4;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
animation-delay: 3s;
}
}
}
}
}
}
// ----------- about style 6 -----------
.about.style-6{
position: relative;
.content{
border-bottom: 1px solid #9994;
.info{
.text{
color: #666;
font-size: 15px;
}
.vid-btn{
font-size: 11px;
font-weight: bold;
display: inline-flex;
align-items: center;
i{
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--color-blue6);
color: var(--color-blue6);
font-size: 21px;
margin-right: 5px;
}
}
}
}
.bubbles{
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
object-fit: contain;
}
}
// ----------- about style 7 -----------
.about.style-7{
position: relative;
padding: 120px 0;
.bg-lines{
position: absolute;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
}
.top-wave{
position: absolute;
top: -1px;
left: 0;
width: 100%;
}
.bottom-wave{
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
transform: rotate(180deg);
}
.info{
.text{
font-size: 16px;
color: #666;
line-height: 1.7;
}
}
.img{
position: relative;
padding-left: 100px;
.main-img{
border-radius: 10px;
object-fit: cover;
}
.img-chart{
position: absolute;
top: 120px;
left: -30px;
z-index: 2;
}
.circle{
position: absolute;
content: "";
width: 85px;
height: 85px;
bottom: 50px;
right: -40px;
background-color: var(--color-blue7);
border-radius: 50%;
z-index: -1;
}
}
}
// ----------- about style 8 -----------
.about.style-8{
.info{
ul{
li{
margin: 10px 0;
display: flex;
.icon{
width: 20px;
object-fit: contain;
margin-inline-end: 15px;
flex-shrink: 0;
}
p{
font-size: 16px;
font-weight: 500;
color: #000;
}
}
}
.author{
display: flex;
align-items: center;
.inf{
p{
color: var(--color-main);
}
h6{
font-size: 18px;
font-weight: bold;
}
}
}
.signature{
width: 100px;
}
}
}
// ----------- about style 9 -----------
.about.style-9{
.info{
padding: 0 50px;
ul{
li{
display: flex;
align-items: center;
margin-bottom: 25px;
p{
font-size: 16px;
color: #666;
}
.icon{
margin-inline-end: 20px;
flex-shrink: 0;
img{
width: 60px;
}
}
}
}
.call-info{
border-top: 1px solid #9993;
h5{
font-weight: bold;
font-size: 20px;
color: var(--color-darkBlue2);
margin-bottom: 10px;
}
p{
font-size: 16px;
color: #666;
}
}
}
}

203
static/assets/scss/elements/_about2_page.scss Normal file
View File

@ -0,0 +1,203 @@
/* --------------- about2 page style-5 --------------- */
.about-page.style-2{
color: #000;
.about.style-2{
position: relative;
.img{
height: 530px;
border-radius: 10px;
overflow: hidden;
}
.info{
.text{
color: #666;
font-size: 16px;
}
.nav{
padding: 15px;
border-radius: 30px;
border: 1px solid #9993;
box-shadow: 0 0 20px #0001;
justify-content: space-around;
margin: 40px 0 30px;
.nav-item{
.nav-link{
position: relative;
color: #000;
border-radius: 0;
background: transparent;
padding: 0;
padding-left: 20px;
font-weight: bold;
&::before{
position: absolute;
content: "";
left: 0;
top: 7px;
width: 8px;
height: 8px;
transform: rotate(45deg);
background-color: #9999;
}
&.active{
color: var(--color-blue5);
}
}
}
}
}
.pattern_l{
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 100%;
object-fit: cover;
object-position: left center;
}
.pattern_r{
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 100%;
object-fit: cover;
object-position: right center;
}
}
.timeline{
position: relative;
.card-year{
h3{
color: var(--color-blue5);
font-size: 44px;
}
}
.timeline-content{
position: relative;
&::after{
position: absolute;
content: "";
left: 50%;
transform: translateX(-50%);
top: 0;
width: 1px;
height: 100%;
background-color: #d2e7ff;
}
.timeline-card{
position: relative;
padding: 30px 0;
&::after{
position: absolute;
content: "";
left: calc(50% - 14px);
top: calc(50% - 1px);
width: 28px;
height: 2px;
background-color: var(--color-blue5);
z-index: 2;
}
&:first-of-type{
padding-top: 0;
}
&:last-of-type{
padding-bottom: 0;
}
.line{
position: absolute;
content: "";
left: 50%;
transform: translateX(-50%);
top: 0;
width: 1px;
height: 100%;
background-color: var(--color-blue5);
z-index: 6;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: all 1s ease-in-out;
&.animated{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
}
.card-info{
position: relative;
padding: 30px;
border-radius: 5px;
background-color: #fff;
h6{
font-weight: bold;
font-size: 22px;
margin-bottom: 10px;
position: relative;
z-index: 5;
text-transform: capitalize;
}
p{
color: #666;
position: relative;
z-index: 5;
}
.num{
font-size: 100px;
font-weight: 600;
line-height: 1;
position: absolute;
top: 10px;
right: 10px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(60deg, transparent 0%, #f6f6f6 100%);
pointer-events: none;
}
}
}
}
.clients-imgs{
.clients-content{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
.client-logo{
width: 180px;
height: 85px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
box-shadow: 0px 16px 32px 0px #0000000f;
border-radius: 5px;
padding: 25px;
margin: 15px;
}
}
.about2-imgs-slider{
.img{
display: block;
height: 480px;
border-radius: 10px;
overflow: hidden;
}
.swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
}
}
}

153
static/assets/scss/elements/_about_page.scss Normal file
View File

@ -0,0 +1,153 @@
/* --------------- services page styles --------------- */
.about-page{
header.style-5 {
position: relative;
.info h1{
font-size: 55px;
}
.main-vid{
position: relative;
height: 570px;
border-radius: 20px;
overflow: hidden;
border: 10px solid #ffffff01;
margin-top: 150px;
box-shadow: 0px 30px 40px 0px rgba(109, 121, 141, 0.3);
img{
border-radius: 15px;
width: 100%;
height: 100%;
object-fit: cover;
}
.play-icon{
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-size: 25px;
background-color: var(--color-blue5);
box-shadow:0px 5px 0px 0px var(--color-blue4);
filter: drop-shadow(0 13px 20px #0008);
animation: scale_up_down 1s ease-in-out infinite alternate both;
}
}
.hand-mega{
position: absolute;
width: 17%;
top: 9%;
left: 0;
object-fit: contain;
object-position: left;
z-index: 2;
}
.head6-rating{
position: absolute;
width: 18%;
top: 27%;
left: 15%;
object-fit: contain;
z-index: 2;
}
.head6-charts{
position: absolute;
width: 14%;
top: 7%;
right: 10%;
object-fit: contain;
z-index: 2;
}
.head6-rocket{
position: absolute;
width: 20%;
top: 25%;
right: -30px;
z-index: 2;
}
}
.contact{
.content{
border-top: 10px solid var(--color-blue5);
}
}
.contact.style-6 .form-group .form-control:focus, .contact.style-6 .form-group .form-select:focus{
border-color: var(--color-blue5);
}
}
.culture.style-5{
.culture-card{
position: relative;
border-radius: 20px;
overflow: hidden;
max-height: 500px;
&::after{
position: absolute;
content: "";
height: 50px;
width: 3px;
background-color: #fff;
top: 0%;
left: 50%;
transform: translate(-50% , -50%);
z-index: 10;
border-radius: 3px;
opacity: 0;
transition: all 0.4s ease-in-out;
}
&::before{
position: absolute;
content: "";
height: 3px;
width: 50px;
background-color: #fff;
top: 50%;
left: 0%;
transform: translate(-50% , -50%);
z-index: 10;
border-radius: 3px;
opacity: 0;
transition: all 0.4s ease-in-out;
}
.overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
}
&:hover{
.overlay{
opacity: 0.3;
}
&::after{
top: 50%;
opacity: 1;
}
&::before{
left: 50%;
opacity: 1;
}
}
}
}

369
static/assets/scss/elements/_blog.scss Normal file
View File

@ -0,0 +1,369 @@
/* --------------- blog styles --------------- */
.blog.style-1 {
.content {
.blog_slider {
position: relative;
.swiper-button-next,
.swiper-button-prev {
width: 35px;
height: 35px;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 120px;
top: -63px;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
right: 160px;
left: auto;
top: -63px;
}
}
.blog_box {
position: relative;
border-radius: 10px;
overflow: hidden;
.img {
height: 350px;
position: relative;
&::after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: linear-gradient(to top, #000, transparent);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 1s ease;
}
}
.tags {
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
a {
font-size: 11px;
padding: 3px 7px;
border-radius: 4px;
background: var(--color-main-grad);
color: #fff;
text-transform: uppercase;
}
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
z-index: 5;
h6 {
color: #fff;
margin-bottom: 10px;
border-bottom: 2px solid transparent;
display: inline-block;
line-height: 1.3;
transition: all 0.3s ease;
&:hover {
a {
color: var(--color-main);
}
}
}
.auther {
display: flex;
span {
padding: 0 10px;
color: #fff;
font-size: 12px;
&:first-of-type {
padding-left: 0;
border-right: 1px solid #9993;
}
.auther-img {
width: 15px;
height: 15px;
border-radius: 50%;
object-fit: cover;
margin-right: 3px;
}
i {
font-size: 11px;
margin-right: 4px;
}
}
}
.text {
margin-top: 20px;
font-size: 11px;
color: #fff;
display: none;
}
}
&:hover {
.img {
img {
transform: scale(1.3) rotate(-10deg);
}
}
.info {
h6 {
border-color: #fff9;
}
}
}
}
}
}
// ----------- blog style-2 -------
.blog.style-2{
// background: linear-gradient(to bottom, #157aa6 , #010049);
background-image: url(../img/num_back.png);
background-size: cover;
position: relative;
// .num_shape{
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 80%;
// opacity: 0.5;
// }
.card-img-top{
height: 300px;
width: 100%;
object-fit: cover;
border-radius: 6px;
}
}
// ----------- blog style-3 -------
.blog.style-3{
background-color: #f0eff5;
position: relative;
.v_lines{
position: absolute;
top: 100px;
left: 50%;
height: calc(100% - 340px);
transform: translateX(-50%);
}
.card{
.img{
height: 120px;
}
.card-body{
.date{
span{
font-size: 11px;
letter-spacing: 1px;
}
}
.card-title{
font-size: 18px;
font-weight: bold;
max-width: 85%;
margin-top: 10px;
min-height: 45px;
}
.small{
font-size: 10px;
}
}
}
.client-logos{
.img{
img{
filter: grayscale(1);
opacity: 0.6;
}
&:hover{
img{
filter: grayscale(0);
opacity: 1;
}
}
}
}
}
// ----------- blog style-6 -------
.blog.style-6{
.content{
display: flex;
justify-content: space-between;
.blog-card.style-6{
width: 30%;
position: relative;
&.card-center{
&::after{
position: absolute;
content: "";
right: -28px;
top: 0;
width: 1px;
height: 100%;
background-color: #9994;
}
&::before{
position: absolute;
content: "";
left: -28px;
top: 0;
width: 1px;
height: 100%;
background-color: #9994;
}
}
}
}
a:hover{
color: var(--color-blue6);
}
}
.blog-card.style-6{
position: relative;
height: 100%;
.img{
height: 230px;
border-radius: 20px;
overflow: hidden;
}
.info{
padding: 30px 0;
.blog-title{
color: #000;
font-size: 22px;
margin: 10px 0 10px;
}
.text{
color: #666;
font-size: 13px;
}
}
}
// ----------- blog style-7 -------
.blog.style-7{
position: relative;
background-color: #f0eff5;
.shap_color{
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
}
}
.blog-card.style-7{
.img{
height: 240px;
border-radius: 10px;
overflow: hidden;
}
.info{
.date-tags{
display: flex;
align-items: center;
.tags{
// margin-inline-end: 20px;
a{
font-size: 14px;
text-transform: capitalize;
padding: 4px 15px;
border-radius: 30px;
color: #fff;
background-color: var(--color-blue7);
}
}
.author,
.date{
margin: 0 20px;
}
}
h4.title{
font-size: 22px;
margin-top: 20px;
}
}
}
// ----------- blog style-8 -------
.blog.style-8{
.main-post{
.img{
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
.tags{
position: absolute;
z-index: 10;
top: 30px;
left: 30px;
a{
text-transform: uppercase;
background-color: #fff;
color: var(--color-main);
padding: 5px 20px;
border-radius: 30px;
&:hover{
background-color: var(--color-main);
color: #fff;
}
}
}
}
.info{
h4.title{
margin-top: 15px;
font-size: 22px;
}
}
}
.side-posts{
.item{
display: flex;
align-items: center;
margin-bottom: 30px;
&:last-of-type{
margin-bottom: 0;
}
.img{
width: 145px;
height: 120px;
border-radius: 10px;
overflow: hidden;
position: relative;
margin-inline-end: 25px;
flex-shrink: 0;
}
.info{
h4.title{
margin-top: 15px;
font-size: 22px;
}
}
}
}
}

489
static/assets/scss/elements/_blog_page.scss Normal file
View File

@ -0,0 +1,489 @@
/* --------------- blog-page style-1 --------------- */
.blog-page.style-5{
.blog-details-slider{
position: relative;
overflow: hidden;
.content-card{
.img{
position: relative;
border-radius: 30px;
overflow: hidden;
&.overlay {
&::after{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to top , #000000e1 , #0005 , transparent);
}
}
img{
object-fit: cover;
width: 100%;
height: 500px;
}
}
.info{
position: absolute;
width: 100%;
bottom: 0;
padding: 4vw;
color: #fff;
.date{
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.title{
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
transition-delay: 0.1s;
}
.text-info{
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
transition-delay: 0.2s;
}
}
a:hover{
color: var(--color-blue5);
}
}
.swiper-slide-active{
.content-card{
.info{
small,h2,p{
opacity: 1;
transform: translateX(0);
}
}
}
}
.swiper-pagination{
width: 100%;
bottom: 0;
text-align: right;
padding: 30px 4vw;
.swiper-pagination-bullet{
background-color: #fff ;
opacity: 1;
&.swiper-pagination-bullet-active{
background-color: var(--color-blue5);
}
}
}
.swiper-button-next, .swiper-button-prev{
transform: rotate(45deg);
border-radius: 15px;
width: 50px;
height: 50px;
}
.swiper-button-next::after, .swiper-button-prev::after{
transform: rotate(-45deg);
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
right: -35px
}
.swiper-button-next::after, .swiper-container-rtl .swiper-button-prev::after{
font-size: 14px;
margin-right: 20px;
margin-top: 23px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
left: -35px
}
.swiper-button-prev::after, .swiper-container-rtl .swiper-button-next::after{
font-size: 14px;
margin-left: 25px;
margin-bottom: 22px;
}
}
.popular-posts{
.post-sc-title{
font-weight: 700;
letter-spacing: 2px;
font-size: 20px;
}
.card{
padding: 0 15px;
.img{
height: 200px;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.title{
a{
&:hover{
color: var(--color-blue5);
}
}
}
a{
&:hover{
color: var(--color-blue5);
}
}
}
}
.all-news{
.card {
.img{
height: 200px;
}
.card-body .card-title{
min-height: unset;
max-width: unset;
}
.card-body{
position: relative;
padding-bottom: 40px !important;
height: 100%;
.auther-comments{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
}
a:hover{
color: var(--color-blue5);
}
}
}
.side-blog{
position: sticky;
top: 30px;
.title{
font-size: 16px;
font-weight: 600 !important;
letter-spacing: 2px;
}
.search-form{
.form-group{
.form-control{
min-height: 50px;
font-size: 12px;
padding: 10px 50px 10px 20px;
}
.search-btn{
position: absolute;
right: 10px;
bottom: 12px;
}
}
}
.side-recent-post{
.post-card{
display: flex;
.img{
height: 60px;
width: 30%;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.inf{
h6{
color: #000;
font-size: 13px;
font-weight: bold;
margin-bottom: 5px;
}
p{
font-size: 10px;
color: #666;
}
}
&:hover{
.inf{
h6{
color: var(--color-blue5);
}
}
}
}
}
.side-categories{
.cat-item{
display: flex;
justify-content: space-between;
color: #666;
font-size: 11px;
text-transform: uppercase;
padding: 10px 0;
border-bottom: 1px solid #9995;
&:hover{
color: var(--color-blue5);
font-weight: bold;
}
}
}
.side-newsletter{
background-color: #eaeef2;
padding: 50px 30px;
border-radius: 20px;
.text{
font-size: 11px;
color: #666;
line-height: 1.5;
}
}
.side-share{
.social-icon{
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #f3f7fe;
color: #666;
font-size: 12px;
margin: 0 3px ;
&:hover{
background-color: var(--color-blue5);
color: #fff;
}
}
}
.side-insta{
.insta-img{
height: 80px;
width: 31%;
position: relative;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
&::after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000;
opacity: 0;
z-index: 2;
transition: all 0.3s ease;
}
.icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
z-index: 3;
color: #fff;
margin-top: 15px;
opacity: 0;
transition: all 0.3s ease;
}
&:hover{
&::after{
opacity: 0.3;
}
.icon{
opacity: 1;
margin: 0;
}
}
}
}
}
.blog-content-info{
.info-imgs{
.img{
img{
height: 300px;
width: 100%;
object-fit: cover;
border-radius: 20px;
}
}
}
.twitter-info{
.twitter-card{
padding: 5vw;
border-top: 2px solid #000;
.twitter-header{
.twitter-icon{
font-size: 25px;
color: #00ccff;
}
}
}
}
}
.side-tags{
a{
font-size: 11px;
padding: 4px 8px;
border-radius: 4px;
background-color: #eef4f8;
margin-bottom: 4px;
&:hover{
background-color: var(--color-blue5);
color: #fff;
}
}
}
.blog-share{
.share-icons{
a{
i{
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
margin-inline-end: 5px;
border-radius: 50%;
&.fa-facebook-f{
background-color: #3b5999;
}
&.fa-twitter{
background-color: #55acee;
}
&.fa-tumblr{
background-color: #2b4b6a;
}
&.fa-rss{
background-color: #fb7000;
}
}
}
}
}
.blog-comments{
.comment-card{
background-color: #f4f8fc;
.social-icons{
a{
background-color: #dce1e5;
&:hover{
background-color: var(--color-blue5);
color: #fff;
}
}
}
}
}
.related-postes-slider{
.swiper-slide-prev{
position: relative;
&::after{
position: absolute;
content: "";
right: -40px;
top: 0;
width: 1px;
height: 100%;
background-color: #9994;
}
}
.swiper-slide-active{
&::after{
position: absolute;
content: "";
right: -40px;
top: 0;
width: 1px;
height: 100%;
background-color: #9994;
}
}
.swiper-button-next, .swiper-button-prev {
width: 35px;
height: 35px;
border-radius: 50%;
background: #fff;
&:hover{
background-color: var(--color-blue5);
color: #fff;
}
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
right: 0;
top: -60px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
left: auto;
right: 50px;
top: -60px;
}
.swiper-button-next::after, .swiper-button-prev::after{
font-size: 13px;
}
}
&.color-4{
.side-tags a:hover,
.blog-page.style-5 .blog-comments .comment-card .social-icons a:hover,
.side-blog .side-share .social-icon:hover,
.related-postes-slider .swiper-button-next:hover,
.related-postes-slider .swiper-button-prev:hover,
.blog-details-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color: var(--color-blue4);
}
.side-blog .side-recent-post .post-card:hover .inf h6,
.side-blog .side-categories .cat-item:hover,
.popular-posts .card a:hover,
.blog-details-slider .content-card a:hover{
color: var(--color-blue4);
}
.bg-main{
background-color: var(--color-blue4) !important;
}
}
}

206
static/assets/scss/elements/_buttons.scss Normal file
View File

@ -0,0 +1,206 @@
/* --------------- buttons styles --------------- */
.butn,
.btn {
padding: 12px 30px;
position: relative;
overflow: hidden;
text-align: center;
font-weight: 500;
display: inline-flex;
text-align: center;
justify-content: center;
span {
// color: #fff;
font-size: 14px;
position: relative;
z-index: 2;
text-transform: capitalize;
}
small{
font-size: 12px;
position: relative;
z-index: 2;
text-transform: capitalize;
}
&.butn-gard {
&::before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 150%;
height: 100%;
z-index: 1;
background: linear-gradient(to right, #0c3df4 10%, #02b5ff 45%, #02b5ff, #0c3df4);
transition: all 0.3s ease;
}
&:hover {
&::before {
left: -50%;
}
}
}
&.light_brdr_butn {
// border: 1px solid #fff;
// background: transparent;
span {
// color: #fff;
}
}
&.dark-butn {
background: #000;
span,
small {
color: #fff;
}
}
&.butn-blue6 {
background: var(--color-blue6);
span,
small {
color: #fff;
}
}
&.blue5-3Dbutn {
background: var(--color-blue5);
box-shadow:0px 4px 0px 0px var(--color-blue4);
filter: drop-shadow(0 13px 20px #07397235);
font-size: 12px;
span,
small {
color: #fff;
}
}
&.sm-butn {
padding: 10px 25px;
span {
font-size: 12px;
}
}
&:hover{
background: var(--color-main);
border-color: transparent !important;
span{
color: #fff;
}
}
// ----------
&.hover-darkBlue{
&:hover{
background: var(--color-darkBlue);
border-color: transparent !important;
span,
small{
color: #fff;
}
}
}
&.hover-blue2{
&:hover{
background: var(--color-blue2);
border-color: transparent !important;
span,
small{
color: #fff;
}
}
}
&.hover-blue4{
&:hover{
background: var(--color-blue4);
border-color: transparent !important;
span,
small{
color: #fff;
}
}
}
&.hover-blue5{
&:hover{
background: var(--color-blue5) !important;
border-color: transparent !important;
span,
small{
color: #fff;
}
}
}
&.hover-lightBlue{
&:hover{
background: var(--color-lightBlue);
border-color: transparent !important;
span,
small{
color: var(--color-darkBlue);
}
}
}
&.btn-icon-circle{
position: relative;
padding-right: 50px;
text-transform: capitalize;
i{
position: absolute;
right: -43px;
bottom: -5px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #000;
background-color: #fff;
border-radius: 50%;
font-size: 16px;
}
&:hover{
box-shadow: 0 5px 10px #0003;
i{
animation: RL_smooth 1s ease-in-out infinite alternate both;
}
}
}
&.hover-shadow{
transition: all 0.3s ease;
&:hover{
box-shadow: 0 5px 10px #0003;
}
}
}
// ------ animation ------
.scale_up_down{
animation: RL_smooth 1s ease-in-out infinite alternate both;
}
@keyframes RL_smooth {
0%{
transform: translateX(0);
}
50%{
transform: translateX(5px);
}
100%{
transform: translateX(0);
}
}

219
static/assets/scss/elements/_careers_details.scss Normal file
View File

@ -0,0 +1,219 @@
/* --------------- career-details-page style-5 --------------- */
.career-details-page.style-5{
color: #000;
p{
font-size: 16px;
color: #666;
}
a{
font-size: 16px;
}
h6{
font-size: 20px;
font-weight: bold;
}
.jop-details{
.jop-info{
.tags{
a{
font-weight: 600;
padding: 6px 15px;
border-radius: 30px;
background-color: #edf5ff;
color: var(--color-blue5);
}
}
}
}
.summary-card{
border: 1px solid #9993;
border-radius: 5px;
padding: 40px;
position: sticky;
top: 120px;
li{
font-size: 14px;
color: #999;
margin: 15px 0;
span{
color: #000;
}
}
}
.careers-positions{
.position-card{
padding: 30px;
border: 1px solid #9993;
border-radius: 5px;
background-color: #fff;
display: block;
position: relative;
h5{
font-weight: bold;
font-size: 20px;
margin-bottom: 15px;
}
p{
font-size: 16px;
color: #666;
margin-bottom: 50px;
}
.time{
font-size: 16px;
color: #000;
}
.trend-mark{
position: absolute;
width: 36px;
height: 60px;
line-height: 50px;
top: 0;
right: 30px;
background-color: var(--color-blue5);
color: #fff;
text-align: center;
&::after{
position: absolute;
content: "";
right: 0;
bottom: 0;
width: 36px;
height: 36px;
border-top: 18px solid transparent;
border-right: 18px solid transparent;
border-left: 18px solid transparent;
border-bottom: 18px solid #fff;
}
}
}
}
.careers-positions-slider5{
position: relative;
.swiper-button-next,
.swiper-button-prev{
width: 55px;
height: 55px;
top: 0;
border: 1px solid #9993;
top: -100px;
transition: all 0.3s ease;
&:hover{
border: 1px solid var(--color-blue5);
background: var(--color-blue5);
}
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
right: 0;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
right: 75px;
left: auto;
}
}
.career-form{
position: relative;
background-color: var(--color-blue5);
color: #fff;
p{
color: #fff;
}
.container{
position: relative;
z-index: 10;
}
.map_img{
position: absolute;
left: 0;
top: 70px;
pointer-events: none;
opacity: 0.3;
width: 50%;
}
h2{
margin-bottom: 10px;
font-size: 44px;
}
p{
font-size: 16px;
}
.mum-card{
padding: 20px 0;
margin-top: 20px;
border-top: 1px solid #fff2;
h3{
font-size: 50px;
}
small{
font-size: 14px;
color: #9dc7f9;
}
}
.form{
.form-group{
position: relative;
.icon{
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.form-control{
background-color: #fff1;
border-radius: 5px;
min-height: 50px;
border: 0;
font-weight: 300;
color: #fff;
padding-left: 40px;
&::placeholder{
color: #9ecbff;
font-weight: 300;
}
&:focus{
border: 1px solid #fff;
background-color: transparent;
}
}
textarea.form-control{
padding-top: 10px;
}
&.upload-card{
text-align: center;
.form-control{
position: relative;
color: #fff3;
background-color: #0002;
padding: 12px;
}
.upload_input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 5;
}
}
}
.btn{
span{
font-size: 16px;
}
}
}
}
}

189
static/assets/scss/elements/_careers_page.scss Normal file
View File

@ -0,0 +1,189 @@
/* --------------- faq-page style-5 --------------- */
.careers-page.style-5{
.careers-features{
.careers-feat-card{
padding: 40px 30px;
border: 1px solid #9992;
border-radius: 10px;
transition: all 0.3s ease;
margin-bottom: 30px;
&:hover{
box-shadow: 0px 16px 32px 0px #0000000f;
}
.icon{
margin-bottom: 30px;
img{
width: 80px;
height: 80px;
object-fit: contain;
}
}
.info{
h4{
font-size: 20px;
margin-bottom: 10px;
}
p{
color: #777;
}
}
}
}
.careers-images{
.swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
}
.careers-positions{
.position-card{
padding: 30px;
border: 1px solid #9993;
border-radius: 5px;
background-color: #fff;
display: block;
position: relative;
h5{
font-weight: bold;
font-size: 20px;
margin-bottom: 15px;
}
p{
font-size: 16px;
color: #666;
margin-bottom: 50px;
}
.time{
font-size: 16px;
color: #000;
}
.trend-mark{
position: absolute;
width: 36px;
height: 60px;
line-height: 50px;
top: 0;
right: 30px;
background-color: var(--color-blue5);
color: #fff;
text-align: center;
&::after{
position: absolute;
content: "";
right: 0;
bottom: 0;
width: 36px;
height: 36px;
border-top: 18px solid transparent;
border-right: 18px solid transparent;
border-left: 18px solid transparent;
border-bottom: 18px solid #fff;
}
}
}
}
.career-form{
position: relative;
background-color: var(--color-blue5);
color: #fff;
.container{
position: relative;
z-index: 10;
}
.map_img{
position: absolute;
left: 0;
top: 70px;
pointer-events: none;
opacity: 0.3;
width: 50%;
}
h2{
margin-bottom: 10px;
font-size: 44px;
}
p{
font-size: 16px;
}
.mum-card{
padding: 20px 0;
margin-top: 20px;
border-top: 1px solid #fff2;
h3{
font-size: 50px;
}
small{
font-size: 14px;
color: #9dc7f9;
}
}
.form{
.form-group{
position: relative;
.icon{
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.form-control{
background-color: #fff1;
border-radius: 5px;
min-height: 50px;
border: 0;
font-weight: 300;
color: #fff;
padding-left: 40px;
&::placeholder{
color: #9ecbff;
font-weight: 300;
}
&:focus{
border: 1px solid #fff;
background-color: transparent;
}
}
textarea.form-control{
padding-top: 10px;
}
&.upload-card{
text-align: center;
.form-control{
position: relative;
color: #fff3;
background-color: #0002;
padding: 12px;
}
.upload_input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 5;
}
}
}
.btn{
span{
font-size: 16px;
}
}
}
}
}

106
static/assets/scss/elements/_chat-banner.scss Normal file
View File

@ -0,0 +1,106 @@
/* --------------- chat-banner styles --------------- */
.chat-banner.style-3{
background-color: var(--color-blue2);
position: relative;
&::after{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 60%;
background-image: url(../img/0011.png);
background-size: 80%;
background-repeat: repeat;
background-position: bottom;
opacity: 0.08;
-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(1003%) contrast(103%);
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(1003%) contrast(103%);
}
.info{
h3{
font-size: 27px;
color: #fff;
text-transform: capitalize;
span{
font-weight: 400;
font-style: italic;
position: relative;
&::before{
position: absolute;
content: "";
left: 0;
top: 100%;
width: 240px;
height: 35px;
background-image: url(../img/header/info_h1_line1.png);
background-size: 240px;
background-repeat: no-repeat;
background-position: left;
}
}
}
}
.bttns{
.btn{
}
}
}
/* --------------- chat-banner styles --------------- */
.chat-banner.style-7{
background-color: #8169f1;
padding-top: 100px;
.info{
text-align: center;
color: #fff;
padding-bottom: 100px;
p{
font-size: 16px;
font-weight: 300;
margin-bottom: 15px;
}
h3{
font-size: 40px;
font-weight: 500;
}
}
}
/* --------------- chat-banner styles --------------- */
.chat-banner.style-9{
position: relative;
padding: 180px 0;
background-image: url(../img/header/head9_back.png);
background-size: cover;
background-position: center;
.container{
position: relative;
z-index: 10;
}
.img_back{
position: absolute;
left: 0;
top: -50px;
bottom: -50px;
width: 100%;
height: calc(100% + 100px);
max-height: unset;
pointer-events: none;
object-fit: contain;
}
.section-head{
h6{
&::after,
&::before{
background-color: #fff;
}
}
}
}

333
static/assets/scss/elements/_choose_us.scss Normal file
View File

@ -0,0 +1,333 @@
/* --------------- choose-usstyles --------------- */
.choose-us.style-1 {
position: relative;
.choose-us-img {
position: absolute;
left: -65px;
bottom: -150px;
width: 60%;
height: 120%;
max-height: none;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
.info {
.text {
color: #666;
margin-bottom: 40px;
}
ul {
li {
display: flex;
margin-bottom: 20px;
.icon {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-main-grad);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
h6 {
font-size: 15px;
font-weight: 600;
}
}
}
.btn {
margin-top: 60px;
}
}
.choose-us-brands{
position: absolute;
left: 0;
bottom: 0;
width: 50%;
object-fit: contain;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
z-index: 5;
}
.choose-us-bubbles{
position: absolute;
left: 0;
bottom: 0;
width: 45%;
object-fit: contain;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
animation-delay: 1s;
z-index: 3;
}
}
// -----------
.choose-us.style-2{
.img{
img{
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
.info{
h5{
font-weight: 600;
}
}
.choose-numbers {
position: relative;
z-index: 5;
.num-item {
display: flex;
align-items: center;
.num {
color: #fff;
font-size: 40px;
font-weight: 400;
flex-shrink: 0;
margin-right: 20px;
min-width: 70px;
text-align: center;
i {
font-size: 21px;
}
}
.inf {
color: #ccc;
text-transform: uppercase;
font-size: 13px;
line-height: 1.7;
}
}
}
}
/* --------------- choose-us style-6 --------------- */
.choose-us.style-6{
position: relative;
// padding-right: calc((100vw - 1170px) / 2);
.section-head.style-6{
h2{
font-size: 40px;
}
}
.info{
ul{
li{
.inf{
h5{
font-size: 18px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
}
}
}
}
.img{
padding-top: 50px;
margin-left: -200px;
}
.bubbles{
position: absolute;
top: 0;
left: 0;
height: calc(100% - 200px);
}
}
/* --------------- choose-us style-7 --------------- */
.choose-us.style-7{
position: relative;
background-color: #000;
color: #fff;
overflow: hidden;
.top-wave{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.bottom-wave{
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
transform: rotate(180deg);
}
.choose-circle{
position: absolute;
bottom: calc(50% - 165px);
right: -165px;
width: 330px;
height: 300px;
z-index: 1;
pointer-events: none;
}
.img{
position: relative;
img{
height: 470px;
border-radius: 10px;
width: 100%;
object-fit: cover;
}
.play_btn{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #fff;
border-radius: 50%;
background-color: #fff;
color: #000;
font-size: 14px;
z-index: 2;
}
}
.info{
padding-inline-start: 60px;
li{
display: flex;
align-items: center;
margin: 30px 0;
.icon{
flex-shrink: 0;
margin-right: 25px;
img{
width: 60px;
height: 60px;
object-fit: contain;
}
}
.inf{
h6{
font-size: 18px;
margin-bottom: 10px;
}
p{
font-size: 16px;
color: #ababab;
}
}
}
}
}
/* --------------- choose-us style-8 --------------- */
.choose-us.style-8{
.info{
.choose-card{
padding: 30px;
border: 1px solid #9992;
border-radius: 10px;
position: relative;
margin-top: 40px;
.icon{
width: 50px;
margin-bottom: 20px;
}
h6{
font-size: 18px;
font-weight: bold;
}
.arrow{
color: #e7e7e7;
transform: rotate(-45deg);
position: absolute;
right: 20px;
top: 20px;
}
}
}
}
/* --------------- choose-us style-9 --------------- */
.choose-us.style-9{
.nav{
justify-content: space-between;
border-bottom: 1px solid #9993;
.nav-link{
color: var(--color-darkBlue2);
font-weight: bold;
text-transform: capitalize;
padding: 20px 15px;
border-radius: 0;
img{
width: 30px;
height: 30px;
object-fit: contain;
margin-inline-end: 20px;
filter: invert(26%) sepia(39%) saturate(6305%) hue-rotate(246deg) brightness(99%) contrast(105%);
}
&.active{
background: transparent;
border-bottom: 1px solid var(--color-darkBlue2);
}
}
}
.feat-content{
padding-top: 40px;
position: relative;
.img{
height: 400px;
border-radius: 10px;
overflow: hidden;
}
.info{
.icon{
width: 80px;
margin-bottom: 20px;
}
h2{
font-size: 30px;
color: var(--color-darkBlue2);
margin-bottom: 15px;
}
p{
font-size: 16px;
color: #666;
}
}
.play_icon{
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #fff;
color: var(--color-darkBlue2);
line-height: 80px;
text-align: center;
font-size: 20px;
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
}
}

125
static/assets/scss/elements/_clients.scss Normal file
View File

@ -0,0 +1,125 @@
/* --------------- clients style-4 --------------- */
.clients.style-4 {
background-color: #f0eff5;
position: relative;
z-index: 25;
.client-logos {
border-bottom: 1px solid #9994;
.img {
img {
filter: grayscale(1);
opacity: 0.6;
}
&:hover {
img {
filter: grayscale(0);
opacity: 1;
}
}
}
}
}
/* --------------- clients style 5 --------------- */
.clients.style-5 {
.content {
.img {
padding: 30px;
text-align: center;
border-radius: 20px;
border: 1px solid #9994;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
height: 150px;
&.img-card{
width: 19%;
}
}
}
.swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
}
/* --------------- clients style 9 --------------- */
.clients.style-9{
.client-card{
padding: 50px;
border: 1px solid #9993;
border-radius: 5px;
transition: all 0.3s ease;
&:hover{
border: 1px solid transparent;
background-color: #fff;
box-shadow: 0px 16px 32px 0px #0000000f;
.info{
a{
margin-left: 0;
.l-arrow{
opacity: 1;
}
.r-arrow{
opacity: 0;
}
}
}
}
.info{
h5{
font-weight: bold;
font-size: 20px;
color: var(--color-darkBlue2);
margin-bottom: 10px;
span{
color: #6c41ff;
text-decoration: underline !important;
}
}
p{
color: #666;
}
a{
font-weight: bold;
color: var(--color-darkBlue2);
margin-left: -20px;
.l-arrow{
opacity: 0;
transition: all 0.3s ease;
}
.r-arrow{
transition: all 0.3s ease;
}
}
}
}
.logos-content{
margin-top: 100px;
h4{
font-size: 24px;
font-weight: bold;
color: var(--color-darkBlue2);
padding-bottom: 20px;
border-bottom: 1px solid #9993;
text-align: center;
span{
color: #6c41ff;
}
}
.logos{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding-top: 20px;
a{
margin-top: 30px;
}
}
}
}

106
static/assets/scss/elements/_comming_soon_page.scss Normal file
View File

@ -0,0 +1,106 @@
/* --------------- faq-page style-5 --------------- */
.comming-soon-page.style-5{
position: relative;
color: #000;
.comming-soon{
background-image: url(../img/comming_back1.png);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 100px 0;
.content{
padding-top: 125px;
text-align: center;
.info{
h3{
font-size: 40px;
margin-bottom: 30px;
}
p{
font-size: 16px;
color: #666;
}
.subscribe-form{
margin-top: 50px;
.form-group{
display: flex;
align-items: center;
border-radius: 30px;
border: 1px solid #9993;
background-color: #fff;
box-shadow: 0 0 30px #0001;
.icon{
padding: 0 10px 0 30px;
flex-shrink: 0;
}
.form-control{
border: 0;
}
}
}
.timing{
display: flex;
margin-bottom: 70px;
.item{
padding: 20px 0;
margin: 10px;
width: 100%;
background-color: #fff;
border-radius: 5px;
border-bottom: 3px solid var(--color-blue5);
h2{
font-size: calc(2vw + 20px);
}
small{
font-size: 13px;
color: #999;
text-transform: capitalize;
}
}
}
}
}
}
.comming_man_shape{
position: absolute;
left: 5%;
top: calc(50% - 250px);
width: 20%;
height: 500px;
object-fit: contain;
object-position: center;
}
.comming_chat_shape{
position: absolute;
right: 10%;
top: calc(40% - 50px);
width: 15%;
height: 110px;
object-fit: contain;
object-position: center;
animation-delay: -1.3s;
}
.comming_light_shape{
position: absolute;
right: 30%;
bottom: 50px;
width: 5%;
height: 110px;
object-fit: contain;
object-position: center;
animation-delay: -0.7s;
}
}

89
static/assets/scss/elements/_community.scss Normal file
View File

@ -0,0 +1,89 @@
/* --------------- community style-4 --------------- */
.community.style-4{
.content{
border: 1px solid #9993;
border-radius: 15px;
padding: 30px 0;
display: flex;
.commun-card{
display: flex;
justify-content: center;
align-items: center;
width: 33%;
border-right: 1px solid #9993;
padding: 20px 0;
&:last-of-type{
border: 0;
}
.icon{
flex-shrink: 0;
margin-right: 25px;
i{
font-size: 60px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #501e9c 0%,#8169f1 30%,#8169f1 30%,#a44cee 73%,#ff847f 100%);
}
}
.inf{
h5{
font-size: 23px;
color: #000;
font-weight: bold;
margin-bottom: 0;
line-height: 1.1;
}
p{
font-size: 12px;
color: #666;
}
}
}
}
}
/* --------------- community style-5 --------------- */
.community.style-5{
.content{
border: 1px solid #9993;
border-radius: 15px;
padding: 20px 0;
display: flex;
.commun-card{
display: flex;
justify-content: center;
align-items: center;
width: 33%;
border-right: 1px solid #9993;
padding: 10px 0;
&:last-of-type{
border: 0;
}
.icon{
flex-shrink: 0;
margin-right: 25px;
img{
filter: drop-shadow(-10px 10px 20px #084cba77);
-webkit-animation: scale_up_down 1s ease-in-out infinite alternate both;
animation: scale_up_down 1s ease-in-out infinite alternate both;
}
}
.inf{
h5{
font-size: 20px;
color: #000;
font-weight: bold;
margin-bottom: 0;
line-height: 1.1;
}
}
}
}
}

177
static/assets/scss/elements/_contact.scss Normal file
View File

@ -0,0 +1,177 @@
/* --------------- contact style-1 --------------- */
.contact.style-1 {
position: relative;
overflow: hidden;
.container {
position: relative;
z-index: 5;
}
.content {
.contact_info {
p {
color: #fff;
font-size: 13px;
}
ul {
margin: 50px 0;
li {
color: #fff;
margin: 15px 0;
strong{
margin-right: 5px;
}
}
}
a {
color: #fff;
text-decoration: underline !important;
text-transform: uppercase;
font-size: 13px;
}
}
.contact_form {
.form-control,
.form-select {
border: 0;
font-size: 13px;
min-height: 50px;
}
textarea{
min-height: 125px !important;
}
}
}
.contact_globe {
position: absolute;
left: 0;
top: -10%;
width: 47%;
height: 120%;
object-fit: cover;
object-position: right;
max-height: none;
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
opacity: 0.3;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
// --------- animation ---------
@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
/* --------------- contact style-2 --------------- */
.contact.style-2{
position: relative;
overflow: hidden;
padding-bottom: 250px;
.global_2{
position: absolute;
left: 25%;
bottom: -500px;
width: 55%;
z-index: 2;
opacity: 0.7;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
/* --------------- contact style-6 --------------- */
.contact.style-6{
.content{
position: relative;
border-top: 10px solid var(--color-blue6);
border-top-right-radius: 40px;
border-top-left-radius: 40px;
padding: 100px 15px;
&::before{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg , transparent , #def1fa , transparent , #e8e8f3 , transparent);
background-size: 400% 400%;
animation: gradient 20s linear infinite;
border-radius: 30px;
overflow: hidden;
}
.contact_a{
position: absolute;
left: 0;
bottom: 0;
border-bottom-left-radius: 30px;
pointer-events: none;
max-width: 20%;
}
.contact_message{
position: absolute;
right: -150px;
top: 100px;
border-bottom-left-radius: 30px;
pointer-events: none;
max-width: 30%;
}
.form{
position: relative;
z-index: 5;
}
}
.form-group{
.form-control,
.form-select{
border: 1px solid #9994;
border-radius: 30px;
min-height: 50px;
font-size: 12px;
padding: 10px 25px;
&:focus{
border-color: var(--color-blue6);
box-shadow: none;
}
}
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

16
static/assets/scss/elements/_contact_page.scss Normal file
View File

@ -0,0 +1,16 @@
/* --------------- contact page styles --------------- */
.contact-page.style-5{
.contact.style-6 .form-group .form-control:focus, .contact.style-6 .form-group .form-select:focus{
border-color: var(--color-blue5);
}
.map{
iframe{
width: 100%;
margin-bottom: -6px;
}
}
}

28
static/assets/scss/elements/_download.scss Normal file
View File

@ -0,0 +1,28 @@
/* --------------- download style-5 --------------- */
.download.style-5{
.content{
h2{
font-size: 50px;
span{
position: relative;
.head-line{
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
}
.head-pen{
position: absolute;
right: 102%;
bottom: -5px;
transform: rotateY(180deg);
}
}
}
}
}

60
static/assets/scss/elements/_faq.scss Normal file
View File

@ -0,0 +1,60 @@
/* --------------- faq styles --------------- */
.faq.style-3{
.accordion-item{
border: 0;
border-bottom: 1px solid #9995;
background: transparent;
.accordion-button{
font-weight: bold;
font-size: 14px;
background-color: transparent;
box-shadow: none;
text-transform: capitalize;
padding: 25px 15px;
&::after{
background-size: 15px;
}
}
.accordion-button:not(.collapsed){
background-color: #fff;
color: var(--color-blue2);
padding-top: 30px;
}
.accordion-collapse{
background-color: #fff;
.accordion-body{
padding-top: 0;
padding-bottom: 30px;
font-size: 10px;
color: #666;
}
}
}
&.style-4{
.accordion-item{
border: 0;
border-radius: 7px;
overflow: hidden;
.accordion-button{
padding: 15px;
font-size: 15px;
}
.accordion-button:not(.collapsed){
background-color: #f4f2fb;
color: var(--color-blue4);
padding-bottom: 10px;
}
.accordion-collapse{
background-color: #f4f2fb;
.accordion-body{
font-size: 13px;
}
}
}
}
}

148
static/assets/scss/elements/_faq_page.scss Normal file
View File

@ -0,0 +1,148 @@
/* --------------- faq-page style-5 --------------- */
.faq-page.style-5{
.faq-tabs{
margin-bottom: 80px;
.nav{
margin: 0 -15px;
.nav-item{
width: 25%;
padding: 0 15px;
.nav-card{
display: block;
background-color: #fff;
border: 1px solid #9992;
border-radius: 10px;
padding: 50px 15px;
text-align: center;
width: 100%;
box-shadow: 0px 16px 32px 0px #0000000a;
.icon{
width: 60px;
height: 60px;
margin: 0 auto 30px;
}
h5{
font-size: 18px;
text-transform: capitalize;
}
p{
color: #999;
}
&.active{
border-color: var(--color-blue5);
box-shadow: none;
}
}
}
}
}
.faq-body{
.faq-category{
padding: 50px;
background-color: var(--color-blue5);
border-radius: 5px;
color: #fff;
position: sticky;
top: 100px;
h5{
margin-bottom: 20px;
}
li{
margin: 10px 0;
display: flex;
justify-content: space-between;
text-transform: capitalize;
a{
position: relative;
font-weight: 500;
color: #fff;
&::before{
position: absolute;
content: "";
left: 0;
top: 50%;
height: 1px;
width: 0;
background-color: #fff;
opacity: 0;
transition: all 0.3s ease;
}
&:hover,
&.active{
color: #fff;
padding-left: 35px;
&::before{
width: 20px;
opacity: 1;
}
}
}
span{
font-weight: 300;
opacity: 0.5;
}
}
}
.faq-questions{
.sec-title{
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
span{
color: #999;
}
}
.accordion{
padding-top: 80px;
}
.accordion-item{
border: 0;
border-radius: 0;
margin-bottom: 20px;
.accordion-button{
background-color: #f4f6f9;
border-radius: 10px;
font-weight: bold;
color: #000;
box-shadow: none;
padding: 12px 20px;
}
.accordion-button:not(.collapsed){
background-color: var(--color-blue5);
color: #fff;
&::after{
content: "\f068";
}
}
.accordion-body{
font-size: 16px;
color: #666;
font-weight: 500;
}
.accordion-button::after{
width: 35px;
height: 35px;
border-radius: 50%;
background: #fff;
border-radius: 50%;
color: #000;
content: "\f067";
font-weight: 900;
font-family: "Font Awesome 5 pro";
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
}
}
}
}

169
static/assets/scss/elements/_features.scss Normal file
View File

@ -0,0 +1,169 @@
/* --------------- features style-4 --------------- */
.features.style-4{
background-color: #f0eff5;
position: relative;
overflow: hidden;
.img-circle{
position: absolute;
top: 40px;
width: 76%;
left: 12%;
max-height: unset;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
.content{
display: flex;
justify-content: space-between;
position: relative;
z-index: 5;
.features-card{
text-align: center;
.icon{
width: 125px;
height: 125px;
display: block;
margin: 0 auto 30px;
position: relative;
.label{
position: absolute;
top: 0;
right: -5px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
}
h6{
font-weight: bold;
font-size: 15px;
line-height: 23px;
}
}
}
}
/* --------------- features style-5 --------------- */
.features-card.style-5{
display: block;
padding: 40px;
background-color: #fff;
border-radius: 15px;
text-align: center;
&:hover{
box-shadow: 0px 46px 77px 0px #0a2b5326;
.card-title{
color: var(--color-blue5);
}
}
.icon{
margin-bottom: 40px;
img{
width: 80px;
height: 80px;
object-fit: contain;
filter: drop-shadow( 0 25px 20px #07397235);
}
}
.card-title{
color: #000;
font-size: 17.5px;
font-weight: bold;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.text{
font-size: 12.5px;
line-height: 1.8;
color: #777;
}
}
/* --------------- features style-7 --------------- */
.features.style-7{
position: relative;
background-color: #f0eff5;
overflow: hidden;
.img-circle{
position: absolute;
top: -120px;
left: 25%;
width: 700px;
height: 700px;
max-width: 50%;
pointer-events: none;
}
.features-slider7{
.swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
.swiper-slide{
padding: 30px 0;
}
}
}
@media screen and (min-width: 991px) {
.features-slider7{
position: relative;
.swiper-slide{
width: 470px !important;
}
}
}
.features-card.style-7{
display: flex;
position: relative;
align-items: center;
padding: 40px;
border-radius: 10px;
background-color: #fff;
margin-bottom: 20px;
top: 0;
transition: all 0.3s ease;
&::before{
position: absolute;
content: "";
left: 20px;
bottom: 0;
width: calc(100% - 40px);
height: 100%;
border-radius: 10px;
background-color: #fff8;
z-index: -1;
transition: all 0.3s ease;
}
&:hover{
top: -20px;
&::before{
bottom: -20px;
}
}
.icon{
margin-inline-end: 30px;
flex-shrink: 0;
img{
width: 125px;
height: 125px;
border-radius: 50%;
object-fit: contain;
}
}
.info{
h5{
font-size: 24px;
font-weight: bold;
}
}
}

537
static/assets/scss/elements/_footer.scss Normal file
View File

@ -0,0 +1,537 @@
/* --------------- footer styles --------------- */
footer.style-1 {
background-color: #000;
position: relative;
.foot_l{
position: absolute;
left: 0;
bottom: 0;
pointer-events: none;
}
.foot_r{
position: absolute;
right: 0;
top: 0;
pointer-events: none;
}
.content {
padding: 90px 0 70px;
position: relative;
z-index: 5;
}
p,
a,
li {
font-size: 13px;
color: #aaa7a7;
}
a:hover {
color: var(--color-main);
}
.text {
color: #fff;
font-size: 14px;
}
.foot_info {
li {
margin: 20px 0;
i {
color: var(--color-main);
font-size: 16px;
}
}
}
.social_icons {
margin-top: 10px;
display: flex;
a {
width: 33px;
height: 33px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #2c2c2c;
color: #aaa7a7;
margin: 5px;
&:hover {
background: var(--color-main-grad);
color: #fff;
}
}
}
.links {
display: flex;
justify-content: center;
li {
margin: 8px 0;
}
}
.link_title {
color: #fff;
margin: 10px 0 15px;
}
.foot_subscribe {
input {
background: #1f1f1f;
color: #fff;
font-size: 12px;
border: 0;
&::placeholder {
color: #fff;
}
}
}
.foot {
position: relative;
z-index: 5;
text-align: center;
padding: 30px 0;
border-top: 1px solid #fff3;
}
}
// --------- footer style-2 ----------
footer.style-2{
background-color: #010040;
}
// --------- footer style-3 ----------
footer.style-3{
position: relative;
padding-top: 100px;
overflow: hidden;
.items{
.title{
font-weight: bold;
margin-bottom: 30px;
}
.socail-icons{
margin-top: 30px;
a{
&:hover{
background-color: var(--color-blue2) !important;
color: #fff !important;
}
}
}
ul{
li{
margin: 5px 0;
a{
font-size: 12px;
&:hover{
color: var(--color-blue2);
}
}
}
}
}
.foot{
padding: 35px 0 30px;
position: relative;
margin-top: 80px;
.logo{
width: 120px;
}
.testi_lines{
position: absolute;
top: -10px;
}
}
.contact_globe{
position: absolute;
height: 150%;
max-height: none;
width: 60%;
top: -25%;
left: 20%;
opacity: 0.15;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
// --------- footer style-4 ----------
footer.style-4{
position: relative;
background-color: #f0eff5;
margin-top: 200px;
.wave{
position: absolute;
left: -3%;
bottom: 95%;
width: 106%;
max-width: unset;
height: 240px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
z-index: 20;
}
.container{
position: relative;
z-index: 25;
}
.foot{
border-bottom: 1px solid #9999;
padding: 30px 0;
.links{
display: flex;
justify-content: center;
li{
a{
font-size: 12px;
margin: 0 15px;
font-weight: bold;
&:hover,
&.active{
color: var(--color-blue4);
}
}
}
}
}
.copywrite{
padding: 35px 0;
}
}
// --------- footer style-5 ----------
footer.style-5{
position: relative;
padding-top: 100px;
overflow: hidden;
.items{
.title{
font-weight: bold;
margin-bottom: 30px;
color: #000;
line-height: 1;
}
.socail-icons{
margin-top: 30px;
a{
&:hover{
background-color: var(--color-blue5) !important;
color: #fff !important;
}
}
}
ul{
li{
margin: 5px 0;
a{
font-size: 12px;
&:hover{
color: var(--color-blue5);
}
}
}
}
}
.foot{
padding: 35px 0 30px;
position: relative;
margin-top: 80px;
.logo{
width: 120px;
}
}
}
// --------- footer style-6 ----------
footer.style-6{
position: relative;
padding-top: 100px;
overflow: hidden;
.items{
.title{
font-weight: bold;
margin-bottom: 30px;
color: #000;
}
.socail-icons{
margin-top: 30px;
a{
&:hover{
background-color: var(--color-blue6) !important;
color: #fff !important;
}
}
}
ul{
li{
margin: 5px 0;
a{
font-size: 12px;
&:hover{
color: var(--color-blue6);
}
}
}
}
}
.form{
.form-group{
position: relative;
.icon{
position: absolute;
top: 12px;
left: 15px;
}
input{
width: 100%;
border: 1px solid #9993;
border-radius: 30px;
min-height: 45px;
font-size: 12px;
padding: 0 40px;
}
button{
position: absolute;
right: 5px;
top: 5px;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: var(--color-blue6);
border: 0;
color: #fff;
}
}
}
.foot{
padding: 35px 0 30px;
position: relative;
margin-top: 80px;
.logo{
width: 120px;
}
}
}
// --------- footer style-7 ----------
footer.style-7{
position: relative;
background: url(../img/foot_7_pattern.png) #f0eff5;
padding-bottom: 40px;
background-size: cover;
background-position: bottom;
.info-logo{
padding-inline-end: 50px;
.logo{
width: 200px;
margin-bottom: 40px;
}
.text{
font-size: 16px;
margin-bottom: 30px;
}
.social-links{
a{
width: 50px;
height: 50px;
line-height: 50px;
background-color: #fff;
border-radius: 50%;
text-align: center;
color: #000;
font-size: 16px;
margin-inline-end: 10px;
&:hover{
background-color: var(--color-blue7);
color: #fff;
}
}
}
}
.links-side{
padding-inline-start: 50px;
.links-group{
h5{
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
}
.links{
a{
margin: 7px 0;
}
}
}
}
}
// --------- footer style-8 ----------
footer.style-8{
position: relative;
&::after{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 70%;
background: linear-gradient(to bottom , #fff , transparent);
pointer-events: none;
}
.container{
position: relative;
z-index: 10;
}
.content{
.logo-social{
padding-bottom: 30px;
border-bottom: 1px solid #9993;
.foot-logo{
img{
width: 150px;
}
}
.socials{
a{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
border-radius: 50%;
background-color: #fff;
color: #000;
font-size: 16px;
margin-inline-start: 8px;
&:hover{
background-color: var(--color-main);
color: #fff;
box-shadow: none;
}
}
}
}
.links-content{
.foot-title{
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
margin-top: 60px;
text-transform: capitalize;
}
p{
font-size: 16px;
color: #666;
}
.foot-info{
li{
font-size: 16px;
margin: 10px 0;
}
}
.links{
li{
margin: 15px 0;
}
a{
font-size: 14px;
}
}
.foot-subscribe{
.form-group{
position: relative;
.icon{
position: absolute;
top: 17px;
left: 15px;
}
.form-control{
padding: 15px 15px 15px 40px;
border-radius: 50px;
background-color: #fff;
border: 0;
&::placeholder{
color: #9999;
}
}
}
}
}
}
}
// --------- footer style-9 ----------
footer.style-9{
background-color: #111352;
.foot-title{
font-size: 18px;
font-weight: 600;
color: #fff;
position: relative;
padding-left: 30px;
margin-bottom: 35px;
margin-top: 90px;
text-transform: capitalize;
&::before{
position: absolute;
content: "";
left: 0;
top: 8px;
width: 8px;
height: 8px;
background-color: #6c41ff;
transform: rotate(45deg);
}
}
.links{
ul{
display: flex;
flex-wrap: wrap;
}
li{
margin: 7px 0;
width: 100%;
}
a{
color: #b6b7d3;
text-transform: capitalize;
&:hover{
color: #fff;
}
small{
font-size: 10px;
}
}
}
.foot{
margin-top: 80px;
padding: 40px 0;
border-top: 1px solid #fff2;
}
p{
color: #b6b7d3;
}
.social-icons{
a{
width: 40px;
height: 40px;
line-height: 40px;
background-color: #fff1;
border-radius: 5px;
text-align: center;
color: #fff;
margin-inline-start: 2px;
&:hover{
background-color: var(--color-darkBlue2);
}
}
}
}

746
static/assets/scss/elements/_header.scss Normal file
View File

@ -0,0 +1,746 @@
/* --------------- header styles --------------- */
header.style-1 {
position: relative;
.head-shape-r {
position: absolute;
right: 0;
top: 8%;
width: 55%;
object-fit: cover;
object-position: right;
}
.head-shape-l {
position: absolute;
left: 0;
top: 25%;
height: 40%;
object-fit: cover;
object-position: left;
}
.content {
position: relative;
z-index: 10;
}
.info {
.section-head {
h2 {
font-size: 55px;
}
}
.text {
font-size: 14px;
color: #666666;
width: 80%;
}
.bttns {
display: flex;
align-items: center;
.vid-btn {
display: inline-flex;
align-items: center;
margin-left: 30px;
i {
width: 35px;
height: 35px;
border-radius: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-main-grad);
color: #fff;
margin-right: 15px;
flex-shrink: 0;
font-size: 22px;
padding-left: 2px;
outline: 6px solid #157aa620;
}
span {
color: var(--color-main);
font-size: 12px;
font-weight: bold;
}
}
}
}
}
// ----------- header style 2 -----------
header.style-2{
position: relative;
min-height: 100vh;
padding: 185px 0 100px;
background: linear-gradient(to top, #062063 -40% , #157aa6 40%);
.head_shape2{
position: absolute;
bottom: -5%;
left: -5%;
width: 110%;
max-width: unset;
height: 115%;
max-height: none;
}
.content{
position: relative;
z-index: 5;
h1{
font-size: 123px;
letter-spacing: 75px;
display: inline-block;
padding-left: 75px;
}
h4{
font-weight: 600;
}
p{
font-size: 20px;
&.d-block{
font-size: 16px;
}
}
.vid-btn {
display: inline-flex;
align-items: center;
margin-top: 100px;
i {
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-lightBlue);
color: #fff;
flex-shrink: 0;
font-size: 22px;
padding-left: 2px;
}
}
.brands {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 5;
}
}
}
// ----------- header style 3 -----------
header.style-3{
// min-height: 100vh;
background-color: var(--color-blue2);
position: relative;
padding: 100px 0 30px;
&::before{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 60%;
background-image: url(../img/0011.png);
background-size: 80%;
background-repeat: repeat;
background-position: bottom;
opacity: 0.08;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(1003%) contrast(103%);
}
.main-img{
position: absolute;
right: 0;
top: 200px;
width: 55%;
height: calc(100% - 300px);
object-fit: contain;
object-position: right;
.pattern{
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.circle{
position: absolute;
width: 55%;
top: 10.5%;
right: 20%;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
.logo_shap{
position: absolute;
top: 37%;
right: 39%;
width: 17%;
}
}
.content{
.info{
.h1{
font-size: 55px;
font-weight: 700;
color: #fff;
line-height: 1.2;
span{
font-weight: 400;
position: relative;
font-style: italic;
&::before{
position: absolute;
content: "";
left: 0;
top: 100%;
width: 160px;
height: 30px;
background-image: url(../img/header/info_h1_line.png);
background-size: 160px;
background-repeat: no-repeat;
background-position: left;
}
}
}
.p{
color: #ccccff;
margin-top: 40px;
}
.h5{
color: #fffefe;
font-size: 16px;
font-weight: bold;
margin-top: 80px;
position: relative;
&::before{
position: absolute;
content: "";
left: -65px;
bottom: -10px;
width: 50px;
height: 100px;
background-image: url(../img/header/head3_arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
.form-group{
.form-control,
.form-select{
padding: 12px 20px;
font-size: 12px;
border: 0;
border-radius: 30px;
}
&.input-with-icon{
position: relative;
.form-control{
padding: 12px 20px 12px 40px;
}
.input-icon{
position: absolute;
left: 20px;
bottom: 10px;
color: #999;
}
}
}
}
}
}
/* ------------ animation -------- */
// ----------- header style 4 -----------
header.style-4{
position: relative;
padding: 60px 0;
.content{
position: relative;
overflow: hidden;
.info{
.title_small{
font-size: 12px;
padding: 5px 10px;
background-color: #f7f4ff;
border-radius: 5px;
color: var(--color-blue4);
}
h1{
font-size: 52px;
line-height: 60px;
color: #000;
span{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #501e9c 0%,#8169f1 30%,#8169f1 30%,#a44cee 73%,#ff847f 100%);
}
}
.text{
color: #666;
font-size: 15px;
}
.play-btn{
display: flex;
align-items: center;
.icon{
width: 42px;
height: 42px;
border: 1px solid #5842bc99;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
i{
color: var(--color-blue4);
font-size: 16px;
}
}
}
}
.bubble{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
.wave{
position: absolute;
left: -3%;
bottom: -10px;
width: 106%;
max-width: unset;
height: 240px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
z-index: 20;
}
}
// ----------- header style 5 -----------
header.style-5{
position: relative;
padding: 60px 0 80px;
overflow: hidden;
background: -moz-linear-gradient(bottom, #ffffff 0%, #edf4fe 74%, #e7f1ff 100%);
background: -webkit-linear-gradient(bottom, #ffffff 0%,#edf4fe 74%,#e7f1ff 100%);
background: linear-gradient(to top, #ffffff 0%,#edf4fe 74%,#e7f1ff 100%);
.info{
text-align: center;
h1{
font-size: 60px;
color: #000;
line-height: 1.2;
letter-spacing: -2px;
span{
position: relative;
.head-line{
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
}
.head-pen{
position: absolute;
left: 102%;
bottom: -5px;
}
}
}
p{
font-size: 15px;
color: #666;
margin-top: 30px;
}
.form{
text-align: center;
.form-group{
position: relative;
max-width: 500px;
margin: 40px auto;
.icon{
position: absolute;
left: 25px;
bottom: 13px;
font-size: 18px;
}
input{
width: 100%;
padding: 16px 180px 16px 60px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 30px;
}
.btn{
position: absolute;
right: 8px;
top: 7px;
}
}
}
}
.main-img{
margin-top: 85px;
position: relative;
z-index: 10;
.page-img{
box-shadow: 0px -13px 124px 0px rgba(75, 83, 97, 0.15);
border-radius: 15px;
}
.linechart-img{
position: absolute;
top: 8%;
right: 7%;
width: 50%;
-webkit-animation: scale_up_down 1.5s ease-in-out infinite alternate both;
animation: scale_up_down 1.5s ease-in-out infinite alternate both;
}
.piechart-img{
position: absolute;
bottom: 10%;
right: 10%;
width: 15%;
filter: drop-shadow(0 20px 60px #0005);
-webkit-animation: rotate-center 50s linear infinite both;
animation: rotate-center 50s linear infinite both;
}
}
.handl-img{
position: absolute;
left: 0;
bottom: 0;
width: 30%;
z-index: 15;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
}
.handr-img{
position: absolute;
right: 0;
bottom: 0;
width: 40%;
z-index: 0;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
animation-delay: -1s;
}
}
// ----------- header style 6 -----------
header.style-6{
position: relative;
padding: 30px 30px 0;
overflow: hidden;
.content{
background-color: #dee0f2;
position: relative;
padding: 150px 0 100px;
border-radius: 30px;
}
.info{
text-align: center;
position: relative;
z-index: 5;
h6{
color: #666;
font-size: 18px;
letter-spacing: 5px;
text-transform: uppercase;
margin-bottom: 20px;
}
h1{
font-size: 85px;
color: #000;
line-height: 1.1;
span{
color: #fff;
position: relative;
padding: 10px 40px;
small{
color: #fff;
position: relative;
z-index: 2;
font-size: 85px;
}
&::before{
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
padding: 10px 30px;
background-image: url(../img/shap_style_6.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
}
}
.text{
font-size: 14px;
color: #666;
margin-top: 50px;
}
.form{
background-color: #fff;
border-radius: 50px;
display: flex;
flex-wrap: wrap;
padding: 10px;
justify-content: space-between;
align-items: center;
margin-top: 70px;
.form-group{
width: 38%;
border-right: 1px solid #9994;
display: flex;
align-items: center;
padding: 0 15px;
&:last-of-type{
border: 0;
}
input{
background-color: #fff;
border: 0;
color: #000;
font-size: 12px;
width: 100%;
&::placeholder{
opacity: 0.7;
}
}
}
}
}
.hand-mega{
position: absolute;
width: 20%;
top: 20%;
left: 0;
object-fit: contain;
object-position: left;
z-index: 2;
}
.head6-rating{
position: absolute;
width: 18%;
bottom: 27%;
left: 15%;
object-fit: contain;
z-index: 2;
}
.target-3d{
position: absolute;
width: 20%;
bottom: -120px;
left: 35%;
object-fit: contain;
object-position: left;
z-index: 2;
}
.head6-charts{
position: absolute;
width: 14%;
top: 20%;
right: 15%;
object-fit: contain;
z-index: 2;
}
.head6-rocket{
position: absolute;
width: 30%;
bottom: 5%;
right: -30px;
z-index: 2;
}
}
// ----------- header style 7 -----------
header.style-7{
position: relative;
color: #000;
padding-bottom: 60px;
.content{
position: relative;
z-index: 10;
}
.info{
h1{
margin-top: 30px;
margin-bottom: 40px;
font-size: 60px;
.num{
color: #e2e1e1;
}
.text-grad{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #501e9c 0%,#8169f1 30%,#8169f1 30%,#a44cee 73%,#ff847f 100%);
}
}
}
.img{
position: relative;
.rock7{
position: absolute;
top: 50px;
right: -50px;
}
}
.sponsers{
display: flex;
flex-wrap: wrap;
align-items: center;
.sponsers-content{
a{
opacity: 20%;
margin-inline-end: 50px;
&:hover{
opacity: 100%;
}
}
}
}
.head7_bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
animation-delay: -1s;
}
}
// ----------- header style 8 -----------
header.style-8{
background-image: url(../img/header/header8_pattern.svg);
background-size: cover;
background-attachment: fixed;
.info{
h1{
font-size: 60px;
margin-bottom: 50px;
margin-top: 10px;
}
.form{
h5{
font-size: 20px;
font-weight: 300;
}
.form-group{
position: relative;
}
}
.form-group{
display: flex;
align-items: center;
padding: 8px;
background-color: #fff;
border-radius: 50px;
input{
border: 0;
&::placeholder{
color: #9999;
}
}
}
}
}
// ----------- header style 9 -----------
header.style-9{
background-image: url(../img/header/head9_back.png);
background-position: center;
background-size: cover;
.info{
color: #fff;
h6{
font-size: 16px;
font-weight: bold;
position: relative;
padding-left: 25px;
text-transform: uppercase;
margin-bottom: 15px;
&::before{
position: absolute;
content: "";
left: 0;
top: 5px;
width: 10px;
height: 10px;
transform: rotate(45deg);
background-color: #5f70b7;
}
}
h1{
font-size: 50px;
margin-bottom: 30px;
span{
color: #fff000;
text-decoration: underline !important;
}
}
ul{
li{
font-size: 18px;
margin: 15px 0;
font-weight: 300;
padding-left: 50px;
text-transform: capitalize;
position: relative;
&::before{
position: absolute;
content: "";
left: 0;
top: 50%;
width: 35px;
height: 1px;
background-color: #fff3;
}
}
}
}
.img{
width: 800px;
max-width: unset;
}
}

41
static/assets/scss/elements/_inner_header.scss Normal file
View File

@ -0,0 +1,41 @@
/* --------------- inner-header style-5 --------------- */
.inner-header.style-5{
background-image: url(../img/inner5_back.png);
background-size: cover;
background-repeat: no-repeat;
color: #000;
.content{
padding: 120px 0;
position: relative;
.links{
a{
font-size: 16px;
color: #999;
text-transform: capitalize;
position: relative;
padding-right: 20px;
border-right: 1px solid #9993;
margin-right: 20px;
&:last-of-type{
font-weight: bold;
color: var(--color-main);
border: 0;
padding: 0;
margin: 0;
}
}
}
h2{
font-size: 60px;
text-transform: capitalize;
margin-top: 20px;
}
.side-img{
position: absolute;
right: 0;
top: 30%;
height: 40%;
pointer-events: none;
}
}
}

507
static/assets/scss/elements/_navbar.scss Normal file
View File

@ -0,0 +1,507 @@
/* --------------- navbar styles --------------- */
.nav-container{
z-index: 999;
}
.navbar{
z-index: 999;
.nav-link{
cursor: pointer;
}
}
.navbar.nav-scroll {
background: #fff !important;
-webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
padding: 0;
position: fixed !important;
top: -100px !important;
left: 0;
width: 100%;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
-webkit-transform: translateY(100px);
transform: translateY(100px);
border-radius: 0 !important;
margin: 0 !important;
}
// ----------
.navbar.style-1 {
padding: 30px 0;
.navbar-brand {
margin-right: 40px;
}
.navbar-nav {
.nav-item {
.nav-link {
font-size: 12px;
color: #000;
font-weight: 700;
line-height: 2;
margin: 0 7px;
text-transform: capitalize;
&.active {
color: var(--color-main);
}
}
}
}
.nav-side {
display: flex;
align-items: center;
.hotline {
display: flex;
align-items: center;
border-right: 1px solid #9993;
.icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
background: var(--color-main-grad);
color: #fff;
font-size: 13px;
flex-shrink: 0;
}
.cont {
h6 {
color: #000;
font-size: 15px;
font-weight: bold;
}
}
}
}
.qoute-nav {
display: flex;
align-items: center;
a {
// margin: 0 10px;
.cart-num {
font-size: 9px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background: var(--color-main-grad);
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}
}
// ---------- navbar style 2 ----------
.navbar.style-2{
// .container{
// border-bottom: 1px solid #fff3;
// }
&.nav-scroll{
background-color: #010049 !important;
}
.navbar-brand{
img{
width: 155px;
object-fit: contain;
}
}
.navbar-nav {
.nav-item {
.nav-link {
font-size: 12px;
color: #fff;
font-weight: 500;
line-height: 2;
margin: 0;
padding: 30px 30px;
border-bottom: 2px solid transparent;
position: relative;
&::before{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 0%;
background-color: #fff2;
transition: all 0.3s ease;
}
&.active,
&:hover {
border-bottom: 2px solid var(--color-lightBlue);
&::before{
height: 100%;
}
}
}
}
}
.qoute-nav {
display: flex;
align-items: center;
a {
color: #fff;
.cart-num {
font-size: 9px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #000;
background: var(--color-lightBlue);
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}
.dropdown-menu{
background: #348CB2;
border-radius: 0;
// padding: 0;
.dropdown-item{
color: #fff;
padding: 8px 15px;
&.active,
&:active,
&:hover{
background-color: #010049;
}
}
}
}
// ---------- navbar style-3 ----------
.navbar.style-3{
padding: 20px 0;
&.nav-scroll{
background-color: #4A00E1 !important;
}
.navbar-brand{
img{
width: 155px;
object-fit: contain;
}
}
.navbar-nav{
.nav-item{
.nav-link{
font-size: 11px;
color: #fff;
margin: 0 5px;
padding: 10px 20px;
border-radius: 30px;
&.active,
&:hover{
background-color: #0002;
}
}
}
}
.nav-side{
.search-icon{
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #fff6;
color: #fff;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}
// ---------- navbar style-4 ----------
.navbar.style-4{
position: relative;
z-index: 99;
padding: 20px 15px;
background-color: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: -38px;
.navbar-brand{
width: 150px;
object-fit: contain;
}
.navbar-nav{
.nav-item{
.nav-link{
position: relative;
color: #000;
font-size: 12px;
font-weight: bold;
margin: 0 15px;
&::before{
position: absolute;
content: "";
top: -30px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
width: 55px;
height: 30px;
background-image: url(../img/icons/nav_icon/active_s4.png);
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: all 0.3s ease;
}
&:hover,
&.active{
color: var(--color-blue4);
&::before{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.hot{
position: absolute;
font-size: 8px;
padding: 2px 3px;
border-radius: 3px;
top: -10px;
right: 0;
text-transform: uppercase;
}
}
}
}
.nav-side{
.search-icon{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #0002;
color: #000;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}
// ---------- navbar style-5 ----------
.navbar.style-5{
position: relative;
z-index: 99;
padding: 20px 0;
background-color: #e7f1ff;
.container-fluid{
padding: 0 3vw;
}
.navbar-brand{
img{
max-width: 150px;
object-fit: contain;
}
}
.nav-item{
.nav-link{
position: relative;
color: #000;
font-size: 12px;
font-weight: bold;
margin: 0 15px;
text-transform: capitalize;
&:hover,
&.active{
color: var(--color-blue5);
}
.bi{
position: relative;
bottom: -5px;
}
}
}
.nav-side{
.search-icon{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #0002;
color: #000;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}
// ---------- navbar style-6 ----------
.navbar.style-6{
position: absolute;
z-index: 99;
padding: 20px 0;
background-color: #dee0f2;
width: 100%;
border-radius: 30px;
top: 0;
left: 0;
.container-fluid{
padding: 0 3vw;
}
.navbar-brand{
img{
max-width: 150px;
object-fit: contain;
}
}
.nav-item{
.nav-link{
position: relative;
color: #000;
font-size: 12px;
font-weight: bold;
margin: 0 15px;
text-transform: capitalize;
&::after{
position: absolute;
content: "";
right: -16px;
top: 16px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #bebccd;
}
&:hover,
&.active{
color: var(--color-blue6);
}
}
&:last-of-type{
.nav-link{
&::after{
display: none;
}
}
}
}
}
// ---------- navbar style-7 ----------
.navbar.style-7{
padding: 30px 0;
.navbar-brand{
width: 250px;
padding-right: 60px;
border-right: 1px solid #9992;
}
.navbar-nav{
.nav-item{
.nav-link{
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid transparent;
padding: 0;
margin: 15px 20px;
color: #000;
text-transform: capitalize;
&.active,
&:hover{
border-color: #000;
}
}
}
}
.side_menu_btn{
transition: all 0.3s ease-in-out;
&:hover{
transform: rotate(140deg);
}
}
}
// ---------- navbar style-8 ----------
.navbar.style-8{
padding: 30px 0;
.navbar-brand{
width: 150px;
}
.navbar-nav{
.nav-item{
.nav-link{
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid transparent;
padding: 0;
margin: 15px 20px;
color: #000;
text-transform: capitalize;
&.active,
&:hover{
border-color: #000;
}
}
}
}
}
// ---------- navbar style-9 ----------
.navbar.style-9{
&.nav-scroll{
background: #1f227d !important;
.content{
border: 0;
}
}
.content{
padding: 20px 15px;
border-bottom: 1px solid #fff2;
}
.navbar-brand{
width: 160px;
}
.navbar-nav{
.nav-item{
.nav-link{
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid transparent;
padding: 0;
margin: 15px 20px;
color: #fff;
text-transform: capitalize;
&.active,
&:hover{
border-color: #fff;
}
}
}
}
.side_menu_btn{
transition: all 0.3s ease-in-out;
&:hover{
transform: rotate(140deg);
}
}
}

155
static/assets/scss/elements/_numbers.scss Normal file
View File

@ -0,0 +1,155 @@
/* --------------- numbers style-6 --------------- */
.number-card.style-6{
border-right: 1px solid #9993;
display: flex;
align-items: center;
padding: 0 10px;
h2{
font-size: 45px;
color: var(--color-blue6);
}
.text{
font-size: 15px;
color: #000;
line-height: 1.5;
text-transform: capitalize;
}
}
/* --------------- numbers style-8 --------------- */
.numbers.style-8{
position: relative;
overflow: hidden;
z-index: 10;
.r_shape{
position: absolute;
right: 100px;
bottom: 270px;
pointer-events: none;
}
&::after{
position: absolute;
content: "";
width: 230px;
height: 230px;
border-radius: 50%;
left: -150px;
top: 120px;
background-color: var(--color-orange1);
pointer-events: none;
}
.content{
position: relative;
padding-top: 240px;
padding-bottom: 380px;
.logo-icon{
text-align: center;
}
.plat-icons{
.icon{
position: absolute;
animation-duration: 1.5s;
&.icon-shadow{
background-color: #fff;
border-radius: 50%;
width: 120px;
height: 120px;
box-shadow: 0px 10px 15px #0001;
display: flex;
align-items: center;
justify-content: center;
}
&:nth-of-type(1){
top: 90px;
right: 0;
animation-delay: -0.6s;
}
&:nth-of-type(2){
top: 200px;
right: 345px;
animation-delay: 0;
}
&:nth-of-type(3){
top: 110px;
left: 335px;
animation-delay: 0.3s;
}
&:nth-of-type(4){
top: 140px;
left: 0;
animation-delay: 0.6s;
}
&:nth-of-type(5){
width: 100px;
height: 100px;
bottom: 110px;
right: 265px;
animation-delay: 0.9s;
}
&:nth-of-type(6){
width: 180px;
height: 180px;
bottom: 100px;
left: 200px;
animation-delay: 1.2s;
}
}
}
.num8_circle{
position: absolute;
top: -235px;
width: 100%;
// height: 100%;
max-height: unset;
max-width: unset;
z-index: -1;
pointer-events: none;
}
}
.numbers-btm{
position: relative;
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background-color: var(--color-gray2);
}
.numbers-content{
padding: 40px 50px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 15px #0001;
position: relative;
z-index: 10;
.number-card{
display: flex;
.icon{
margin-inline-end: 25px;
flex-shrink: 0;
padding-top: 15px;
img{
width: 40px;
}
}
.inf{
h3{
font-size: 40px;
font-weight: bold;
}
p{
color: #666;
}
}
}
}
}
}

441
static/assets/scss/elements/_portfolio.scss Normal file
View File

@ -0,0 +1,441 @@
/* --------------- portfolio styles --------------- */
.portfolio.style-1 {
position: relative;
.shap_r {
position: absolute;
right: 0;
top: 30px;
width: 30%;
opacity: 0.3;
pointer-events: none;
}
.shap_l {
position: absolute;
left: 0;
bottom: 20px;
width: 40%;
opacity: 1;
pointer-events: none;
}
.portfolio-slider {
position: relative;
padding-bottom: 60px;
.swiper-button-next,
.swiper-button-prev {
transform: translateY(-50%);
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: -70px;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: -70px;
}
}
.portfolio-card {
background-color: #fff;
border-radius: 7px;
overflow: hidden;
.img {
height: 240px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
padding: 30px;
h5 {
a {
color: #000;
font-weight: bold;
}
}
small{
font-size: 10px;
letter-spacing: 1px;
margin-top: 5px;
}
.text {
color: #666;
margin: 15px 0 20px;
font-size: 13px;
}
.tags {
a {
font-size: 11px;
padding: 3px 7px;
margin-top: 10px;
border-radius: 4px;
background-color: #eef4f8;
}
}
}
&:hover {
h5 {
a {
color: var(--color-main);
}
}
}
}
}
// ---------- projects style-3 ----------
.projects.style-3{
background-color: #f0eff5;
}
.project-card.style-3{
position: relative;
overflow: hidden;
.img{
height: 360px;
border-radius: 15px;
overflow: hidden;
img{
transition: all 1s ease;
}
}
.info{
position: absolute;
z-index: 5;
bottom: 20px;
left: 20px;
background-color: #fff;
border-radius: 15px;
display: inline-block;
padding: 20px 25px;
transition: all 0.4s ease;
transform: translateY(150%);
opacity: 0;
.h5{
font-weight: bold;
font-size: 19px;
margin-bottom: 0;
color: #000;
}
.small{
font-size: 11px;
color: #999;
}
}
&:hover{
.img{
img{
transform: scale(1.1) rotate(-5deg);
}
}
.info{
opacity: 1;
transform: translateY(0);
}
}
}
/* --------------- projects style-6 --------------- */
.projects.style-6{
padding: 0 30px;
.content{
background-color: #f1f2fa;
position: relative;
padding: 100px 0;
border-radius: 30px;
}
}
.project-card.style-6{
border-radius: 8px;
overflow: hidden;
display: block;
margin: 0 15px;
&:hover{
box-shadow: 0px 40px 35px 0px #51558622;
}
a:hover{
color: var(--color-blue6);
}
.img{
height: 240px;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info{
background-color: #fff;
padding: 40px;
transition: all 0.3s ease;
.title{
color: #000;
font-size: 21px;
&:hover{
color: var(--color-blue6);
a{
color: var(--color-blue6);
}
}
}
small{
font-size: 11px;
color: var(--color-blue6);
text-transform: uppercase;
margin-bottom: 10px;
}
.text{
font-size: 12px;
color: #666;
margin-bottom: 25px;
}
.tags {
span {
color: #010101;
font-size: 10px;
padding: 3px 7px;
border-radius: 4px;
background-color: #f1f2fa;
}
}
}
}
/* --------------- projects style-7 --------------- */
.projects.style-7{
background-color: #f0eff5;
.content{
padding-left: calc(calc(100vw - 1170px) / 2);
}
.projects-tabs{
position: relative;
padding-bottom: 80px;
.nav-pills{
.nav-item{
.nav-link{
font-size: 16px;
border-radius: 0;
background: transparent;
color: #000;
margin: 5px 0;
text-transform: capitalize;
margin-left: -20px;
transition: all 0.3s ease;
i{
opacity: 0;
transition: all 0.5s ease;
}
&:hover,
&.active{
text-decoration: underline;
margin-left: 0;
i{
opacity: 1;
}
}
}
}
}
.swiper-button-next,
.swiper-button-prev{
width: 50px;
height: 50px;
background: #fff;
color: #000;
border-radius: 50%;
top: auto;
bottom: 0;
transition: all 0.3s ease;
i{
line-height: 50px;
}
&:hover{
background: var(--color-blue7) !important;
color: #fff;
}
&::after{
display: none;
}
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: auto;
left: 70px;
}
}
}
@media screen and (min-width: 991px) {
.projects-slider7{
position: relative;
.swiper-slide{
width: 475px !important;
}
}
}
.project-card.style-7{
background-color: #fff;
border-radius: 10px;
overflow: hidden;
display: block;
.info{
padding: 55px;
h6{
color: #a44cee;
font-weight: 400;
margin-bottom: 10px;
}
h3{
font-size: 24px;
}
}
.img{
height: 400px;
img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
}
}
}
/* --------------- projects style-8 --------------- */
.projects.style-8{
overflow: hidden;
.section-head{
position: relative;
.swiper-button-next,
.swiper-button-prev{
border-radius: 50%;
width: 50px;
height: 50px;
transition: all 0.3s ease;
font-size: 18px;
color: #000;
&:hover{
background: var(--color-orange1);
color: #fff;
}
&::after{
display: none;
}
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
left: auto;
right: 75px;
}
}
.projects-slider8{
.swiper-container{
overflow: visible;
.project-card{
opacity: 0;
transition: all 0.5s ease;
transform: scale(0.8);
}
.swiper-slide-active{
.project-card{
opacity: 1;
transform: scale(1);
}
}
}
}
.img{
border-radius: 10px;
position: relative;
height: 410px;
.main-img{
border-radius: 10px;
width: 100%;
height: 100%;
object-fit: cover;
}
.tags{
position: absolute;
z-index: 10;
top: 30px;
right: 30px;
a{
text-transform: uppercase;
background-color: #fff;
color: var(--color-main);
padding: 5px 20px;
border-radius: 30px;
&:hover{
background-color: var(--color-main);
color: #fff;
}
}
}
.img-chart {
position: absolute;
top: 120px;
z-index: 2;
width: 200px;
left: -100px;
}
}
.info{
padding-inline-start: 50px;
.logo{
img{
width: 90px;
margin-bottom: 40px;
}
}
h4.title{
font-size: 30px;
font-weight: bold;
margin-bottom: 15px;
}
p{
font-size: 16px;
color: #666;
margin-bottom: 40px;
}
.proj-det{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 20px 0;
border-top: 1px solid #9992;
width: 100%;
.item{
margin-inline-end: 30px;
p{
color: #999;
margin-bottom: 5px;
}
}
.icon{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-main);
line-height: 40px;
text-align: center;
color: #fff;
margin-right: 0;
margin-left: auto;
}
}
}
}

45
static/assets/scss/elements/_portfolio_page.scss Normal file
View File

@ -0,0 +1,45 @@
/* --------------- portfolio-page style-1 --------------- */
.portfolio-page.style-1{
.portfolio-projects.style-1{
background-color: #e7f1ff;
.controls{
text-align: center;
margin-bottom: 50px;
button{
border: 0;
background: transparent;
font-weight: bold;
text-transform: capitalize;
margin: 10px;
&.mixitup-control-active{
color: var(--color-blue5);
}
}
}
}
.download.style-5{
position: relative;
overflow: hidden;
.content h2 span .head-pen{
right: auto;
left: 102%;
transform: rotateY(0);
}
.contact_globe{
position: absolute;
height: 150%;
max-height: none;
width: 60%;
top: -25%;
left: 20%;
opacity: 0.15;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
}

706
static/assets/scss/elements/_pricing.scss Normal file
View File

@ -0,0 +1,706 @@
/* --------------- pricing styles --------------- */
.pricing.style-2{
background: linear-gradient(to bottom , #010049 , #157aa6);
position: relative;
.shap_l{
position: absolute;
left: 0;
top: 20%;
max-width: 30%;
}
.shap_r{
position: absolute;
right: 0;
top: 10%;
height: 80%;
max-width: 30%;
}
.toggle_switch{
.form-check-label{
pointer-events: none;
}
}
.yearly_price,
.monthly_price{
display: none;
&.show{
display: block;
}
}
}
// ----------- pricing style-2 ----------
.pricing_card.style-2{
position: relative;
text-align: center;
color: #fff;
padding: 85px 50px 50px;
border: 1px solid #3d9dd1;
p{
text-transform: uppercase;
margin: 30px 0 15px;
font-size: 16px;
}
.price{
.h2{
small{
font-size: 13px;
position: relative;
top: -12px;
}
}
}
ul{
min-height: 164px;
li{
border-color: #3d9dd181 !important;
}
}
.hint{
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: #fff;
padding: 5px 8px;
border-radius: 3px;
background-color: #1f3f85;
text-transform: capitalize;
}
&.recommended{
&::before{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 10px;
background: var(--color-lightBlue);
}
}
}
// ----------- pricing style-3 ----------
.pricing.style-3{
position: relative;
.testi_lines{
position: absolute;
bottom: -10px;
}
}
.pricing-card.style-3{
padding: 30px;
border-radius: 20px;
background-color: #f3f2f7;
.card-head{
border-bottom: 1px solid #9993;
padding-bottom: 25px;
display: flex;
justify-content: space-between;
h4{
font-size: 19px;
font-weight: bold;
display: flex;
align-items: center;
small{
font-size: 10px;
font-weight: 400;
padding: 3px 5px;
border-radius: 3px;
color: #fff !important;
background-color: #6e27ff;
margin: 0 5px;
}
}
small{
font-size: 11px;
color: #999999;
}
.price{
text-align: right;
h5{
font-size: 20px;
color: var(--color-blue2);
font-weight: bold;
}
}
}
.card-body{
min-height: 180px;
padding: 20px 0;
li{
line-height: 1.2;
display: flex;
align-items: center;
small{
font-size: 11px;
margin: 5px 0;
}
i{
flex-shrink: 0;
color: var(--color-blue2);
font-size: 20px;
margin-right: 10px;
}
}
}
&.dark-card{
background-color: var(--color-blue2);
.card-head{
border-bottom: 1px solid #9999ff;
h4,h5{
color: #fff;
}
small{
color: #9999ff;
}
}
.card-body{
li{
color: #fff;
i{
color: #9999ff;
}
}
}
.btn{
background-color: #fff !important;
span{
color: #000;
}
}
}
}
// ----------- pricing style-4 ----------
.pricing.style-4{
.form-check-input{
&.bg-blue4{
background-color: var(--color-blue4);
border-color: var(--color-blue4);
}
}
.content{
.row{
.col-lg-6:nth-of-type(1){
.price-card{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
margin-right: -1px;
}
}
.col-lg-6:nth-of-type(2){
.price-card{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background-color: #f8f7fd;
}
}
}
.price-card{
position: relative;
border: 1px solid #e9e8ee;
border-radius: 15px;
padding: 40px;
.off{
position: absolute;
width: 85px;
height: 85px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
background-image: url(../img/pricing/off.png);
background-size: contain;
background-repeat: no-repeat;
top: -20px;
right: 45px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.price-header{
border-bottom: 1px solid #e9e8ee;
h6{
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
.icon{
width: 30px;
height: 30px;
margin-right: 8px;
}
}
h2{
font-size: 37px;
color: #000;
margin: 12px 0 5px;
small{
font-size: 15px;
font-weight: 300;
}
}
p{
font-size: 12px;
color: #666;
}
}
}
}
}
// ----------- pricing style-5 ----------
.pricing.style-5{
.pricing-tabsHead{
.price-radios{
display: inline-flex;
background-color: #edf2fa;
padding: 7px;
border-radius: 50px;
.form-check{
margin: 0;
padding: 0;
.form-check-label{
color: #000;
background-color: transparent;
font-size: 12px;
font-weight: bold;
border-radius: 30px;
padding: 10px 15px;
text-transform: capitalize;
cursor: pointer;
small{
padding: 1px 5px;
font-size: 10px;
}
}
.form-check-input{
display: none;
}
.form-check-input:checked ~ .form-check-label{
background-color: #fff;
box-shadow: 0 5px 5px #0001;
}
}
}
}
.content{
min-width: 800px;
margin-top: 50px;
.price-head{
display: flex;
border-bottom: 1px solid #7f7f7f;
.price-headTitle{
width: 34%;
}
.price-headItem{
position: relative;
width: 22%;
text-align: center;
padding: 30px 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.label{
position: absolute;
top: -30px;
right: 15px;
z-index: 5;
display: flex;
width: 60px;
height: 60px;
align-items: center;
justify-content: center;
text-align: center;
text-transform: uppercase;
font-size: 9px;
font-weight: bold;
background-image: url(../img/pricing/label_success.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
color: #fff;
}
h6{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
h2{
font-size: 45px;
margin-bottom: 5px;
span{
font-size: 18px;
color: #999;
font-weight: 400;
}
}
small{
font-size: 11px;
color: #666;
display: block;
line-height: 1.5;
}
}
}
.price-body{
.price-bodyItems{
display: flex;
border-bottom: 1px solid #f2f2f2;
&:last-of-type{
border: 0;
}
.price-bodyTitle{
width: 34%;
padding: 15px 0;
font-size: 14px;
height: 60px;
display: flex;
align-items: center;
min-height: max-content;
position: relative;
.pop-info{
position: relative;
display: inline-block;
cursor: pointer;
i.bttn-info{
font-size: 11px;
color: #999;
margin: 0 3px;
&:hover{
color: var(--color-blue5);
}
}
.hidden_content{
position: absolute;
bottom: 15px;
left: 15px;
padding: 20px;
border-radius: 10px;
background-color: #f7f7f7;
// box-shadow: 0 0 20px #0001;
text-align: center;
width: 250px;
transition: all 0.4s ease;
opacity: 0;
visibility: hidden;
.title{
color: var(--color-blue5);
text-transform: uppercase;
margin-bottom: 5px;
font-size: 13px;
font-weight: 500;
}
}
&:hover{
.hidden_content{
opacity: 1;
visibility: visible;
}
}
}
}
.price-item{
width: 22%;
padding: 15px 0;
text-align: center;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
min-height: max-content;
i{
color: var(--color-blue5);
font-size: 20px;
}
span{
color: #000;
font-size: 14px;
}
}
}
}
.price-foot{
display: flex;
.price-footTitle{
width: 34%;
}
.price-footItem{
width: 22%;
text-align: center;
padding: 30px 0 50px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
}
}
.monthly_price{
display: none;
}
}
// ----------- pricing style-8 ----------
.pricing.style-8{
.pricing-head{
padding: 100px 0 70px;
background-color: #000;
.ui-widget-content{
border-radius: 15px !important;
height: 5px;
border: 0;
background-color: #151515;
position: relative;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active{
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
border: 0;
top: -6px;
transition: 0s;
}
.ui-slider-horizontal .ui-slider-range-min{
background-color: var(--color-main);
}
.users-number{
color: #606060;
display: inline-block;
position: absolute;
left: 0;
input{
background: transparent;
border: 0;
width: 35px !important;
color: #fff;
margin-top: 15px;
min-width: none;
font-weight: bold;
}
}
.pricing-tabsHead{
.price-radios{
display: inline-flex;
background-color: #131313;
padding: 5px;
border-radius: 50px;
.form-check{
margin: 0;
padding: 0;
.form-check-label{
color: #fff;
background-color: transparent;
font-size: 12px;
font-weight: bold;
border-radius: 30px;
padding: 10px 15px;
text-transform: uppercase;
cursor: pointer;
small{
padding: 1px 5px;
font-size: 10px;
}
}
.form-check-input{
display: none;
}
.form-check-input:checked ~ .form-check-label{
background-color: var(--color-orange1);
box-shadow: 0 5px 5px #0001;
}
}
}
}
}
.pricing-body{
position: relative;
&::after{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 60px;
background-color: #000;
}
.content{
padding-bottom: 100px;
border-bottom: 1px solid #9993;
}
.popular-head{
height: 60px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: var(--color-orange1);
color: #fff;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
.pricing-card{
position: relative;
padding: 50px;
background-color: #fff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: 5;
&:hover{
.price{
.price-btn{
opacity: 1;
transform: translateX(0);
visibility: visible;
}
p{
transform: translateX(50px);
opacity: 1;
}
}
}
.pricing-title{
margin-bottom: 40px;
h2{
font-weight: bold;
font-size: 30px;
text-transform: capitalize;
}
p{
font-size: 16px;
color: #666;
}
}
.price{
position: relative;
margin-bottom: 40px;
height: 60px;
border-radius: 50px;
background-color: #eff4fc;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
p{
font-size: 16px;
color: var(--color-main);
font-weight: bold;
transition: all 0.3s ease;
}
.price-btn{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
border-radius: 50px;
background-color: var(--color-main);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
opacity: 0;
transform: translateX(-50px);
visibility: hidden;
i{
margin-left: 10px;
position: relative;
top: 2px;
}
}
}
.pricing-info{
li{
font-size: 16px;
font-weight: 500;
margin: 20px 0;
.icon{
width: 20px;
margin-inline-end: 20px;
}
}
}
}
}
}
// ----------- pricing style-9 ----------
.pricing.style-9{
.pricing-card{
padding: 50px;
background-color: #fff;
border-radius: 6px;
.card-head{
margin-bottom: 20px;
h5{
font-size: 20px;
color: var(--color-darkBlue2);
font-weight: bold;
margin-bottom: 5px;
}
p{
color: #666;
font-size: 14px;
}
}
.price{
font-size: 40px;
color: var(--color-darkBlue2);
small{
font-size: 20px;
font-weight: 300;
}
}
.hightLight{
color: #6c41ff;
padding: 5px 10px;
text-align: center;
background-color: #f1eeff;
margin-bottom: 15px;
border-radius: 6px;
margin-bottom: 20px;
margin-top: 5px;
display: inline-block;
}
li{
font-size: 16px;
color: #666;
display: flex;
justify-content: space-between;
margin-top: 10px;
}
}
.offer-text{
text-align: center;
color: var(--color-darkBlue2);
font-size: 18px;
margin-top: 50px;
a{
color: #6c41ff;
text-decoration: underline !important;
}
}
}

489
static/assets/scss/elements/_product_page.scss Normal file
View File

@ -0,0 +1,489 @@
/* --------------- services product styles --------------- */
.product-page{
.product-slider{
display: flex;
.gallery-thumbs{
flex-shrink: 0;
margin-inline-end: 20px;
height: 500px;
.swiper-slide{
min-height: 75px;
cursor: pointer;
.img{
width: 80px;
height: 75px;
border: 1px solid #9993;
border-radius: 7px;
padding: 8px;
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
&.swiper-slide-thumb-active{
.img{
border-color: var(--color-blue5);
}
}
}
}
.gallery-top{
.swiper-slide{
.img{
height: 500px;
padding: 3vw;
border: 1px solid #9993;
border-radius: 7px;
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
}
.product-info{
.category{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 7px;
}
.title{
font-size: 20px;
text-transform: capitalize;
font-weight: 400;
margin-bottom: 0;
}
.stars{
display: inline-flex;
font-size: 10px;
color: #d0d0d0;
.active{
color: #ffba00;
}
}
.rev{
color: #999;
font-size: 10px;
}
.price{
font-size: 25px;
color: #000;
font-weight: bold;
margin-top: 30px;
}
.info-text{
font-size: 14px;
color: #666;
margin-top: 20px;
}
.info-list{
margin-top: 15px;
font-size: 14px;
color: #666;
li{
margin-bottom: 5px;
}
}
.color-quantity{
padding: 20px 0;
border-top: 1px solid #9993;
margin-top: 25px;
.select-color{
display: flex;
align-items: center;
.colors-content{
.form-check{
padding: 0;
margin-bottom: 0;
.form-check-input{
display: none;
}
.form-check-label{
.color-circle{
width: 28px;
height: 28px;
border-radius: 50%;
border: 3px solid #fff;
&.gray{
background-color: #e3e3e3;
}
&.black{
background-color: #000;
}
&.blue{
background-color: #1941c4;
}
&.green{
background-color: #9ac419;
}
}
}
.form-check-input:checked ~ .form-check-label{
.color-circle{
outline: 1px solid var(--color-blue5);
}
}
}
}
}
}
.qyt-addCart{
display: flex;
margin-top: 20px;
justify-content: space-between;
align-items: center;
.add-more{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
padding: 10px 15px;
border: 1px solid #9993;
width: 30%;
border-radius: 30px;
.qt-minus,
.qt-plus{
cursor: pointer;
}
.qt{
font-size: 14px;
}
}
.btn{
background-color: var(--color-blue5);
padding: 10px 30px;
width: 40%;
span{
font-size: 12px;
color: #fff;
font-weight: bold;
}
&:hover{
background-color: #000;
}
}
}
.fav-btn{
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #0002;
font-size: 15px;
color: #ccc;
cursor: pointer;
&.active{
color: #f73312;
}
}
.socail-icons{
margin-top: 40px;
a{
&:hover{
background-color: var(--color-blue5) !important;
color: #fff !important;
}
}
}
}
.product-details{
.nav-pills{
display: flex;
justify-content: center;
border-bottom: 1px solid #0002;
padding-bottom: 10px;
.nav-link{
border: 0;
background: transparent;
font-size: 25px;
color: #666;
text-transform: capitalize;
&.active{
color: #000;
font-weight: bold;
}
}
}
.content-info{
padding: 50px 8vw;
.text{
color: #666;
}
}
.additional-info{
ul{
border: 1px solid #0002;
li{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px;
font-style: 14px;
color: #666;
border-bottom: 1px solid #0002;
&:last-of-type{
border: 0;
}
}
}
}
.stars{
display: inline-flex;
font-size: 12px;
color: #d0d0d0;
.active{
color: #ffba00;
}
}
.rate-stars{
display: block;
position: relative;
text-align: end;
margin-bottom: 30px;
direction: rtl;
input {
border-radius: 0;
visibility: hidden;
width: 20px;
cursor: pointer;
&:after {
content: "\f005";
font-family: "Font Awesome 5 pro";
font-weight: 900;
font-size: 20px;
color: #eee;
visibility: visible;
display: inline-block;
width: 20px;
height: 20px;
-webkit-transition: background 0.3s;
transition: background 0.3s;
// text-shadow: 0px 2px 4px RGBA(0, 0, 0, 0.2);
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
}
&:hover:after {
opacity: 0.8;
}
&:checked:after {
color: #fc0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
&:checked ~ input:after {
color: #fc0;
}
&:not(:checked):after {
color: #eee;
}
}
}
}
.related-products{
.title{
font-size: 25px;
margin-bottom: 35px;
}
.related-products-slider{
.swiper-button-next, .swiper-button-prev{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #d8dee4;
&:hover{
background: var(--color-blue5);
}
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
right: -50px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
left: -50px;
}
.swiper-button-next:after, .swiper-button-prev:after{
font-size: 10px;
}
}
}
.product-card{
border: 1px solid #ededed;
padding: 30px 15px 15px;
position: relative;
border-radius: 12px;
padding-bottom: 15px;
overflow: hidden;
transition: all 0.4s ease;
margin-bottom: 24px;
&:hover{
padding-bottom: 60px;
.img{
img{
transform: scale(0.8);
}
}
.info{
margin-top: -25px;
}
.btn{
transform: translateY(0);
opacity: 1;
}
}
.img{
height: 130px;
img{
width: 100%;
height: 100%;
object-fit: contain;
transition: all 0.4s ease;
transform-origin: top;
}
}
.info{
margin-top: 20px;
min-height: 77px;
transition: all 0.4s ease;
.category{
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 7px;
}
.title{
font-size: 12px;
text-transform: capitalize;
font-weight: 400;
margin-bottom: 0;
}
.stars{
display: inline-flex;
font-size: 9px;
color: #d0d0d0;
.active{
color: #ffba00;
}
}
.rev{
color: #999;
font-size: 9px;
}
}
.price{
margin-top: 15px;
font-size: 15px;
font-weight: bold;
.price-sale{
color: #f73312;
}
.old-price{
font-size: 11px;
color: #999999;
text-decoration: line-through !important;
margin-inline-start: 5px;
}
}
.btn{
position: absolute;
bottom: 15px;
left: 15px;
width: calc(100% - 30px);
background-color: var(--color-blue5);
padding: 7px 15px;
transform: translateY(70px);
opacity: 0;
transition: all 0.4s ease;
span{
font-size: 11px;
color: #fff;
font-weight: bold;
}
&:hover{
background-color: #000;
}
}
.label{
position: absolute;
left: 10px;
top: 10px;
font-size: 9px;
border-radius: 4px;
background-color: #f0f0f0;
color: #000;
padding: 3px 10px;
text-transform: uppercase;
&.new{
background-color: #ffb500;
}
&.sale-off{
background-color: #f73312;
color: #fff;
}
}
.fav-btn{
position: absolute;
right: 10px;
top: 10px;
font-size: 14px;
color: #ccc;
cursor: pointer;
&.active{
color: #f73312;
}
}
}
}

51
static/assets/scss/elements/_screenshots.scss Normal file
View File

@ -0,0 +1,51 @@
/* --------------- screenshots style-4 --------------- */
.screenshots.style-4{
background-color: #f0eff5;
overflow: hidden;
padding-top: 100px;
position: relative;
height: 700px;
&::after{
position: absolute;
content: "";
bottom: -1px;
left: 0;
width: 100%;
height: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: #fff;
z-index: 10;
}
.screenshots-slider{
position: absolute;
top: 110px;
width: calc(100% + 120px);
left: -60px;
.img{
margin: 0 auto;
height: 420px;
width: 190px;
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
}
}
.mob-hand{
pointer-events: none;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-33%);
height: 600px;
z-index: 10;
}
}

89
static/assets/scss/elements/_searcing.scss Normal file
View File

@ -0,0 +1,89 @@
/* --------------- search styles --------------- */
.domain-search.style-9{
.domain-choose{
display: flex;
.butn{
flex-shrink: 0;
margin-inline-start: 10px;
padding: 20px 40px;
}
.form-group{
display: flex;
align-items: center;
background-color: #fff;
border-radius: 5px;
padding: 10px 20px;
width: 100%;
.icon{
margin-right: 10px;
flex-shrink: 0;
}
.form-select{
width: max-content;
border: 0;
flex-shrink: 0;
font-weight: bold;
color: var(--color-darkBlue2);
}
input{
width: 100%;
border: 0;
}
}
}
.domain-names{
margin-top: 40px;
.item{
margin-top: 10px;
&.dom-tech{
span{
color: #6c41ff;
}
}
&.dom-net{
span{
color: #ff7342;
}
}
&.dom-co{
span{
color: #cc41ff;
}
}
&.dom-com{
span{
color: #ff28ac;
}
}
&.dom-info{
span{
color: #89a829;
}
}
&.dom-org{
span{
color: #a342ed;
}
}
}
p{
font-weight: bold;
font-size: 16px;
}
h5{
text-align: center;
border-top: 1px solid #9993;
padding-top: 20px;
margin-top: 20px;
font-size: 18px;
color: var(--color-darkBlue2);
font-weight: bold;
}
}
}

201
static/assets/scss/elements/_section_titles.scss Normal file
View File

@ -0,0 +1,201 @@
/* --------------- section head styles --------------- */
.section-head{
h6{
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 20px;
}
}
.section-head.style-3{
margin-bottom: 50px;
h3{
font-size: 27px;
text-transform: capitalize;
span{
font-weight: 400;
color: var(--color-blue2);
font-style: italic;
position: relative;
&::after{
position: absolute;
content: "";
background-image: url(../img/section_head/title_shap1.png);
left: 0;
bottom: -15px;
width: calc(100% + 40px);
height: 30px;
background-size: contain;
background-repeat: no-repeat;
}
}
}
&.long-shape{
h3{
span{
&::after{
background-image: url(../img/section_head/title_shap2.png);
bottom: -15px;
}
}
}
}
}
/* --------------- section style-4 --------------- */
.section-head.style-4{
.title_small{
font-size: 12px;
padding: 5px 10px;
background-color: #f7f4ff;
border-radius: 5px;
color: var(--color-blue4);
margin-bottom: 20px;
}
h2{
font-size: 40px;
line-height: 1.3;
color: #000;
span{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #501e9c 0%,#8169f1 30%,#8169f1 30%,#a44cee 73%,#ff847f 100%);
}
}
h5{
font-size: 16px;
font-weight: bold;
color: #a44cee;
display: inline-block;
text-transform: capitalize;
margin: 0 10px;
}
}
/* --------------- section style-5 --------------- */
.section-head.style-5{
h2{
font-size: 45px;
span{
color: var(--color-blue5);
position: relative;
display: inline-block;
padding: 0 5px;
margin: 0 5px;
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 40%;
background-color: var(--color-blue5);
opacity: 8%;
}
}
}
p{
color: #666;
font-size: 15px;
}
}
/* --------------- section style-6 --------------- */
.section-head.style-6{
h2{
color: #000;
font-size: 45px;
span{
position: relative;
padding: 10px 20px;
small{
position: relative;
z-index: 2;
font-size: 45px;
color: #fff;
}
&::before{
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(../img/shap_style_6.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
}
}
}
/* --------------- section style-8 --------------- */
.section-head.style-8{
h6{
font-weight: normal;
font-size: 14px;
color: var(--color-main);
text-decoration: underline;
text-transform: uppercase;
margin-bottom: 10px;
}
h3{
font-size: 40px;
text-transform: capitalize;
}
}
/* --------------- section style-9 --------------- */
.section-head.style-9{
h6{
letter-spacing: 0.5s;
text-transform: uppercase;
color: var(--color-darkBlue2);
display: inline-block;
position: relative;
font-weight: bold;
padding: 0 25px;
&::after{
position: absolute;
content: "";
right: 0;
top: 4px;
width: 9px;
height: 9px;
background-color: #6c41ff;
transform: rotate(45deg);
}
&::before{
position: absolute;
content: "";
left: 0;
top: 4px;
width: 9px;
height: 9px;
background-color: #6c41ff;
transform: rotate(45deg);
}
}
h2{
font-size: 40px;
color: var(--color-darkBlue2);
margin-bottom: 15px;
}
p{
font-size: 18px;
color: #666666;
}
}

453
static/assets/scss/elements/_services.scss Normal file
View File

@ -0,0 +1,453 @@
/* --------------- services styles --------------- */
.services.style-1 {
position: relative;
.ser_shap_l {
position: absolute;
left: 0;
bottom: 30%;
z-index: -1;
transition: all 5s ease;
// opacity: 0;
// clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
// &.animated{
// opacity: 1;
// clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
// }
}
.ser_shap_r {
position: absolute;
right: 0;
top: 25%;
// z-index: -1;
// transition: all 5s ease;
// opacity: 0;
// clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
// &.animated{
// opacity: 1;
// clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
// }
}
.service-box {
position: relative;
z-index: 5;
padding: 30px;
border: 1px solid #9993;
border-radius: 8px;
display: block;
background-color: #fff;
transition: all 0.3s ease;
h5 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 35px;
a {
color: #000;
font-weight: bold;
}
.num {
color: var(--color-main);
font-size: 12px;
}
}
.icon {
margin-bottom: 35px;
img {
width: 60px;
height: 60px;
object-fit: cover;
}
}
.info {
.text {
color: #666;
margin-bottom: 20px;
font-size: 13px;
}
.tags {
a {
font-size: 11px;
padding: 3px 7px;
border-radius: 4px;
background-color: #eef4f8;
margin-top: 10px;
}
}
}
&:hover {
border-color: transparent;
box-shadow: 0px 54px 115px 0px rgba(52, 60, 66, 0.25);
h5 {
a {
color: var(--color-main);
}
}
}
}
}
// -------- tags --------
.tags.style-2 a {
font-size: 11px;
padding: 3px 7px;
border-radius: 4px;
background-color: #131172;
margin: 3px;
}
.services_projects{
background-image: url(../../assets/img/services_work.png);
background-size: cover;
background-attachment: fixed;
background-position: center;
.swiper-button-next, .swiper-button-prev{
width: 50px;
height: 50px;
transition: all 0.3s ease;
&:hover{
background: var(--color-lightBlue) !important;
}
}
}
.swiper-slide-duplicate-prev{
.service-box {
border: 0 !important;
}
}
// ---------- services style-3 -----------
.services.style-3{
background-color: #f0eff5;
.service-card.style-3{
padding: 30px;
background-color: #fff;
border-radius: 12px;
height: 100%;
.icon{
margin-bottom: 60px;
img{
width: 125px;
height: 120px;
object-fit: contain;
}
}
.info{
.title{
font-size: 18px;
color: #000;
text-transform: capitalize;
margin-bottom: 20px;
font-weight: bold;
}
.text{
font-size: 13px;
color: #666;
}
a{
margin-top: 30px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
&:hover{
color: var(--color-blue2);
}
}
}
}
}
// ---------- services style-6 -----------
.services-slider.style-6{
.swiper-container{
padding-bottom: 100px;
}
.swiper-slide{
transform: scale(0.9);
position: relative;
transition: all 0.4s ease;
top: 0;
&.swiper-slide-nth-next-2{
transform: scale(1);
top: 100px;
padding: 0 9px;
}
&.swiper-slide-next{
transform: scale(1);
top: 50px;
padding: 0 12px;
}
&.swiper-slide-active{
transform: scale(1.1);
padding: 0 20px;
filter: drop-shadow(5px 50px 30px #07397211);
}
&.swiper-slide-prev{
transform: scale(1);
top: 50px;
padding: 0 12px;
}
&.swiper-slide-nth-prev-2{
transform: scale(1);
top: 100px;
padding: 0 9px;
}
}
}
.service-card.style-6{
text-align: center;
padding: 30px 8%;
background-color: #f1f2fa;
border-radius: 30px;
overflow: hidden;
margin: 20px 0;
display: block;
color: #000;
.icon{
filter: drop-shadow(5px 15px 20px #07397255);
margin-bottom: 25px;
img{
// height: 50px;
// width: 80px;
max-height: 100px;
max-width: 100px;
object-fit: contain;
}
}
.info{
h5{
font-weight: bold;
font-size: 15px;
margin-bottom: 15px;
}
.text{
font-size: 11px;
color: #666;
}
}
}
// ---------- services style-7 -----------
.services.style-7{
position: relative;
background-color: #f0eff5;
.services-content{
position: relative;
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background-image: url(../img/ser_wh_line.png);
background-repeat: repeat-x;
}
}
.service-item-style7{
text-align: center;
margin-top: 30px;
padding: 0 15px;
.img{
position: relative;
width: 140px;
height: 140px;
margin: 0 auto 40px;
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.icon{
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #fff;
border-radius: 50%;
color: var(--color-blue7);
position: absolute;
bottom: 0;
right: 0;
font-size: 20px;
}
}
.info{
h6{
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
text-transform: capitalize;
}
.text{
font-size: 16px;
color: #666;
margin-bottom: 30px;
}
a{
color: #000;
i{
position: relative;
top: 2px;
margin: 0 5px;
transition: all 0.3s ease;
&:first-of-type{
opacity: 0;
transform: translateX(-10px);
}
&:last-of-type{
opacity: 1;
transform: translateX(0);
}
}
&:hover{
color: var(--color-blue7);
padding-left: 10px;
i{
&:first-of-type{
opacity: 1;
transform: translateX(0);
}
&:last-of-type{
opacity: 0;
transform: translateX(10px);
}
}
}
}
}
}
}
// ---------- services style-8 -----------
.services.style-8{
background-image: url(../img/services/serv8_back.png);
background-size: cover;
.services-slider8{
.swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
}
.service-card.style-8{
text-align: center;
padding: 50px;
box-shadow: 0px 16px 32px 0px #0000000a;
border: 1px solid #f4f4f4;
border-radius: 10px;
transition: all 0.4s ease;
// cursor: pointer;
&:hover{
box-shadow: none;
border-color: var(--color-main);
.info{
a{
color: var(--color-main);
}
}
}
.icon{
margin-bottom: 10px;
}
.info{
h5{
font-size: 24px;
font-weight: bold;
text-transform: capitalize;
}
p{
font-size: 16px;
color: #666;
margin-top: 20px;
}
a{
text-transform: uppercase;
color: #c3c3c3;
margin-top: 35px;
}
}
}
}
@media screen and (min-width: 991px) {
.services-slider8{
position: relative;
.swiper-slide{
width: 370px !important;
}
}
}
// ---------- services style-9 -----------
.services.style-9{
.services-content{
position: relative;
&::before{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 50%;
background-color: #fff;
}
.service-card{
padding: 35px;
box-shadow: 0px -16px 32px 0px #00000008;
border-radius: 6px;
background-color: #fff;
position: relative;
z-index: 5;
.img-icon{
margin-bottom: 25px;
img{
width: 60px;
height: 60px;
object-fit: cover;
}
}
h3{
font-size: 22px;
font-weight: bold;
color: var(--color-darkBlue2);
margin-bottom: 15px;
}
p{
color: #666;
margin-bottom: 30px;
}
.icon{
font-size: 18px;
color: #999;
}
}
}
.con-info{
padding: 30px;
color: #fff;
border-radius: 6px;
background-image: linear-gradient(to right , #25146f , #3680fc , #25146f);
text-align: center;
margin-top: 60px;
h5{
font-size: 18px;
font-weight: 300px;
}
}
}

149
static/assets/scss/elements/_services_details_page.scss Normal file
View File

@ -0,0 +1,149 @@
/* --------------- faq-page style-5 --------------- */
.services-details-page.style-5{
.ser-details{
p{
color: #666;
font-size: 16px;
}
.main-info{
.main-img{
height: 450px;
overflow: hidden;
border-radius: 10px;
margin-bottom: 50px;
}
.testi-card{
text-align: center;
padding: 4vw;
background-color: #fff;
box-shadow: 0px 16px 32px 0px #0000000a;
border: 1px solid #9993;
border-radius: 5px;
.text{
font-size: 20px;
margin: 30px auto 40px;
}
.author{
display: flex;
align-items: center;
justify-content: center;
.inf{
p{
color: var(--color-blue5);
}
h6{
font-size: 18px;
font-weight: bold;
}
}
}
}
}
}
.side-links{
position: sticky;
top: 120px;
.links-card{
padding: 30px;
border: 1px solid #9993;
border-radius: 5px;
h5{
font-size: 18px;
font-weight: bold;
padding-bottom: 15px;
margin-bottom: 30px;
border-bottom: 1px solid #9993;
}
ul{
li{
margin: 15px 0;
a{
.icon{
color: var(--color-blue5);
margin-right: 10px;
transition: all 0.3s ease;
}
&:hover{
.icon{
margin-right: 20px;
}
}
}
}
}
}
.banner1{
padding: 40px;
border-radius: 5px;
text-align: center;
background-image: url(../img/banner_back1.png);
background-size: cover;
position: relative;
.title{
margin-bottom: 300px;
h6{
font-weight: 500;
color: var(--color-blue5);
margin-bottom: 10px;
}
h3{
font-size: 24px;
}
}
.mob{
position: absolute;
left: 0;
bottom: 15px;
height: 350px;
}
}
}
.contact.style-5{
position: relative;
&::before{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 400px;
background-color: #f6f8fb;
}
.contact-form{
position: relative;
z-index: 10;
padding: 5vw;
background-color: #fff;
box-shadow: 0 0 40px #0001;
border-radius: 5px;
.form-group{
position: relative;
margin-bottom: 30px;
.form-control{
border: 0;
border-radius: 5px;
background-color: #f6f8fb;
min-height: 50px;
padding: 12px 15px 12px 40px;
}
.icon{
position: absolute;
top: 14px;
left: 15px;
}
}
}
}
}

10
static/assets/scss/elements/_services_page.scss Normal file
View File

@ -0,0 +1,10 @@
/* --------------- services page styles --------------- */
.services-page{
.features{
background-color: #e7f1ff;
}
}

464
static/assets/scss/elements/_shop_page.scss Normal file
View File

@ -0,0 +1,464 @@
/* --------------- services page styles --------------- */
.shop-page{
.filter{
.filter-card{
padding: 20px 15px;
border-radius: 10px;
background-color: #f0f4f8;
text-transform: capitalize;
.card-title{
font-size: 15px;
color: #000;
font-weight: 800;
margin-bottom: 15px;
}
.form-check-label{
cursor: pointer;
}
.cat-link{
color: #000;
font-size: 11px;
font-weight: 600;
}
.category-checkRadio{
padding: 0;
line-height: 1;
.form-check-input{
display: none;
}
.form-check-input:checked ~ .form-check-label{
color: var(--color-blue5);
}
}
.accordion{
.accordion-button{
color: #000;
font-size: 11px;
font-weight: 600;
padding: 0;
background: transparent;
margin-bottom: 10px;
box-shadow: none;
}
.accordion-button::after{
background-size: 0.8rem;
background-position: center;
}
.accordion-button:not(.collapsed){
color: var(--color-blue5);
}
}
.filter-card-item{
padding-bottom: 15px;
border-bottom: 1px solid #9994;
margin-bottom: 20px;
.sub-tilte{
font-size: 11px;
color: #000;
font-weight: 800;
position: relative;
cursor: pointer;
margin-bottom: 15px;
}
.filter-card-body{
.filter-card-scroll{
max-height: 130px;
overflow-x: hidden;
overflow-y: auto;
&::-webkit-scrollbar {
height: 10px;
width: 5px;
background: #dfdfdf;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: var(--color-blue5);
-webkit-border-radius: 0;
border-radius: 10px;
}
&::-webkit-scrollbar-corner {
background: var(--color-blue5);
border-radius: 10px;
}
}
}
.search-group{
position: relative;
margin-bottom: 25px;
input{
width: 100%;
background-color: #fff;
border: 0;
border-radius: 5px;
padding: 10px;
font-size: 11px;
min-height: 40px;
padding-inline-end: 20px;
}
button{
position: absolute;
right: 8px;
top: 10px;
font-size: 13px;
border: 0;
background: transparent;
}
}
}
.category-checkBox{
font-size: 11px;
color: #666;
text-transform: capitalize;
}
.slider-range-content{
.amount-input{
display: flex;
justify-content: space-between;
.amount{
width: 35%;
margin-inline-end: 5%;
border-radius: 7px;
background-color: #fff;
font-size: 12px;
overflow: hidden;
padding: 6px 10px;
small{
font-size: 10px;
color: #999999;
}
input{
border: 0;
width: 100%;
}
}
button{
width: 50px;
height: 50px;
background-color: var(--color-blue5);
border: 0;
color: #fff;
border-radius: 7px;
text-transform: capitalize;
}
}
.ui-slider-horizontal{
margin-top: 25px;
height: 6px;
border: 0;
background-color: #dfdfdf;
.ui-slider-range{
background-color: var(--color-blue5);
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
border: 0;
background: var(--color-blue5);
border-radius: 50%;
width: 1em;
height: 1em;
}
}
}
}
}
.products-content{
.top-filter{
padding: 15px 0;
.r-side{
.form{
.form-group{
display: flex;
align-items: center;
font-size: 11px;
label{
color: #999;
flex-shrink: 0;
margin-inline-end: 15px;
}
.form-select{
border: 0;
background-color: #f0f4f8;
font-size: 11px;
min-height: 35px;
border-radius: 12px;
}
}
}
.grid-list-btns{
display: flex;
justify-content: flex-end;
.bttn{
width: 35px;
height: 35px;
font-size: 17px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f4f8;
color: #000;
margin-inline-start: 10px;
cursor: pointer;
&:hover,
&.active{
color: #fff;
background-color: var(--color-blue5);
}
}
}
}
}
.products{
.product-card{
border: 1px solid #ededed;
padding: 30px 15px 15px;
position: relative;
border-radius: 12px;
padding-bottom: 15px;
overflow: hidden;
transition: all 0.4s ease;
margin-bottom: 24px;
&:hover{
padding-bottom: 60px;
.img{
img{
transform: scale(0.8);
}
}
.info{
margin-top: -25px;
}
.btn{
transform: translateY(0);
opacity: 1;
}
}
.img{
height: 130px;
img{
width: 100%;
height: 100%;
object-fit: contain;
transition: all 0.4s ease;
transform-origin: top;
}
}
.info{
margin-top: 20px;
min-height: 77px;
transition: all 0.4s ease;
.category{
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 7px;
}
.title{
font-size: 12px;
text-transform: capitalize;
font-weight: 400;
margin-bottom: 0;
}
.stars{
display: inline-flex;
font-size: 9px;
color: #d0d0d0;
.active{
color: #ffba00;
}
}
.rev{
color: #999;
font-size: 9px;
}
}
.price{
margin-top: 15px;
font-size: 15px;
font-weight: bold;
.price-sale{
color: #f73312;
}
.old-price{
font-size: 11px;
color: #999999;
text-decoration: line-through !important;
margin-inline-start: 5px;
}
}
.btn{
position: absolute;
bottom: 15px;
left: 15px;
width: calc(100% - 30px);
background-color: var(--color-blue5);
padding: 7px 15px;
transform: translateY(70px);
opacity: 0;
transition: all 0.4s ease;
span{
font-size: 11px;
color: #fff;
font-weight: bold;
}
&:hover{
background-color: #000;
}
}
.label{
position: absolute;
left: 10px;
top: 10px;
font-size: 9px;
border-radius: 4px;
background-color: #f0f0f0;
color: #000;
padding: 3px 10px;
text-transform: uppercase;
&.new{
background-color: #ffb500;
}
&.sale-off{
background-color: #f73312;
color: #fff;
}
}
.fav-btn{
position: absolute;
right: 10px;
top: 10px;
font-size: 14px;
color: #ccc;
cursor: pointer;
&.active{
color: #f73312;
}
}
}
&.list-view{
.card-width{
width: 50%;
}
.product-card{
display: flex;
.img{
flex-shrink: 0;
width: 35%;
margin-right: 10px;
}
&:hover{
padding-top: 12px;
padding-bottom: 35px;
.img{
img{
transform: scale(1);
}
}
.info{
margin-top: 25px;
}
}
}
}
}
}
&.style-grad{
.filter{
.filter-card{
.category-checkRadio{
.form-check-input:checked ~ .form-check-label{
color: var(--color-blue4);
}
}
.accordion{
.accordion-button:not(.collapsed){
color: var(--color-blue4);
}
}
.filter-card-item{
.filter-card-body{
.filter-card-scroll{
&::-webkit-scrollbar-thumb {
background: var(--color-blue4);
}
&::-webkit-scrollbar-corner {
background: var(--color-blue4);
}
}
}
}
.slider-range-content{
.amount-input{
button{
background-color: var(--color-blue4);
}
}
.ui-slider-horizontal{
.ui-slider-range{
background-color: var(--color-blue4);
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
background: var(--color-blue4);
}
}
}
}
}
.products-content{
.top-filter{
.r-side{
.grid-list-btns{
.bttn{
&:hover,
&.active{
background-color: var(--color-blue4);
}
}
}
}
}
.products{
.product-card{
.btn{
background-color: var(--color-blue4);
}
}
}
}
}
}

198
static/assets/scss/elements/_side_menu.scss Normal file
View File

@ -0,0 +1,198 @@
// ------------------ side_menu style1 ------------------
.side_menu.style-7 {
position: fixed;
top: 0;
left: 0;
z-index: 10;
background-color: var(--color-gray2);
height: 100vh;
width: 40%;
min-width: max-content;
opacity: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
pointer-events: none;
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 99999;
display: flex;
align-items: center;
.content{
width: 100%;
.logo{
padding: 30px 7vw;
border-bottom: 1px solid #9993;
img{
width: 300px;
max-width: 50%;
}
}
.side_foot{
padding: 30px 7vw;
border-top: 1px solid #9993;
h5{
text-transform: uppercase;
margin-bottom: 20px;
}
}
}
.pages_links {
padding: 15px 7vw;
height: calc(100vh - 240px);
overflow: auto;
&::-webkit-scrollbar {
height: 5px;
width: 3px;
background: #8169f122;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: var(--color-blue7);
-webkit-border-radius: 0;
border-radius: 10px;
}
&::-webkit-scrollbar-corner {
background: #8169f122;
border-radius: 10px;
}
li {
opacity: 0;
// transform: translateY(-50px);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
a {
color: #222;
font-size: calc(14px + 1.5vw);
font-weight: bold;
margin: 10px 0;
position: relative;
transition: all 0.3s linear;
text-transform: capitalize;
&::after {
position: absolute;
content: "";
left: 110%;
top: 60%;
width: 0;
height: 2px;
background-color: var(--color-blue7);
transition: all 0.3s ease-in-out;
}
&:hover,
&.active {
color: var(--color-blue7);
&::after {
width: 50px;
}
}
}
}
ul {
li {
transition: all 1s ease;
&:nth-of-type(1) {
transition-delay: 0.3s;
}
&:nth-of-type(2) {
transition-delay: 0.4s;
}
&:nth-of-type(3) {
transition-delay: 0.5s;
}
&:nth-of-type(4) {
transition-delay: 0.6s;
}
&:nth-of-type(5) {
transition-delay: 0.7s;
}
&:nth-of-type(6) {
transition-delay: 0.8s;
}
&:nth-of-type(7) {
transition-delay: 0.9s;
}
&:nth-of-type(8) {
transition-delay: 1s;
}
}
}
}
.side_menu_cls{
position: absolute;
top: 40px;
right: 30px;
&:hover{
transform: rotate(45deg);
}
}
&.show {
opacity: 1;
transform: translateX(0);
pointer-events: all;
border-radius: 0;
li {
opacity: 1;
// transform: translateY(0);
clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
}
&.dark_theme{
background-color: #000;
color: #fff;
.pages_links li a{
color: #999;
&::after{
background: #999;
}
&:hover{
color: #fff;
&::after{
background: #999;
}
}
}
&::-webkit-scrollbar {
background: #fff3;
}
&::-webkit-scrollbar-thumb {
background: #fff3;
}
&::-webkit-scrollbar-corner {
background: #fff3;
}
}
}
.side_overlay{
position: fixed;
z-index: 99998;
width: 100vw;
height: 100vh;
background-color: #0009;
opacity: 0;
visibility: hidden;
top: 0;
left: 0;
transition: all 0.5s ease-in-out;
&.show{
opacity: 1;
visibility: visible;
}
}
@media screen and (max-width: 480px) {
.side_menu.style-7{
width: 100%;
.pages_links{
height: calc(100vh - 273px);
}
}
}

127
static/assets/scss/elements/_signin_page.scss Normal file
View File

@ -0,0 +1,127 @@
/* --------------- faq-page style-5 --------------- */
.signin-page.style-5{
.signin{
position: relative;
color: #000;
background-image: url(../img/comming_back1.png);
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 100px 0;
.form-content{
background-color: #fff;
box-shadow: 0px 30px 60px 0px #0000000f;
border-radius: 10px;
.info{
padding: 50px;
text-align: center;
.logo{
display: block;
padding-bottom: 40px;
border-bottom: 1px solid #9993;
margin-bottom: 40px;
img{
width: 200px;
}
}
.or-line{
position: relative;
text-align: center;
margin: 25px 0;
&::after{
position: absolute;
content: "";
left: 0;
top: 50%;
width: 100%;
height: 1px;
background-color: #9995;
}
span{
position: relative;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #9995;
background-color: #fff;
z-index: 10;
}
}
.group-icon{
position: relative;
font-size: 13px;
.form-control{
padding: 18px 15px 18px 40px;
font-size: 13px;
}
.icon{
position: absolute;
left: 15px;
top: 20px;
}
}
}
}
.sign-imgs-slider{
position: relative;
background-color: #b6c7e1;
height: 100%;
.swiper-pagination{
position: absolute;
top: 35px;
.swiper-pagination-bullet {
margin: 0 5px;
width: 40px;
height: 4px;
border-radius: 0;
background: #fff;
&.swiper-pagination-bullet-active{
border-radius: 0;
color: #fff;
}
}
}
.slide-card{
text-align: center;
padding-top: 80px;
h3{
font-size: 36px;
margin-bottom: 50px;
color: #fff;
}
.img{
padding: 0 50px;
img{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
object-fit: cover;
object-position: bottom;
}
}
}
}
}
}
@media screen and (max-width: 991px) {
.signin-page.style-5 .signin .form-content .info{
padding: 30px 20px;
.butn{
width: 100%;
}
}
}

115
static/assets/scss/elements/_single_project.scss Normal file
View File

@ -0,0 +1,115 @@
/* --------------- single-project style-5 --------------- */
.single-project.style-5{
.about-app.style-5{
h1{
font-size: 55px;
}
.about-cards{
.about-card{
text-align: center;
padding: 15px;
small{
font-size: 11px;
color: #999;
margin-bottom: 10px;
text-transform: uppercase;
}
h6{
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 1.6;
}
}
}
.img-content{
.img{
position: relative;
.main-img{
position: relative;
z-index: 5;
}
.circle{
position: absolute;
z-index: 0;
left: 0;
top: 15%;
height: 70%;
object-fit: contain;
object-position: center;
-webkit-animation: rotate-center 100s linear infinite both reverse;
animation: rotate-center 100s linear infinite both reverse;
}
.bubbls{
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 100%;
object-fit: contain;
object-position: center;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
}
}
.screenshots{
position: relative;
&::after{
position: absolute;
content: "";
background-image: url(../img/about/about_s4_wave.png);
background-repeat: repeat-x;
width: 100%;
height: 30px;
top: -1px;
left: 0;
z-index: 10;
transform: rotateX(180deg);
}
}
.share{
.social-icon{
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #f3f7fe;
color: #666;
font-size: 12px;
margin: 20px 3px 0;
&:hover{
background-color: var(--color-blue5);
color: #fff;
}
&.hover-blue4{
&:hover{
background-color: var(--color-blue4);
color: #fff;
}
}
}
}
.projects{
.project-card.style-6:hover .info .title{
color: var(--color-blue5);
}
.project-card.style-6 .info small{
color: var(--color-blue5);
}
}
.slider-style-6 .swiper-button-next:hover, .slider-style-6 .swiper-button-prev:hover{
background-color: var(--color-blue5);
}
}

192
static/assets/scss/elements/_team.scss Normal file
View File

@ -0,0 +1,192 @@
/* --------------- team styles --------------- */
.team.style-1 {
position: relative;
.team_shap {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
max-height: none;
z-index: -1;
}
.content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.team_box {
width: 18%;
text-align: center;
margin-bottom: 20px;
.avatar {
width: 135px;
height: 135px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 15px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
h6 {
font-weight: bold;
transition: all 0.3s ease;
}
small {
display: block;
font-size: 13px;
color: #888;
}
.social_icons {
margin-top: 10px;
display: flex;
justify-content: center;
a {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #eef4f8;
color: #666;
margin: 5px;
&:hover {
background: var(--color-main-grad);
color: #fff;
}
}
}
}
&:hover {
.info {
h6 {
color: var(--color-main);
}
}
}
}
}
&.team-blue2{
.content{
.team_box{
.social_icons {
a {
&:hover {
background: var(--color-blue2);
color: #fff;
}
}
}
&:hover {
.info {
h6 {
color: var(--color-blue2);
}
}
}
}
}
}
}
/* --------------- team style-6 --------------- */
.team.style-6{
padding: 0 30px;
.content{
background-color: #f1f2fa;
position: relative;
padding: 100px 0;
border-radius: 30px;
}
}
.team-card.style-6{
text-align: center;
padding: 15px;
background-color: #fff;
border-radius: 20px;
transition: all 0.3s ease;
.img{
position: relative;
height: 320px;
border-radius: 15px;
overflow: hidden;
.social-icons{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 20px;
z-index: 5;
a{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
color: #666;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
transform: translateY(80px);
opacity: 0;
transition: all 0.5s ease;
&:hover{
background-color: var(--color-blue6);
color: #fff;
transition: all 0.3s ease;
transition-delay: 0 !important;
}
&:nth-of-type(1){
transition-delay: 0.1s;
}
&:nth-of-type(2){
transition-delay: 0.2s;
}
&:nth-of-type(3){
transition-delay: 0.3s;
}
&:nth-of-type(4){
transition-delay: 0.4s;
}
}
}
}
.info{
padding: 25px 0 10px;
h6{
font-size: 15px;
font-weight: 600;
color: #000;
}
small{
color: #999;
font-size: 13px;
}
}
&:hover{
box-shadow: 0px 54px 92px 0px rgba(81, 85, 134, 0.2);
.img{
.social-icons{
a{
opacity: 1;
transform: translateY(0);
}
}
}
.info{
h6{
color: var(--color-blue6);
}
}
}
}

668
static/assets/scss/elements/_testimonials.scss Normal file
View File

@ -0,0 +1,668 @@
/* --------------- testimonials styles --------------- */
.testimonials.style-1 {
.content {
position: relative;
z-index: 5;
.vid_img {
position: relative;
height: 400px;
min-height: 100%;
&::before {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #0007, #0001);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.play_icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--color-main-grad);
z-index: 5;
i {
color: #fff;
font-size: 28px;
margin-left: 3px;
}
}
.img_info {
position: absolute;
left: 0;
bottom: 0;
padding: 30px;
width: 100%;
z-index: 5;
h4 {
color: #fff;
font-weight: bold;
}
small {
color: #fff;
display: block;
font-size: 11px;
}
}
}
.info {
position: relative;
padding-left: 75px;
min-height: 100%;
&::after {
position: absolute;
content: "";
left: 25px;
top: 0;
width: 2px;
height: 100%;
background-color: #9991;
}
.client_card {
border: 1px solid #9994;
border-radius: 5px;
padding: 20px;
display: flex;
background-color: #fff;
.user_img {
margin-right: 25px;
flex-shrink: 0;
img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
}
.inf_content {
.rate_stars {
margin-bottom: 5px;
i {
color: #ffb400;
font-size: 10px;
}
}
h6 {
font-weight: bold;
font-size: 13px;
margin-bottom: 15px;
}
p {
font-size: 12px;
color: #000;
text-transform: uppercase;
span{
text-transform: capitalize;
}
}
}
}
}
}
}
// --------- reviews style2 ---------
.reviews.style-2{
position: relative;
.rev_l{
position: absolute;
left: 0;
top: 30%;
width: 20%;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
}
.rev_r{
position: absolute;
right: 0;
top: 30%;
transform: translateY(-50%);
width: 20%;
-webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
animation: slide_up_down 2s ease-in-out infinite alternate both;
animation-delay: 1s;
}
}
.swiper-slide{
.reviews_card.style-2{
opacity: 0;
transform: scale(0.8) translateY(20px);
transition: all 1.5s ease;
transition-delay: 0.3s;
}
&.swiper-slide-active{
.reviews_card.style-2{
opacity: 1;
transform: scale(1) translateY(0);
}
}
}
.reviews_card.style-2{
.rev_user{
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
outline: 1px solid var(--color-lightBlue);
outline-offset: 5px;
margin: 40px auto 25px;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.rev_stars{
i{
color: greenyellow;
}
}
}
// ------------ testimonial style-3 ------------
.testimonials.style-3{
background-color: #f0eff5;
margin-top: -30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
position: relative;
z-index: 5;
.testi_lines{
position: absolute;
bottom: -10px;
}
.testimonial-card.style-3{
.text{
font-size: 18px;
line-height: 28px;
min-height: 112px;
}
p{
font-size: 13px;
line-height: 1.1;
}
small{
font-size: 11px;
}
}
.testimonial-slider.style-3{
position: relative;
.swiper-button-next{
top: -65px;
right: 0;
width: 35px;
height: 35px;
border-radius: 50%;
&::after{
font-size: 12px;
}
&:hover{
background: var(--color-blue2);
}
}
.swiper-button-prev{
top: -65px;
left: auto;
right: 40px;
width: 35px;
height: 35px;
border-radius: 50%;
&::after{
font-size: 12px;
}
&:hover{
background: var(--color-blue2);
}
}
}
}
// ------------ testimonials style-4 ------------
.testimonials.style-4{
// overflow: hidden;
.content{
border-bottom: 1px solid #9993;
padding-bottom: 80px;
.numbs{
display: flex;
.num-card{
.icon{
height: 55px;
display: inline-block;
margin-bottom: 15px;
}
h2{
color: var(--color-blue4);
}
p{
font-size: 11px;
color: #666;
margin-top: 5px;
}
&:not(:last-of-type){
padding-right: 50px;
margin-right: 50px;
border-right: 1px solid #9993;
}
}
}
.play-btn{
display: flex;
align-items: center;
.icon{
width: 42px;
height: 42px;
border: 1px solid #5842bc99;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
i{
color: var(--color-blue4);
font-size: 16px;
}
}
}
.stars{
font-size: 10px;
color: #fdb900;
margin-bottom: 5px;
}
.testi-cards{
position: relative;
padding: 0 5vw;
.client_card {
position: relative;
z-index: 10;
border-radius: 15px;
padding: 25px;
display: flex;
align-items: center;
background-color: #fff;
box-shadow: -4.104px 11.276px 38px 0px rgba(45, 42, 61, 0.1);
margin: 20px;
.user_img {
margin-right: 25px;
flex-shrink: 0;
img {
width: 90px;
height: 90px;
border-radius: 50%;
object-fit: cover;
}
}
.inf_content {
.rate_stars {
margin-bottom: 5px;
i {
color: #ffb400;
font-size: 10px;
}
}
h6 {
font-weight: bold;
font-size: 12px;
margin-bottom: 15px;
}
p {
font-size: 10px;
color: #000;
text-transform: uppercase;
span{
text-transform: capitalize;
color: #2E99F5;
}
}
}
&:nth-of-type(2){
right: -5vw;
}
}
.testi-globe{
position: absolute;
top: -80px;
left: 0;
width: 110%;
max-height: unset;
max-width: unset;
opacity: 0.2;
-webkit-animation: rotate-center 100s linear infinite both;
animation: rotate-center 100s linear infinite both;
}
}
}
}
// ------------ testimonials style-5 ------------
.testi-card.style-5{
display: block;
padding: 40px 30px;
background-color: #fff;
border-radius: 15px;
text-align: center;
margin: 0 15px;
&:hover{
box-shadow: 0px 30px 60px 0px #0a2b5326;
.card-title{
color: var(--color-blue5);
}
}
.stars{
i{
color: #27a700;
font-size: 15px;
}
}
.text{
font-size: 19px;
line-height: 1.6;
color: #000;
margin-top: 15px;
}
.user {
h6{
margin: 15px auto 0;
font-size: 14px;
font-weight: bold;
}
small{
font-size: 11px;
color: #666;
}
}
}
// ------------ testimonials style-6 ------------
.testimonials.style-6{
padding: 50px 0 120px;
.testi-slider.style-6{
.icon{
width: 95px;
height: 95px;
background-color: var(--color-blue6);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 60% 40% 40% 40%;
font-size: 35px;
}
.testi-card{
.text{
color: #000;
font-size: 23px;
line-height: 1.4;
}
}
.swiper-button-next,
.swiper-button-prev{
background-color: #f1f2fa;
width: 40px;
height: 40px;
top: 100%;
margin-top: 40px;
&:hover{
background-color: var(--color-blue6);
}
}
.swiper-button-next{
right: auto;
left: 50px;
}
.swiper-button-prev{
left: 0;
}
}
.img{
position: relative;
margin-top: 50px;
img{
position: relative;
z-index: 5;
}
.bubbls{
position: absolute;
right: 0;
top: 0;
height: 100%;
object-fit: contain;
z-index: 0;
}
}
}
// ------------ testimonials style-7 ------------
.testimonials.style-7{
position: relative;
background-color: #f0eff5;
.container{
position: relative;
z-index: 10;
}
&::after{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 80%;
background: linear-gradient(to bottom , #fff , transparent);
pointer-events: none;
}
.img_back{
position: absolute;
left: 0;
top: 100px;
width: 100%;
height: 70%;
object-fit: contain;
pointer-events: none;
z-index: 1;
}
.testi_qout{
position: absolute;
top: 150px;
left: 50%;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
}
.testi-card{
z-index: 2;
.text{
font-size: 24px;
text-align: center;
}
.author{
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
.inf{
p{
color: #946ed6;
}
h6{
font-size: 18px;
font-weight: bold;
}
}
}
}
.get-qoute-banner{
background-color: #fff;
border-radius: 10px;
padding: 0 50px;
margin-top: 130px;
.info{
p{
color: #666;
margin-bottom: 5px;
}
h6{
font-size: 24px;
font-weight: bold;
}
}
.img{
text-align: center;
img{
width: 200px;
margin-top: -30px;
}
}
}
}
// ------------ testimonials style-8 ------------
.testimonials.style-8{
.testi-card{
.info{
background-color: #fff;
padding: 30px;
border-radius: 10px;
position: relative;
&::after{
position: absolute;
content: "";
bottom: -20px;
left: 100px;
width: 50px;
height: 20px;
border-left: 25px solid #fff;
border-right: 25px solid transparent;
border-top: 10px solid #fff;
border-bottom: 10px solid transparent;
}
.stars{
color: var(--color-orange1);
margin-bottom: 25px;
position: relative;
z-index: 5;
}
p{
font-size: 20px;
position: relative;
z-index: 5;
}
.icon{
position: absolute;
width: 100px;
right: 30px;
top: 30px;
pointer-events: none;
}
}
.author{
display: flex;
align-items: center;
.inf{
p{
color: var(--color-main);
text-transform: uppercase;
}
h6{
font-size: 18px;
font-weight: bold;
}
}
}
}
}
// ------------ testimonials style-9 ------------
.testimonials.style-9{
background-image: url(../img/testimonials/testi9_back.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.testi-head{
h3{
font-size: 30px;
color: var(--color-darkBlue2);
}
.reviews-numb{
display: flex;
align-items: center;
.img{
padding-inline-end: 30px;
margin-inline-end: 30px;
border-right: 1px solid #9993;
.logo{
width: 125px;
margin-bottom: 3px;
}
.stars{
display: flex;
.star{
width: 25px;
margin-inline-end: 1px;
}
}
}
}
}
.testi-card{
.stars{
display: flex;
margin-bottom: 25px;
.star{
width: 20px;
margin-inline-end: 1px;
}
}
.text{
font-size: 17px;
color: var(--color-darkBlue2);
margin-bottom: 40px;
font-weight: 500;
line-height: 1.7;
min-height: 150px;
}
.author{
display: flex;
align-items: center;
.inf{
p{
color: #666;
}
h6{
font-size: 18px;
font-weight: bold;
color: var(--color-darkBlue2);
}
}
}
}
}

80
static/assets/scss/elements/_top_navbar.scss Normal file
View File

@ -0,0 +1,80 @@
.top-navbar{
z-index: 9999;
}
/* --------------- top navbar styles --------------- */
.top-navbar.style-1 {
background: var(--color-main-grad);
position: relative;
z-index: 9999;
.top-links {
.text {
font-size: 11px;
strong {
margin: 0 10px;
}
.fa-bullhorn {
background-color: #002ec1;
padding: 15px;
}
}
}
.r-side {
display: flex;
justify-content: flex-end;
.socail-icons {
border-right: 1px solid #fff4;
padding-right: 10px;
margin-right: 14px;
a {
color: #fff;
margin: 0 5px;
font-size: 12px;
}
}
.dropdown {
color: #fff;
font-size: 11px;
img {
width: 15px;
height: 15px;
border-radius: 50%;
object-fit: cover;
}
}
}
}
/* --------------- top navbar style-4 --------------- */
.top-navbar.style-4{
background-image: url(../img/top_nav_s4.png);
background-size: cover;
background-position: top;
padding: 10px 15px 50px;
text-align: center;
}
/* --------------- top navbar style-5 --------------- */
.top-navbar.style-5{
padding: 10px 15px;
text-align: center;
background-color: var(--color-blue5);
}
/* --------------- top navbar style-7 --------------- */
.top-navbar.style-7{
padding: 15px 0;
border-bottom: 1px solid #9993;
position: relative;
z-index: 9991;
}
/* --------------- top navbar style 9 --------------- */
.top-navbar.style-9{
color: #fff;
background-color: #172b86;
padding: 10px 0;
position: relative;
}