@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3);
opacity: 0;
}
}
.gradint-slider{
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
&::before{
position: absolute;
content: '';
top: 0px;
left: 0px;
width: 100%;
height: 100%;
@include gradint;
z-index: 1;
opacity: 0.95;
}
.banner-slider{
position: relative;
z-index: 3;
background: none !important;
.main-btn{
background: none;
border: 2px solid #fff;
color: #fff;
&::before{
background-color: #fff;
}
&:hover{
color: #232323;
}
}
}
.banner-slider .slick-arrow{
background: rgba(255, 255, 255, 0.6);
color: #232323;
&:hover{
background: #fff;
}
}
.banner-slider .banner-text .title,
.banner-slider .banner-text p,
.banner-slider .banner-text .title-tag
{
color: #fff;
}
}
.gradint_body{
.header-navigation .navbar-btn a{
border: 0px;
@include gradint;
background-size: 200% auto;
@include transition(0.3s);
&:hover{
color: #fff;
background-position: right center;
}
}
.service-item-six{
@include gradint;
border: 0px;
border-radius: 10px;
padding: 4px;
display: block;
.service-item-inner{
padding: 40px 28px;
position: relative;
&::before{
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #fff;
left: 0px;
top: 0px;
border-radius: 7px;
@include transition(0.3s);
}
.s-i-main-c{
position: relative;
z-index: 3;
}
}
&:hover{
color: #fff;
.title,
.icon
{
color: #fff;
}
.service-item-inner{
&::before{
border-radius: 50%;
transform: scale(0);
}
}
}
}
.video-section-new{
.intro-thumb{
position: relative;
&::before{
position: absolute;
content: '';
width: 100%;
height: 100%;
left: -30px;
bottom: -30px;
@include gradint;
border-radius: 10px;
}
img{
width: 100%;
position: relative;
z-index: 3;
border-radius: 10px;
}
.video-popup{
position: absolute;
top: 50%;
left : 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff;
line-height: 60px;
text-align: center;
color: #555;
z-index: 4;
box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.1);
}
}
.counter-area-new{
display: flex;
flex-wrap: wrap;
.counter-box-new{
max-width: 50%;
flex: 50%;
margin-bottom: 30px;
.counter{
font-size: 34px;
color: #002249;
font-weight: 700;
}
.title{
font-weight: 400;
font-size: 15px;
color: #616161;
}
}
}
}
.portfolio-area {
.portfolio-item{
display: block;
border-radius: 10px;
overflow: hidden;
.portfolio-content{
left: 0px;
bottom: 0px;
padding: 30px 27px;
}
&::before{
@include gradint;
}
}
.portfolio-item:hover::before{
opacity: .9;
}
}
.team{
position: relative;
.team-member{
position: relative;
overflow: hidden;
z-index: 2;
border-radius: 10px;
@include transition(0.3s);
.member-pic{
img{
width: 100%;
}
}
.member-data{
@include gradint;
text-align: center;
padding: 18px 20px 17px;
.title{
font-size: 20px;
line-height: 30px;
color: $white;
font-weight: 600;
margin-bottom: 2px;
}
.position{
color: #fff;
font-size: 14px;
line-height: 24px;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 0px;
}
}
.social{
@include gradint;
position: absolute;
right: -50px;
top: 15px;
border-radius: 5px 0px 0px 5px;
@include transition(0.5s);
ul{
padding-left: 0px;
margin-bottom: 0px;
li{
list-style: none;
a{
text-decoration: none;
width: 35px;
height: 35px;
font-size: 16px;
text-align: center;
line-height: 35px;
display: block;
color: #fff;
}
}
}
}
&:hover{
.social{
right: 0px;
}
}
}
}
.testimonials-section{
.testimonial-box {
@include gradint;
padding: 5px;
border-radius: 10px;
.testi-box-inner{
background: #fff;
padding: 30px;
border-radius: 8px;
}
p{
padding: 0px;
border: 0px;
background: none;
}
.author {
margin-top: 0px;
padding-left: 0px;
margin-bottom: 10px;
}
}
}
.call-to-action::before {
@include gradint;
}
.latest-news-box{
border-radius: 10px;
overflow: hidden;
.post-content{
@include gradint;
.post-meta a,
.title a,
.read-more-btn
{
color: #fff;
}
.read-more-btn:hover{
color: #fff;
}
}
}
.footer-area {
position: relative;
&::before{
position: absolute;
content: '';
top: 0px;
left: 0px;
width: 100%;
height: 100%;
@include gradint;
opacity: 1;
}
.footer-overlay{
background: none;
position: relative;
z-index: 3;
}
.widget-item-1 p,
.widget-item-2 ul li,
.widget-item-3 .features-sub p,
.widget-item-2 ul li a
{
color: #fff;
}
.widget-item-3 .features-sub .input-box input {
border: 2px solid rgba(255, 255, 255, 0.7);
&::placeholder{
color: #fff !important;
}
&::-webkit-input-placeholder{
color: #fff !important;
}
}
}
.footer-area .widget-item-3 .features-sub .input-box button{
background: #fff;
border-radius: 5px;
color: red;
}
.footer-area .footer-copyright p{
color: #fff;
}
.about-thumb::before {
display: none;
}
.about-thumb{
position: relative;
&::after{
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 30px;
left: -30px;
@include gradint;
border-radius: 10px;
}
img{
position: relative;
z-index: 3;
border-radius: 10px;
width: 100%;
}
}
.service-item-three{
border-radius: 10px;
}
.service-item-three:hover{
@include gradint;
}
.feature-list li:hover::before {
@include gradint;
}
.about-history-area .history-item .history-content{
@include gradint;
}
.about-history-area .history-item .history-content .title,
.about-history-area .history-item .history-content span
{
color: #fff;
}
.service-item-eight .services-overlay .icon{
@include gradint;
}
.service-item-eight:hover .services-overlay {
background-color: rgba(0, 34, 73, 0.7);
}
.blog-sidebar .widget.categories-widget ul li a.active,
.blog-sidebar .widget.categories-widget ul li a:hover{
@include gradint;
}
.blog-sidebar .side-bar-contact .overlay{
@include gradint;
}
.back-to-top a{
@include gradint;
}
.single-blog-grid .cat{
@include gradint;
}
.blog-sidebar .case-live .case-live-btn a,
.pricing-plan-item:hover .plans-btn{
@include gradint;
border-color: #f5faff;
}
.team-member .team-content,
.team-details-content ul a:hover
{
@include gradint;
}
.team-member .member-photo img{
width: 100%;
}
.team-member .team-content .name a,
.team-member .team-content .position
{
color: #fff;
}
.team-member .team-content .name a:hover{
color: #fff;
}
.project-gallery .project-gallery-filter .project-gallery-menu .filter{
border: 0px;
}
.project-gallery .project-gallery-filter .project-gallery-menu .filter.active,
.project-gallery .project-gallery-filter .project-gallery-menu .filter:hover,
.blog-sidebar .widget.search-widget form button,
.main-btn
{
@include gradint;
}
.header-navigation .primary-menu li .submenu li a:hover,
.widget-range-slider .price-range-slider .value,
.widget-range-slider .price-range-slider .ui-slider-horizontal .ui-slider-handle
{
@include gradint;
}
.widget-range-slider .price-range-slider .filter_price {
@include gradint;
border: 0px;
}
.widget-range-slider .price-range-slider .filter_price:hover{
color: #fff;
}
.page-item.active .page-link,
.product-summery .social-share a:hover,
.checkout-area .g-title,
.contact-info-items .contact-info-item i
{
@include gradint;
}
.product-details-tab .nav .nav-item a.active,
.product-details-tab .nav .nav-item a:hover {
@include gradint;
border-color: #f5f5f5;
}
.conatct-section .conatct-one-bg::before,
.header-topbar .top-left-content .language-change .language-menu a:hover,
.header-topbar .top-right-wrapper .language-change .language-menu a:hover,
.team-member .member-photo .social-icon a:hover
{
@include gradint;
}
.header-topbar .top-left-content .language-change .language-menu a:hover{
color: #fff;
}
.dashboard-inner .card{
@include gradint;
}
.user-dashboard-area .card .card-header{
@include gradint;
}
.call-to-action .main-btn.main-btn-3{
color: #fff;
}
.gradint-static-hero{
.banner-slider.banner-slider-one{
padding: 120px 0;
position: relative;
background: #F7F8FC;
.shape1{
position: absolute;
bottom: 0px;
width: auto;
}
}
}
// About Section CSS
.about {
position: relative;
.info {
.info-title {
font-size: 40px;
line-height: 50px;
font-weight: 700;
margin-bottom: 43px;
display: block;
span {
@include gradinttext;
}
}
.link {
margin-top: 45px;
}
}
.box {
text-align: center;
.inner-box {
width: 100%;
height: 100%;
background: #fff;
position: relative;
z-index: 99;
text-align: center;
padding: 43px 25px 21px;
@include transition(0.3s);
border-radius: 10px;
box-shadow: $bs1;
.icon {
height: 110px;
width: 110px;
line-height: 1;
background-color: rgba(12,89,219,.1);
transition: all .3s ease-out 0s;
margin-bottom: 20px;
font-size: 50px;
color: #0c59db;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.title {
font-size: 22px;
font-weight: 600;
margin: 26px 0px 19px;
}
.text {
margin-bottom: 0px;
}
&:hover {
box-shadow: $bs2
}
}
}
.box2 {
margin-top: 30px;
}
.box4 {
margin-top: 30px;
}
}
// Video Section CSS
.video {
position: relative;
background: #F7F8FC;
.shape1{
position: absolute;
top: 0;
left: 0;
width: auto;
}
.shape2{
position: absolute;
bottom: 0;
left: 0;
width: auto;
}
.video-wrapper {
position: relative;
.video-box {
position: relative;
@include gradint;
padding: 250px 0px 250px;
z-index: 99;
border-radius: 30px;
position: relative;
overflow: hidden;
box-shadow: $bs2;
&::before{
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0px;
left: 0px;
@include gradint;
opacity: 0.8;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.video-popup {
background: #fff;
border-radius: 50%;
width: 70px;
height: 70px;
display: block;
line-height: 70px;
color: #232323;
text-align: center;
font-size: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
&::after {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 100px;
height: 100px;
background: white;
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
z-index: -1;
}
}
}
}
}
}
// New Couner Area
.counter-area2 {
padding: 115px 0px 110px;
position: relative;
.shape {
position: absolute;
bottom: 0px;
left: 0px;
width: 500px;
z-index: -9;
}
.fun-box {
box-shadow: $bs1;
background: #fff;
border-radius: 10px;
padding: 30px 20px 28px;
@include transition(0.3s);
.icon {
height: 110px;
width: 110px;
line-height: 1;
background-color: rgba(12, 89, 219, 0.1);
transition: all 0.3s ease-out 0s;
margin-bottom: 20px;
font-size: 50px;
color: #0c59db;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.counter-wrapper {
display: block;
margin-top: 3px;
.counter {
font-size: 36px;
line-height: 50px;
font-weight: 600;
display: inline-block;
margin-bottom: 0px;
}
.math {
font-size: 30px;
line-height: 50px;
margin-left: 5px;
position: relative;
top: -2px;
}
}
.categori {
font-size: 20px;
line-height: 30px;
font-weight: 600;
margin-top: 0px;
}
&:hover{
box-shadow: $bs2;
}
}
&.white {
.counter-wrapper {
.counter {
color: #fff;
}
.math {
color: #fff;
}
}
.categori {
color: #fff;
}
}
}
.call-to-action.c-a-2{
position: relative;
padding: 200px 0px 200px;
background: #F7F8FC!important;
.shape1{
position: absolute;
top: 0;
left: 0;
width: auto;
}
.shape2{
position: absolute;
bottom: 0;
left: 0;
width: auto;
}
&::before{
display: none;
}
}
.testimonials-section.ts-2{
position: relative;
background: #F7F8FC;
.shape1{
position: absolute;
top: 0;
left: 0;
width: auto;
}
.shape2{
position: absolute;
bottom: 0;
left: 0;
width: auto;
}
}
}