pushing all files
This commit is contained in:
4
public/assets/sass/default/_all.scss
Normal file
4
public/assets/sass/default/_all.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import 'common';
|
||||
@import 'color';
|
||||
@import 'dark';
|
||||
@import 'space';
|
||||
48
public/assets/sass/default/_color.scss
Normal file
48
public/assets/sass/default/_color.scss
Normal file
@ -0,0 +1,48 @@
|
||||
/*==========================================================================
|
||||
Conbix Color CSS
|
||||
==========================================================================*/
|
||||
:root {
|
||||
--body-font: 'Manrope', sans-serif;
|
||||
--heading-font: 'Urbanist', sans-serif;
|
||||
--text-white: #FFFFFF;
|
||||
--bg-white: #FFFFFF;
|
||||
--btn-white: #FFFFFF;
|
||||
--border-white: #FFFFFF;
|
||||
--black: #000000;
|
||||
--primary-color-1: #F94C30;
|
||||
--primary-color-2: #FCA028;
|
||||
--primary-color-3: #406AFF;
|
||||
--bg-heading-color: #131313;
|
||||
--text-heading-color: #131313;
|
||||
--btn-heading-color: #131313;
|
||||
--body-color: #343434;
|
||||
--dark-one: #1C1E22;
|
||||
--dark-two: #222429;
|
||||
--color-1: #1D2122;
|
||||
--color-2: #676767;
|
||||
--color-3: #999999;
|
||||
--color-4: #CCCCCC;
|
||||
--color-5: #F1F8FB;
|
||||
--color-6: #F4F4F4;
|
||||
--color-7: #FEDBD6;
|
||||
--color-8: #E8E8E8;
|
||||
--color-9: #F2F6F9;
|
||||
--color-10: #ECECEC;
|
||||
--color-11: #2B2B2B;
|
||||
--color-12: #FEE3BF;
|
||||
--color-13: #CFCFCF;
|
||||
--color-14: #FDC67E;
|
||||
--color-15: #ACBDF8;
|
||||
--color-16: #E1E1E1;
|
||||
--color-17: #feedea;
|
||||
--color-18: #151718;
|
||||
--color-19: #3B3838;
|
||||
--color-20: #808287;
|
||||
--color-21: rgba(34, 36, 41, 0.5);
|
||||
--border-color-1: #E7E7E7;
|
||||
--border-color-2: #E9E9E8;
|
||||
--border-color-3: rgba(19, 19, 19, 0.1);
|
||||
--border-color-4: rgba(19, 19, 19, 0.06);;
|
||||
--box-shadow-1: 0px 25px 70px rgba(0, 0, 0, 0.08);
|
||||
--box-shadow-2: 0px 10px 70px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
925
public/assets/sass/default/_common.scss
Normal file
925
public/assets/sass/default/_common.scss
Normal file
@ -0,0 +1,925 @@
|
||||
/*------------------------------------------------------------------------
|
||||
|
||||
Template Name: Conbix - Business Consulting Next js Template
|
||||
Author: ThemeOri
|
||||
Author URI: http://themeori.com
|
||||
Version: 1.0.2
|
||||
Description: This Template is created for web template
|
||||
|
||||
--------------------------------------------------------------------------
|
||||
TABLE OF CONTENTS
|
||||
--------------------------------------------------------------------------
|
||||
|
||||
* Google Fonts
|
||||
* Common CSS
|
||||
* Form CSS
|
||||
* Hedging CSS
|
||||
* Conbix Button And Title Styles CSS
|
||||
* Conbix Text Style CSS
|
||||
* Scroll Top CSS
|
||||
* Preloader CSS
|
||||
* Animation CSS
|
||||
* Conbix Color CSS
|
||||
* Dark CSS
|
||||
* Dark Light Switch CSS
|
||||
* Space And Container CSS
|
||||
* Top Bar CSS
|
||||
* Top Bar Three CSS
|
||||
* Menu Bar Sticky CSS
|
||||
* Menu Bar CSS
|
||||
* Menu Sidebar CSS
|
||||
* Header Two CSS
|
||||
* Header Three CSS
|
||||
* Menu Responsive CSS
|
||||
* Banner One CSS
|
||||
* Banner Two CSS
|
||||
* Banner Three CSS
|
||||
* About One CSS
|
||||
* About Two CSS
|
||||
* About Three CSS
|
||||
* About Company CSS
|
||||
* Company Two CSS
|
||||
* About Solution CSS
|
||||
* Company History CSS
|
||||
* Features CSS
|
||||
* Consulting CSS
|
||||
* Work CSS
|
||||
* Services CSS
|
||||
* Services Two CSS
|
||||
* Services Three CSS
|
||||
* Services Page CSS
|
||||
* Services Details CSS
|
||||
* Cta CSS
|
||||
* Cta Two CSS
|
||||
* Get In Touch CSS
|
||||
* Get In Touch Three CSS
|
||||
* Help CSS
|
||||
* Pricing CSS
|
||||
* Pricing Two CSS
|
||||
* Team CSS
|
||||
* Team Two CSS
|
||||
* Team Three CSS
|
||||
* Team Details CSS
|
||||
* Testimonial CSS
|
||||
* Testimonial Two CSS
|
||||
* Choose Us CSS
|
||||
* FAQ CSS
|
||||
* FAQ Two CSS
|
||||
* Project CSS
|
||||
* Portfolio One CSS
|
||||
* Portfolio Two CSS
|
||||
* Portfolio Three CSS
|
||||
* Conbix Filter CSS
|
||||
* Project Filter CSS
|
||||
* Project Details CSS
|
||||
* Solution CSS
|
||||
* Solution Two CSS
|
||||
* Experience CSS
|
||||
* Subscribe One CSS
|
||||
* Subscribe Two CSS
|
||||
* Blog One CSS
|
||||
* Blog Two CSS
|
||||
* Blog Three CSS
|
||||
* News Details CSS
|
||||
* News Standard CSS
|
||||
* Conbix Contact CSS
|
||||
* Contact Page CSS
|
||||
* Contact Two CSS
|
||||
* Contact Three CSS
|
||||
* Contact Four CSS
|
||||
* Request Quote CSS
|
||||
* Footer Top CSS
|
||||
* Footer One CSS
|
||||
* Footer Two CSS
|
||||
* Footer Three CSS
|
||||
* All Footer CSS
|
||||
* Copyright One CSS
|
||||
* Copyright Two CSS
|
||||
* Copyright Three CSS
|
||||
* All Side Bar CSS
|
||||
* Post CSS
|
||||
* Theme Pagination CSS
|
||||
* Page Banner CSS
|
||||
* Error CSS
|
||||
* Contact CSS
|
||||
|
||||
/*==========================================================================
|
||||
Common CSS
|
||||
==========================================================================*/
|
||||
body {
|
||||
font-family: var(--body-font);
|
||||
color: var(--body-color);
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
transition: 0.4s;
|
||||
}
|
||||
a {
|
||||
outline: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a,
|
||||
button,
|
||||
i {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.section-padding {
|
||||
padding: 120px 0;
|
||||
}
|
||||
.section-padding-two {
|
||||
padding: 95px 0 120px 0;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.section-padding {
|
||||
padding: 90px 0;
|
||||
}
|
||||
.section-padding-two {
|
||||
padding: 65px 0 90px 0;
|
||||
}
|
||||
}
|
||||
.display-none {
|
||||
display: none;
|
||||
}
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
.filter img {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.img__full {
|
||||
width: 100%;
|
||||
}
|
||||
/*==========================================================================
|
||||
Form CSS
|
||||
==========================================================================*/
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
border: 1px solid var(--border-color-2);
|
||||
border-color: transparent;
|
||||
border-radius: 6px;
|
||||
background: var(--primary-color-1);
|
||||
color: var(--text-white);
|
||||
padding: 17px 40px;
|
||||
}
|
||||
button:hover,
|
||||
input[type="button"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="submit"]:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
button:active,
|
||||
button:focus,
|
||||
input[type="button"]:active,
|
||||
input[type="button"]:focus,
|
||||
input[type="reset"]:active,
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:active,
|
||||
input[type="submit"]:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="number"],
|
||||
input[type="tel"],
|
||||
input[type="range"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="week"],
|
||||
input[type="time"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="color"],
|
||||
textarea {
|
||||
color: var(--body-color);
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border: 1px solid var(--border-color-2);
|
||||
padding: 0 15px;
|
||||
background: var(--bg-white);
|
||||
}
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="range"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="color"]:focus,
|
||||
textarea:focus {
|
||||
color: var(--text-heading-color);
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: var(--primary-color-1);
|
||||
}
|
||||
select {
|
||||
border: 1px solid var(--border-color-2);
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
button,
|
||||
button:hover,
|
||||
button:focus {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
/*==========================================================================
|
||||
Hedging CSS
|
||||
==========================================================================*/
|
||||
$list: (h1, 70px, 80px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h2, 48px, 60px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h3, 30px, 40px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h4, 24px, 34px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h5, 22px, 32px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h6, 20px, 30px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(p, 16px, 30px, 0, 0);
|
||||
@each $name, $size, $height, $p, $m, $color, $font, $weight in $list {
|
||||
#{$name}{
|
||||
font-size: $size;
|
||||
line-height: $height;
|
||||
padding: $p;
|
||||
margin: $m;
|
||||
color: $color;
|
||||
font-family: $font;
|
||||
font-weight: $weight;
|
||||
}
|
||||
}
|
||||
$list: left, center, right;
|
||||
@each $i in $list {
|
||||
.t-#{$i} {
|
||||
text-align: $i;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
h2 {
|
||||
font-size: 45px;
|
||||
line-height: 55px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
h2 {
|
||||
font-size: 31px;
|
||||
line-height: 41px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 359px) {
|
||||
h2 {
|
||||
font-size: 27px;
|
||||
line-height: 37px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 21px;
|
||||
line-height: 31px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Conbix Button And Title Styles CSS
|
||||
==========================================================================*/
|
||||
.subtitle-one,
|
||||
.subtitle-two,
|
||||
.subtitle-three {
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--heading-font);
|
||||
color: var(--primary-color-1);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
padding-left: 55px;
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 6px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: 6px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
.subtitle-two {
|
||||
color: var(--primary-color-2);
|
||||
&::before {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
&::after {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
.subtitle-three {
|
||||
color: var(--primary-color-3);
|
||||
&::before {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
&::after {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
.btn-one,
|
||||
.btn-two,
|
||||
.btn-three,
|
||||
.btn-four,
|
||||
.btn-five,
|
||||
.btn-six,
|
||||
.btn-seven,
|
||||
.btn-eight,
|
||||
.btn-nine {
|
||||
background: var(--primary-color-1);
|
||||
color: var(--text-white);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
padding: 17px 43px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-family: var(--heading-font);
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
transition: 0.4s;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
i {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
width: 430px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: var(--btn-heading-color);
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%) translateX(-50%) scale(0);
|
||||
transition: all 0.5s ease-out 0s;
|
||||
z-index: -1;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--text-white);
|
||||
&::before {
|
||||
transform: translateY(-50%) translateX(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
color: var(--text-white);
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
&-two {
|
||||
background: var(--btn-white);
|
||||
color: var(--btn-heading-color);
|
||||
border: 1px solid var(--color-4);
|
||||
padding: 16px 42px;
|
||||
&::before {
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
&-three {
|
||||
background: transparent;
|
||||
color: var(--text-white);
|
||||
border: 1px solid var(--border-white);
|
||||
padding: 16px 42px;
|
||||
&:hover {
|
||||
color: var(--text-white);
|
||||
border-color: var(--primary-color-1);
|
||||
}
|
||||
&::before {
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--text-white);
|
||||
}
|
||||
}
|
||||
&-four {
|
||||
background: var(--btn-heading-color);
|
||||
&::before {
|
||||
background: var(--btn-white);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
&-five {
|
||||
background: var(--primary-color-2);
|
||||
color: var(--text-white);
|
||||
border-radius: 30px;
|
||||
&::before {
|
||||
background: var(--btn-white);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
&-six {
|
||||
background: transparent;
|
||||
border: 1px solid var(--primary-color-2);
|
||||
color: var(--primary-color-2);
|
||||
border-radius: 30px;
|
||||
&:hover {
|
||||
border-color: var(--text-white);
|
||||
}
|
||||
&::before {
|
||||
background: var(--btn-white);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
&-seven {
|
||||
background: var(--primary-color-3);
|
||||
&::before {
|
||||
background: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
&-eight {
|
||||
background: transparent;
|
||||
color: var(--primary-color-3);
|
||||
border: 1px solid var(--primary-color-3);
|
||||
padding: 16px 42px;
|
||||
&:hover {
|
||||
border-color: var(--btn-heading-color);
|
||||
}
|
||||
&::before {
|
||||
background: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
&-nine {
|
||||
background: var(--btn-white);
|
||||
color: var(--text-white);
|
||||
&:hover {
|
||||
color: var(--text-white);
|
||||
}
|
||||
&::before {
|
||||
background: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.simple-btn-1,
|
||||
.simple-btn-2,
|
||||
.simple-btn-3 {
|
||||
color: var(--primary-color-1);
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
font-weight: 700;
|
||||
font-family: var(--heading-font);
|
||||
transition: 0.4s;
|
||||
text-transform: uppercase;
|
||||
i {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
.simple-btn {
|
||||
&-2 {
|
||||
color: var(--text-heading-color);
|
||||
&:hover {
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
color: var(--text-white);
|
||||
&:hover {
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Conbix Text Style CSS
|
||||
==========================================================================*/
|
||||
.text {
|
||||
&-one {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-two {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-three {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-four {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-five {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-six {
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-seven {
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-eight {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-nine {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Scroll Top CSS
|
||||
==========================================================================*/
|
||||
.scroll-up {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border-radius: 50px;
|
||||
box-shadow: inset 0 0 0 2px var(--color-8);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(15px);
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: all 200ms linear;
|
||||
&::after {
|
||||
position: absolute;
|
||||
font-family: 'Font Awesome 5 Pro';
|
||||
content: "\f176";
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
color: var(--primary-color-1);
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 20px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
transition: all 200ms linear;
|
||||
}
|
||||
&.active-scroll {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
svg path {
|
||||
fill: none;
|
||||
}
|
||||
svg.scroll-circle path {
|
||||
stroke: var(--primary-color-1);
|
||||
stroke-width: 4;
|
||||
box-sizing:border-box;
|
||||
transition: all 200ms linear;
|
||||
}
|
||||
&.two {
|
||||
&::after {
|
||||
color: var(--primary-color-2);
|
||||
}
|
||||
svg.scroll-circle path {
|
||||
stroke: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
&.three {
|
||||
&::after {
|
||||
color: var(--primary-color-3);
|
||||
}
|
||||
svg.scroll-circle path {
|
||||
stroke: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Preloader CSS
|
||||
==========================================================================*/
|
||||
.theme-loader {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-heading-color);
|
||||
z-index: 9999999999;
|
||||
}
|
||||
.spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
display: flex;
|
||||
}
|
||||
.spinner-bounce {
|
||||
will-change: transform;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color-1);
|
||||
display: inline-block;
|
||||
animation: bounces 1s ease-in-out infinite alternate;
|
||||
transform-origin: 50% 50%;
|
||||
&.one {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&.two {
|
||||
margin-right: 15px;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
&.three {
|
||||
animation-delay: .8s;
|
||||
}
|
||||
}
|
||||
@keyframes bounces {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
50% {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(.2);
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Animation CSS
|
||||
==========================================================================*/
|
||||
.video {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
z-index: 4;
|
||||
span {
|
||||
position: relative;
|
||||
color: var(--primary-color-2);
|
||||
font-size: 20px;
|
||||
z-index: 1;
|
||||
background: var(--bg-white);
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.video-pulse::after, .video-pulse::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--border-white);
|
||||
opacity: 0.3;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
animation-duration: 2.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-name: video-animation;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.video-pulse::before {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.modal-video-close-btn {
|
||||
padding: 0
|
||||
}
|
||||
@keyframes video-animation {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
|
||||
.content__roll {
|
||||
animation: roll 10s infinite linear;
|
||||
}
|
||||
@keyframes roll {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-359deg);
|
||||
}
|
||||
}
|
||||
.roll {
|
||||
animation: rotation 2s infinite linear;
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
.left-right-animate {
|
||||
animation-name: left-right;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes left-right {
|
||||
0% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.left-right-animate2 {
|
||||
animation-name: left-right2;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes left-right2 {
|
||||
0% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(110px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-animation {
|
||||
animation: icon-animation 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes icon-animation {
|
||||
|
||||
from {
|
||||
transform:rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
20%, 32%, 44%, 56%, 68% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
23%, 35%, 47%, 59%, 71% {
|
||||
transform: rotate3d(0,0,1,15deg);
|
||||
}
|
||||
26%, 38%, 50%, 62%, 74% {
|
||||
transform: rotate3d(0,0,1,0deg);
|
||||
}
|
||||
29%, 41%, 53%, 65%, 77% {
|
||||
transform: rotate3d(0,0,1,-15deg);
|
||||
}
|
||||
80% {
|
||||
transform:rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes animation {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateY {
|
||||
100% {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev::after {
|
||||
display: none;
|
||||
}
|
||||
.swiper-button-next::after {
|
||||
display: none;
|
||||
}
|
||||
308
public/assets/sass/default/_dark.scss
Normal file
308
public/assets/sass/default/_dark.scss
Normal file
@ -0,0 +1,308 @@
|
||||
/*==========================================================================
|
||||
Dark CSS
|
||||
==========================================================================*/
|
||||
.light-n {
|
||||
display: none;
|
||||
}
|
||||
.light {
|
||||
display: none;
|
||||
}
|
||||
.dark-mode {
|
||||
color: var(--color-20);
|
||||
background: var(--dark-one);
|
||||
--text-heading-color: #FFFFFF;
|
||||
--color-2: #808287;
|
||||
--color-6: #222429;
|
||||
--color-7: #343434;
|
||||
--color-10: #343434;
|
||||
--color-12: #343434;
|
||||
--color-13: #808287;
|
||||
--color-15: #343434;
|
||||
--color-16: #343434;
|
||||
--border-color-1: #343434;
|
||||
--border-color-2: #343434;
|
||||
--border-color-3: #343434;
|
||||
--border-color-4: #343434;
|
||||
--bg-white: #1C1E22;
|
||||
.dark__image img {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.light-n {
|
||||
display: inline-block;
|
||||
}
|
||||
.dark-n {
|
||||
display: none;
|
||||
}
|
||||
.blog__two-item-content .btn-six,
|
||||
.btn-two {
|
||||
border-color: #343434;
|
||||
}
|
||||
//========== Banner ==========\\
|
||||
.banner__three {
|
||||
background-image: url("../../assets/img/shape/dark-bg.jpg") !important;
|
||||
}
|
||||
//========== Header ==========\\
|
||||
.header__two {
|
||||
&::before {
|
||||
background: url("../../assets/img/shape/before-dark.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
&::after {
|
||||
background: url("../../assets/img/shape/after-dark.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
}
|
||||
.header__area-menubar-right-sidebar-popup-icon::before {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.header__area-menubar-center-menu ul li.menu-item-has-children {
|
||||
> a {
|
||||
&::before {
|
||||
background: var(--text-white);
|
||||
}
|
||||
&::after {
|
||||
background: var(--text-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__area-menubar-center-menu {
|
||||
ul li.menu-item-has-children:hover > a::after {
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&.two {
|
||||
ul {
|
||||
li {
|
||||
&.menu-item-has-children {
|
||||
&:hover > a {
|
||||
&::after {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.three {
|
||||
ul {
|
||||
li {
|
||||
&.menu-item-has-children {
|
||||
&:hover > a {
|
||||
&::after {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__sticky-sticky-menu {
|
||||
box-shadow: 0 0 50px var(--color-12);
|
||||
}
|
||||
.header__area-menubar.two .header__area-menubar-left-logo .two {
|
||||
display: none;
|
||||
}
|
||||
//========== Contact ==========\\
|
||||
.contact__four-info {
|
||||
background: var(--dark-two);
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: var(--bg-heading-color);
|
||||
&::after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact__four-form,
|
||||
.contact__page-form {
|
||||
background: var(--dark-two);
|
||||
input,
|
||||
textarea {
|
||||
background: var(--dark-two);
|
||||
}
|
||||
}
|
||||
.contact__two-box {
|
||||
box-shadow: 0 0 80px var(--color-18);
|
||||
}
|
||||
//========== Features ==========\\
|
||||
.features-area-item.features-area-item-hover {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
//========== Services ==========\\
|
||||
.banner__one-image::before,
|
||||
.portfolio__three::before,
|
||||
.page__banner::before,
|
||||
.services__two-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: var(--text-white);
|
||||
mix-blend-mode: color;
|
||||
}
|
||||
.services__three-item-content::after {
|
||||
background: var(--dark-two);
|
||||
}
|
||||
//========== Pricing ==========\\
|
||||
.pricing__area-item {
|
||||
box-shadow: none;
|
||||
background: var(--dark-two);
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
&-title .text-two {
|
||||
color: var(--color-20);
|
||||
}
|
||||
}
|
||||
//========== Experience ==========\\
|
||||
.copyright__three p,
|
||||
.experience__area-right-skill-item-count.text-two {
|
||||
color: var(--color-20);
|
||||
}
|
||||
//========== Get In Touch ==========\\
|
||||
.getIn__touch-three-right {
|
||||
background: var(--dark-two);
|
||||
input,
|
||||
textarea {
|
||||
border-color: var(--body-color);
|
||||
&:focus {
|
||||
border-color: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.getIn__touch-left {
|
||||
box-shadow: 0 0 60px var(--color-11);
|
||||
}
|
||||
//========== Team ==========\\
|
||||
.team__three-item-image-info-icon::after {
|
||||
background-image: url("../../assets/img/icon/union-dark.png");
|
||||
}
|
||||
.testimonial__area-item-client-image img,
|
||||
.news__standard-left-item-image img,
|
||||
.testimonial__two-item-bottom > img,
|
||||
.all__sidebar-help-image > img,
|
||||
.team__three-item-image > img,
|
||||
.team__two-item-image > img,
|
||||
.faq__two-left-image > img,
|
||||
.blog__two-item-image img,
|
||||
.project__area-item > img,
|
||||
.project__one-item > img,
|
||||
.post__item-image img {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.header__area-menubar-center-menu ul li .sub-menu,
|
||||
.testimonial__two-item-bottom::before,
|
||||
.news__standard-left-item-content,
|
||||
.solutions__two-item-icon,
|
||||
.blog__three-item-content,
|
||||
.team__area-item-content,
|
||||
.blog__two-item-content,
|
||||
.features-area-item,
|
||||
.testimonial__two-item {
|
||||
background: var(--dark-two);
|
||||
}
|
||||
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
|
||||
color: var(--text-white);
|
||||
}
|
||||
.mode__switch::before {
|
||||
left: calc(100% - 31px);
|
||||
}
|
||||
.mode__switch span {
|
||||
&::before {
|
||||
background-image: url('../../assets/img/icon/sun-white.png');
|
||||
}
|
||||
&::after {
|
||||
background-image: url("../../assets/img/icon/moon-dark.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Dark Light Switch CSS
|
||||
==========================================================================*/
|
||||
.switch__tab {
|
||||
position: fixed;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
right: 0;
|
||||
top: 52%;
|
||||
transform: translateY(-50%) translateX(50px) rotate(90deg);
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
}
|
||||
.light-mode-title,
|
||||
.dark-mode-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-heading-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mode__switch {
|
||||
height: 34px;
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
background: var(--primary-color-1);
|
||||
transform: translateY(0px);
|
||||
border-radius: 35px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-out 0s;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
background: var(--text-white);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-out 0s;
|
||||
}
|
||||
&.two {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
&.three {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
.mode__switch span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80px;
|
||||
height: 34px;
|
||||
display: block;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 54px;
|
||||
background-image: url('../../assets/img/icon/sun.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: cover;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 54px;
|
||||
background-image: url("../../assets/img/icon/moon.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
184
public/assets/sass/default/_space.scss
Normal file
184
public/assets/sass/default/_space.scss
Normal file
@ -0,0 +1,184 @@
|
||||
/*==========================================================================
|
||||
Space And Container CSS
|
||||
==========================================================================*/
|
||||
.custom__container {
|
||||
max-width: 1520px;
|
||||
margin: 0 auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.auto__container {
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
@for $i from 0 to 25 {
|
||||
.mt-#{5 * $i}{
|
||||
margin-top: 5px * $i;
|
||||
}
|
||||
.mb-#{5 * $i}{
|
||||
margin-bottom: 5px * $i;
|
||||
}
|
||||
.ml-#{5 * $i}{
|
||||
margin-left: 5px * $i;
|
||||
}
|
||||
.mr-#{5 * $i}{
|
||||
margin-right: 5px * $i;
|
||||
}
|
||||
.pt-#{5 * $i}{
|
||||
padding-top: 5px * $i;
|
||||
}
|
||||
.pb-#{5 * $i}{
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
.pl-#{5 * $i}{
|
||||
padding-left: 5px * $i;
|
||||
}
|
||||
.pr-#{5 * $i}{
|
||||
padding-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
.display-n {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
@for $i from 0 to 20 {
|
||||
.xl-pb-#{5 * $i}{
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
.xl-pl-#{5 * $i}{
|
||||
padding-left: 5px * $i;
|
||||
}
|
||||
.xl-pr-#{5 * $i}{
|
||||
padding-right: 5px * $i;
|
||||
}
|
||||
.xl-mb-#{5 * $i}{
|
||||
margin-bottom: 5px * $i;
|
||||
}
|
||||
.xl-ml-#{5 * $i}{
|
||||
margin-left: 5px * $i;
|
||||
}
|
||||
.xl-mr-#{5 * $i}{
|
||||
margin-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
$list: left, center, right;
|
||||
@each $i in $list {
|
||||
.xl-t-#{$i} {
|
||||
text-align: $i;
|
||||
}
|
||||
}
|
||||
.xl-display-n {
|
||||
display: none !important;
|
||||
}
|
||||
.xl-display-b {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
@for $i from 0 to 15 {
|
||||
.lg-mb-#{5 * $i}{
|
||||
margin-bottom: 5px * $i;
|
||||
}
|
||||
.lg-mt-#{5 * $i}{
|
||||
margin-top: 5px * $i;
|
||||
}
|
||||
.lg-ml-#{5 * $i}{
|
||||
margin-left: 5px * $i;
|
||||
}
|
||||
.lg-pt-#{5 * $i}{
|
||||
padding-top: 5px * $i;
|
||||
}
|
||||
.lg-pb-#{5 * $i}{
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
.lg-pl-#{5 * $i}{
|
||||
padding-left: 5px * $i;
|
||||
}
|
||||
.lg-pr-#{5 * $i}{
|
||||
padding-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
$list: left, center, right;
|
||||
@each $i in $list {
|
||||
.lg-t-#{$i} {
|
||||
text-align: $i;
|
||||
}
|
||||
}
|
||||
.lg-display-n {
|
||||
display: none !important;
|
||||
}
|
||||
.lg-display-b {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
@for $i from 0 to 10 {
|
||||
.md-mb-#{5 * $i}{
|
||||
margin-bottom: 5px * $i;
|
||||
}
|
||||
.md-mt-#{5 * $i}{
|
||||
margin-top: 5px * $i;
|
||||
}
|
||||
.md-pt-#{5 * $i}{
|
||||
padding-top: 5px * $i;
|
||||
}
|
||||
.md-pb-#{5 * $i}{
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
.md-pl-#{5 * $i}{
|
||||
padding-left: 5px * $i;
|
||||
}
|
||||
.md-pr-#{5 * $i}{
|
||||
padding-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
$list: left, center, right;
|
||||
@each $i in $list {
|
||||
.md-t-#{$i} {
|
||||
text-align: $i;
|
||||
}
|
||||
}
|
||||
.md-display-n {
|
||||
display: none !important;
|
||||
}
|
||||
.md-display-b {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
@for $i from 0 to 12 {
|
||||
.sm-mb-#{5 * $i}{
|
||||
margin-bottom: 5px * $i;
|
||||
}
|
||||
.sm-mt-#{5 * $i}{
|
||||
margin-top: 5px * $i;
|
||||
}
|
||||
.sm-ml-#{5 * $i}{
|
||||
margin-left: 5px * $i;
|
||||
}
|
||||
.sm-pt-#{5 * $i}{
|
||||
padding-top: 5px * $i;
|
||||
}
|
||||
.sm-pb-#{5 * $i}{
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
.sm-pl-#{5 * $i}{
|
||||
padding-left: 5px * $i;
|
||||
}
|
||||
.sm-pr-#{5 * $i}{
|
||||
padding-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
$list: left, center, right;
|
||||
@each $i in $list {
|
||||
.sm-t-#{$i} {
|
||||
text-align: $i;
|
||||
}
|
||||
}
|
||||
.sm-display-n {
|
||||
display: none !important;
|
||||
}
|
||||
.sm-display-b {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
412
public/assets/sass/section/_about-page.scss
Normal file
412
public/assets/sass/section/_about-page.scss
Normal 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
432
public/assets/sass/section/_about.scss
Normal 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
477
public/assets/sass/section/_all-sidebar.scss
Normal 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
23
public/assets/sass/section/_all.scss
Normal 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
718
public/assets/sass/section/_banner.scss
Normal 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
858
public/assets/sass/section/_blog.scss
Normal 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
64
public/assets/sass/section/_chooseUs.scss
Normal 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
511
public/assets/sass/section/_contact.scss
Normal 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
46
public/assets/sass/section/_copyright.scss
Normal 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
558
public/assets/sass/section/_cta.scss
Normal 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
110
public/assets/sass/section/_experience.scss
Normal 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
216
public/assets/sass/section/_faq.scss
Normal 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
109
public/assets/sass/section/_features.scss
Normal 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
541
public/assets/sass/section/_footer.scss
Normal 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
1117
public/assets/sass/section/_header.scss
Normal file
File diff suppressed because it is too large
Load Diff
160
public/assets/sass/section/_page.scss
Normal file
160
public/assets/sass/section/_page.scss
Normal 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
129
public/assets/sass/section/_pricing.scss
Normal 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
676
public/assets/sass/section/_project.scss
Normal 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
536
public/assets/sass/section/_services.scss
Normal 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
162
public/assets/sass/section/_solution.scss
Normal 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
226
public/assets/sass/section/_subscribe.scss
Normal 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
633
public/assets/sass/section/_team.scss
Normal 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
244
public/assets/sass/section/_testimonial.scss
Normal 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
242
public/assets/sass/section/_topbar.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27688
public/assets/sass/style.css
Normal file
27688
public/assets/sass/style.css
Normal file
File diff suppressed because it is too large
Load Diff
1
public/assets/sass/style.css.map
Normal file
1
public/assets/sass/style.css.map
Normal file
File diff suppressed because one or more lines are too long
2
public/assets/sass/style.scss
Normal file
2
public/assets/sass/style.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'default/all';
|
||||
@import 'section/all';
|
||||
Reference in New Issue
Block a user