You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1622 lines
25 KiB
1622 lines
25 KiB
.header { |
|
&__area { |
|
&-2 { |
|
@media (max-width:1200px) { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
&__inner { |
|
&.inner-2 { |
|
border-bottom: 0; |
|
position: relative; |
|
z-index: 2; |
|
margin-top: 20px; |
|
} |
|
} |
|
|
|
&__btn { |
|
font-family: $font_barlow; |
|
font-weight: 600; |
|
font-size: 14px; |
|
line-height: 20px; |
|
letter-spacing: 1.6px; |
|
text-transform: uppercase; |
|
color: var(--secondary); |
|
display: inline-block; |
|
border: 1px solid var(--secondary); |
|
padding: 18px 30px; |
|
border-radius: 0; |
|
|
|
@media (max-width:575px) { |
|
display: none; |
|
} |
|
|
|
&:hover { |
|
border-radius: 0; |
|
border-color: var(--main-color-one); |
|
} |
|
|
|
&::before { |
|
border-radius: 0; |
|
} |
|
|
|
&.arrow-down { |
|
i { |
|
transform: rotate(30deg); |
|
} |
|
} |
|
|
|
i { |
|
padding-left: 4px; |
|
} |
|
} |
|
} |
|
|
|
|
|
/* |
|
|
|
----------------------- |
|
GALLARY AREA 2 |
|
----------------------- |
|
|
|
*/ |
|
|
|
.gallary { |
|
&__area { |
|
&-2 { |
|
padding-top: 150px; |
|
padding-left: 30px; |
|
overflow: hidden; |
|
padding-bottom: 110px; |
|
|
|
@media #{$xl} { |
|
padding-top: 80px; |
|
padding-bottom: 170px; |
|
} |
|
|
|
@media #{$md} { |
|
padding-top: 50px; |
|
padding-bottom: 100px; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-left: 15px; |
|
padding-bottom: 50px; |
|
padding-top: 20px; |
|
} |
|
} |
|
} |
|
|
|
&__wrapper { |
|
&-2 { |
|
display: grid; |
|
grid-template-columns: .47fr 1fr; |
|
gap: 75px; |
|
max-width: 1600px; |
|
margin-left: auto; |
|
|
|
@media #{$xl} { |
|
align-items: center; |
|
} |
|
|
|
@media #{$sm} { |
|
grid-template-columns: 1fr; |
|
gap: 35px; |
|
} |
|
} |
|
} |
|
|
|
&__buttons { |
|
&-2 { |
|
gap: 20px; |
|
padding-top: 40px; |
|
margin-bottom: 50px; |
|
|
|
li { |
|
border: 1px solid var(--blue); |
|
|
|
button { |
|
font-weight: 600; |
|
font-size: 14px; |
|
line-height: 1.2; |
|
text-align: center; |
|
letter-spacing: 1.6px; |
|
text-transform: uppercase; |
|
color: var(--black-2); |
|
|
|
&.active { |
|
background-color: transparent !important; |
|
color: var(--black-2) !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__items { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr 0.5fr; |
|
gap: 30px; |
|
|
|
@media #{$xl} { |
|
grid-template-columns: 1fr 1fr; |
|
} |
|
|
|
@media #{$sm} { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
img { |
|
height: 100%; |
|
object-fit: cover; |
|
|
|
@media #{$sm} { |
|
width: 50%; |
|
} |
|
|
|
&:last-child { |
|
@media #{$xl} { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// &__itemright { |
|
// &-2 { |
|
// margin-right: -150px; |
|
|
|
// @media #{$xl} { |
|
// margin-right: 0; |
|
// } |
|
// } |
|
// } |
|
} |
|
|
|
|
|
/* |
|
|
|
----------------------- |
|
TEXT SLIDER AREA 2 |
|
----------------------- |
|
|
|
*/ |
|
.textslider { |
|
&2__wrap { |
|
position: relative; |
|
overflow: hidden; |
|
height: 320px; |
|
|
|
@media #{$sm} { |
|
height: 200px; |
|
} |
|
|
|
@media #{$xl} { |
|
padding-bottom: 0; |
|
} |
|
} |
|
|
|
&__area { |
|
&-2 { |
|
background: var(--main-color-one); |
|
padding: 30px 0; |
|
overflow: hidden; |
|
|
|
&.ltr { |
|
background: #0E1E2A; |
|
z-index: -2; |
|
} |
|
|
|
@media #{$sm} { |
|
padding: 10px 0; |
|
} |
|
|
|
&.rtl { |
|
position: absolute; |
|
top: 100px; |
|
left: 0; |
|
width: 100%; |
|
height: auto; |
|
transform: rotate(6deg); |
|
|
|
@media #{$xl} { |
|
transform: rotate(0); |
|
} |
|
} |
|
|
|
&.ltr { |
|
position: absolute; |
|
top: 100px; |
|
left: 0; |
|
width: 100%; |
|
height: auto; |
|
transform: rotate(-6deg); |
|
|
|
@media #{$xl} { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__active-2 { |
|
.swiper-wrapper { |
|
transition-timing-function: linear; |
|
} |
|
|
|
.swiper-slide { |
|
width: auto; |
|
} |
|
} |
|
|
|
&__text1 { |
|
color: var(--white); |
|
font-weight: 600; |
|
font-size: 48px; |
|
letter-spacing: 0.997101px; |
|
text-transform: capitalize; |
|
|
|
&.herotext { |
|
font-size: 40px; |
|
|
|
@media #{$xl} { |
|
font-size: 30px; |
|
} |
|
|
|
span { |
|
margin-right: 0; |
|
margin-left: 20px; |
|
} |
|
} |
|
|
|
span { |
|
display: inline-block; |
|
margin-right: 30px; |
|
} |
|
|
|
@media #{$xxl} { |
|
font-size: 25px; |
|
} |
|
} |
|
} |
|
|
|
.textslide { |
|
&__area { |
|
&-2 { |
|
padding-top: 250px; |
|
padding-bottom: 150px; |
|
overflow: hidden; |
|
|
|
@media #{$xl} { |
|
padding-top: 150px; |
|
padding-bottom: 100px; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-top: 100px; |
|
padding-bottom: 70px; |
|
} |
|
} |
|
} |
|
|
|
&__wrapper { |
|
&-2 { |
|
background: var(--blue); |
|
padding: 40px 140px; |
|
display: flex; |
|
gap: 40px; |
|
justify-content: center; |
|
transform: rotate(6deg); |
|
|
|
&.reverse { |
|
transform: rotate(-6deg); |
|
background: var(--secondary); |
|
margin-top: -100px; |
|
position: relative; |
|
z-index: -2; |
|
} |
|
} |
|
} |
|
|
|
&__item { |
|
&-2 { |
|
display: flex; |
|
align-items: center; |
|
gap: 70px; |
|
|
|
i { |
|
font-size: 40px; |
|
color: var(--white); |
|
} |
|
} |
|
} |
|
|
|
&__title { |
|
font-weight: 600; |
|
font-size: 48px; |
|
line-height: 1; |
|
letter-spacing: 0.16px; |
|
text-transform: uppercase; |
|
color: var(--white); |
|
|
|
@media #{$md} { |
|
font-size: 30px; |
|
} |
|
} |
|
|
|
} |
|
|
|
|
|
.work { |
|
&__area { |
|
&-2 { |
|
padding-bottom: 255px; |
|
background-image: url(../imgs/home-2/process-bg.png); |
|
overflow: hidden; |
|
|
|
@media #{$xl} { |
|
padding-bottom: 0; |
|
} |
|
|
|
@media #{$md} { |
|
padding-bottom: 30px; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-bottom: 0; |
|
} |
|
} |
|
} |
|
|
|
&__wrapper { |
|
padding-top: 80px; |
|
} |
|
|
|
&__item { |
|
border: 1px solid #E3E3E3; |
|
padding: 40px; |
|
|
|
@media #{$sm} { |
|
padding: 20px; |
|
} |
|
|
|
p { |
|
padding-top: 35px; |
|
|
|
@media #{$sm} { |
|
padding-top: 25px; |
|
} |
|
} |
|
|
|
img { |
|
display: block; |
|
} |
|
} |
|
|
|
&__thumb { |
|
height: 115px; |
|
object-fit: cover; |
|
} |
|
|
|
|
|
&__contentwrap { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
border-bottom: 1px solid #d9d9d9; |
|
padding-bottom: 40px; |
|
|
|
@media #{$sm} { |
|
padding-bottom: 20px; |
|
} |
|
} |
|
|
|
&__ititle { |
|
font-weight: 600; |
|
font-size: 20px; |
|
line-height: 1; |
|
color: #090D26; |
|
|
|
@media #{$xl} { |
|
br { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
&__icounter { |
|
font-weight: 700; |
|
font-size: 100px; |
|
line-height: 1; |
|
text-align: center; |
|
letter-spacing: -3px; |
|
text-transform: uppercase; |
|
-webkit-text-fill-color: var(--white); |
|
-webkit-text-stroke-width: 1px; |
|
-webkit-text-stroke-color: var(--blue); |
|
|
|
@media #{$xl} { |
|
font-size: 70px; |
|
} |
|
} |
|
|
|
&__header { |
|
&-2 { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
@media #{$sm} { |
|
flex-wrap: wrap; |
|
} |
|
} |
|
} |
|
|
|
&__icon { |
|
&-2 { |
|
display: flex; |
|
align-items: center; |
|
gap: 20px; |
|
|
|
@media #{$md} { |
|
padding-top: 30px; |
|
} |
|
|
|
.size { |
|
width: 80px; |
|
height: 80px; |
|
line-height: 74px; |
|
text-align: center; |
|
border: 1px solid #E3E3E3; |
|
|
|
@media #{$sm} { |
|
width: 50px; |
|
height: 50px; |
|
line-height: 40px; |
|
} |
|
|
|
&.swiper-button-disabled { |
|
background: var(--blue); |
|
|
|
img { |
|
filter: brightness(100); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* |
|
----------------------- |
|
COUNTER AREA 2 |
|
----------------------- |
|
*/ |
|
|
|
.counter { |
|
&__area { |
|
&-2 { |
|
background: var(--gray-2); |
|
padding: 100px 0; |
|
overflow: hidden; |
|
|
|
@media #{$sm} { |
|
padding-bottom: 70px; |
|
} |
|
} |
|
} |
|
|
|
&__item { |
|
&-2 { |
|
border: 2px solid var(--blue); |
|
text-align: center; |
|
padding: 40px; |
|
background: var(--white); |
|
|
|
@media #{$md} { |
|
margin-bottom: 15px; |
|
} |
|
|
|
img { |
|
padding-bottom: 40px; |
|
max-width: 80px; |
|
display: block; |
|
margin: auto; |
|
} |
|
|
|
.counter { |
|
font-weight: 700; |
|
font-size: 80px; |
|
line-height: .5; |
|
letter-spacing: 0.16px; |
|
text-transform: uppercase; |
|
opacity: 0.4; |
|
display: block; |
|
padding-bottom: 30px; |
|
-webkit-text-fill-color: var(--white); |
|
/* Will override color (regardless of order) */ |
|
-webkit-text-stroke-width: 1px; |
|
-webkit-text-stroke-color: var(--black-2); |
|
display: inline-block; |
|
|
|
@media #{$xl} { |
|
font-size: 50px; |
|
} |
|
} |
|
|
|
.dis { |
|
font-weight: 600; |
|
font-size: 20px; |
|
line-height: 1.1; |
|
text-align: center; |
|
color: var(--secondary); |
|
} |
|
} |
|
} |
|
|
|
&__content { |
|
&-2 { |
|
padding-left: 60px; |
|
|
|
@media #{$xl} { |
|
padding-left: 0; |
|
} |
|
|
|
.service__sectiontitle { |
|
text-align: left; |
|
padding-top: 35px; |
|
} |
|
|
|
.title { |
|
color: var(--black-2); |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* |
|
----------------------- |
|
SERVICE AREA 2 |
|
----------------------- |
|
*/ |
|
.service { |
|
&__area { |
|
&-2 { |
|
padding: 150px 0; |
|
background: var(--secondary); |
|
position: relative; |
|
overflow: hidden; |
|
|
|
.line-1 { |
|
position: absolute; |
|
opacity: 0.20000000298023224; |
|
background: #0058AA; |
|
width: 1px; |
|
height: 100%; |
|
left: 315px; |
|
top: 0; |
|
|
|
@media #{$md} { |
|
display: none; |
|
} |
|
} |
|
|
|
.line-2 { |
|
@extend .line-1; |
|
left: 740px; |
|
|
|
@media #{$xl} { |
|
display: none; |
|
} |
|
|
|
@media #{$md} { |
|
display: none; |
|
} |
|
} |
|
|
|
.line-3 { |
|
@extend .line-1; |
|
left: 1180px; |
|
|
|
@media #{$md} { |
|
display: none; |
|
} |
|
} |
|
|
|
.line-4 { |
|
@extend .line-1; |
|
left: auto; |
|
right: 315px; |
|
|
|
@media #{$md} { |
|
display: none; |
|
} |
|
} |
|
|
|
@media #{$md} { |
|
padding: 80px 0; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-bottom: 35px; |
|
} |
|
} |
|
} |
|
|
|
&__sectiontitle { |
|
text-align: center; |
|
|
|
&.contact__sectiontitle { |
|
padding-bottom: 45px; |
|
} |
|
|
|
span { |
|
font-weight: 600; |
|
font-size: 18px; |
|
line-height: 1.2; |
|
text-align: center; |
|
letter-spacing: 1.6px; |
|
text-transform: uppercase; |
|
color: var(--blue); |
|
display: inline-block; |
|
padding-bottom: 5px; |
|
border-bottom: 1px solid var(--blue); |
|
margin-bottom: 30px; |
|
position: relative; |
|
} |
|
|
|
.title { |
|
font-weight: 600; |
|
font-size: 48px; |
|
line-height: 1; |
|
letter-spacing: 0.16px; |
|
text-transform: uppercase; |
|
color: var(--black-2); |
|
|
|
@media #{$md} { |
|
font-size: 25px; |
|
} |
|
|
|
@media #{$sm} { |
|
br { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
.gallarydis { |
|
font-weight: 500; |
|
font-size: 16px; |
|
line-height: 1.5; |
|
color: var(--black-4); |
|
padding-top: 50px; |
|
|
|
@media #{$sm} { |
|
padding-top: 30px; |
|
} |
|
} |
|
} |
|
|
|
&__wrapper { |
|
&-2 { |
|
padding-top: 80px; |
|
} |
|
} |
|
|
|
&__item { |
|
&-2 { |
|
text-align: center; |
|
margin-bottom: 30px; |
|
|
|
@media #{$xl} { |
|
margin-bottom: 60px; |
|
} |
|
|
|
@media #{$sm} { |
|
margin-bottom: 40px; |
|
} |
|
} |
|
} |
|
|
|
&__ititle { |
|
&-2 { |
|
font-weight: 600; |
|
font-size: 20px; |
|
line-height: 1.2; |
|
color: var(--white); |
|
display: block; |
|
padding-bottom: 30px; |
|
|
|
@media #{$md} { |
|
padding-bottom: 10px; |
|
} |
|
} |
|
} |
|
|
|
&__idis { |
|
&-2 { |
|
font-weight: 500; |
|
font-size: 16px; |
|
line-height: 1.5; |
|
color: var(--white); |
|
padding-bottom: 30px; |
|
|
|
@media #{$sm} { |
|
padding-bottom: 10px; |
|
} |
|
} |
|
} |
|
|
|
&__readmore { |
|
&-2 { |
|
font-weight: 600; |
|
font-size: 14px; |
|
line-height: 1; |
|
color: var(--white); |
|
padding-bottom: 10px; |
|
text-transform: uppercase; |
|
letter-spacing: 1.6px; |
|
border-bottom: 1px solid var(--blue); |
|
|
|
img { |
|
margin-left: 8px; |
|
} |
|
} |
|
} |
|
|
|
&__thumb { |
|
&-2 { |
|
padding-bottom: 30px; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* |
|
----------------------- |
|
CONTACT 2 |
|
----------------------- |
|
*/ |
|
.contact { |
|
&__area { |
|
&-2 { |
|
.form__title { |
|
padding-bottom: 70px; |
|
font-size: 115px; |
|
padding-left: 0; |
|
-webkit-text-stroke: 2px var(--black-2); |
|
|
|
@media #{$xl} { |
|
padding-left: 0; |
|
font-size: 80px; |
|
} |
|
|
|
@media #{$md} { |
|
padding-bottom: 5px; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-bottom: 30px; |
|
font-size: 50px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__btm { |
|
&-2 { |
|
background: var(--secondary); |
|
} |
|
} |
|
|
|
&__form { |
|
&-2 { |
|
background: var(--gray-2); |
|
padding-bottom: 60px; |
|
padding-top: 60px; |
|
margin-top: -175px; |
|
|
|
@media #{$md} { |
|
margin-top: 60px; |
|
} |
|
|
|
@media #{$sm} { |
|
margin-top: 0; |
|
} |
|
|
|
form { |
|
input { |
|
background: var(--white); |
|
color: var(--black-4); |
|
margin-bottom: 30px; |
|
|
|
&::placeholder { |
|
color: var(--black-4); |
|
} |
|
} |
|
|
|
textarea { |
|
background: var(--white); |
|
color: var(--black-4); |
|
|
|
&::placeholder { |
|
color: var(--black-4); |
|
} |
|
} |
|
|
|
.submit { |
|
background: var(--blue); |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__media { |
|
&-2 { |
|
padding-top: 0; |
|
|
|
@media #{$sm} { |
|
padding-top: 30px; |
|
} |
|
|
|
li { |
|
grid-template-columns: 80px auto; |
|
|
|
span { |
|
border: 1px solid var(--blue); |
|
color: var(--white); |
|
height: 80px; |
|
width: 80px; |
|
line-height: 80px; |
|
} |
|
|
|
a { |
|
color: var(--white); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* |
|
----------------------- |
|
FOOTER 2 |
|
----------------------- |
|
*/ |
|
|
|
.footer { |
|
&__widgets { |
|
&-2 { |
|
background-color: var(--secondary); |
|
padding-top: 100px; |
|
|
|
@media #{$md} { |
|
padding-top: 50px; |
|
} |
|
} |
|
} |
|
|
|
&__btm { |
|
&-2 { |
|
border-top: 1px solid var(--blue); |
|
|
|
@media #{$sm} { |
|
border-top: 0; |
|
margin-top: 0; |
|
} |
|
} |
|
} |
|
|
|
&__rblog { |
|
display: grid; |
|
grid-template-columns: 80px auto; |
|
gap: 15px; |
|
padding-bottom: 30px; |
|
border-bottom: 1px solid var(--white); |
|
margin-bottom: 30px; |
|
a { |
|
img { |
|
border-radius: 10px; |
|
} |
|
} |
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
&__rcontent { |
|
span { |
|
color: var(--white); |
|
|
|
i { |
|
padding-right: 10px; |
|
} |
|
} |
|
|
|
p { |
|
padding-top: 8px; |
|
font-weight: 600; |
|
font-size: 20px; |
|
line-height: 1.2; |
|
color: var(--white); |
|
} |
|
} |
|
|
|
&__address { |
|
&-2 { |
|
ul { |
|
li { |
|
span { |
|
color: var(--white); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__service { |
|
&-2 { |
|
ul { |
|
li { |
|
&::before { |
|
color: var(--white); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__newsletter { |
|
&-2 { |
|
input { |
|
height: 76px; |
|
padding-right: 130px; |
|
background: transparent; |
|
border: 1px solid #605b5b !important; |
|
color: var(--white) !important; |
|
|
|
&::placeholder { |
|
color: var(--white) !important; |
|
} |
|
} |
|
|
|
.submit-2 { |
|
background-color: var(--blue); |
|
color: var(--white); |
|
font-weight: 600; |
|
font-size: 14px; |
|
line-height: 1.4; |
|
display: inline-block; |
|
padding: 20px 30px; |
|
border: 0; |
|
right: 8px; |
|
top: 8px; |
|
position: absolute; |
|
text-transform: uppercase; |
|
|
|
@media #{$sm} { |
|
right: 0; |
|
position: relative; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.separator-2 { |
|
border-top: 1px solid var(--white); |
|
transform: translateY(-100px); |
|
|
|
@media #{$md} { |
|
display: none; |
|
} |
|
} |
|
|
|
|
|
// Blog |
|
.blog { |
|
&__area { |
|
&-2 { |
|
padding: 150px 0; |
|
margin-bottom: 70px; |
|
padding-top: 175px; |
|
|
|
@media #{$xl} { |
|
padding-top: 0; |
|
} |
|
|
|
@media #{$md} { |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
margin-bottom: 0; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-top: 0; |
|
} |
|
} |
|
} |
|
|
|
&__title { |
|
&-2 { |
|
font-weight: 600; |
|
font-size: 20px; |
|
line-height: 1.2; |
|
color: #090D26; |
|
padding-bottom: 20px; |
|
display: inline-block; |
|
} |
|
} |
|
|
|
&__item { |
|
&-2 { |
|
position: relative; |
|
|
|
@media #{$sm} { |
|
margin-bottom: 30px; |
|
} |
|
} |
|
} |
|
|
|
&__thumb { |
|
&-2 { |
|
position: relative; |
|
overflow: hidden; |
|
|
|
img { |
|
width: 100%; |
|
transition: .5s; |
|
|
|
&:hover { |
|
transform: scale(1.2); |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__meta { |
|
&-2 { |
|
position: absolute; |
|
left: 30px; |
|
bottom: 30px; |
|
padding: 20px 20px; |
|
background: var(--blue); |
|
font-weight: 400; |
|
font-size: 14px; |
|
line-height: 1; |
|
color: var(--white); |
|
} |
|
} |
|
|
|
&__content { |
|
&-2 { |
|
border: 1px solid #D9D9D9; |
|
border-top: 0; |
|
padding: 40px; |
|
padding-top: 35px; |
|
|
|
@media #{$sm} { |
|
padding: 20px; |
|
} |
|
|
|
p { |
|
font-weight: 500; |
|
font-size: 16px; |
|
line-height: 2; |
|
color: var(--black-4); |
|
padding-bottom: 25px; |
|
} |
|
} |
|
} |
|
|
|
&__btn { |
|
&-2 { |
|
font-weight: 600; |
|
font-size: 14px; |
|
line-height: 1.3; |
|
letter-spacing: 1.6px; |
|
text-transform: uppercase; |
|
color: var(--secondary); |
|
text-decoration: underline; |
|
text-underline-offset: 10px; |
|
display: inline-block; |
|
|
|
img { |
|
padding-left: 10px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.team { |
|
&__area { |
|
&-2 { |
|
padding: 150px 0; |
|
position: relative; |
|
|
|
&::before { |
|
content: ""; |
|
left: 0; |
|
top: 0; |
|
height: 616px; |
|
width: 100%; |
|
background: #F4F5FA; |
|
position: absolute; |
|
} |
|
|
|
@media #{$md} { |
|
padding: 80px 0; |
|
} |
|
|
|
@media #{$sm} { |
|
padding: 50px 0; |
|
} |
|
} |
|
} |
|
|
|
&__items { |
|
&-2 { |
|
display: grid; |
|
grid-template-columns: repeat(3, 1fr); |
|
gap: 30px; |
|
padding-top: 80px; |
|
|
|
@media #{$sm} { |
|
grid-template-columns: 1fr; |
|
padding-top: 50px; |
|
} |
|
} |
|
} |
|
|
|
&__thumb { |
|
&-2 { |
|
position: relative; |
|
background: var(--secondary); |
|
|
|
&::before { |
|
position: absolute; |
|
content: ""; |
|
left: 0; |
|
bottom: 0; |
|
height: 100%; |
|
width: 100%; |
|
pointer-events: none; |
|
background: linear-gradient(180deg, rgba(184, 251, 94, 0) 51.56%, rgba(184, 251, 94, 0.28) 100%); |
|
} |
|
} |
|
} |
|
|
|
&__content { |
|
&-2 { |
|
text-align: center; |
|
padding-top: 30px; |
|
} |
|
} |
|
|
|
&__name { |
|
font-weight: 600; |
|
font-size: 24px; |
|
line-height: 1; |
|
color: var(--secondary); |
|
padding-bottom: 5px; |
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
color: var(--main-color-one); |
|
} |
|
} |
|
|
|
&__post { |
|
font-weight: 500; |
|
font-size: 16px; |
|
line-height: 1.5; |
|
color: var(--secondary); |
|
} |
|
|
|
&__social { |
|
&-2 { |
|
position: absolute; |
|
bottom: 30px; |
|
display: flex; |
|
justify-content: center; |
|
gap: 10px; |
|
z-index: 2; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
|
|
li { |
|
a { |
|
background: var(--white); |
|
opacity: 0.8; |
|
border-radius: 5px; |
|
font-weight: 400; |
|
font-size: 16px; |
|
line-height: 16px; |
|
color: var(--blue); |
|
display: inline-block; |
|
padding: 15px; |
|
|
|
&:hover { |
|
color: var(--main-color-one); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* |
|
----------------------- |
|
ABOUT AREA 2 |
|
----------------------- |
|
*/ |
|
|
|
.about { |
|
&__area { |
|
&-2 { |
|
padding: 130px 0 120px; |
|
|
|
@media #{$md} { |
|
padding: 70px 0; |
|
} |
|
} |
|
} |
|
|
|
&__wrapper { |
|
&-2 { |
|
gap: 90px; |
|
display: grid; |
|
align-items: center; |
|
grid-template-columns: 1fr 1.3fr; |
|
|
|
@media #{$xl} { |
|
gap: 100px; |
|
} |
|
|
|
@media #{$md} { |
|
gap: 0; |
|
} |
|
|
|
@media #{$sm} { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.about__content { |
|
background-image: none; |
|
padding-top: 0; |
|
|
|
@media #{$md} {} |
|
} |
|
|
|
.about__thumb { |
|
text-align: right; |
|
} |
|
|
|
.about__thumb { |
|
margin-top: 20px; |
|
} |
|
} |
|
} |
|
|
|
&__title { |
|
&-2 { |
|
font-weight: 600; |
|
font-size: 48px; |
|
line-height: 1; |
|
letter-spacing: 0.16px; |
|
text-transform: uppercase; |
|
color: var(--secondary); |
|
padding-bottom: 36px; |
|
|
|
@media #{$md} { |
|
font-size: 30px; |
|
} |
|
} |
|
} |
|
|
|
&__dis { |
|
&-2 { |
|
font-weight: 500; |
|
font-size: 16px; |
|
line-height: 1; |
|
color: var(--black-2); |
|
padding-left: 80px; |
|
|
|
@media #{$md} { |
|
padding-left: 0; |
|
} |
|
} |
|
} |
|
|
|
&__btnwrapper { |
|
&-2 { |
|
margin-left: 75px; |
|
margin-top: 30px; |
|
width: 205px; |
|
height: 205px; |
|
|
|
@media #{$xl} { |
|
margin-left: 0; |
|
height: 60px; |
|
} |
|
|
|
@media #{$sm} { |
|
margin-top: 0; |
|
margin-left: 0; |
|
} |
|
|
|
&.db-arrow-up { |
|
.img-2 { |
|
transform: translate(-205px, 10px); |
|
} |
|
|
|
&:hover { |
|
.img { |
|
transform: translate(205px, -205px); |
|
} |
|
|
|
.img-2 { |
|
transform: translate(0px, -200px); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__thumb { |
|
img { |
|
max-width: 100%; |
|
} |
|
} |
|
|
|
&__arrowup { |
|
img { |
|
@media #{$md} { |
|
width: 50px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* |
|
----------------------- |
|
HERO AREA 2 |
|
----------------------- |
|
*/ |
|
.hero { |
|
&__area { |
|
&-2 { |
|
padding-top: 192px; |
|
padding-bottom: 115px; |
|
|
|
@media #{$xxl} { |
|
padding-top: 100px; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-top: 45px; |
|
padding-bottom: 60px; |
|
} |
|
} |
|
|
|
&-wrapper { |
|
display: grid; |
|
grid-template-columns: 1fr 2fr 1fr; |
|
padding-left: 150px; |
|
padding-right: 100px; |
|
justify-content: space-between; |
|
|
|
@media #{$xl} { |
|
grid-template-columns: .2fr 1fr .2fr; |
|
padding-left: 0; |
|
padding-right: 0px; |
|
} |
|
|
|
@media #{$sm} { |
|
grid-template-columns: 1fr; |
|
} |
|
} |
|
|
|
&-item { |
|
position: relative; |
|
|
|
img { |
|
position: relative; |
|
z-index: 1; |
|
max-width: 100%; |
|
|
|
@media #{$sm} { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
&-content { |
|
text-align: center; |
|
|
|
@media #{$xxl} { |
|
padding-top: 33px; |
|
} |
|
} |
|
|
|
&-title { |
|
font-family: $font_barlow; |
|
font-weight: 600; |
|
font-size: 86px; |
|
line-height: 1; |
|
letter-spacing: -2.60783px; |
|
text-transform: uppercase; |
|
color: var(--secondary); |
|
margin-top: -45px; |
|
padding-bottom: 25px; |
|
|
|
@media #{$xxl} { |
|
font-size: 70px; |
|
|
|
br { |
|
display: none; |
|
} |
|
} |
|
|
|
@media #{$md} { |
|
font-size: 50px; |
|
} |
|
|
|
@media #{$sm} { |
|
font-size: 40px; |
|
} |
|
} |
|
|
|
&-dis { |
|
font-family: $font_barlow; |
|
font-weight: 500; |
|
font-size: 16px; |
|
line-height: 1.5; |
|
color: var(--black-4); |
|
padding-bottom: 40px; |
|
|
|
@media #{$sm} { |
|
padding-bottom: 0; |
|
} |
|
} |
|
|
|
&-gradient1 { |
|
position: absolute; |
|
width: 113px; |
|
height: 122px; |
|
left: -57px; |
|
top: 60px; |
|
z-index: 2; |
|
background: linear-gradient(90deg, #8D71FF 0%, #6D2BFF 32.16%, #405CFF 64.84%, #21D3FD 100%); |
|
border-radius: 0px 0px 1000px 1000px; |
|
|
|
@media #{$md} { |
|
top: 170px; |
|
} |
|
|
|
@media #{$sm} { |
|
display: none; |
|
} |
|
} |
|
|
|
&-gradient2 { |
|
position: absolute; |
|
width: 103px; |
|
height: 102px; |
|
right: 200px; |
|
top: 300px; |
|
z-index: 3; |
|
background: #0058AA; |
|
border-radius: 0px 0px 0px 1000px; |
|
transform: matrix(-1, 0, 0, 1, 0, 0); |
|
|
|
@media #{$md} { |
|
right: 100px; |
|
top: 150px; |
|
} |
|
|
|
@media #{$sm} { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* |
|
----------------------- |
|
FAQ 2 |
|
----------------------- |
|
*/ |
|
|
|
.faq { |
|
&__list { |
|
&-2 { |
|
.accordion-button::after { |
|
left: auto; |
|
right: 20px; |
|
background: var(--blue); |
|
} |
|
|
|
.accordion-body { |
|
padding-left: 0; |
|
padding-bottom: 0; |
|
} |
|
|
|
.accordion-body p { |
|
color: var(--white); |
|
} |
|
|
|
.accordion-item { |
|
border: 0; |
|
border-bottom: 1px solid var(--gray-3); |
|
margin-bottom: 8px; |
|
} |
|
|
|
.accordion-button { |
|
padding-left: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.pb-70 { |
|
padding-bottom: 70px; |
|
|
|
@media #{$md} { |
|
padding-bottom: 50px; |
|
} |
|
|
|
@media #{$sm} { |
|
padding-bottom: 30px; |
|
} |
|
} |
|
|
|
.footer__service { |
|
&.footer__service-2 { |
|
padding-left: 30px; |
|
|
|
@media #{$sm} { |
|
padding-left: 0; |
|
padding-bottom: 0; |
|
} |
|
} |
|
} |
|
|
|
.footer__newsletter { |
|
&.footer__newsletter-2 { |
|
padding-left: 0; |
|
} |
|
} |
|
|
|
section.contact__area-2 { |
|
overflow: hidden; |
|
} |
|
|
|
/* |
|
----------------------- |
|
MOBILE HEADER |
|
----------------------- |
|
*/ |
|
|
|
.db-mobile-icon { |
|
display: block; |
|
|
|
@media (min-width:1200px) { |
|
display: none; |
|
} |
|
} |