Rakia/Maryam-s-work
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pushing all files

Browse Source
This commit is contained in:
rakia
2025-08-30 11:03:32 +03:00
parent fd2dcf0daa
commit 81b875023b
510 changed files with 81710 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
public/assets/sass/section/_about-page.scss Normal file
View File

@ -0,0 +1,412 @@
/*==========================================================================
About Company CSS
==========================================================================*/
.about__company {
position: relative;
&-shape {
&-1 {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
&-2 {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
}
&-left {
position: relative;
&-image {
display: flex;
align-items: start;
gap: 25px;
img {
overflow: hidden;
}
}
&-experience {
text-align: center;
position: absolute;
left: 35%;
bottom: 20px;
background: var(--primary-color-1);
width: 190px;
height: 200px;
padding: 40px 35px;
h2 {
color: var(--text-white);
}
h6 {
color: var(--text-white);
font-size: 18px;
line-height: 28px;
font-weight: 500;
}
}
}
&-right {
&-title {
h2 {
margin-bottom: 30px;
}
p {
margin-bottom: 45px;
}
}
}
}
/*==========================================================================
Company Two CSS
==========================================================================*/
.company__two {
&-left {
&-title {
h2 {
max-width: 460px;
margin-bottom: 20px;
}
p {
max-width: 510px;
}
}
&-skill {
margin-top: 35px;
margin-bottom: 45px;
display: flex;
align-items: center;
gap: 35px;
&-item {
display: flex;
align-items: center;
gap: 20px;
h6 {
font-family: var(--body-font);
font-weight: 600;
font-size: 16px;
line-height: 26px;
max-width: 145px;
}
}
}
}
}
/*==========================================================================
About Solution CSS
==========================================================================*/
.about__solution {
position: relative;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
&::after {
content: '';
position: absolute;
background: var(--bg-heading-color);
width: 100%;
height: 100%;
opacity: 0.8;
left: 0;
top: 0;
z-index: -1;
}
&-left h2 {
color: var(--text-white);
}
&-right {
position: relative;
z-index: 1;
padding: 40px 0;
&-shape {
position: absolute;
top: 0;
right: 150px;
}
.btn-one {
&::before {
background: var(--bg-white);
}
&:hover {
color: var(--text-heading-color);
}
}
}
}
/*==========================================================================
Company History CSS
==========================================================================*/
.company__history {
&-area {
max-width: 960px;
margin: 0 auto;
&-items {
display: flex;
&-left {
padding-right: 70px;
margin-right: 70px;
border-right: 1px dashed var(--primary-color-1);
&-content {
padding: 39px;
padding-bottom: 37px;
border: 1px solid var(--border-color-1);
margin-top: 30px;
position: relative;
&::before {
content: '';
position: absolute;
right: -76px;
top: 70px;
width: 10px;
height: 10px;
background: var(--primary-color-1);
box-shadow: 0px 5px 20px rgba(249, 76, 48, 0.5);
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
right: -11px;
top: 65px;
width: 20px;
height: 20px;
background: var(--bg-white);
border-bottom: var(--border-color-1) solid 1px;
border-right: var(--border-color-1) solid 1px;
transform: rotate(-45deg);
}
&-date {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
span {
font-weight: 700;
font-size: 20px;
line-height: 20px;
color: var(--text-white);
background: var(--primary-color-1);
padding: 7px 22px;
padding-left: 20px;
padding-right: 25px;
clip-path: polygon(0 0, 100% 0, 81% 50%, 100% 99%, 0 100%, 0% 50%);
}
}
}
}
&-right {
img {
max-width: 410px;
}
}
}
&-item {
display: flex;
&-left {
padding-right: 69px;
margin-right: 70px;
border-right: 1px dashed var(--primary-color-1);
img {
max-width: 410px;
}
}
&-right {
&-content {
padding: 39px;
padding-bottom: 37px;
border: 1px solid var(--border-color-1);
margin-top: 30px;
position: relative;
&::before {
content: '';
position: absolute;
left: -76px;
top: 70px;
width: 10px;
height: 10px;
background: var(--primary-color-1);
box-shadow: 0px 5px 20px rgba(249, 76, 48, 0.5);
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
left: -11px;
top: 65px;
width: 20px;
height: 20px;
background: var(--bg-white);
border-top: var(--border-color-1) solid 1px;
border-left: var(--border-color-1) solid 1px;
transform: rotate(-45deg);
}
&-date {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
span {
font-weight: 700;
font-size: 20px;
line-height: 20px;
color: var(--text-white);
background: var(--primary-color-1);
padding: 7px 22px;
padding-left: 20px;
padding-right: 25px;
clip-path: polygon(0 0, 100% 0, 81% 50%, 100% 99%, 0 100%, 0% 50%);
}
}
}
}
}
}
}
@media (max-width: 1199px) {
.company__history {
&-area {
&-items {
&-left-content {
padding: 39px 30px;
padding-bottom: 37px;
}
&-right {
img {
max-width: 398px;
}
}
}
&-item {
&-left {
padding-right: 70px;
img {
max-width: 397px;
}
}
&-right-content {
padding: 39px 30px;
padding-bottom: 37px;
}
}
}
}
}
@media (max-width: 991px) {
.company__history {
&-area {
&-items {
display: grid;
&-left {
padding: 0;
margin: 0;
border: 0;
&-content {
margin-top: 40px;
&::before {
display: none;
}
&::after {
left: 35px;
top: -10px;
transform: rotate(-135deg);
}
}
}
&-right {
img {
max-width: 100%;
width: 100%;
}
}
}
&-item {
display: block;
&-left {
padding: 0;
margin: 0;
border: 0;
img {
max-width: 100%;
width: 100%;
}
}
&-right-content {
margin-top: 40px;
&::before {
display: none;
}
&::after {
left: 35px;
top: -10px;
transform: rotate(45deg);
}
}
}
}
}
}
@media (max-width: 510px) {
.about__company-left {
&-image {
gap: 15px;
}
&-experience {
left: 17%;
bottom: 10px;
width: 160px;
height: 150px;
padding: 27px 25px;
}
}
.company__two-left-skill {
margin-top: 30px;
margin-bottom: 35px;
display: block;
&-item {
margin-bottom: 15px;
&:last-child {
margin: 0;
}
}
}
}
@media (max-width: 420px) {
.company__history-area-item-right-content,
.company__history-area-items-left-content {
padding: 35px 25px;
&-date {
h5 {
font-size: 19px;
line-height: 29px;
}
span {
font-size: 16px;
line-height: 16px;
padding-left: 15px;
padding-right: 20px;
clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 99%, 0 100%, 0% 50%);
}
}
}
}
@media (max-width: 359px) {
.company__history-area-item-right-content,
.company__history-area-items-left-content {
padding: 30px 20px;
&-date {
h5 {
font-size: 17px;
line-height: 27px;
}
span {
font-size: 14px;
line-height: 14px;
}
}
}
}

432
public/assets/sass/section/_about.scss Normal file
View File

@ -0,0 +1,432 @@
/*==========================================================================
About One CSS
==========================================================================*/
.about__one {
position: relative;
&-shape {
&-1 {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
&-2 {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
}
&-left {
position: relative;
&-image {
display: flex;
align-items: start;
gap: 20px;
img {
width: 100%;
}
.two {
min-height: 570px;
object-fit: cover;
}
}
&-experience {
position: absolute;
left: 70px;
bottom: 0;
background: var(--primary-color-1);
width: 244px;
height: 225px;
padding: 50px;
h1 {
color: var(--text-white);
font-size: 60px;
line-height: 70px;
margin-bottom: 10px;
}
h6 {
color: var(--text-white);
font-size: 18px;
line-height: 28px;
}
}
}
&-right {
margin-left: 95px;
&-title {
margin-bottom: 45px;
h2 {
margin-bottom: 30px;
max-width: 430px;
}
}
&-btn {
display: flex;
align-items: center;
gap: 30px;
&-author {
display: flex;
align-items: center;
gap: 30px;
&-avatar {
img {
border-radius: 50%;
max-width: 60px;
width: 60px;
height: 60px;
object-fit: cover;
}
}
&-name {
h6 {
color: var(--color-2);
font-weight: 400;
font-size: 14px;
line-height: 24px;
}
}
}
}
&-bottom {
margin-top: 50px;
display: flex;
align-items: center;
gap: 80px;
&-list {
span {
display: block;
font-weight: 600;
font-family: var(--heading-font);
margin-bottom: 10px;
&:last-child {
margin: 0;
}
i {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary-color-1);
border: 1px solid var(--primary-color-1);
font-size: 12px;
border-radius: 50%;
margin-right: 10px;
}
}
}
&-experience {
width: 140px;
height: 130px;
background: var(--bg-heading-color);
text-align: center;
display: block;
padding: 25px 0;
h3 {
font-size: 40px;
color: var(--text-white);
margin-bottom: 10px;
}
h6 {
font-size: 14px;
line-height: 20px;
color: var(--text-white);
}
}
}
}
}
/*==========================================================================
About Two CSS
==========================================================================*/
.about__two {
position: relative;
z-index: 1;
&-shape {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
&-right {
&-title {
margin-bottom: 45px;
h2 {
margin-bottom: 30px;
}
p {
max-width: 493px;
}
}
&-btn {
display: flex;
align-items: center;
gap: 30px;
margin-top: 55px;
&-author {
display: flex;
align-items: center;
gap: 30px;
&-avatar {
img {
border-radius: 50%;
max-width: 60px;
width: 60px;
height: 60px;
object-fit: cover;
}
}
&-name {
h6 {
color: var(--color-2);
font-weight: 400;
font-size: 14px;
line-height: 24px;
}
}
}
.btn-six {
&::before {
background: var(--primary-color-2);
}
&:hover {
color: var(--text-white);
border-color: var(--primary-color-2);
}
}
}
&-experience {
display: flex;
align-items: center;
&-counter {
padding-right: 40px;
margin-right: 40px;
border-right: 1px solid var(--border-color-2);
}
h6 {
max-width: 187px;
}
}
}
}
/*==========================================================================
About Three CSS
==========================================================================*/
.about__three {
overflow: hidden;
&-title {
h2 {
margin-bottom: 30px;
}
p {
max-width: 520px;
margin-bottom: 38px;
}
&-faq {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 50px;
&-icon {
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
border: 1px solid var(--border-color-1);
}
&-text {
span {
font-weight: 500;
}
h6 {
color: var(--primary-color-3);
font-size: 18px;
line-height: 28px;
a {
margin-left: 15px;
}
}
}
}
}
&-right {
position: relative;
&-image {
&-one {
text-align: center;
}
&-two {
margin-top: -70px;
margin-left: 40px;
}
}
&-content {
position: absolute;
right: 0;
bottom: 35px;
background: var(--bg-heading-color);
display: inline-block;
padding: 40px;
padding-bottom: 60px;
clip-path: polygon(0 0, 100% 0%, 100% 88%, 0% 100%);
&-counter {
background: var(--primary-color-3);
text-align: center;
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 30px;
position: relative;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 150px;
height: 150px;
border: 1px dashed var(--primary-color-3);
border-radius: 50%;
display: block;
top: 18px;
left: 10px;
z-index: -1;
animation: rotation 10s infinite linear;
}
h1 {
font-size: 50px;
line-height: 70px;
color: var(--text-white);
padding: 40px 0;
}
}
p {
width: 162px;
color: var(--text-white);
}
}
}
}
@media (max-width: 1399px) {
.about__one {
&-left {
&-image {
.one {
max-width: 43%;
}
.two {
min-height: 530px;
overflow: hidden;
}
}
}
&-right {
margin-left: 30px;
&-title {
margin-bottom: 38px;
h2 {
margin-bottom: 23px;
}
}
&-bottom {
margin-top: 43px;
}
}
}
}
@media (max-width: 1199px) {
.about__one {
&-left {
&-image {
.one {
max-width: 43%;
}
.two {
min-height: 530px;
}
}
}
&-right {
margin-left: 0;
&-btn {
gap: 25px;
& .btn-one {
padding: 17px 35px;
}
&-author {
gap: 20px;
}
}
&-bottom {
gap: 40px;
}
}
}
}
@media (max-width: 475px) {
.about__one {
&-left {
&-image {
gap: 20px;
.two {
min-height: 350px;
object-fit: cover;
}
}
&-experience {
left: 10px;
h1 {
font-size: 50px;
line-height: 60px;
}
}
}
&-right {
&-btn {
display: block;
&-author {
margin-top: 30px;
}
}
&-bottom {
display: block;
&-experience {
margin-top: 30px;
}
}
}
}
.about__two {
&-right {
&-title {
margin-bottom: 22px;
}
&-btn {
display: block;
margin-top: 20px;
&-author {
margin-top: 30px;
}
}
&-experience {
display: block;
align-items: center;
&-counter {
padding: 0;
margin: 0;
border: 0;
}
}
}
}
}
@media (max-width: 390px) {
.about__three-right-content {
bottom: 0;
}
}
@media (max-width: 359px) {
.about__three-right-image-two {
margin: 0;
}
}

477
public/assets/sass/section/_all-sidebar.scss Normal file
View File

@ -0,0 +1,477 @@
/*==========================================================================
All Side Bar CSS
==========================================================================*/
.all__sidebar {
position: sticky;
top: 140px;
&-item {
padding: 40px;
background: var(--color-6);
border: 1px solid var(--border-color-4);
margin-bottom: 30px;
&:last-child {
margin: 0;
}
h4 {
margin-bottom: 30px;
}
&-search {
form {
display: flex;
position: relative;
input {
border-color: var(--bg-white);
}
button {
padding: 0;
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
border-radius: 0 6px 6px 0;
}
}
}
&-post {
.post__item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color-3);
&:last-child {
margin: 0;
padding: 0;
border: 0;
}
}
.post__item-image img {
width: 90px;
height: 90px;
max-width: 90px;
border-radius: 0;
}
.post__item-title h6 a {
color: var(--text-heading-color);
&:hover {
color: var(--primary-color-1);
}
}
.post__item-title span {
color: var(--color-2);
i {
color: var(--primary-color-1);
}
}
}
&-tag {
ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
li {
display: inline-block;
list-style: none;
a {
transition: 0.4s;
border: 1px solid var(--border-color-3);
padding: 4px 20px 5px 20px;
display: inline-block;
font-weight: 500;
font-size: 15px;
line-height: 25px;
border-radius: 4px;
&:hover {
color: var(--text-white);
background: var(--primary-color-1);
border-color: var(--primary-color-1);
}
}
}
}
}
&-solution {
ul {
padding: 0;
margin: 0;
li {
list-style: none;
.active {
color: var(--text-white);
background: var(--primary-color-1);
border-color: var(--primary-color-1);
padding-left: 20px;
i {
opacity: 1;
margin-left: 0;
}
}
a {
display: block;
transition: all 0.4s ease-out 0s;
font-weight: 700;
font-size: 16px;
line-height: 26px;
padding: 16px 20px;
padding-left: 0;
border-bottom: 1px solid var(--border-color-3);
overflow: hidden;
border-radius: 6px;
i {
font-size: 14px;
margin-right: 10px;
opacity: 0;
margin-left: -20px;
transition: all 0.4s ease-out 0s;
}
span {
float: right;
position: relative;
top: 5px;
font-weight: 600;
font-size: 16px;
line-height: 16px;
}
&:hover {
color: var(--text-white);
background: var(--primary-color-1);
border-color: var(--primary-color-1);
padding-left: 20px;
i {
opacity: 1;
margin-left: 0;
}
}
}
&:last-child a {
margin-bottom: 0;
}
}
}
}
&-download {
ul {
padding: 0;
margin: 0;
li {
list-style: none;
a {
transition: 0.4s;
display: flex;
align-items: center;
font-size: 16px;
line-height: 26px;
margin-bottom: 10px;
background: var(--bg-white);
padding: 15px 20px;
border-radius: 6px;
justify-content: space-between;
color: var(--text-heading-color);
font-weight: 500;
> div {
display: flex;
align-items: center;
}
span {
float: right;
width: 30px;
height: 30px;
line-height: 30px;
background: var(--primary-color-1);
text-align: center;
border-radius: 4px;
color: var(--text-white);
}
i {
margin-right: 18px;
padding-right: 10px;
border-right: 1px solid var(--border-color-1);
color: var(--primary-color-1);
font-size: 25px;
}
&:hover {
color: var(--primary-color-1);
}
}
&:last-child a {
margin: 0;
}
}
}
}
}
&-help {
&-image-content {
box-shadow: var(--box-shadow-1);
padding: 30px;
margin: 0 40px;
margin-top: -190px;
background: var(--bg-white);
position: relative;
text-align: center;
h4 {
margin-top: 6px;
margin-bottom: 26px;
}
}
}
&-contact {
position: relative;
z-index: 1;
text-align: center;
overflow: hidden;
&-content {
position: absolute;
bottom: 0;
left: 0;
padding: 40px;
padding-bottom: 50px;
width: 100%;
z-index: 1;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
background: var(--primary-color-1);
clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
height: 100%;
z-index: -1;
}
&::after {
content: '';
position: absolute;
height: 200px;
width: 200px;
right: -80px;
bottom: -80px;
background: rgba(255, 255, 255, 0.09);
border-radius: 50%;
}
&-icon {
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
background: var(--bg-white);
margin: 0 auto;
margin-bottom: 45px;
}
h3 {
color: var(--text-white);
margin-bottom: 10px;
}
.simple-btn-2 {
color: var(--text-white);
}
}
}
}
/*==========================================================================
Post CSS
==========================================================================*/
.post__item {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
&-image {
img {
width: 80px;
height: 80px;
max-width: 80px;
object-fit: cover;
border-radius: 50%;
}
}
&-title {
span {
color: var(--color-9);
font-weight: 500;
font-size: 14px;
line-height: 14px;
i {
color: var(--primary-color-2);
margin-right: 10px;
font-size: 16px;
}
}
h6 {
font-size: 18px;
line-height: 28px;
max-width: 234px;
a {
color: var(--text-white);
transition: 0.4s;
&:hover {
color: var(--primary-color-2);
}
}
}
}
}
/*==========================================================================
Theme Pagination CSS
==========================================================================*/
.theme__pagination {
ul {
margin: 0;
padding: 0;
margin-left: -5px;
li {
list-style: none;
display: inline-block;
margin: 5px;
.active {
background: var(--primary-color-1);
color: var(--text-white);
border-color: var(--primary-color-1);
}
span {
font-family: var(--heading-font);
border: 1px solid var(--border-color-1);
display: block;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-weight: 700;
font-size: 16px;
transition: 0.4s;
cursor: pointer;
&:hover {
background: var(--primary-color-1);
color: var(--text-white);
border-color: var(--primary-color-1);
}
i {
font-size: 14px;
}
}
}
}
}
@media (max-width: 1399px) {
.all__sidebar {
&-item {
padding: 35px 30px;
&-post {
.post__item {
gap: 20px;
&-image img {
width: 85px;
height: 85px;
max-width: 85px;
}
.post__item-title h6 {
font-size: 17px;
}
}
}
&-tag ul li a {
padding: 4px 15px 5px 15px;
}
}
&-contact-content {
padding: 40px 30px;
padding-bottom: 50px;
}
&-help {
&-image-content {
margin: 0 25px;
margin-top: -170px;
}
}
}
}
@media (max-width: 1199px) {
.all__sidebar {
&-item {
padding: 35px 25px;
&-solution {
ul {
li {
list-style: none;
.active {
padding-left: 15px;
}
a {
padding: 16px 15px;
i {
margin-right: 8px;
margin-left: -15px;
}
&:hover {
padding-left: 15px;
}
}
}
}
}
&-post {
.post__item {
gap: 15px;
&-image img {
width: 70px;
height: 70px;
max-width: 70px;
}
.post__item-title h6 {
font-size: 16px;
}
}
}
&-tag ul li a {
padding: 4px 10px 5px 10px;
}
&-download {
ul {
li {
a {
padding: 15px;
i {
width: 28px;
height: 28px;
line-height: 28px;
font-size: 14px;
}
img {
margin-right: 10px;
}
}
}
}
}
}
&-contact-content {
padding: 40px 25px;
padding-bottom: 50px;
&-icon {
margin-bottom: 35px;
}
h3 {
font-size: 27px;
line-height: 37px;
}
}
&-help {
&-image-content {
padding: 30px 20px;
}
}
}
.post__item {
gap: 20px;
}
.post__item-title h6 {
font-size: 17px;
line-height: 27px;
}
}

23
public/assets/sass/section/_all.scss Normal file
View File

@ -0,0 +1,23 @@
@import'topbar';
@import'header';
@import'banner';
@import'about';
@import'about-page';
@import'features';
@import'services';
@import'cta';
@import'pricing';
@import'team';
@import'testimonial';
@import'chooseUs';
@import'faq';
@import'project';
@import'solution';
@import'experience';
@import'subscribe';
@import'blog';
@import'contact';
@import'footer';
@import'copyright';
@import'all-sidebar';
@import'page';

718
public/assets/sass/section/_banner.scss Normal file
View File

@ -0,0 +1,718 @@
/*==========================================================================
Banner One CSS
==========================================================================*/
.banner__one {
position: relative;
z-index: 1;
&-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
&::after {
content: '';
position: absolute;
background-image: url('../../assets/img/shape/banner-bg.png');
background-repeat: no-repeat;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
}
&-content {
position: relative;
z-index: 9;
text-align: left;
padding-bottom: 185px;
padding-top: 180px;
max-width: 740px;
> span {
font-family: var(--heading-font);
display: block;
color: var(--primary-color-1);
font-weight: 700;
font-size: 20px;
line-height: 26px;
margin-bottom: 15px;
}
h1 {
color: var(--text-white);
font-size: 100px;
line-height: 110px;
margin-bottom: 40px;
max-width: 650px;
}
&-video-icon i {
background: var(--text-white);
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
color: var(--primary-color-1);
cursor: pointer;
}
&-button {
display: flex;
&-item {
margin-right: 30px;
.btn-one {
&::before {
background: var(--btn-white);
}
&:hover {
color: var(--primary-color-1);
}
}
&:last-child {
margin: 0;
}
}
}
&-icon {
position: absolute;
bottom: 160px;
right: 140px;
z-index: -1;
img {
max-width: 260px;
}
}
}
&-pagination {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
z-index: 1;
.area {
position: relative;
left: -90px;
}
}
.banner_pagination {
display: grid;
z-index: 99;
.swiper-pagination-bullet {
border-radius: 50%;
background: var(--primary-color-1);
width: 8px;
height: 8px;
transition: all 0.4s ease-out 0s;
opacity: 1;
margin: 0;
margin-top: 20px;
position: relative;
&::after {
position: absolute;
content: '';
width: 24px;
height: 24px;
border: 1px solid var(--primary-color-1);
top: 50%;
border-radius: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
&-active {
&::after {
opacity: 1;
}
}
}
}
}
/*==========================================================================
Banner Two CSS
==========================================================================*/
.banner__two {
position: relative;
&-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
&::before {
content: '';
position: absolute;
background: var(--bg-heading-color);
width: 100%;
height: 100%;
opacity: 0.6;
left: 0;
top: 0;
z-index: -1;
}
&-shape {
&-one {
position: absolute;
left: -60px;
bottom: 130px;
}
&-two {
position: absolute;
right: 0;
bottom: 0;
}
}
}
&-content {
position: relative;
text-align: center;
padding: 220px 0;
.subtitle {
position: absolute;
left: 50%;
top: 23%;
transform: translateX(-50%);
text-transform: uppercase;
font-weight: 700;
font-size: 250px;
line-height: 200px;
font-family: var(--heading-font);
font-style: normal;
opacity: 0.20;
color: var(--text-white);
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
z-index: -1;
}
> span {
color: var(--primary-color-2);
font-weight: 700;
font-size: 20px;
line-height: 28px;
font-family: var(--heading-font);
margin-bottom: 15px;
display: inline-block;
}
h1 {
color: var(--text-white);
font-size: 90px;
line-height: 100px;
max-width: 1020px;
margin: 0 auto;
margin-bottom: 45px;
}
}
&-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
display: flex;
justify-content: space-between;
&-next,
&-prev {
position: relative;
left: 140px;
i {
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
background: var(--primary-color-2);
font-size: 22px;
color: var(--text-white);
border-radius: 50%;
transition: 0.4s;
cursor: pointer;
&:hover {
background: var(--bg-white);
color: var(--text-heading-color);
}
}
}
&-next {
left: initial;
right: 140px;
}
}
}
/*==========================================================================
Banner Three CSS
==========================================================================*/
.banner__three {
position: relative;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 250px;
padding-bottom: 180px;
overflow: hidden;
&-title {
position: relative;
> span {
color: var(--primary-color-3);
font-weight: 700;
font-size: 20px;
line-height: 30px;
font-family: var(--heading-font);
display: block;
margin-bottom: 8px;
}
h1 {
margin-bottom: 20px;
}
p {
max-width: 505px;
}
&-bottom {
margin-top: 40px;
display: flex;
align-items: center;
gap: 30px;
&-video {
display: flex;
align-items: center;
gap: 20px;
&-icon {
position: relative;
z-index: 1;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px dashed var(--primary-color-3);
width: 60px;
height: 60px;
border-radius: 50%;
z-index: -1;
animation: rotation 5s infinite linear;
}
i {
color: var(--primary-color-3);
text-align: center;
width: 60px;
height: 60px;
line-height: 60px;
cursor: pointer;
}
&:hover {
&::after {
animation: none;
}
}
}
h6 {
font-weight: 600;
font-size: 16px;
line-height: 26px;
max-width: 125px;
}
}
}
}
& .banner_pagination {
position: absolute;
left: -110px;
top: 57%;
transform: translateY(-50%);
z-index: -1;
span {
width: 6px;
height: 6px;
background: var(--primary-color-3);
opacity: 1;
display: block;
}
.swiper-pagination-bullet {
margin: 0;
margin-bottom: 18px;
position: relative;
margin-left: 9px;
&-active {
background: none;
border: 1px solid var(--primary-color-3);
width: 24px;
height: 24px;
margin-left: 0;
&::before {
content: '';
position: absolute;
bottom: -3px;
left: -3px;
background-image: url('../../assets/img/shape/border.png');
width: 28px;
height: 21px;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
&-image {
text-align: right;
margin-right: -750px;
}
}
.banner__two,
.banner__one {
.banner__two-content > span,
.banner__two-content h1,
.banner__two-content-button,
.banner__one-content > span,
.banner__one-content h1,
.banner__one-content-button {
animation-name: fadeInUp;
animation-fill-mode: both
}
.banner__two-image-shape-one {
animation-name: rollIn;
animation-fill-mode: both
}
.banner__two-image-shape-two {
animation-name: fadeInRightBig;
animation-fill-mode: both
}
.swiper-slide-active {
.banner__two-content > span,
.banner__one-content > span {
animation-delay: .5s;
animation-duration: 1.2s;
}
.banner__two-content h1,
.banner__one-content h1 {
animation-delay: 1s;
animation-duration: 1.2s;
}
.banner__two-content-button,
.banner__one-content-button {
animation-delay: 1.5s;
animation-duration: 1.2s;
}
.banner__two-image-shape-one {
animation-delay: 2s;
animation-duration: 1s;
}
.banner__two-image-shape-two {
animation-delay: 1.3s;
animation-duration: 1s;
}
}
}
@media (max-width: 1599px) {
.banner__two {
&-arrow {
&-prev {
left: 35px;
}
&-next {
right: 65px;
}
}
}
.banner__three .banner_pagination {
left: -50px;
}
}
@media (max-width: 1399px) {
.banner__two {
&-content {
padding: 150px 0;
h1 {
font-size: 80px;
line-height: 90px;
margin-bottom: 40px;
}
}
}
.banner__three {
&-title {
h1 {
font-size: 64px;
line-height: 74px;
}
}
}
}
@media (max-width: 991px) {
.banner__two {
&-content {
h1 {
font-size: 64px;
line-height: 74px;
}
.subtitle {
top: 15%;
font-size: 180px;
}
}
}
.banner__three {
padding-top: 270px;
&-image {
margin-right: 0;
}
}
}
@media (max-width: 767px) {
.banner__two {
&-content {
h1 {
font-size: 47px;
line-height: 57px;
margin-bottom: 30px;
}
.subtitle {
font-size: 140px;
}
}
}
.banner__three {
&-image {
margin: 0;
}
&-title {
text-align: center;
p {
margin: 0 auto;
}
&-bottom {
justify-content: center;
&-video {
justify-content: center;
h6 {
text-align: left;
}
}
}
}
.banner_pagination {
position: initial;
margin-top: 35px;
transform: initial;
span {
display: inline-block;
}
.swiper-pagination-bullet {
margin: 0;
margin-right: 18px;
margin-bottom: 9px;
&-active {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 9px;
}
}
&:last-child .swiper-pagination-bullet-active {
margin-bottom: 0;
}
}
}
}
@media (max-width: 535px) {
.banner__two {
&-arrow {
&-prev {
left: 12px;
i {
width: 50px;
height: 50px;
line-height: 50px;
}
}
&-next {
right: 36px;
i {
width: 50px;
height: 50px;
line-height: 50px;
}
}
}
.subtitle {
top: 13%;
font-size: 90px;
}
}
}
@media (max-width: 480px) {
.banner__two {
&-content {
h1 {
font-size: 38px;
line-height: 48px;
}
}
&-image-shape-one {
bottom: 56%;
z-index: -1;
}
}
.banner__three {
&-title {
h1 {
font-size: 48px;
line-height: 58px;
margin-bottom: 10px;
}
&-bottom {
margin-top: 30px;
display: block;
&-btn {
margin-bottom: 30px;
}
}
}
}
}
@media (max-width: 380px) {
.banner__three {
padding-top: 300px;
}
}
@media (max-width: 359px) {
.banner__two {
&-content {
h1 {
font-size: 32px;
line-height: 42px;
}
}
}
.banner__three {
padding-top: 330px;
&-title {
h1 {
font-size: 42px;
line-height: 52px;
}
}
}
}
/*==========================================================================
Banner Four CSS
==========================================================================*/
@media (max-width: 1599px) {
.banner__one {
&-image {
&::after {
left: -160px;
}
}
}
.banner__two {
&-arrow {
&-prev {
left: 35px;
}
&-next {
right: 65px;
}
}
}
.banner__three .banner_pagination {
left: -50px;
}
}
@media (max-width: 1399px) {
.banner__one {
&-image {
&::after {
left: -200px;
}
}
&-content {
padding-bottom: 145px;
padding-top: 140px;
h1 {
font-size: 80px;
line-height: 90px;
max-width: 580px;
margin-bottom: 25px;
}
p {
margin-bottom: 40px;
}
}
}
}
@media (max-width: 1099px) {
.banner__one {
&-image {
&::after {
left: -320px;
width: 110%;
}
}
.banner__one-pagination {
display: none;
}
}
}
@media (max-width: 991px) {
.banner__one {
&-image {
&::after {
left: 0;
width: 100%;
background: var(--bg-heading-color);
}
}
}
}
@media (max-width: 767px) {
.banner__one {
&-content {
text-align: center;
h1 {
font-size: 72px;
line-height: 82px;
}
&-button {
justify-content: center;
}
}
}
}
@media (max-width: 535px) {
.banner__one {
&-content {
h1 {
font-size: 65px;
line-height: 75px;
}
}
}
}
@media (max-width: 480px) {
.banner__one {
&-content {
h1 {
font-size: 47px;
line-height: 57px;
}
&-button {
display: initial;
&-item {
margin-right: 0;
margin-bottom: 30px;
}
}
}
}
}
@media (max-width: 359px) {
.banner__one {
&-content {
h1 {
font-size: 41px;
line-height: 51px;
}
}
}
}

858
public/assets/sass/section/_blog.scss Normal file
View File

@ -0,0 +1,858 @@
/*==========================================================================
Blog One CSS
==========================================================================*/
.blog__one {
&-item {
position: relative;
z-index: 2;
&-image {
position: relative;
z-index: 1;
overflow: hidden;
&::before {
position: absolute;
top: 0;
left: -75%;
z-index: 0;
display: block;
content: '';
width: 30%;
height: 100%;
transform: skewX(-25deg);
background: var(--text-white);
opacity: 0.4;
z-index: 1;
}
img {
width: 100%;
transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
&:hover {
transform: scale3d(1.1, 1.1, 1.1);
}
}
&-date {
position: absolute;
right: 30px;
bottom: 30px;
background: var(--primary-color-1);
display: inline-block;
border-radius: 6px;
padding: 10px 16px;
text-align: center;
span {
color: var(--text-white);
display: block;
}
.text-three {
font-size: 24px;
line-height: 24px;
font-weight: 700;
position: relative;
padding-bottom: 6px;
margin-bottom: 6px;
&::before {
position: absolute;
content: '';
left: 50%;
transform: translateX(-50%);
bottom: 0;
background: var(--text-white);
opacity: 0.2;
width: 30px;
height: 2px;
}
}
.text-five {
font-size: 14px;
line-height: 14px;
text-transform: uppercase;
font-weight: 600;
}
}
}
&-content {
padding: 17px 40px 40px 40px;
border: 1px solid var(--color-10);
border-top: 0;
transition: 0.4s;
&-meta {
border-bottom: 1px solid var(--color-10);
padding-bottom: 16px;
margin-bottom: 15px;
ul {
padding: 0;
margin: 0;
li {
padding: 0;
display: inline-block;
list-style: none;
padding-right: 30px;
margin-right: 30px;
border-right: 1px solid var(--color-10);
color: var(--color-2);
font-weight: 600;
font-size: 16px;
line-height: 26px;
font-family: var(--heading-font);
&:last-child {
margin: 0;
padding: 0;
border: 0;
}
a {
transition: 0.4s;
i {
color: var(--primary-color-1);
margin-right: 10px;
font-size: 18px;
}
&:hover {
color: var(--primary-color-1);
}
}
}
}
}
h4 {
margin-bottom: 15px;
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
}
}
&:hover {
.blog__one-item {
&-image::before {
animation: animation 0.95s;
}
&-content {
box-shadow: var(--box-shadow-1);
}
}
}
}
.btn-two {
background: var(--bg-white);
color: var(--text-heading-color);
&:hover {
color: var(--text-white);
}
}
}
/*==========================================================================
Blog Two CSS
==========================================================================*/
.blog__two {
.btn-six {
&::before {
background: var(--primary-color-2);
}
&:hover {
color: var(--text-white);
border-color: var(--primary-color-2);
}
}
&-item {
position: relative;
z-index: 2;
&-image {
position: relative;
z-index: 1;
overflow: hidden;
&::before {
position: absolute;
top: 0;
left: -75%;
z-index: 0;
display: block;
content: '';
width: 30%;
height: 100%;
transform: skewX(-25deg);
background: var(--text-white);
opacity: 0.4;
z-index: 1;
}
img {
width: 100%;
transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
transform: scale(1.02);
&:hover {
transform: scale3d(1.1, 1.1, 1.1);
}
}
&-date {
position: absolute;
left: 40px;
bottom: 30px;
background: var(--primary-color-2);
display: inline-block;
border-radius: 6px;
padding: 13px 20px 10px 20px;
text-align: center;
span {
color: var(--text-white);
}
.text-three {
font-size: 24px;
line-height: 24px;
font-weight: 700;
position: relative;
margin-right: 10px;
padding-right: 15px;
&::before {
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
right: 0;
background: var(--text-white);
opacity: 0.4;
width: 1px;
height: 20px;
}
}
.text-five {
font-size: 14px;
line-height: 14px;
text-transform: uppercase;
font-weight: 600;
position: relative;
bottom: 3px;
}
}
}
&-content {
padding: 17px 40px 40px 40px;
background: var(--bg-white);
box-shadow: var(--box-shadow-1);
&-meta {
border-bottom: 1px solid var(--color-10);
padding-bottom: 16px;
margin-bottom: 15px;
ul {
padding: 0;
margin: 0;
li {
padding: 0;
display: inline-block;
list-style: none;
padding-right: 30px;
margin-right: 30px;
border-right: 1px solid var(--color-10);
color: var(--color-2);
font-weight: 600;
font-size: 16px;
line-height: 26px;
font-family: var(--heading-font);
&:last-child {
margin: 0;
padding: 0;
border: 0;
}
a {
transition: 0.4s;
i {
color: var(--primary-color-2);
margin-right: 10px;
font-size: 18px;
}
&:hover {
color: var(--primary-color-2);
}
}
}
}
}
h4 {
margin-bottom: 15px;
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-2);
}
}
}
.btn-six {
margin-top: 15px;
border-color: var(--color-4);
color: var(--text-heading-color);
font-size: 14px;
line-height: 24px;
border-radius: 22px;
padding: 9px 24px 8px 24px;
&::before {
background: var(--primary-color-2);
}
&:hover {
color: var(--text-white);
border-color: var(--primary-color-2);
}
}
}
&:hover {
.blog__two-item-image::before {
animation: animation 0.95s;
}
}
&.page {
.blog__two-item {
&-image-date {
background: var(--primary-color-1);
}
&-content {
&-meta ul li a {
i {
color: var(--primary-color-1);
}
&:hover {
color: var(--primary-color-1);
}
}
h4 a:hover {
color: var(--primary-color-1);
}
.btn-six {
&::before {
background: var(--primary-color-1);
}
&:hover {
border-color: var(--primary-color-1);
}
}
}
}
}
}
}
/*==========================================================================
Blog Three CSS
==========================================================================*/
.blog__three {
&-item {
position: relative;
z-index: 2;
&-image {
position: relative;
z-index: 1;
overflow: hidden;
&::before {
position: absolute;
top: 0;
left: -75%;
z-index: 0;
display: block;
content: '';
width: 30%;
height: 100%;
transform: skewX(-25deg);
background: var(--text-white);
opacity: 0.4;
z-index: 1;
}
img {
width: 100%;
transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
&:hover {
transform: scale3d(1.1, 1.1, 1.1);
}
}
}
&-content {
padding: 20px 30px 30px 30px;
background: var(--bg-white);
box-shadow: var(--box-shadow-1);
margin: 0 30px;
border-radius: 4px;
margin-top: -80px;
margin-bottom: 49px;
position: relative;
transition: 0.6s;
z-index: 1;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 80px;
width: 4px;
background: var(--primary-color-3);
border-radius: 6px 0px 0px 0px;
transition: 0.6s;
}
&-meta {
border-bottom: 1px solid var(--color-10);
padding-bottom: 16px;
margin-bottom: 17px;
ul {
padding: 0;
margin: 0;
li {
padding: 0;
display: inline-block;
list-style: none;
margin-right: 30px;
color: var(--color-2);
font-weight: 600;
font-size: 16px;
line-height: 26px;
font-family: var(--heading-font);
&:last-child {
margin: 0;
}
a {
transition: 0.4s;
i {
color: var(--primary-color-3);
margin-right: 10px;
font-size: 18px;
}
&:hover {
color: var(--primary-color-3);
}
}
}
}
}
h4 {
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-3);
}
}
}
&-btn {
margin-top: -28px;
opacity: 0;
position: relative;
z-index: -1;
transition: 0.6s;
.simple-btn-1 {
color: var(--primary-color-3);
&:hover {
color: var(--text-heading-color);
}
}
}
}
&:hover {
.blog__three-item {
&-image::before {
animation: animation 0.95s;
}
}
}
&.blog__three-item-hover {
.blog__three-item {
&-content {
margin-bottom: 0;
&::after {
height: 100%;
border-radius: 6px 0px 0px 6px;
}
&-btn {
opacity: 1;
margin-top: 20px;
z-index: 1;
}
}
}
}
}
}
/*==========================================================================
News Details CSS
==========================================================================*/
.blog__details {
&-left {
&-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--border-color-1);
flex-wrap: wrap;
column-gap: 20px;
row-gap: 5px;
&-content {
h6 {
font-size: 18px;
line-height: 28px;
font-weight: 700;
}
}
.author {
gap: 15px;
display: flex;
align-items: center;
&-avatar img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
&-info {
span {
font-size: 14px;
line-height: 24px;
font-weight: 500;
}
h6 {
font-size: 18px;
line-height: 28px;
font-weight: 700;
}
}
}
}
&-box {
background: var(--color-6);
border: 1px solid var(--border-color-4);
padding: 45px;
display: flex;
gap: 30px;
margin: 30px 0;
i {
font-size: 64px;
color: var(--primary-color-1);
}
h5 {
font-family: var(--theme-font-1);
font-weight: 500;
margin-bottom: 20px;
}
}
&-tag {
display: flex;
align-items: center;
column-gap: 30px;
row-gap: 20px;
margin-top: 30px;
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border-color-1);
flex-wrap: wrap;
h6 {
font-size: 20px;
line-height: 30px;
}
}
&-author {
background: var(--color-6);
border: 1px solid var(--border-color-4);
padding: 45px;
display: flex;
gap: 25px;
&-image {
width: 120px;
height: 120px;
min-width: 120px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
}
.social__icon ul {
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
li {
list-style: none;
a i {
width: 35px;
height: 35px;
font-size: 14px;
background: var(--bg-white);
color: var(--text-heading-color);
transition: 0.4s;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
&:hover {
color: var(--text-white);
background: var(--primary-color-1);
}
}
}
}
}
&-comment {
&-item {
padding-bottom: 25px;
margin-bottom: 30px;
border-bottom: 1px solid var(--border-color-1);
&-comment {
&-image {
float: left;
img {
min-width: 80px;
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
}
&-content {
padding-left: 30px;
overflow: hidden;
span {
font-size: 14px;
margin-bottom: 5px;
display: inline-block;
}
h6 {
font-size: 18px;
line-height: 28px;
a {
float: right;
transition: 0.4s;
font-family: var(--heading-font);
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 24px;
color: var(--text-heading-color);
border: 1px solid var(--border-color-1);
padding: 7px 18px;
border-radius: 4px;
i {
margin-right: 10px;
}
&:hover {
color: var(--text-white);
background: var(--primary-color-1);
border-color: var(--primary-color-1);
}
}
}
p {
max-width: 580px;
margin-bottom: 0;
}
}
}
}
}
&-contact {
h5 {
margin-bottom: 5px;
}
}
}
}
/*==========================================================================
News Standard CSS
========================================================================== */
.news__standard {
&-left {
&-item {
&-image {
position: relative;
z-index: 1;
overflow: hidden;
&::before {
position: absolute;
top: 0;
left: -75%;
z-index: 0;
display: block;
content: '';
width: 30%;
height: 100%;
transform: skewX(-25deg);
background: var(--text-white);
opacity: 0.4;
z-index: 1;
}
img {
width: 100%;
transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
&:hover {
transform: scale3d(1.1, 1.1, 1.1);
}
}
&:hover {
&::before {
animation: animation 0.95s;
}
}
}
&-content {
padding: 40px;
box-shadow: var(--box-shadow-1);
&-meta {
margin-bottom: 15px;
ul {
padding: 0;
margin: 0;
li {
display: inline-block;
margin-right: 30px;
list-style: none;
&:last-child {
margin: 0;
}
a {
transition: 0.4s;
i {
color: var(--primary-color-1);
margin-right: 10px;
}
&:hover {
color: var(--primary-color-1);
}
}
}
}
}
h3 a {
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
p {
margin-bottom: 35px;
}
}
}
}
}
@media (max-width: 1399px) {
.blog__one {
&-item {
&-content {
padding: 17px 30px 30px 30px;
&-meta {
ul {
li {
padding-right: 20px;
margin-right: 20px;
}
}
}
}
}
}
.blog__three {
&-item {
&-content {
margin: 0 20px;
margin-top: -80px;
margin-bottom: 49px;
&-meta {
ul {
li {
margin-right: 20px;
}
}
}
}
}
}
.blog__two {
&-item {
&-content {
padding: 17px 30px 30px 30px;
&-meta {
ul {
li {
padding-right: 20px;
margin-right: 20px;
}
}
}
}
}
}
}
@media (max-width: 1199px) {
.news__standard {
&-left-item-content {
padding: 40px 30px;
h3 {
font-size: 28px;
line-height: 38px;
}
}
}
}
@media (max-width: 575px) {
.blog__three-item-content {
margin: 0 10px;
margin-top: -80px;
margin-bottom: 49px;
}
.news__standard {
&-left-item-content {
padding: 30px 25px;
h3 {
font-size: 22px;
line-height: 32px;
}
&-meta ul li {
margin-right: 15px;
}
}
}
.blog__details-left-author {
display: grid;
padding: 40px 30px;
}
.blog__details-left-box {
display: block;
padding: 40px 30px;
h5 {
font-size: 20px;
line-height: 30px;
}
}
.blog__details-left-comment-item-comment {
&-image {
float: initial;
}
&-content {
padding-left: 0;
margin-top: 20px;
}
}
}
@media (max-width: 359px) {
.blog__one {
&-item {
&-content {
padding: 17px 25px 25px 25px;
&-meta {
ul {
li {
padding-right: 12px;
margin-right: 0;
border: 0;
}
}
}
}
}
}
.blog__three-item-content {
padding: 20px 22px 30px 22px;
&-meta ul li {
margin-right: 5px;
a i {
margin-right: 8px;
}
}
}
}

64
public/assets/sass/section/_chooseUs.scss Normal file
View File

@ -0,0 +1,64 @@
/*==========================================================================
Choose Us CSS
==========================================================================*/
.chooseUs__area {
&-right {
display: flex;
align-items: center;
justify-content: center;
gap: 100px;
&-counter {
h6 {
font-weight: 600;
max-width: 240px;
margin-top: 18px;
}
}
}
&-item {
border: 1px solid var(--border-color-3);
border-radius: 6px;
padding: 41px 40px;
&-icon {
margin-bottom: 27px;
}
h4 {
margin-bottom: 11px;
}
&:hover {
.chooseUs__area-item-icon img {
animation: rotateY 0.6s;
}
}
}
}
@media (max-width: 1399px) {
.chooseUs__area {
&-item {
padding: 34px 30px;
}
}
}
@media (max-width: 1199px) {
.chooseUs__area {
.img-full {
width: 100%;
}
}
}
@media (max-width: 991px) {
.chooseUs__area {
&-right {
justify-content: start;
}
}
}
@media (max-width: 575px) {
.chooseUs__area-right {
gap: 0;
&-shape {
max-width: 90px;
padding-right: 15px;
}
}
}

511
public/assets/sass/section/_contact.scss Normal file
View File

@ -0,0 +1,511 @@
/*==========================================================================
Contact CSS
==========================================================================*/
.contact-item {
position: relative;
span {
position: absolute;
right: 16px;
top: 23px;
color: var(--primary-color-1);
font-weight: 400;
}
}
/*==========================================================================
Contact Page CSS
==========================================================================*/
.contact__page {
position: relative;
z-index: 2;
&-form {
background: var(--color-6);
padding: 70px;
&-item {
textarea {
height: 180px;
}
}
}
&-info {
margin-left: 100px;
&-item {
display: flex;
margin-bottom: 40px;
&:last-child {
margin: 0;
}
h6 {
span {
margin-left: 25px;
}
}
> span {
max-width: 290px;
margin-left: 45px;
margin-top: 1px;
a {
text-transform: lowercase;
display: block;
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
}
}
}
&-map {
margin-top: -180px;
margin-bottom: -130px;
z-index: 1;
position: relative;
iframe {
width: 100%;
height: 600px;
display: block;
filter: grayscale(1);
}
}
}
/*==========================================================================
Contact Two CSS
==========================================================================*/
.contact__two {
&-content {
max-width: 600px;
margin: 0 auto;
}
&-box {
box-shadow: var(--box-shadow-1);
padding: 90px 70px;
margin: 0;
background: var(--bg-white);
position: relative;
z-index: 2;
}
&-left {
margin-right: 50px;
&-item {
border-bottom: 1px solid var(--border-color-1);
margin-bottom: 28px;
padding-bottom: 25px;
display: flex;
gap: 20px;
&-icon {
img {
max-width: 45px;
}
}
&-info {
span {
font-family: var(--heading-font);
font-weight: 500;
font-size: 16px;
line-height: 26px;
}
p {
text-transform: lowercase;
line-height: 27px;
color: var(--text-heading-color);
font-weight: 600;
max-width: 240px;
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
}
}
&-socialIcon {
ul {
padding: 0;
margin: 0;
margin-top: 20px;
li {
list-style: none;
display: inline-block;
margin-right: 10px;
&:last-child {
margin: 0;
}
a {
i {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: var(--color-6);
font-size: 15px;
border-radius: 50%;
transition: 0.4s;
&:hover {
background: var(--primary-color-1);
color: var(--text-white);
}
}
}
}
}
}
}
}
&-right {
p {
max-width: 500px;
margin-bottom: 30px;
}
&-form-item {
textarea {
height: 177px;
}
}
}
&-map {
margin-top: -150px;
margin-bottom: -130px;
z-index: 1;
position: relative;
iframe {
width: 100%;
height: 700px;
display: block;
filter: grayscale(1);
}
}
}
/*==========================================================================
Contact Three CSS
==========================================================================*/
.contact__three {
&-info {
display: flex;
align-items: center;
background: var(--color-6);
padding: 45px 30px;
gap: 30px;
transition: 0.4s;
&-icon {
width: 90px;
height: 90px;
line-height: 90px;
display: inline-block;
background: var(--bg-white);
text-align: center;
border-radius: 50%;
transition: 0.4s;
img {
max-width: 35px;
transform: rotateY(0);
}
}
&-content {
h4 {
transition: 0.4s;
}
p {
font-size: 16px;
line-height: 26px;
font-weight: 500;
text-transform: lowercase;
transition: 0.4s;
}
}
&:hover {
background: var(--primary-color-1);
transform: translateY(-5px);
.contact__three-info {
&-icon img {
animation: rotateY 0.6s;
}
&-content {
h4 {
color: var(--text-white);
}
p {
color: var(--text-white);
}
}
}
}
}
&-left-map {
iframe {
width: 100%;
height: 640px;
display: block;
filter: grayscale(1);
}
}
}
/*==========================================================================
Contact Four CSS
==========================================================================*/
.contact__four {
&-info {
padding: 40px 30px;
padding-top: 75px;
transition: 0.4s;
box-shadow: var(--box-shadow-1);
position: relative;
z-index: 1;
margin-top: 40px;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("../../assets/img/shape/footer.png");
background-size: cover;
background-position: right;
z-index: -1;
opacity: 0.6;
transition: 0.4s;
}
&-icon {
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
border-radius: 50%;
background: var(--primary-color-1);
text-align: center;
transition: 0.4s;
position: absolute;
top: -30px;
left: 40px;
&::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
border: 1px dashed var(--primary-color-1);
border-radius: 50%;
display: block;
top: -10px;
left: -10px;
animation: rotation 10s infinite linear;
}
img {
max-width: 25px;
transform: rotateY(0);
}
}
p {
text-transform: lowercase;
font-weight: 500;
transition: 0.4s;
color: var(--color-2);
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
}
h4 {
transition: 0.4s;
}
span {
transition: 0.4s;
font-weight: 500;
font-size: 15px;
line-height: 25px;
color: var(--color-2);
margin-bottom: 15px;
display: block;
}
&:hover {
background: var(--bg-heading-color);
h4 {
color: var(--text-white);
}
p,
span {
color: #b0b0bd;
}
.contact__four-info {
&-icon img {
animation: rotateY 0.6s;
}
&-icon::after {
animation: initial;
}
}
}
}
&-form {
padding: 70px 50px;
box-shadow: var(--box-shadow-2);
background: var(--bg-white);
position: relative;
z-index: 2;
&-title {
max-width: 600px;
margin: 0 auto;
margin-bottom: 60px;
}
}
}
/*==========================================================================
Request Quote CSS
==========================================================================*/
.request__quote {
span {
color: var(--primary-color-1);
}
p {
font-size: 16px;
line-height: 26px;
font-weight: 600;
}
&-item {
label {
margin-bottom: 5px;
font-weight: 600;
font-size: 16px;
}
}
&-services {
label {
font-size: 14px;
display: block;
font-weight: 500;
color: var(--text-heading-color);
}
}
.description {
font-size: 16px;
font-weight: 400;
margin-top: 10px;
}
}
@media (max-width: 1399px) {
.contact__page {
&-form {
padding: 60px 50px;
}
&-info {
margin-left: 80px;
}
}
.contact-box {
padding: 60px 40px;
}
.contact__three {
&-info {
gap: 25px;
&-icon {
width: 75px;
height: 75px;
line-height: 75px;
}
&-content {
p {
font-size: 15px;
line-height: 25px;
}
}
}
}
}
@media (max-width: 1199px) {
.contact__page {
&-form {
padding: 60px 40px;
}
&-info {
margin-left: 30px;
}
}
}
@media (max-width: 991px) {
.contact__page {
&-form {
padding: 60px 40px;
}
&-info {
margin-left: 0;
}
&-map {
margin-top: -160px;
margin-bottom: -170px;
}
}
.contact__two {
&-map {
margin-bottom: -170px;
}
&-left {
margin-right: 0;
}
&-box {
padding: 60px 40px;
}
}
}
@media (max-width: 530px) {
.contact__page {
&-info {
&-item {
h6 {
span {
margin-left: 15px;
}
}
> span {
margin-left: 15px;
}
}
}
}
.contact__four-form {
padding: 50px 30px;
}
}
@media (max-width: 485px) {
.contact__page {
&-form {
padding: 50px 30px;
}
&-info {
&-item {
display: block;
h6 {
span {
margin-left: 15px;
}
}
> span {
display: block;
margin-left: 0;
margin-top: 3px;
}
}
}
&-map {
margin-top: -140px;
}
}
.contact__two {
&-box {
padding: 40px 16px;
}
}
.contact-box {
padding: 40px 16px;
}
}
@media (max-width: 359px) {
.contact__three {
&-info {
display: block;
&-icon {
margin-bottom: 20px;
}
}
}
}

46
public/assets/sass/section/_copyright.scss Normal file
View File

@ -0,0 +1,46 @@
/*==========================================================================
Copyright One CSS
==========================================================================*/
.copyright__one,
.copyright__two,
.copyright__three {
margin-top: 100px;
padding: 30px 0;
text-align: center;
border-top: 1px solid var(--color-11);
p {
margin: 0;
color: var(--text-white);
font-size: 15px;
line-height: 26px;
a {
color: var(--primary-color-1);
text-decoration: underline;
margin: 0 2px;
}
}
}
/*==========================================================================
Copyright Two CSS
==========================================================================*/
.copyright__two p a {
color: var(--primary-color-2);
}
/*==========================================================================
Copyright Three CSS
==========================================================================*/
.copyright__three {
border-top: 1px solid var(--color-16);
p {
color: var(--body-color);
a {
color: var(--primary-color-3);
}
}
}
@media (max-width: 575px) {
.copyright__one {
margin-top: 85px;
}
}

558
public/assets/sass/section/_cta.scss Normal file
View File

@ -0,0 +1,558 @@
/*==========================================================================
Cta CSS
==========================================================================*/
.cta__area {
position: relative;
z-index: 1;
overflow: hidden;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: var(--color-6);
z-index: -1;
}
&-bg {
padding: 60px 70px;
padding-right: 0;
background: var(--primary-color-1);
position: relative;
z-index: 1;
&::before {
content: '';
position: absolute;
top: 0;
right: -3000px;
width: 3000px;
height: 100%;
background: var(--primary-color-1);
z-index: -1;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
background-image: url('../../assets/img/shape/cta.png');
background-repeat: no-repeat;
width: 122%;
height: 100%;
background-size: cover;
z-index: -1;
}
}
&-title {
h2 {
color: var(--text-white);
margin-bottom: 10px;
}
.text-two {
color: var(--text-white);
}
}
&-form form {
display: flex;
gap: 30px;
justify-content: end;
input {
border-radius: 6px;
padding-right: 0;
}
}
}
/*==========================================================================
Cta Two CSS
==========================================================================*/
.cta__two {
position: relative;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
&::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
opacity: 0.85;
z-index: -2;
}
&-shape {
position: absolute;
right: 200px;
top: 0;
z-index: -1;
mix-blend-mode: soft-light;
height: 100%;
}
&-title {
h2 {
color: var(--text-white);
}
}
&-info {
display: flex;
gap: 20px;
justify-content: end;
&-item {
display: inline-block;
background: var(--bg-white);
padding: 30px 45px;
border-radius: 6px;
&-icon {
margin-bottom: 15px;
i {
color: var(--primary-color-1);
font-size: 20px;
background: var(--color-6);
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
transition: 0.4s;
}
}
h6 {
text-transform: lowercase;
a {
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 2px no-repeat;
transition: all 400ms ease;
&:hover {
background-size: 100% 2px;
color: var(--primary-color-1);
}
}
}
span {
font-size: 14px;
font-weight: 600;
}
&:hover {
.cta__two-info-item-icon i {
background: var(--primary-color-1);
color: var(--text-white);
}
}
}
}
}
/*==========================================================================
Get In Touch CSS
==========================================================================*/
.getIn__touch {
position: relative;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 0;
&-shape {
position: absolute;
right: 150px;
top: 0;
z-index: -1;
mix-blend-mode: soft-light;
}
&::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
opacity: 0.85;
z-index: -2;
}
&-left {
box-shadow: var(--box-shadow-2);
background: var(--bg-white);
padding: 71px 68px;
margin-right: 125px;
margin-bottom: -120px;
&-form {
input {
border-radius: 6px;
}
.btn-one {
width: 100%;
justify-content: center;
}
}
}
&-right {
&-title {
h2 {
margin-bottom: 30px;
color: var(--text-white);
max-width: 495px;
}
p {
color: var(--text-white);
max-width: 475px;
}
}
&-bottom {
margin-top: 30px;
display: flex;
align-items: center;
gap: 40px;
&-text h4 {
color: var(--text-white);
max-width: 200px;
}
&-image {
margin-left: 40px;
ul {
padding: 0;
margin: 0;
li {
padding: 0;
display: inline-block;
list-style: none;
margin-left: -23px;
&:first-child {
margin: 0;
}
img {
max-width: 50px;
width: 50px;
height: 50px;
object-fit: cover;
border: 4px solid var(--border-white);
border-radius: 50%;
transition: 0.4s;
&:hover {
border-color: var(--primary-color-1);
}
}
}
}
}
}
}
}
/*==========================================================================
Get In Touch Three CSS
==========================================================================*/
.getIn__touch-three {
position: relative;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&-shape {
position: absolute;
right: 36%;
top: 0;
height: 100%;
transform: translateX(-50%);
z-index: -1;
mix-blend-mode: color-dodge;
}
&::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
opacity: 0.85;
z-index: -2;
}
&-left {
&-title {
h2 {
margin-bottom: 30px;
color: var(--text-white);
max-width: 545px;
}
p {
color: var(--color-4);
max-width: 530px;
}
}
&-video {
margin-top: 55px;
display: flex;
align-items: center;
gap: 45px;
&-icon.video span {
color: var(--primary-color-3);
}
&-text h4 {
color: var(--text-white);
max-width: 200px;
}
&-shape {
margin-left: 90px;
}
}
}
&-right {
box-shadow: var(--box-shadow-2);
background: var(--bg-white);
padding: 50px;
border-radius: 6px;
margin-left: 75px;
margin-bottom: -50px;
h3 {
margin-bottom: 40px;
}
&-form {
input,
textarea {
background: var(--color-6);
border-color: var(--color-6);
color: var(--color-2);
&:focus {
border-color: var(--primary-color-3);
}
}
}
}
}
/*==========================================================================
Help CSS
==========================================================================*/
.help__area {
padding-top: 49px;
padding-left: 50px;
display: flex;
align-items: center;
gap: 90px;
&-item {
display: flex;
align-items: center;
gap: 30px;
&-icon i {
color: var(--primary-color-1);
border: 1px solid var(--color-7);
font-size: 30px;
width: 70px;
height: 70px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.4s;
}
&-info {
span {
color: var(--color-2);
}
h5 {
transition: 0.4s;
text-transform: lowercase;
&:hover {
color: var(--primary-color-1);
}
}
}
&:hover {
.help__area-item-icon i {
background: var(--primary-color-1);
border-color: var(--primary-color-1);
color: var(--text-white);
}
}
}
}
@media (max-width: 1399px) {
.cta__area {
&-bg {
padding: 60px 40px;
}
&-form form {
gap: 25px;
}
}
.getIn__touch {
&-shape {
height: 100%;
}
&-left {
padding: 60px 50px;
margin-right: 80px;
margin-bottom: -115px;
}
&-right {
&-title {
h2 {
margin-bottom: 23px;
}
}
}
}
.help__area {
padding-top: 45px;
padding-left: 45px;
gap: 30px;
justify-content: end;
}
.getIn__touch-three-right {
padding: 45px 40px;
margin-left: 60px;
}
}
@media (max-width: 1199px) {
.cta__area {
&-form {
margin-top: 30px;
form {
justify-content: start;
}
&-item {
width: 100%;
}
}
}
.getIn__touch {
&-left {
padding: 40px 30px;
margin-right: 0;
}
&-right-bottom {
gap: 30px;
}
}
.help__area {
gap: 20px;
&-item {
gap: 20px;
&-icon i {
font-size: 20px;
width: 50px;
height: 50px;
line-height: 50px;
}
}
}
.getIn__touch-three-right {
padding: 40px 30px;
margin-left: 10px;
}
.getIn__touch-three-left-video-shape {
margin-left: 20px;
}
.cta__two-info-item {
padding: 30px 40px;
}
}
@media (max-width: 991px) {
.cta__area {
&-bg {
padding: 50px 30px;
padding-right: 0;
}
&-form form {
gap: 20px;
input {
padding-right: 10px;
}
}
}
.getIn__touch {
padding-bottom: 120px;
&-left {
margin: 0;
}
&-right-bottom {
gap: 30px;
}
}
.help__area {
justify-content: start;
padding-left: 0;
}
.getIn__touch-three-right {
margin-left: 0;
}
.cta__two {
&-title {
text-align: center;
}
&-info {
justify-content: center;
}
}
}
@media (max-width: 767px) {
.cta__area {
&-form form {
display: initial;
}
}
.getIn__touch {
&-right-bottom {
gap: 20px;
&-image {
margin: 0;
}
}
}
.help__area-item {
gap: 16px;
}
.cta__two-info-item {
padding: 30px;
}
}
@media (max-width: 575px) {
.cta__area {
&-bg {
padding: 50px 0;
.pr-0 {
padding-right: 12px;
}
}
}
.getIn__touch {
padding-bottom: 85px;
}
.getIn__touch-three-left-video-shape {
display: none;
}
}
@media (max-width: 540px) {
.help__area {
display: block;
padding-top: 15px;
&-item {
margin-top: 30px;
}
}
.cta__two-info {
display: block;
&-item {
display: block;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
}
}
}
@media (max-width: 490px) {
.getIn__touch-right-bottom-shape{
display: none;
}
}
@media (max-width: 390px) {
.getIn__touch-right-bottom {
display: block;
&-image {
margin-top: 30px;
}
}
}

110
public/assets/sass/section/_experience.scss Normal file
View File

@ -0,0 +1,110 @@
/*==========================================================================
Experience CSS
==========================================================================*/
.experience__area {
position: relative;
z-index: 1;
background: var(--color-6);
overflow: hidden;
&-shape {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
&-image {
position: relative;
display: flex;
gap: 30px;
&-shape {
position: absolute;
left: 0;
bottom: 0%;
}
}
&-right {
margin-left: 95px;
&-title {
h2 {
margin-bottom: 30px;
}
}
.btn-two {
background: var(--color-6);
margin-top: 50px;
color: var(--text-heading-color);
&:hover {
color: var(--text-white);
}
}
}
}
.skill__area {
&-item {
margin-bottom: 20px;
&:last-child {
margin: 0;
}
.text-two {
font-weight: 700;
}
&-content {
position: relative;
}
&-count {
position: absolute;
top: -35px;
right: 0;
}
&-inner {
width: 100%;
height: 8px;
position: relative;
background: var(--border-color-2);
margin-top: 10px;
.skillbar-bar {
height: 8px;
position: absolute;
width: 0;
background: var(--primary-color-1);
transition: all 3.5s ease-out 0s;
clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
top: 0;
border-radius: 0;
}
.skillbar-title {
height: 8px;
background: var(--primary-color-1);
span {
display: none;
}
}
.skillbar-percent {
display: none;
}
}
}
}
@media (max-width: 1399px) {
.experience__area {
&-right {
margin-left: 30px;
&-title {
margin-bottom: 35px;
h2 {
margin-bottom: 23px;
}
}
.btn-two {
margin-top: 45px;
}
}
}
}
@media (max-width: 1199px) {
.experience__area {
&-right {
margin-left: 0;
}
}
}

216
public/assets/sass/section/_faq.scss Normal file
View File

@ -0,0 +1,216 @@
/*==========================================================================
FAQ CSS
==========================================================================*/
.faq__area {
&-item {
border: 1px solid var(--border-color-1);
margin-bottom: 20px;
border-radius: 5px;
&:last-child {
margin: 0;
}
h6 {
font-size: 18px;
line-height: 28px;
padding: 16px 0;
margin: 0 30px;
cursor: pointer;
}
.icon {
position: relative;
&::after {
content: "\f067";
font-family: 'Font Awesome 5 Pro';
font-weight: 300;
position: absolute;
color: var(--primary-color-3);
right: 0;
}
&:not(.collapsed)::after {
content: "\f068";
}
&.page::after {
color: var(--primary-color-1);
}
}
&-body {
p {
margin-bottom: 0;
padding: 0 30px 30px 30px;
}
}
}
}
h6.icon.collapsed {
width: initial !important;
}
/*==========================================================================
FAQ Two CSS
==========================================================================*/
.faq__two {
&-left {
margin-right: 70px;
&-image {
position: relative;
padding-bottom: 90px;
&-one {
position: absolute;
right: 0;
bottom: 0;
}
&-question {
position: absolute;
top: 35px;
right: 70px;
background: var(--bg-heading-color);
padding: 30px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 20px;
h6 {
color: var(--text-white);
max-width: 150px;
text-transform: none;
}
}
}
}
}
@media (max-width: 1399px) {
.faq__two {
&-left {
margin-right: 0;
}
}
}
@media (max-width: 520px) {
.faq__two {
&-left {
&-image {
img {
max-width: 280px;
}
&-question {
right: 20px;
}
}
}
}
}
/*==========================================================================
* Responsive Menu Sidebar CSS
==========================================================================*/
.menu__bar {
display: none;
&-popup {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 500px;
height: 100%;
z-index: 9999;
transition: 0.5s;
background: var(--bg-heading-color);
padding: 50px;
display: none;
transform: translateX(-100%);
scrollbar-width: none;
overflow: auto;
&.show {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
&-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 45px;
}
.close {
transform: rotate(0);
&:hover {
animation: rotate 0.4s ease 0s;
}
i {
background: var(--primary-color-1);
width: 40px;
color: var(--text-white);
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
cursor: pointer;
display: block;
}
}
.logo {
> a img {
max-width: 160px;
}
}
& .two {
.menu__bar-popup {
&-close i {
background: var(--primary-color-2);
}
&-left-social ul li a:hover {
color: var(--primary-color-2);
}
}
.mean-container .mean-nav ul li a {
&.mean-expand:hover {
background: var(--primary-color-2);
}
&:hover {
color: var(--primary-color-2);
}
}
}
&.three {
.menu__bar-popup {
&-close i {
background: var(--primary-color-3);
}
&-left-social ul li a:hover {
color: var(--primary-color-3);
}
}
.mean-container .mean-nav ul li a {
&.mean-expand:hover {
background: var(--primary-color-3);
}
&:hover {
color: var(--primary-color-3);
}
}
}
}
}
@media (max-width: 991px) {
.menu__bar {
display: block;
&-popup {
display: block;
}
}
}
@media (max-width: 767px) {
.menu__bar {
&-popup {
width: 100%;
padding: 40px 30px;
}
}
}
@media (max-width: 359px) {
.menu__bar {
&-popup {
padding: 30px 20px;
}
}
}

109
public/assets/sass/section/_features.scss Normal file
View File

@ -0,0 +1,109 @@
/*==========================================================================
Features CSS
==========================================================================*/
.features {
margin-top: -80px;
position: relative;
z-index: 1;
&-area {
display: grid;
grid-template-columns: repeat(3, 1fr);
box-shadow: var(--box-shadow-1);
&-item {
position: relative;
overflow: hidden;
padding: 40px;
transition: 0.4s;
background: var(--bg-white);
span {
position: absolute;
right: -50px;
top: -50px;
i {
font-size: 25px;
color: var(--primary-color-3);
position: relative;
width: 137px;
height: 137px;
line-height: 137px;
text-align: center;
transition: 0.4s;
&::before {
position: relative;
top: 24px;
right: 20px;
}
&::after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 137px;
height: 137px;
opacity: 0.1;
background: var(--primary-color-3);
border-radius: 50%;
transition: 0.4s;
}
}
}
h4 {
margin-bottom: 10px;
transition: 0.4s;
}
p {
max-width: 270px;
transition: 0.4s;
}
&-hover {
background: var(--primary-color-3);
h4 {
color: var(--text-white);
}
p {
color: var(--text-white);
}
&.features-area-item span i {
color: var(--text-white);
&::after {
background: var(--bg-white);
}
}
}
}
}
.ltb-radius {
border-radius: 6px 0 0 6px;
}
.rtb-radius {
border-radius: 0 6px 6px 0;
}
}
@media (max-width: 1299px) {
.features-area-item {
padding: 40px 30px;
}
}
@media (max-width: 991px) {
.features {
&-area {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (max-width: 766px) {
.features {
&-area {
grid-template-columns: repeat(1, 1fr);
&-item {
border-radius: 4px;
}
}
.ltb-radius {
border-radius: 4px;
}
.rtb-radius {
border-radius: 4px;
}
}
}

541
public/assets/sass/section/_footer.scss Normal file
View File

@ -0,0 +1,541 @@
/*==========================================================================
Footer Top CSS
==========================================================================*/
.footer__top {
background: var(--primary-color-1);
position: relative;
z-index: 1;
padding: 60px 0;
overflow: hidden;
&-shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
}
&-title {
h2 {
color: var(--text-white);
}
}
.btn-two {
color: var(--text-white);
background: transparent;
&:hover {
color: var(--primary-color-1);
border-color: var(--text-white);
}
&::before {
background: var(--btn-white);
}
}
}
/*==========================================================================
Footer One CSS
==========================================================================*/
.footer__one {
position: relative;
z-index: 1;
background: var(--bg-heading-color);
padding-top: 100px;
&-shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
&-widget {
h4 {
color: var(--text-white);
margin-bottom: 25px;
}
&-about {
a img {
max-width: 165px;
}
p {
color: var(--color-4);
max-width: 260px;
margin-top: 15px;
}
&-social {
margin-top: 30px;
ul {
padding: 0;
margin: 0;
li {
list-style: none;
display: inline-block;
margin-right: 10px;
&:last-child {
margin: 0;
}
a {
i {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: var(--color-11);
font-size: 15px;
border-radius: 50%;
color: var(--text-white);
transition: 0.4s;
&:hover {
background: var(--primary-color-1);
}
}
}
}
}
}
}
&-solution {
ul {
padding: 0;
margin: 0;
li {
padding: 0;
list-style: none;
margin-bottom: 15px;
&:last-child {
margin: 0;
}
a {
color: var(--color-4);
transition: 0.4s;
position: relative;
i {
color: var(--primary-color-1);
font-size: 14px;
line-height: 24px;
position: absolute;
opacity: 0;
transition: 0.4s;
left: 0px;
top: 0;
}
&:hover {
color: var(--primary-color-1);
padding-left: 20px;
i {
opacity: 1;
}
}
}
}
}
}
&-location {
h6 {
color: var(--text-white);
margin: 18px 0;
}
&-item {
display: flex;
align-items: center;
gap: 15px;
&-icon i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
border: 1px solid var(--color-11);
border-radius: 50%;
color: var(--primary-color-1);
}
&-info a {
color: var(--color-4);
font-weight: 500;
font-size: 16px;
line-height: 26px;
max-width: 188px;
display: inline-block;
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
}
}
&-subscribe {
p {
color: var(--color-4);
font-weight: 500;
font-size: 16px;
line-height: 26px;
max-width: 265px;
span {
color: var(--primary-color-1);
}
}
form {
position: relative;
margin-top: 30px;
input {
background: transparent;
color: var(--color-9);
border-color: var(--color-11);
height: 70px;
&:focus {
color: var(--color-9);
}
}
button {
padding: 0;
position: absolute;
right: 7px;
top: 7px;
width: 56px;
height: 56px;
border-radius: 4px;
font-size: 20px;
text-align: center;
}
}
}
}
.border-one {
padding-left: 35px;
position: relative;
margin-left: -5px;
&::before {
position: absolute;
content: '';
width: 1px;
height: 220px;
background: var(--color-11);
left: 0;
top: 0;
}
}
.border-one.tow {
margin-left: -13px;
}
}
/*==========================================================================
Footer Two CSS
==========================================================================*/
.footer__two {
background: var(--bg-heading-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&-widget {
h4 {
color: var(--text-white);
margin-bottom: 25px;
}
&.footer-border {
position: relative;
padding-left: 60px;
&::before {
position: absolute;
content: '';
width: 1px;
height: 250px;
background: var(--color-11);
left: -10px;
top: 0;
}
}
&-about {
a img {
max-width: 165px;
}
p {
color: var(--color-4);
max-width: 355px;
margin-top: 25px;
}
&-social {
margin-top: 30px;
ul {
padding: 0;
margin: 0;
li {
list-style: none;
display: inline-block;
margin-right: 10px;
&:last-child {
margin: 0;
}
a i {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: var(--color-11);
font-size: 15px;
border-radius: 50%;
color: var(--text-white);
transition: 0.4s;
&:hover {
background: var(--primary-color-2);
}
}
}
}
}
}
&-location {
h6 {
color: var(--text-white);
margin: 18px 0;
}
&-item {
display: flex;
align-items: center;
gap: 15px;
&-icon i {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border: 1px solid var(--color-11);
border-radius: 50%;
color: var(--primary-color-2);
}
&-info a {
color: var(--color-4);
font-weight: 500;
font-size: 16px;
line-height: 26px;
max-width: 220px;
display: inline-block;
transition: 0.4s;
&:hover {
color: var(--primary-color-2);
}
}
}
}
}
.all_f_logo {
display: none;
}
}
/*==========================================================================
Footer Three CSS
==========================================================================*/
.footer__three {
position: relative;
z-index: 1;
background: var(--color-6);
padding-top: 100px;
&-shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
&-widget {
h4 {
margin-bottom: 20px;
}
&-about {
a img {
max-width: 165px;
}
p {
max-width: 350px;
margin-top: 30px;
}
}
&-solution {
ul {
padding: 0;
margin: 0;
li {
padding: 0;
list-style: none;
margin-bottom: 15px;
&:last-child {
margin: 0;
}
a {
transition: 0.4s;
position: relative;
font-weight: 500;
i {
color: var(--primary-color-3);
font-size: 14px;
line-height: 24px;
position: absolute;
opacity: 0;
transition: 0.4s;
left: 0px;
top: 0;
}
&:hover {
color: var(--primary-color-3);
padding-left: 20px;
i {
opacity: 1;
}
}
}
}
}
}
&-location {
h6 {
margin: 18px 0;
}
&-item {
display: flex;
align-items: center;
gap: 15px;
&-icon i {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border: 1px solid var(--color-15);
border-radius: 50%;
color: var(--primary-color-3);
}
&-info a {
font-weight: 500;
font-size: 16px;
line-height: 26px;
max-width: 188px;
display: inline-block;
transition: 0.4s;
&:hover {
color: var(--primary-color-3);
}
}
}
}
&-hour {
p {
font-weight: 500;
font-family: var(--heading-font);
margin-bottom: 7px;
&:last-child {
margin: 0;
}
}
&-social {
margin-top: 25px;
ul {
padding: 0;
margin: 0;
li {
list-style: none;
display: inline-block;
margin-right: 10px;
&:last-child {
margin: 0;
}
a i {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: var(--bg-white);
font-size: 15px;
border-radius: 50%;
color: var(--heading-color);
transition: 0.4s;
&:hover {
background: var(--primary-color-3);
color: var(--text-white);
}
}
}
}
}
}
}
}
/*==========================================================================
All Footer CSS
==========================================================================*/
.all-footer {
.subscribe__area-form form button,
.subscribe__area-bg::after {
background: var(--primary-color-1);
}
.subscribe__area-left-notification-icon i {
color: var(--primary-color-1);
}
.footer__two {
&-widget {
&-location-item {
&-icon i {
color: var(--primary-color-1);
}
&-info a:hover {
color: var(--primary-color-1);
}
}
&-about-social ul li a i:hover {
background: var(--primary-color-1);
}
}
}
.post__item-title {
h6 a:hover {
color: var(--primary-color-1);
}
span i {
color: var(--primary-color-1);
}
}
.copyright__two p a {
color: var(--primary-color-1);
}
.all_f_logo {
display: block;
}
.f_logo {
display: none;
}
}
@media (max-width: 1399px) {
.footer__one {
.border-one {
padding-left: 0;
margin-left: 0;
&::before {
display: none;
}
}
.border-one.tow {
margin-left: 0;
}
}
.footer__two-widget.footer-border {
padding-left: 40px;
}
}
@media (max-width: 1199px) {
.footer__two-widget.footer-border {
padding-left: 0;
&::before {
display: none;
}
}
}
@media (max-width: 575px) {
.footer__one {
padding-top: 85px;
}
}

1117
public/assets/sass/section/_header.scss Normal file
View File

File diff suppressed because it is too large Load Diff

160
public/assets/sass/section/_page.scss Normal file
View File

@ -0,0 +1,160 @@
/*==========================================================================
Page Banner CSS
==========================================================================*/
.page__banner {
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding-top: 110px;
padding-bottom: 160px;
overflow: hidden;
&::after {
content: '';
position: absolute;
background-image: url('../../assets/img/shape/page-banner-bg.png');
background-repeat: no-repeat;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -2;
}
&-content {
ul {
padding: 0;
margin: 0;
li {
display: inline-block;
list-style: none;
color: var(--primary-color-1);
font-weight: 700;
a {
color: var(--text-white);
margin-right: 15px;
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
span {
margin-right: 15px;
color: var(--text-white);
}
}
}
h1 {
color: var(--text-white);
font-size: 70px;
line-height: 80px;
margin-top: 10px;
}
> span {
color: var(--text-white);
display: block;
font-weight: 700;
font-size: 120px;
line-height: 144px;
opacity: 0.08;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
margin: 0 0 -80px 0;
position: relative;
z-index: -1;
text-transform: uppercase;
font-family: var(--heading-font);
}
}
}
/*==========================================================================
Error CSS
==========================================================================*/
.error {
&-page {
text-align: center;
h1 {
font-size: 240px;
line-height: 240px;
span {
color: var(--primary-color-1);
}
}
h2 {
margin: 10px 0 30px 0;
}
p {
margin-bottom: 35px;
}
}
}
@media (max-width: 1599px) {
.page__banner {
&::after {
left: -140px;
}
}
}
@media (max-width: 991px) {
.page__banner {
&::after {
left: -220px;
width: 125%;
}
}
}
@media (max-width: 767px) {
.page__banner {
&::after {
background-image: none;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
}
&-content {
h1 {
font-size: 60px;
line-height: 70px;
}
> span {
font-size: 90px;
line-height: 102px;
margin: 0 0 -60px 0;
}
}
}
.error-page h1 {
font-size: 160px;
line-height: 160px;
}
}
@media (max-width: 480px) {
.page__banner {
padding: 155px 0;
&-content {
h1 {
font-size: 45px;
line-height: 55px;
}
> span {
font-size: 68px;
line-height: 80px;
}
}
}
}
@media (max-width: 359px) {
.page__banner {
&-content {
h1 {
font-size: 38px;
line-height: 48px;
}
> span {
font-size: 58px;
line-height: 60px;
}
}
}
}

129
public/assets/sass/section/_pricing.scss Normal file
View File

@ -0,0 +1,129 @@
/*==========================================================================
Pricing CSS
==========================================================================*/
.pricing__area {
&-item {
padding: 0 70px 50px 50px;
position: relative;
z-index: 1;
box-shadow: 0 0 60px var(--color-10);
border-radius: 6px;
margin-top: 75px;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('../../assets/img/shape/price.png');
background-size: cover;
z-index: -1;
}
&-price {
display: inline-block;
width: 150px;
height: 175px;
padding: 49px 0;
text-align: center;
background: var(--primary-color-3);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
border: 0;
margin-bottom: 20px;
margin-top: -75px;
position: relative;
z-index: 1;
h4 {
color: var(--text-white);
span {
font-weight: 500;
font-size: 48px;
line-height: 48px;
}
}
.text-two {
color: var(--text-white);
}
}
&-title {
.text-two {
font-weight: 500;
color: var(--body-color);
}
}
&-list {
margin-top: 20px;
padding-top: 30px;
border-top: 1px solid var(--border-color-1);
ul {
padding: 0;
margin: 0;
li {
list-style: none;
font-weight: 600;
font-size: 16px;
line-height: 26px;
margin-bottom: 18px;
i {
width: 20px;
height: 20px;
line-height: 17px;
text-align: center;
border: 1px solid var(--primary-color-3);
border-radius: 50%;
color: var(--primary-color-3);
font-size: 12px;
font-weight: 400;
margin-right: 10px;
}
&:last-child {
margin: 0;
}
}
}
}
.btn-eight {
width: 100%;
border-color: var(--border-color-1);
justify-content: center;
color: var(--text-heading-color);
margin-top: 30px;
&::before {
background: var(--primary-color-3);
}
&:hover {
color: var(--text-white);
border-color: var(--primary-color-3);
}
}
}
&.page {
.pricing__area-item {
&-price {
background: var(--primary-color-1);
}
&-list ul li i {
color: var(--primary-color-1);
border-color: var(--primary-color-1);
}
.btn-eight {
&::before {
background: var(--primary-color-1);
}
&:hover {
border-color: var(--primary-color-1);
}
}
}
}
}
@media (max-width: 991px) {
.pricing__area-item {
padding: 0 50px 50px 40px;
}
}
@media (max-width: 359px) {
.pricing__area-item {
padding: 0 30px 50px 30px;
}
}

676
public/assets/sass/section/_project.scss Normal file
View File

@ -0,0 +1,676 @@
/*==========================================================================
Project CSS
==========================================================================*/
.project__area {
&-item {
position: relative;
z-index: 1;
img {
width: 100%;
min-height: 430px;
object-fit: cover;
}
&::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-heading-color);
z-index: 1;
transition: 0.4s;
opacity: 0;
}
&::after {
position: absolute;
content: '';
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background: var(--primary-color-3);
z-index: 1;
transition: 0.4s;
opacity: 0;
}
&-content {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
padding: 40px;
padding-right: 75px;
display: inline-block;
transition: 0.5s;
z-index: 2;
visibility: hidden;
opacity: 0;
h4 {
color: var(--text-white);
}
span {
color: var(--color-9);
font-weight: 500;
font-size: 14px;
line-height: 24px;
}
}
&-icon {
position: absolute;
right: 70px;
top: 70px;
visibility: hidden;
opacity: 0;
z-index: 2;
transition: 0.5s;
a {
background: var(--bg-white);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 6px;
color: var(--text-heading-color);
display: inline-block;
}
}
&:hover {
&::before {
opacity: 0.7;
}
&::after {
opacity: 0.7;
}
.project__area-item {
&-content {
visibility: visible;
opacity: 1;
}
&-icon {
visibility: visible;
opacity: 1;
}
}
}
}
&-page {
.project__area-item::after {
background: var(--primary-color-1);
}
}
}
/*==========================================================================
Portfolio One CSS
==========================================================================*/
.portfolio__area {
overflow: hidden;
&-item {
position: relative;
z-index: 1;
transition: 0.4s;
margin-top: 10px;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 100%;
background: var(--bg-heading-color);
transition: 0.4s;
opacity: 0;
}
> img {
min-height: 360px;
object-fit: cover;
}
&-content {
position: absolute;
left: 50px;
bottom: 40px;
right: 50px;
background: var(--primary-color-1);
padding: 30px 40px;
padding-right: 30px;
z-index: 1;
opacity: 0;
transition: transform 0.4s ease 0s, opacity 0.4s ease 0s;
display: flex;
align-items: center;
justify-content: space-between;
&-title {
h4 {
color: var(--text-white);
}
.text-eight {
color: var(--text-white);
}
}
}
&:hover {
transform: translateY(-10px);
&::after {
height: 100%;
opacity: 0.8;
}
.portfolio__area-item-content {
opacity: 1;
transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s;
}
}
}
}
/*==========================================================================
Portfolio Two CSS
==========================================================================*/
.portfolio {
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
gap: 30px;
&-item {
height: 570px;
flex: 2.1;
transition: 0.5s;
will-change: transform;
position: relative;
overflow: hidden;
z-index: 1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
opacity: 0;
transition: 0.4s;
}
img {
height: 100%;
object-fit: cover;
transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
position: relative;
z-index: -1;
}
&-inner {
position: absolute;
bottom: 40px;
left: 40px;
z-index: 3;
background: var(--bg-white);
padding-left: 40px;
display: flex;
align-items: center;
opacity: 0;
transition: 0.4s;
&-title {
h4 {
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-2);
}
}
}
span {
font-weight: 600;
font-size: 16px;
line-height: 26px;
color: var(--color-3);
}
}
&-icon {
width: 125px;
height: 125px;
line-height: 125px;
text-align: center;
background: var(--primary-color-2);
margin-left: 80px;
i {
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
color: var(--text-white);
border: 1px solid var(--color-14);
border-radius: 50%;
font-size: 25px;
transform: rotate(45deg);
}
}
}
&:hover {
flex: 1.5;
}
&.active {
flex: 6;
scroll-snap-align: start;
&.portfolio-item {
&::before {
opacity: 0.7;
}
}
.portfolio-item-inner {
opacity: 1;
}
&.portfolio-item {
img {
transform: scale3d(1.1, 1.1, 1.1);
}
}
&::after {
content: "";
position: absolute;
background-image: url('../../assets/img/shape/Image.png');
height: 100%;
width: 20%;
top: 0;
right: 0;
z-index: 0;
background-repeat: no-repeat;
transition: 0.3s;
}
}
}
}
.portfolio__three {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
z-index: 1;
.portfolio-border {
position: relative;
z-index: 1;
border-right: 4px solid var(--border-white);
padding: 0;
.project__area-item {
min-height: 600px;
}
&:last-child {
border: 0;
}
}
}
/*==========================================================================
Filter CSS
==========================================================================*/
.filter_button {
text-align: center;
margin-top: -5px;
button {
font-weight: 600;
padding: 0 25px;
line-height: 48px;
color: var(--text-heading-color);
border: 1px solid var(--border-color-4);
box-shadow: 0px 9px 18px rgba(24, 16, 16, 0.05);
background: none;
margin: 5px;
transition: 0.4s;
&:hover {
background: var(--primary-color-1);
color: var(--text-white);
border-color: var(--primary-color-1);
}
}
.active {
background: var(--primary-color-1);
color: var(--text-white);
border-color: var(--primary-color-1);
}
}
/*==========================================================================
Project Filter CSS
==========================================================================*/
.project__one {
&-item {
position: relative;
z-index: 1;
&::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-heading-color);
z-index: 0;
transition: 0.4s;
opacity: 0;
}
img {
min-height: 460px;
object-fit: cover;
}
&-content {
position: absolute;
bottom: 20px;
left: 40px;
right: 40px;
padding: 40px 30px;
z-index: 1;
transition: 0.4s;
background: var(--bg-white);
opacity: 0;
overflow: hidden;
&::before {
content: '';
position: absolute;
right: -30px;
bottom: -40px;
height: 100px;
width: 100px;
border-radius: 50%;
background: var(--primary-color-1);
z-index: -1;
}
&::after {
content: '';
position: absolute;
right: -20px;
bottom: -30px;
height: 100px;
width: 100px;
border-radius: 50%;
background: var(--primary-color-1);
opacity: 0.2;
}
span {
font-size: 16px;
line-height: 26px;
font-weight: 700;
font-family: var(--heading-font);
color: var(--primary-color-1);
display: block;
margin-bottom: 5px;
}
h4 a {
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
}
&-icon {
position: absolute;
top: 18%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
transition: 0.4s;
opacity: 0;
a {
background: var(--primary-color-1);
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
color: var(--text-white);
display: inline-block;
transform: rotate(45deg);
font-size: 25px;
}
}
&:hover {
&::before {
opacity: 0.7;
}
.project__one-item {
&-content {
opacity: 1;
bottom: 40px;
}
&-icon {
top: 22%;
opacity: 1;
}
}
}
}
}
/*==========================================================================
Project Details CSS
==========================================================================*/
.portfolio__details {
&-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 35px;
padding-bottom: 35px;
border-bottom: 1px solid var(--border-color-1);
&-item {
h6 {
font-size: 18px;
line-height: 28px;
font-weight: 700;
}
}
}
}
@media (max-width: 1890px) {
.portfolio__area {
&-item {
img {
width: 100%;
}
&-content {
left: 30px;
bottom: 30px;
right: 30px;
padding: 30px 25px;
&-icon img {
max-width: 40px;
}
}
}
}
}
@media (max-width: 1399px) {
.project__area {
&-item {
&-content {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
padding: 30px;
}
&-icon {
right: 60px;
top: 60px;
}
&.page {
&::after {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
.project__area-item {
&-content {
position: absolute;
right: 20px;
bottom: 20px;
left: 20px;
padding: 30px 25px;
&-icon {
right: 50px;
top: 50px;
}
}
}
}
}
}
.project__one-item {
&-content {
left: 30px;
right: 30px;
}
&-icon {
top: 16%;
}
&:hover {
.project__one-item {
&-content {
bottom: 30px;
}
&-icon {
top: 19%;
}
}
}
}
}
@media (max-width: 1199px) {
.portfolio {
&-item {
height: 500px;
flex: 1.5;
&-inner {
left: 30px;
bottom: 30px;
}
}
}
.portfolio__three {
border-left: 2px solid var(--border-white);
border-right: 2px solid var(--border-white);
.portfolio-border {
border-right: 0;
border: 2px solid var(--border-white);
.project__area-item {
min-height: 400px;
}
&:last-child {
border: 2px solid var(--border-white);
}
}
}
}
@media (max-width: 991px) {
.portfolio {
gap: 20px;
&-item {
height: 420px;
flex: 1.1;
&-inner {
padding-left: 30px;
&-icon {
width: 100px;
height: 100px;
line-height: 100px;
margin-left: 40px;
padding: 4px 0;
i {
width: 60px;
height: 60px;
line-height: 60px;
}
}
}
}
}
.portfolio__details-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.project__one-item {
&-content {
left: 20px;
right: 20px;
bottom: 10px;
}
&-icon {
top: 16%;
}
&:hover {
.project__one-item {
&-content {
bottom: 20px;
}
}
}
}
}
@media (max-width: 720px) {
.portfolio {
display: initial;
&-item {
height: 120px;
margin-bottom: 25px;
&:last-child {
margin: 0;
}
img {
width: 100%;
}
&.active {
&.portfolio-item {
height: 400px;
}
}
}
}
.portfolio__details-meta {
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 420px) {
.portfolio {
&-item {
&-inner {
left: 20px;
bottom: 20px;
padding-left: 20px;
&-icon {
width: 85px;
height: 95px;
line-height: 95px;
margin-left: 20px;
padding: 3px 0;
i {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
}
}
&.active {
&.portfolio-item {
height: 340px;
}
}
}
}
}
@media (max-width: 359px) {
.portfolio {
&-item {
&-inner {
&-icon {
margin-left: 10px;
padding: 3px 0;
}
}
}
}
.project__area {
&-item {
&-content {
padding: 40px 25px;
}
&-icon {
right: 55px;
top: 55px;
}
}
}
}

536
public/assets/sass/section/_services.scss Normal file
View File

@ -0,0 +1,536 @@
/*==========================================================================
Consulting CSS
==========================================================================*/
.consulting__area {
position: relative;
z-index: 1;
overflow: hidden;
&-shape {
position: absolute;
bottom: -80px;
right: 0;
z-index: -1;
}
&-right {
&-title {
margin-bottom: 30px;
h2 {
margin-bottom: 30px;
}
p {
max-width: 493px;
}
}
&-list {
span {
display: block;
font-weight: 500;
font-size: 18px;
line-height: 26px;
font-family: var(--heading-font);
margin-bottom: 20px;
i {
color: var(--primary-color-2);
border: 1px solid var(--primary-color-2);
width: 24px;
height: 24px;
line-height: 24px;
font-size: 12px;
margin-right: 15px;
text-align: center;
border-radius: 50%;
}
}
}
.btn-six {
margin-top: 30px;
&::before {
background: var(--primary-color-2);
}
&:hover {
color: var(--text-white);
border-color: var(--primary-color-2);
}
}
}
}
/*==========================================================================
Work CSS
==========================================================================*/
.work__area {
&-item {
text-align: center;
position: relative;
span {
border: 1px solid var(--border-color-1);
color: var(--color-13);
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.8px;
font-weight: 700;
font-size: 48px;
font-family: var(--heading-font);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
display: inline-block;
text-align: center;
transition: 0.4s;
position: relative;
z-index: 1;
margin-bottom: 20px;
&::before {
content: '';
position: absolute;
background: var(--primary-color-2);
width: 0;
height: 0;
border-radius: 50%;
margin: 0 auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.4s;
z-index: -1;
}
}
h6 {
margin-bottom: 10px;
}
p {
max-width: 280px;
margin: 0 auto;
}
&-arrow {
position: absolute;
top: 35px;
right: -58px;
}
&:hover {
span {
color: var(--text-white);
border-color: var(--primary-color-2);
}
&.work__area-item span::before {
width: 100%;
height: 100%;
}
}
}
}
/*==========================================================================
Services CSS
==========================================================================*/
.services__one {
&-item {
padding: 48px;
padding-bottom: 42px;
transition: 0.4s;
border: 1px solid var(--border-color-1);
position: relative;
z-index: 1;
overflow: hidden;
&::before {
position: absolute;
content: '';
top: -112px;
right: -112px;
background: var(--bg-white);
width: 224px;
height: 224px;
border-radius: 50%;
transition: 0.4s;
opacity: 0;
}
&-icon {
margin-bottom: 25px;
position: relative;
i {
color: var(--primary-color-1);
font-size: 70px;
transition: 0.4s;
}
}
h4 {
margin-bottom: 10px;
transition: 0.4s;
}
p {
margin-bottom: 27px;
transition: 0.4s;
}
.simple-btn-2 {
&:hover {
text-decoration: underline;
}
}
&:hover {
background: var(--primary-color-1);
border-color: var(--primary-color-1);
transform: translateY(-10px);
h4 {
color: var(--text-white);
}
p {
color: var(--color-9);
}
.simple-btn-2 {
color: var(--text-white);
}
.services__one-item-icon i {
color: var(--text-white);
}
&::before {
opacity: 0.1;
}
}
}
}
/*==========================================================================
Services Two CSS
==========================================================================*/
.services__two {
position: relative;
z-index: 2;
&-item {
position: relative;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 20px;
&::before {
content: '';
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
opacity: 0;
transition: 0.4s;
}
&-content {
background: var(--bg-white);
padding: 30px;
transition: 0.3s;
transform: scale(0.98);
opacity: 0;
&-icon {
margin-bottom: 22px;
i {
color: var(--primary-color-2);
font-size: 70px;
}
}
h4 {
margin-bottom: 12px;
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-2);
}
}
}
.simple-btn-2 {
color: var(--primary-color-2);
margin-top: 18px;
&:hover {
color: var(--text-heading-color);
}
}
}
&:hover {
&::before {
opacity: 0.7;
}
.services__two-item-content {
opacity: 1;
transform: scale(1);
}
}
}
&-arrow {
&-prev,
&-next {
display: inline-block;
i {
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
border: 1px solid var(--color-10);
font-size: 22px;
color: var(--text-heading-color);
border-radius: 50%;
transition: 0.4s;
cursor: pointer;
&:hover {
background: var(--primary-color-2);
color: var(--text-white);
border-color: var(--primary-color-2);
}
}
}
}
}
/*==========================================================================
Services Three CSS
==========================================================================*/
.services__three {
background: var(--bg-heading-color);
&-title {
text-align: center;
h2 {
color: var(--text-white);
}
}
&-item {
position: relative;
overflow: hidden;
> img {
width: 100%;
filter: grayscale(100%);
min-height: 450px;
object-fit: cover;
}
&.page {
box-shadow: var(--box-shadow-1);
}
&-content {
position: absolute;
bottom: 0;
left: 0;
padding: 40px;
padding-top: 60px;
margin-right: 30px;
z-index: 1;
&::after {
content: '';
position: absolute;
bottom: -25px;
left: -10px;
transform: matrix(0.99, -0.1, 0.12, 0.99, 0, 0);
background: var(--bg-white);
width: 100%;
height: 101%;
z-index: -1;
}
&-icon {
background: var(--primary-color-3);
width: 80px;
height: 80px;
text-align: center;
border-radius: 6px;
border: 4px solid var(--border-white);
position: absolute;
top: -30px;
right: 0;
padding: 10px 0;
i {
color: var(--text-white);
font-size: 50px;
display: inline-block;
}
}
h4 {
margin-bottom: 5px;
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-3);
}
}
}
&.page {
background: none;
&.services__three-item-content h4 a:hover {
color: var(--primary-color-1);
}
.services__three-item-content {
&-icon {
background: var(--primary-color-1);
img {
max-width: 50px;
}
}
}
}
}
&:hover {
img {
filter: grayscale(0%);
}
.services__three-item-content-icon img {
animation: rotateY 0.7s;
}
}
}
.slider {
position: relative;
}
&-arrow {
&-prev,
&-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
right: -78px;
i {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
text-align: center;
background: var(--primary-color-3);
font-size: 22px;
color: var(--text-white);
border-radius: 6px;
transition: 0.4s;
cursor: pointer;
&:hover {
background: var(--bg-white);
color: var(--text-heading-color);
border-color: var(--primary-color-2);
}
}
}
&-prev {
right: inherit;
left: -100px;
}
&.page {
.services__three-arrow-next i,
.services__three-arrow-prev i {
border: 1px solid var(--border-color-1);
background: var(--bg-white);
color: var(--text-heading-color);
&:hover {
background: var(--primary-color-1);
color: var(--text-white);
border-color: var(--primary-color-1);
}
}
}
}
}
/*==========================================================================
Services Page CSS
==========================================================================*/
.services__page {
.slider {
position: relative;
z-index: 1;
}
}
/*==========================================================================
Services Details CSS
==========================================================================*/
.services__details {
&-left {
&-content {
h2 {
margin-top: 40px;
margin-bottom: 25px;
}
&-list {
padding-bottom: 35px;
margin-bottom: 40px;
border-bottom: 1px solid var(--border-color-1);
span {
display: flex;
align-items: baseline;
margin-bottom: 20px;
max-width: 586px;
&:last-child {
margin: 0;
}
i {
color: var(--primary-color-1);
margin-right: 10px;
}
}
&.bold {
span {
font-size: 18px;
font-weight: 500;
}
}
}
}
}
}
@media (max-width: 1599px){
.services__three {
&-arrow {
&-next {
right: -48px;
}
&-prev {
left: -70px;
}
}
}
}
@media (max-width: 1399px) {
.services__one {
&-item {
padding: 40px 30px;
padding-bottom: 34px;
}
}
}
@media (max-width: 1299px) {
.services__three {
&-arrow {
text-align: center;
margin-bottom: 65px;
margin-top: -30px;
&-next {
position: initial;
margin-left: 10px;
}
&-prev {
position: initial;
}
}
}
}
@media (max-width: 1199px) {
.services__two {
&-item {
&-content {
padding: 30px 25px;
}
}
}
.services__three {
&-item {
&-content {
padding: 40px 25px;
padding-top: 60px;
margin-right: 10px;
}
}
}
}
@media (max-width: 767px) {
.services__two {
&-item {
&-content {
padding: 30px 12px;
}
}
}
}
@media (max-width: 575px) {
.services__two {
&-item {
&-content {
padding: 30px;
}
}
}
}

162
public/assets/sass/section/_solution.scss Normal file
View File

@ -0,0 +1,162 @@
/*==========================================================================
Solution CSS
==========================================================================*/
.solution__area {
position: relative;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
z-index: -1;
opacity: 0.6;
}
&-title {
h1 {
color: var(--text-white);
max-width: 800px;
margin-bottom: 44px;
}
}
&-right {
position: relative;
&::before {
content: '';
position: absolute;
width: 463px;
height: 463px;
border-radius: 50%;
top: 30px;
right: -155px;
background: var(--primary-color-2);
mix-blend-mode: overlay;
}
h6 {
color: var(--text-white);
margin-top: 30px;
}
&-video {
max-width: 155px;
text-align: center;
margin: 0 0 0 auto;
}
}
}
/*==========================================================================
Solution Two CSS
==========================================================================*/
.solutions__two {
background: var(--color-6);
&-title h2 {
margin-bottom: 30px;
}
&-item {
padding: 40px;
background: var(--bg-white);
border: 1px solid var(--border-color-1);
transition: 0.6s;
&-icon {
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
background: var(--color-17);
border-radius: 50%;
margin-bottom: 20px;
img {
transform: rotateY(0);
}
}
h4 {
margin-bottom: 5px;
}
&:hover {
transform: translateY(-8px);
box-shadow: var(--box-shadow-2);
.solutions__two-item-icon img {
animation: rotateY 0.7s;
}
}
}
}
@media (max-width: 1399px) {
.solutions__two-item {
padding: 40px 30px;
}
}
@media (max-width: 1199px) {
.solution__area {
&-title {
text-align: center;
margin-bottom: 50px;
h1 {
margin: 0 auto;
margin-bottom: 44px;
}
}
&-right {
position: relative;
&::before {
top: 20px;
right: 50%;
transform: translateX(50%);
}
h6 {
margin-top: 30px;
}
&-video {
margin: 0 auto;
}
}
}
}
@media (max-width: 991px) {
.solution__area {
&-title {
h1 {
font-size: 60px;
line-height: 70px;
}
}
}
}
@media (max-width: 767px) {
.solution__area {
&-title {
h1 {
font-size: 48px;
line-height: 58px;
margin-bottom: 35px;
}
}
}
}
@media (max-width: 575px) {
.solution__area {
&-title {
h1 {
font-size: 42px;
line-height: 52px;
}
}
}
}
@media (max-width: 470px) {
.solution__area {
&-title {
h1 {
font-size: 31px;
line-height: 41px;
margin-bottom: 30px;
}
}
}
}

226
public/assets/sass/section/_subscribe.scss Normal file
View File

@ -0,0 +1,226 @@
/*==========================================================================
Subscribe One CSS
==========================================================================*/
.subscribe__area {
position: relative;
margin-bottom: 100px;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 45%;
background: var(--bg-white);
}
&-bg {
position: relative;
z-index: 1;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 75px 70px;
overflow: hidden;
margin: 0;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-heading-color);
opacity: 0.7;
z-index: -1;
}
&::after {
content: '';
position: absolute;
width: 303px;
height: 303px;
border-radius: 50%;
bottom: -155px;
left: -10px;
background: var(--primary-color-2);
mix-blend-mode: overlay;
z-index: -1;
animation-name: left-right2;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&.all-page::after {
background: var(--primary-color-1);
}
}
&-left {
h2 {
color: var(--text-white);
margin-bottom: 20px;
}
&-notification {
display: flex;
align-items: center;
gap: 40px;
h6 {
color: var(--text-white);
max-width: 113px;
}
&-icon {
i {
color: var(--primary-color-2);
background: var(--bg-white);
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
font-size: 18px;
}
&.all-page i {
color: var(--primary-color-1);
}
}
}
}
&-form {
margin-left: 130px;
form {
position: relative;
input {
border: 0;
height: 70px;
border-radius: 35px;
color: var(--color-3);
padding-left: 30px;
}
button {
position: absolute;
top: 0;
right: 0;
border-radius: 35px;
background: var(--primary-color-2);
font-weight: 700;
font-family: var(--heading-font);
height: 70px;
padding-left: 46px;
padding-right: 46px;
text-transform: uppercase;
}
}
&.all-page button {
background: var(--primary-color-1);
}
}
}
/*==========================================================================
Subscribe Two CSS
==========================================================================*/
.subscribe {
background: var(--primary-color-3);
&-title {
position: relative;
z-index: 1;
padding: 60px 0;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('../../assets/img/icon/envelop.png');
background-repeat: no-repeat;
opacity: 0.07;
z-index: -1;
}
h2 {
color: var(--text-white);
}
}
&-form {
margin-left: 50px;
form {
position: relative;
input {
height: 70px;
color: var(--color-3);
&:focus {
border-color: var(--bg-white);
}
}
.btn-seven {
position: absolute;
top: 5px;
right: 5px;
background: var(--primary-color-3);
font-weight: 700;
font-size: 16px;
font-family: var(--heading-font);
padding: 17px 20px;
border-radius: 4px;
}
}
}
}
@media (max-width: 1199px) {
.subscribe__area {
&-form {
margin-left: 20px;
}
&-bg {
padding: 65px 20px;
}
}
}
@media (max-width: 991px) {
.subscribe__area {
&-form {
margin-left: 0;
}
&-bg::after {
left: 20%;
}
&-left {
h2 {
text-align: center;
}
&-notification {
justify-content: center;
}
}
}
.subscribe {
padding-bottom: 50px;
&-title {
text-align: center;
padding-top: 50px;
padding-bottom: 30px;
}
&-form {
margin-left: 0;
}
}
}
@media (max-width: 550px) {
.subscribe__area {
&-bg {
padding: 50px 5px;
}
&-form form {
input {
height: 60px;
padding-left: 10px;
padding-right: 128px;
border-radius: 30px;
}
button {
border-radius: 30px;
height: 60px;
padding-left: 10px;
padding-right: 10px;
font-weight: 500;
}
}
}
}

633
public/assets/sass/section/_team.scss Normal file
View File

@ -0,0 +1,633 @@
/*==========================================================================
Team CSS
==========================================================================*/
.team__area {
&-item {
&-image {
position: relative;
z-index: 1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 20%;
top: 0;
left: 0;
background: var(--bg-heading-color);
opacity: 0;
transition: 0.4s;
}
&-icon {
position: absolute;
bottom: 70px;
right: 30px;
z-index: 1;
span {
color: var(--text-white);
height: 40px;
width: 40px;
background: var(--primary-color-2);
line-height: 40px;
text-align: center;
font-size: 14px;
border-radius: 50%;
display: inline-block;
transition: 0.4s;
cursor: pointer;
}
&.page {
span {
background: var(--primary-color-1);
}
.team__area-item-image-social ul li a i:hover {
background: var(--primary-color-1);
}
}
.team__area-item-image-social {
position: absolute;
bottom: 50px;
}
&:hover {
.team__area-item-image-social {
opacity: 1;
visibility: visible;
}
}
}
&-social {
position: absolute;
left: 0;
opacity: 0;
visibility: hidden;
transition: 0.4s;
ul {
padding: 0;
margin: 0;
li {
list-style: none;
margin-bottom: 8px;
&:last-child {
margin: 0;
}
a {
i {
display: inline-block;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
border-radius: 50%;
background: var(--bg-white);
color: var(--text-heading-color);
transition: 0.4s;
&:hover{
background: var(--primary-color-2);
color: var(--text-white);
}
}
}
}
}
}
img {
width: 100%;
}
}
&-content {
padding: 22px;
margin: 0 30px;
margin-top: -60px;
background: var(--bg-white);
position: relative;
z-index: 1;
text-align: center;
box-shadow: var(--box-shadow-1);
.text-eight {
font-weight: 600;
}
h5 a {
transition: 0.4s;
&:hover {
color: var(--primary-color-2);
}
}
&.page {
h5 a:hover {
color: var(--primary-color-1);
}
}
}
&:hover {
.team__area-item-image::before {
height: 100%;
opacity: 0.7;
z-index: 1;
}
}
}
h6 {
color: var(--color-2);
font-size: 18px;
line-height: 30px;
a {
color: var(--primary-color-1);
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 600ms ease;
&:hover {
background-size: 100% 1px;
}
}
}
}
/*==========================================================================
Team Two CSS
==========================================================================*/
.team__two {
&-item {
text-align: center;
&-image {
position: relative;
z-index: 1;
overflow: hidden;
&::before {
position: absolute;
top: 0;
left: -75%;
z-index: 0;
display: block;
content: '';
width: 30%;
height: 100%;
transform: skewX(-25deg);
background: var(--bg-white);
opacity: 0.4;
z-index: 1;
}
img {
width: 100%;
transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
}
}
&-content {
margin: 0 20px;
padding: 30px 25px;
transition: 0.4s;
position: relative;
z-index: 2;
h4 {
transition: 0.4s;
}
.text-eight {
color: var(--primary-color-1);
transition: 0.4s;
font-weight: 600;
}
&-social {
margin-top: 10px;
transition: 0.4s;
opacity: 0;
ul {
padding: 0;
margin: 0;
li {
list-style: none;
display: inline-block;
margin-right: 15px;
&:last-child {
margin: 0;
}
a {
display: inline-block;
color: var(--text-white);
}
}
}
}
}
&:hover {
.team__two-item {
&-image {
&::before {
animation: animation 0.95s;
}
img {
transform: scale3d(1.1, 1.1, 1.1);
}
}
&-content {
background: var(--primary-color-1);
transform: translateY(-50%);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
h4 {
color: var(--text-white);
}
.text-eight {
color: var(--text-white);
}
&-social {
opacity: 1;
}
}
}
}
}
}
/*==========================================================================
Team Three CSS
==========================================================================*/
.team__three {
&-item {
&-image {
position: relative;
z-index: 1;
border-radius: 6px;
&::before {
content: '';
position: absolute;
width: 100%;
height: 60%;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(5, 6, 8, 0) 0%, var(--text-heading-color) 100%);
transition: 0.5s;
border-radius: 6px;
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 60%;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(249, 77, 29, 0) 0%, var(--primary-color-1) 100%);
transition: 0.5s;
opacity: 0;
border-radius: 6px;
}
img {
width: 100%;
border-radius: 6px;
}
&-info {
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 40px;
z-index: 1;
&-name {
.text-eight {
color: var(--text-white);
font-weight: 500;
}
h4 a {
color: var(--text-white);
}
}
&-icon {
position: relative;
z-index: 1;
&::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 17px;
height: 15px;
background-image: url('../../assets/img/icon/union.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: 0.6s;
}
span {
color: var(--primary-color-1);
height: 45px;
width: 45px;
line-height: 45px;
background: var(--bg-white);
text-align: center;
font-size: 14px;
border-radius: 50%;
display: inline-block;
transition: 0.4s;
cursor: pointer;
}
.team__three-item-image-info-social {
position: absolute;
bottom: 60px;
}
&:hover {
&::after {
top: -9px;
opacity: 1;
}
.team__three-item-image-info-social {
&::before {
height: 100%;
}
ul {
opacity: 1;
transition: transform 0.5s ease 0.5s, opacity 0.5s ease 0.5s;
transform: translateY(0);
visibility: visible;
}
}
}
}
&-social {
position: absolute;
left: 0;
padding: 15px 0;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-radius: 6px;
background: var(--primary-color-1);
z-index: -1;
transition: 0.5s;
}
ul {
visibility: hidden;
opacity: 0;
transition: transform 0.5s ease 0s, opacity 0.5s ease 0s;
transform: translateY(-30px);
padding: 0;
margin: 0;
li {
list-style: none;
&:last-child {
margin: 0;
}
a {
overflow: hidden;
i {
width: 45px;
line-height: 35px;
text-align: center;
font-size: 14px;
color: var(--text-white);
}
}
}
}
}
}
}
&:hover {
.team__three-item-image {
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
}
}
}
/*==========================================================================
Team Details CSS
==========================================================================*/
.team__single {
&-left {
position: sticky;
top: 130px;
margin-right: 30px;
&-thumb {
position: relative;
&-social {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
width: 100%;
text-align: center;
ul {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 8px;
li {
list-style: none;
display: inline-block;
a {
display: inline-flex;
transition: all ease .4s;
opacity: 0;
transform: translateY(20px);
i {
display: inline-flex;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
border-radius: 50%;
background: var(--bg-white);
transition: 0.4s;
color: var(--primary-color-1);
}
&:hover i {
background: var(--primary-color-1);
color: var(--text-white);
}
}
&:nth-child(1) a {
transition-delay: .1s;
}
&:nth-child(2) a {
transition-delay: .2s;
}
&:nth-child(3) a {
transition-delay: .3s;
}
&:nth-child(4) a {
transition-delay: .4s;
}
}
}
}
}
&-info {
padding: 40px;
background: var(--color-6);
border: 1px solid var(--border-color-4);
margin-bottom: 30px;
> span {
font-weight: 500;
color: var(--primary-color-1);
margin-top: -7px;
display: block;
}
h3 {
margin-bottom: 35px;
}
p {
margin-bottom: 25px;
}
&-contact {
&-item {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
background: var(--bg-white);
border-radius: 10px;
&:last-child {
margin: 0;
}
i {
width: 70px;
height: 90px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-weight: 400;
font-size: 28px;
color: var(--text-white);
background: var(--primary-color-1);
}
&-info {
span {
font-size: 15px;
font-weight: 500;
}
h5 {
text-transform: lowercase;
a {
transition: 0.4s;
&:hover {
color: var(--primary-color-1);
}
}
}
}
}
}
}
&:hover {
.team__single-left-thumb-social ul li a {
transform: translateY(0);
opacity: 1;
}
}
}
&-right {
&-experience {
margin-bottom: 40px;
h3 {
margin-bottom: 10px;
}
p {
&:last-child {
margin: 0;
}
}
}
&-skill {
h3 {
margin-bottom: 10px;
}
p {
margin-bottom: 30px;
}
}
&-form {
margin-top: 50px;
padding: 50px 30px;
background: var(--color-6);
border: 1px solid var(--border-color-4);
&-select {
position: relative;
z-index: 1;
&::before {
content: "\f88c";
font-family: 'Font Awesome 5 Pro';
font-weight: 400;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--primary-color-1);
}
select {
width: 100%;
height: 60px;
background: var(--bg-white);
padding: 0 15px;
color: var(--body-color);
border-radius: 5px;
appearance: none;
&:focus {
outline: none;
}
}
}
.btn-one {
background: var(--bg-heading-color);
&::after,
&::before {
background: var(--primary-color-1);
}
}
}
}
}
@media (max-width: 1399px) {
.team__area {
&-item {
&-image {
&-icon {
bottom: 55px;
}
}
&-content {
margin-top: -45px;
}
}
}
}
@media (max-width: 991px) {
.team__single-left {
margin: 0;
&-info {
padding: 35px 25px;
}
}
}
@media (max-width: 575px) {
.team__single-form {
padding: 40px 20px;
}
.team__single-left-info-contact-item {
gap: 10px;
i {
width: 60px;
height: 85px;
font-size: 22px;
}
&-info {
span {
font-size: 14px;
}
h5 {
font-size: 16px;
line-height: 26px;
font-weight: 500;
}
}
}
}

244
public/assets/sass/section/_testimonial.scss Normal file
View File

@ -0,0 +1,244 @@
/*==========================================================================
Testimonial CSS
==========================================================================*/
.testimonial__area {
position: relative;
z-index: 1;
overflow: hidden;
&-shape {
position: absolute;
top: -210px;
right: 20px;
z-index: -1;
}
&-item {
border: 1px solid var(--color-10);
padding: 50px;
padding-bottom: 45px;
transition: 0.4s;
position: relative;
&-icon {
position: absolute;
right: 50px;
bottom: 45px;
color: var(--text-heading-color);
opacity: 0.05;
font-size: 50px;
}
&-client {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 30px;
&-image {
img {
width: 80px;
height: 80px;
max-width: 80px;
object-fit: cover;
border-radius: 50%;
}
}
&-title {
h5 {
transition: 0.4s;
}
span {
color: var(--color-2);
transition: 0.4s;
}
}
}
p {
font-size: 19px;
line-height: 34px;
transition: 0.4s;
}
&-reviews {
margin-top: 30px;
i {
color: var(--primary-color-1);
transition: 0.4s;
}
}
&:hover {
background: var(--primary-color-1);
border-color: var(--primary-color-1);
p {
color: var(--text-white);
}
.testimonial__area-item {
&-icon {
color: var(--text-white);
opacity: 0.09;
}
&-client-title {
h5 {
color: var(--text-white);
}
span {
color: var(--color-9);
}
}
&-reviews i {
color: var(--text-white);
}
}
}
}
&-button {
padding-right: 23px;
&-next {
display: inline-block;
position: static;
margin: 0;
margin-left: 40px;
i {
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
border: 1px solid var(--color-10);
font-size: 22px;
color: var(--text-heading-color);
border-radius: 50%;
transition: 0.4s;
&:hover {
background: var(--primary-color-1);
color: var(--text-white);
border-color: var(--primary-color-1);
}
}
}
&-prev {
display: inline-block;
position: static;
margin: 0;
i {
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
border: 1px solid var(--color-10);
font-size: 22px;
color: var(--text-heading-color);
border-radius: 50%;
transition: 0.4s;
&:hover {
background: var(--primary-color-1);
color: var(--text-white);
border-color: var(--primary-color-1);
}
}
}
}
}
/*==========================================================================
Testimonial Two CSS
==========================================================================*/
.testimonial__two {
&-item {
padding: 40px;
box-shadow: var(--box-shadow-2);
&-top {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 20px;
&-reviews {
h6 {
font-size: 17px;
line-height: 27px;
}
ul {
padding: 0;
margin: 0;
li {
display: inline-block;
i {
color: var(--primary-color-1);
}
}
}
}
}
&-bottom {
display: flex;
align-items: center;
gap: 20px;
border: 1px solid var(--border-color-1);
padding: 20px;
margin-top: 40px;
border-radius: 6px;
position: relative;
&::before {
content: '';
position: absolute;
left: 30px;
top: -10px;
transform: rotate(45deg);
width: 20px;
height: 20px;
background: var(--bg-white);
border-top: var(--border-color-1) solid 1px;
border-left: var(--border-color-1) solid 1px;
}
img {
max-width: 60px;
border-radius: 50%;
}
}
}
}
@media (max-width: 1399px) {
.testimonial__area {
&-item {
padding: 40px 30px;
padding-bottom: 35px;
&-icon {
right: 30px;
bottom: 40px;
}
&-client {
margin-bottom: 25px;
}
&-reviews {
margin-top: 25px;
}
}
}
.testimonial__two-item {
padding: 40px 30px;
}
}
@media (max-width: 991px) {
.testimonial__two-item {
padding: 35px 25px;
}
}
@media (max-width: 359px) {
.testimonial__area {
&-item {
padding: 35px 30px;
padding-bottom: 30px;
&-icon {
right: 30px;
bottom: 35px;
}
&-client {
gap: 20px;
&-image img {
width: 65px;
height: 65px;
max-width: 65px;
}
}
p {
font-size: 15px;
line-height: 28px;
}
}
}
}

242
public/assets/sass/section/_topbar.scss Normal file
View File

@ -0,0 +1,242 @@
/*==========================================================================
Top Bar CSS
==========================================================================*/
.top__bar {
background: var(--bg-heading-color);
padding: 7px 30px;
position: relative;
z-index: 1;
overflow: hidden;
&::before {
content: '';
position: absolute;
background: var(--primary-color-1);
top: 0;
left: 0;
bottom: 0;
width: 30%;
clip-path: polygon(0 0, 100% 0%, 97% 100%, 0 100%);
z-index: -1;
}
&::after {
content: '';
position: absolute;
background: var(--text-white);
top: -5px;
left: 30%;
bottom: -4px;
width: 3px;
z-index: -1;
transform: rotate(23deg);
}
&-left {
a {
color: var(--text-white);
font-weight: 600;
i {
margin-right: 10px;
}
}
}
&-right {
display: flex;
align-items: center;
justify-content: end;
> a {
color: var(--text-white);
font-weight: 600;
transition: 0.4s;
text-transform: lowercase;
&:hover {
color: var(--primary-color-1);
}
i {
color: var(--primary-color-1);
margin-right: 10px;
}
}
&-social {
border-left: 1px solid var(--color-2);
padding-left: 30px;
margin-left: 30px;
ul {
padding: 0;
margin: 0;
li {
list-style: none;
display: inline-block;
margin-right: 15px;
&:last-child {
margin: 0;
}
a {
i {
color: var(--text-white);
transition: .4s;
&:hover {
color: var(--primary-color-1);
}
}
}
}
}
}
}
}
/*==========================================================================
Top Bar Three CSS
==========================================================================*/
.topbar__three {
padding: 12px 0;
&-left {
a {
font-weight: 600;
font-size: 14px;
transition: 0.4s;
line-height: 24px;
&:hover {
color: var(--primary-color-3);
}
i {
margin-right: 10px;
color: var(--primary-color-3);
font-size: 16px;
line-height: 26px;
}
}
}
&-right {
ul {
padding: 0;
margin: 0;
li {
list-style: none;
display: inline-block;
margin-right: 25px;
padding-right: 25px;
border-right: 1px solid var(--color-13);
&:last-child {
margin: 0;
padding: 0;
border: 0;
}
a {
font-weight: 600;
font-size: 16px;
line-height: 26px;
transition: 0.4s;
text-transform: lowercase;
&:hover {
color: var(--primary-color-3);
}
i {
color: var(--primary-color-3);
margin-right: 10px;
}
}
}
}
}
}
@media (max-width: 1600px) {
.top__bar {
&::after {
transform: rotate(20deg);
}
}
}
@media (max-width: 1480px) {
.top__bar {
&::before {
width: 33%;
}
&::after {
transform: rotate(20deg);
left: 33%;
}
}
}
@media (max-width: 1320px) {
.top__bar {
&::before {
width: 36%;
}
&::after {
left: 36%;
}
}
}
@media (max-width: 1190px) {
.top__bar {
&::before {
width: 40%;
}
&::after {
left: 40%;
transform: rotate(18deg);
}
}
}
@media (max-width: 991px) {
.top__bar {
padding: 7px 13px;
&::before {
display: none;
}
&::after {
display: none;
}
&-left {
a {
transition: 0.4s;
i {
color: var(--primary-color-1);
}
&:hover {
color: var(--primary-color-1);
}
}
}
}
}
@media (max-width: 767px) {
.top__bar {
&-left {
text-align: center;
margin-bottom: 5px;
}
&-right {
justify-content: center;
&-social {
padding-left: 11px;
margin-left: 12px;
}
}
}
}
@media (max-width: 575px) {
.top__bar {
padding: 5px 0;
}
.topbar__three-right ul li {
margin-right: 0;
padding-right: 5px;
border: 0;
}
}
@media (max-width: 359px) {
.top__bar {
&-left {
text-align: center;
margin-bottom: 5px;
}
&-right {
justify-content: center;
&-social {
border: 0;
padding-left: 5px;
margin-left: 5px;
}
}
}
}