1446 lines
22 KiB
SCSS
1446 lines
22 KiB
SCSS
/*--------------------------------------------------------------
|
|
3. content
|
|
--------------------------------------------------------------*/
|
|
|
|
/*3.1 wpo-hero-slider*/
|
|
|
|
.wpo-hero-slider,
|
|
.static-hero,
|
|
.static-hero-s2,
|
|
.static-hero-s3 {
|
|
height: 920px;
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 0;
|
|
|
|
@include media-query(991px) {
|
|
height: 600px;
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
height: 450px;
|
|
}
|
|
|
|
.swiper-slide {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-container,
|
|
.hero-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.slide-inner,
|
|
.hero-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: left;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(288.29deg, #080A14 38.57%, #10121E 61.69%, #282A34 73.68%, #404354 89.54%, #343643 98.19%);
|
|
opacity: 0.5;
|
|
content: "";
|
|
}
|
|
|
|
.slide-content {
|
|
text-align: center;
|
|
padding-bottom: 50px;
|
|
z-index: 11;
|
|
position: relative;
|
|
|
|
@include media-query(1399px) {
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
padding-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// slider controls
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
background: transparentize($white, 0.8);
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
border: 2px solid $white;
|
|
border-radius: 50%;
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
@include transition-time(0.3s);
|
|
display: none;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
left: 25px;
|
|
|
|
&:before {
|
|
font-family: "themify";
|
|
content: "\e629";
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.swiper-button-next {
|
|
right: 25px;
|
|
|
|
&:before {
|
|
font-family: "themify";
|
|
content: "\e628";
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
@include media-query(991px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
|
|
margin: 20px 0 !important;
|
|
}
|
|
|
|
.slick-dots {
|
|
right: 50px;
|
|
top: 52%;
|
|
left: auto;
|
|
width: unset;
|
|
transform: translateY(-50%);
|
|
|
|
|
|
@media(max-width:991px) {
|
|
right: 20px;
|
|
}
|
|
|
|
@media(max-width:575px) {
|
|
right: 5px;
|
|
}
|
|
|
|
button{
|
|
width: 12px;
|
|
height: 12px;
|
|
text-align: center;
|
|
line-height: 12px;
|
|
font-size: 18px;
|
|
color: $white;
|
|
opacity: 1;
|
|
display: block;
|
|
background: none;
|
|
|
|
|
|
&.active {
|
|
color: $white;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -55px;
|
|
top: 50%;
|
|
width: 50px;
|
|
height: 1px;
|
|
content: "";
|
|
background: $white;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
display: block;
|
|
margin: 15px 0;
|
|
|
|
button{
|
|
position: relative;
|
|
&:before {
|
|
font-size: 0;
|
|
}
|
|
}
|
|
&.slick-active{
|
|
button{
|
|
|
|
color: $white;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -55px;
|
|
top: 70%;
|
|
width: 50px;
|
|
height: 1px;
|
|
content: "";
|
|
background: $white;
|
|
transition: all .3s;
|
|
font-size: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.swiper-container-horizontal>.swiper-pagination-bullets,
|
|
.swiper-pagination-custom,
|
|
.swiper-pagination-fraction {
|
|
bottom: 30px;
|
|
}
|
|
|
|
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.hero-shape {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 11;
|
|
|
|
svg {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wpo-hero-slider,
|
|
.static-hero,
|
|
.static-hero-s2,
|
|
.wpo-hero-slider-s2 {
|
|
|
|
@include media-query(1199px) {
|
|
height: 680px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
height: 600px;
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
height: 450px;
|
|
}
|
|
|
|
|
|
.slick-slide{
|
|
height: 920px;
|
|
|
|
@include media-query(1199px) {
|
|
height: 680px;
|
|
}
|
|
|
|
|
|
@include media-query(991px) {
|
|
height: 600px;
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
height: 450px;
|
|
}
|
|
}
|
|
|
|
|
|
.gradient-overlay {
|
|
@include linear-gradient-bg(right, transparent 65%, $dark-gray 45%);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
opacity: .6;
|
|
}
|
|
|
|
.gradient-overlay+.container {
|
|
position: relative;
|
|
z-index: 11;
|
|
}
|
|
|
|
.swiper-slide {
|
|
position: relative;
|
|
z-index: 11;
|
|
}
|
|
|
|
.wpo-hero-title-top {
|
|
span {
|
|
font-size: 22px;
|
|
color: #e4e4e4;
|
|
font-family: $heading-font;
|
|
|
|
@include media-query(767px) {
|
|
font-size: 15px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.slide-title-sub {
|
|
max-width: 712px;
|
|
margin: 0 auto;
|
|
z-index: 11;
|
|
|
|
@include media-query(1199px) {
|
|
max-width: 555px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
line-height: 30px;
|
|
text-transform: capitalize;
|
|
color: $theme-primary-color-s2;
|
|
|
|
@include media-query(767px) {
|
|
font-size: 20px;
|
|
line-height: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-title {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
|
|
@include media-query(1199px) {
|
|
max-width: 750px;
|
|
}
|
|
|
|
|
|
h2 {
|
|
font-size: 95px;
|
|
font-weight: 500;
|
|
line-height: 95px;
|
|
margin: 10px 0 15px;
|
|
color: #fff;
|
|
text-transform: capitalize;
|
|
|
|
@include media-query(1199px) {
|
|
font-size: 70px;
|
|
line-height: 75px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
font-size: 40px;
|
|
line-height: 55px;
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
font-size: 30px;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-text {
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
|
|
@include media-query(767px) {
|
|
max-width: 500px;
|
|
}
|
|
|
|
p {
|
|
font-size: 22px;
|
|
color: $white;
|
|
line-height: 35px;
|
|
max-width: 680px;
|
|
margin-bottom: 40px;
|
|
color: #e2e2e2;
|
|
|
|
@include media-query(991px) {
|
|
font-size: 18px;
|
|
font-size: calc-rem-value(18);
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
font-size: 16px;
|
|
font-size: calc-rem-value(16);
|
|
line-height: 22px;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.slide-btns {
|
|
@include media-query(991px) {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
|
|
.slide-btns .hero-video-btn {
|
|
margin-left: 40px;
|
|
|
|
@include media-query(767px) {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*-------------------------------------------
|
|
hero style 1
|
|
--------------------------------------------*/
|
|
.static-hero,
|
|
.static-hero-s2,
|
|
.static-hero-s3 {
|
|
background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%);
|
|
height: 1050px;
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 960px;
|
|
height: 100%;
|
|
background: #23242F;
|
|
content: "";
|
|
border-left: 1px solid red;
|
|
clip-path: polygon(57% 0, 100% 0, 100% 100%, 0% 100%);
|
|
|
|
@include media-query(1199px) {
|
|
width: 560px;
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
width: 460px;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
width: 260px;
|
|
}
|
|
}
|
|
|
|
@include media-query(1399px) {
|
|
height: 850px;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
height: 820px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
height: 100%;
|
|
|
|
.hero-container {
|
|
position: relative;
|
|
padding: 100px 0 0;
|
|
|
|
.hero-inner {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-title {
|
|
padding-top: 10px;
|
|
|
|
@include media-query(991px) {
|
|
margin: auto;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
padding-top: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 500;
|
|
font-size: 70px;
|
|
line-height: 90px;
|
|
|
|
@include media-query(1199px) {
|
|
font-size: 50px;
|
|
line-height: 65px;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
font-size: 36px;
|
|
line-height: 47px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-title-sub {
|
|
@include media-query(991px) {
|
|
margin: auto;
|
|
}
|
|
|
|
span {
|
|
font-size: 18px;
|
|
line-height: 23px;
|
|
text-transform: uppercase;
|
|
color: $theme-primary-color;
|
|
|
|
@include media-query(1199px) {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-text {
|
|
@include media-query(991px) {
|
|
margin: auto;
|
|
}
|
|
|
|
p {
|
|
@include media-query(1199px) {
|
|
font-size: 16px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero-inner .container {
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.hero-content {
|
|
padding-left: 145px;
|
|
max-width: 740px;
|
|
|
|
@include media-query(1600px) {
|
|
padding-left: 85px;
|
|
max-width: 650px;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
padding-left: 30px;
|
|
max-width: 470px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
max-width: 100%;
|
|
text-align: center;
|
|
padding-left: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.hero-inner {
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.slide-text p {
|
|
@include media-query(1400px) {
|
|
max-width: 600px;
|
|
}
|
|
}
|
|
|
|
.slide-btns {
|
|
@include media-query(991px) {
|
|
margin: auto;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
.politian-pic {
|
|
position: absolute;
|
|
right: 160px;
|
|
bottom: 100px;
|
|
z-index: 1;
|
|
|
|
@include media-query(1600px) {
|
|
right: 0;
|
|
}
|
|
|
|
@include media-query(1399px) {
|
|
max-width: 550px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
position: relative;
|
|
bottom: 0;
|
|
margin: auto;
|
|
padding-top: 50px;
|
|
right: -30px;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
right: -20px;
|
|
}
|
|
|
|
.politian-shape {
|
|
.shape-1 {
|
|
position: absolute;
|
|
left: 60px;
|
|
top: 225px;
|
|
width: 520.94px;
|
|
height: 520.94px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(90deg, #c12026 11.32%, #c12026 95.28%);
|
|
z-index: -1;
|
|
|
|
@include media-query(1399px) {
|
|
width: 420.94px;
|
|
height: 420.94px;
|
|
left: 28px;
|
|
top: 180px;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
width: 300.94px;
|
|
height: 290.94px;
|
|
left: 43%;
|
|
transform: translateX(-50%);
|
|
top: 180px;
|
|
}
|
|
|
|
@include media-query(390px) {
|
|
top: 120px;
|
|
}
|
|
}
|
|
|
|
.shape-2,
|
|
.shape-3,
|
|
.shape-4 {
|
|
position: absolute;
|
|
border: 1px solid $theme-primary-color-s2;
|
|
background: none;
|
|
left: 6px;
|
|
top: 180px;
|
|
width: 629.62px;
|
|
height: 629.62px;
|
|
opacity: 0.3;
|
|
border-radius: 50%;
|
|
z-index: -1;
|
|
|
|
@include media-query(1399px) {
|
|
left: 2px;
|
|
top: 145px;
|
|
width: 470.62px;
|
|
height: 470.62px;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
width: 320.94px;
|
|
height: 300.94px;
|
|
left: 43%;
|
|
transform: translateX(-50%);
|
|
top: 165px;
|
|
}
|
|
|
|
@include media-query(390px) {
|
|
top: 105px;
|
|
}
|
|
}
|
|
|
|
.shape-3 {
|
|
background: none;
|
|
left: -50px;
|
|
top: 130px;
|
|
width: 732.68px;
|
|
height: 732.68px;
|
|
|
|
@include media-query(1399px) {
|
|
left: -30px;
|
|
top: 110px;
|
|
width: 530.68px;
|
|
height: 530.68px;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
width: 330.94px;
|
|
height: 320.94px;
|
|
left: 43%;
|
|
transform: translateX(-50%);
|
|
top: 145px;
|
|
}
|
|
|
|
@include media-query(390px) {
|
|
top: 90px;
|
|
}
|
|
}
|
|
|
|
.shape-4 {
|
|
background: none;
|
|
left: -100px;
|
|
top: 75px;
|
|
width: 832px;
|
|
height: 832px;
|
|
|
|
@include media-query(1399px) {
|
|
left: -53px;
|
|
top: 73px;
|
|
width: 580.68px;
|
|
height: 580.68px;
|
|
}
|
|
|
|
@include media-query(575px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// wpo-hero-slider-1
|
|
.wpo-hero-slider-1 {
|
|
margin-top: -95px;
|
|
|
|
.slide-inner:before {
|
|
background: rgba(0, 10, 44, 0.5);
|
|
opacity: 1;
|
|
}
|
|
|
|
.slide-content {
|
|
padding-top: 70px;
|
|
}
|
|
|
|
.slide-title {
|
|
max-width: 870px;
|
|
|
|
@include media-query(1199px) {
|
|
max-width: 555px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/*-------------------------------------------
|
|
static-hero-s2
|
|
--------------------------------------------*/
|
|
.static-hero-s2,
|
|
.static-hero-s3 {
|
|
background: #F0F2FE;
|
|
height: 1000px;
|
|
|
|
@include media-query(1199px) {
|
|
height: 700px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
height: 100%;
|
|
}
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
.politian-pic {
|
|
z-index: 1;
|
|
max-width: 585px;
|
|
right: 285px;
|
|
|
|
@include media-query(1830px) {
|
|
right: 205px;
|
|
max-width: 470px;
|
|
bottom: 65px;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
max-width: 350px;
|
|
right: 150px;
|
|
bottom: 0;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
right: 0;
|
|
bottom: 50px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.inner {
|
|
overflow: hidden;
|
|
height: 860px;
|
|
border-radius: 45%;
|
|
bottom: -14px;
|
|
position: relative;
|
|
border-bottom-left-radius: 44%;
|
|
border-bottom-right-radius: 40%;
|
|
|
|
@include media-query(1830px) {
|
|
bottom: -75px;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
height: 665px;
|
|
bottom: -52px;
|
|
}
|
|
|
|
img {
|
|
margin-bottom: -49px;
|
|
position: relative;
|
|
bottom: -25px;
|
|
}
|
|
}
|
|
|
|
.back-shape {
|
|
position: absolute;
|
|
left: -50px;
|
|
bottom: -30px;
|
|
width: 691px;
|
|
height: 691px;
|
|
background: $white;
|
|
background-size: cover;
|
|
border-radius: 50%;
|
|
z-index: -1;
|
|
|
|
@include media-query(1830px) {
|
|
left: -50px;
|
|
bottom: 72px;
|
|
width: 560px;
|
|
height: 560px;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
left: -15px;
|
|
bottom: 72px;
|
|
width: 380px;
|
|
height: 380px;
|
|
}
|
|
|
|
@include media-query(380px) {
|
|
width: 310px;
|
|
height: 310px;
|
|
left: 50%;
|
|
top: 28%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
&::before {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 15px;
|
|
background: url(/images/slider/back-shape.png) no-repeat center center;
|
|
content: "";
|
|
z-index: -11;
|
|
border-radius: 50%;
|
|
width: 661px;
|
|
height: 661px;
|
|
|
|
@include media-query(1830px) {
|
|
width: 530px;
|
|
height: 530px;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
width: 351px;
|
|
height: 351px;
|
|
}
|
|
|
|
@include media-query(380px) {
|
|
width: 280px;
|
|
height: 280px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.award {
|
|
position: absolute;
|
|
left: -38%;
|
|
bottom: 20%;
|
|
max-width: 323px;
|
|
background: $white;
|
|
display: flex;
|
|
padding: 20px;
|
|
align-items: center;
|
|
border-radius: 20px;
|
|
text-align: left;
|
|
|
|
@include media-query(767px) {
|
|
left: 0;
|
|
bottom: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
h5 {
|
|
margin-bottom: 0;
|
|
font-weight: 500;
|
|
font-size: 26px;
|
|
line-height: 33px;
|
|
|
|
@include media-query(767px) {
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
i {
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
background: #FFF5DD;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
margin-right: 20px;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wpo-supporter {
|
|
position: absolute;
|
|
right: -40%;
|
|
top: 20%;
|
|
padding: 30px;
|
|
background: $white;
|
|
border-radius: 20px;
|
|
box-shadow: 0px 1px 20px 0px rgba(43, 45, 118, 0.1);
|
|
z-index: 99;
|
|
|
|
@include media-query(1199px) {
|
|
padding: 15px;
|
|
top: 25%;
|
|
}
|
|
|
|
@include media-query(767px) {
|
|
padding: 15px;
|
|
top: 52%;
|
|
right: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.slick-slide{
|
|
height: auto;
|
|
}
|
|
|
|
.wpo-supporter-text {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: left;
|
|
|
|
.icon {
|
|
i {
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
background: #EFF4FF;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
margin-right: 20px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 500;
|
|
font-size: 40px;
|
|
line-height: 51px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 27px;
|
|
}
|
|
}
|
|
|
|
|
|
.wpo-supporter-slide {
|
|
max-width: 216px;
|
|
list-style: none;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
|
|
.owl-nav {
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
width: 55px;
|
|
height: 55px;
|
|
|
|
img {
|
|
width: 55px;
|
|
height: 55px;
|
|
padding: 3px;
|
|
border: 1px solid $border-color;
|
|
border-radius: 50%;
|
|
@include rounded-border(50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 945px;
|
|
|
|
@include media-query(1670px) {
|
|
max-width: 694px;
|
|
}
|
|
|
|
@include media-query(1399px) {
|
|
padding-left: 40px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
@include media-query(1050px) {
|
|
max-width: 360px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
margin: 0 auto;
|
|
max-width: 695px;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 300;
|
|
font-size: 80px;
|
|
line-height: 103px;
|
|
color: #4E5064;
|
|
padding-bottom: 30px;
|
|
position: relative;
|
|
margin-bottom: 30px;
|
|
|
|
@include media-query(1670px) {
|
|
font-size: 55px;
|
|
line-height: 80px;
|
|
}
|
|
|
|
@include media-query(1399px) {
|
|
font-size: 45px;
|
|
line-height: 60px;
|
|
}
|
|
|
|
@include media-query(1050px) {
|
|
font-size: 35px;
|
|
line-height: 48px;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 75%;
|
|
height: 1px;
|
|
content: "";
|
|
background: $theme-primary-color-gradient;
|
|
|
|
@include media-query(991px) {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: $dark-gray;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.slide-text {
|
|
margin: 0;
|
|
margin-top: 20px;
|
|
|
|
@include media-query(767px) {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
p {
|
|
color: $text-color;
|
|
max-width: 525px;
|
|
|
|
@include media-query(767px) {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// static-hero-s3
|
|
|
|
.static-hero-s3 {
|
|
background: $dark-gray;
|
|
|
|
.hero-container{
|
|
@include media-query(991px) {
|
|
padding-top: 30px;
|
|
}
|
|
}
|
|
|
|
.politian-pic {
|
|
@include media-query(1500px) {
|
|
right: 60px;
|
|
}
|
|
|
|
@include media-query(1299px) {
|
|
right: 30px;
|
|
}
|
|
@include media-query(991px) {
|
|
right: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
.inner {
|
|
border-radius: 0;
|
|
overflow: unset;
|
|
|
|
@include media-query(991px) {
|
|
height: auto;
|
|
bottom: 0;
|
|
|
|
img{
|
|
bottom: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.back-shape {
|
|
background: linear-gradient(140.43deg, rgba(255, 255, 255, 0.4) 13.65%, rgba(255, 255, 255, 0.1) 91.31%);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
width: 682px;
|
|
height: 682px;
|
|
bottom: auto;
|
|
top: 40px;
|
|
left: -90px;
|
|
|
|
@include media-query(1500px) {
|
|
width: 582px;
|
|
height: 582px;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
width: 422px;
|
|
height: 422px;
|
|
left: -40px;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
left: -20px;
|
|
top: 80px;
|
|
}
|
|
|
|
@media(max-width:500px) {
|
|
width: 300px;
|
|
height: 300px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.back-shape-2 {
|
|
position: absolute;
|
|
left: -50%;
|
|
bottom: -10%;
|
|
z-index: -11;
|
|
|
|
img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@include media-query(1500px) {
|
|
left: -30%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.back-shape-3 {
|
|
position: absolute;
|
|
left: -20%;
|
|
top: 50px;
|
|
z-index: -11;
|
|
max-width: 948px;
|
|
max-height: 948px;
|
|
|
|
img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.hero-content {
|
|
|
|
@media(max-width:1670px) {
|
|
max-width: 650px;
|
|
}
|
|
|
|
@include media-query(1050px) {
|
|
max-width: 510px;
|
|
}
|
|
|
|
.hero-content-wrap {
|
|
padding-left: 20px;
|
|
position: relative;
|
|
|
|
@media(max-width:1700px) {
|
|
padding-left: 0;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -50px;
|
|
bottom: 0;
|
|
width: 1px;
|
|
height: 94%;
|
|
content: "";
|
|
background: $theme-primary-color-gradient;
|
|
transform: matrix(-1, 0, 0, 1, 0, 0);
|
|
|
|
@include media-query(991px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-shape {
|
|
position: absolute;
|
|
right: -25%;
|
|
bottom: 0;
|
|
|
|
@include media-query(1500px) {
|
|
right: -45%;
|
|
}
|
|
|
|
@include media-query(1199px) {
|
|
max-width: 50%;
|
|
right: -30%;
|
|
top: 40%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
@include media-query(991px) {
|
|
display: none;
|
|
}
|
|
|
|
img {
|
|
border-radius: 50%;
|
|
|
|
@include media-query(1199px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-text {
|
|
p {
|
|
color: $white;
|
|
font-weight: 400;
|
|
font-size: 40px;
|
|
line-height: 55px;
|
|
max-width: 610px;
|
|
|
|
@media(max-width:1700px) {
|
|
font-size: 30px;
|
|
line-height: 45px;
|
|
}
|
|
|
|
@media(max-width:575px) {
|
|
font-size: 20px;
|
|
line-height: 35px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-title {
|
|
h2 {
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
color: $white;
|
|
font-weight: 500;
|
|
font-size: 100px;
|
|
line-height: 128px;
|
|
|
|
@media(max-width:1700px) {
|
|
font-size: 80px;
|
|
line-height: 108px;
|
|
}
|
|
|
|
@media(max-width:575px) {
|
|
font-size: 45px;
|
|
line-height: 68px;
|
|
}
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-video-content {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 605px;
|
|
margin-top: 50px;
|
|
text-align: left;
|
|
|
|
@media(max-width:575px) {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.slide-video-img {
|
|
flex-basis: 25%;
|
|
position: relative;
|
|
|
|
@media(max-width:575px) {
|
|
max-width: 200px;
|
|
margin: 0 auto;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
img {
|
|
border-radius: 10px;
|
|
|
|
@media(max-width:575px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.video-btn .btn-wrap{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
@include center-by-translating();
|
|
width: 54px;
|
|
height: 54px;
|
|
line-height: 52px;
|
|
background: $white;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
border: 2px solid $theme-primary-color;
|
|
text-align: center;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
left: -20%;
|
|
top: -20%;
|
|
width: 140%;
|
|
height: 140%;
|
|
background: rgba(255, 255, 255, .3);
|
|
content: "";
|
|
-webkit-animation: save-the-date-pulse .8s infinite;
|
|
animation: save-the-date-pulse .8s infinite;
|
|
border-radius: 50%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.fi {
|
|
&::before {
|
|
background: $theme-primary-color-gradient;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
font-size: 20px;
|
|
position: relative;
|
|
right: -1px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -5px;
|
|
top: -5px;
|
|
width: 100px;
|
|
height: 70px;
|
|
background: $theme-primary-color-gradient;
|
|
content: "";
|
|
z-index: -1;
|
|
}
|
|
|
|
&:after {
|
|
position: absolute;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
width: 100px;
|
|
height: 70px;
|
|
background: $theme-primary-color-gradient;
|
|
content: "";
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.slide-video-text {
|
|
margin-left: 20px;
|
|
flex-basis: 75%;
|
|
|
|
@media(max-width:575px) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
h4 {
|
|
color: $white;
|
|
font-weight: 500;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
p {
|
|
color: $white;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 27px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |