/* -----------------------------------------------
CSS Styles
--------------------------------------------------
Template Name: Elmiz - Personal Portfolio Template
--------------------------------------------------
Table of Content
- Global
- Section
- Menu
- Home
- About
- Services
- Works
- Blog
- Blog-single
- Contact
- Preloader
- Responsive
- Dark
----------------------------------- */
/* -----------------------------------
Global
----------------------------------- */
* {
margin: 0;
padding: 0;
font-family: inherit;
outline: none !important;
list-style: none !important;
}
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Muli", sans-serif;
font-size: 16px;
background-color: #F9F9FF;
color: #515c6a;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", sans-serif;
font-weight: 700;
line-height: 1.618;
color: #35404e;
margin: 0;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
a {
text-decoration: none;
color: inherit;
}
a:hover, a:focus {
text-decoration: none;
color: #f21e4e;
}
.base-color {
color: #f21e4e;
}
.bg-base-color {
background-color: #f21e4e;
}
.max-width-400 {
max-width: 400px;
}
img {
max-width: 100%;
height: auto;
}
ul {
margin-bottom: 0;
}
.list-inline li {
display: inline-block;
}
/* margin */
.mb-50 {
margin-bottom: 50px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-20 {
margin-bottom: 20px;
}
.mt-40 {
margin-top: 40px;
}
/* Buttons */
.btn-custom {
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
text-align: center;
white-space: nowrap;
vertical-align: middle;
font-size: 16px;
font-weight: 600;
line-height: 24px;
padding: 8px 35px;
text-transform: capitalize;
z-index: 1;
border-radius: 20px;
background-color: #f21e4e;
color: #ffffff;
border: 1px solid #f21e4e;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-custom:hover, .btn-custom:focus {
color: #f21e4e;
background-color: transparent;
outline: none;
}
/* Logo */
.main-logo {
position: absolute;
padding-top: 40px;
right: 0;
left: 0;
z-index: 1000;
}
.main-logo .logo {
font-weight: 600;
font-size: 22px;
font-family: "Poppins", sans-serif;
background-color: transparent;
color: #f21e4e;
width: 45px;
height: 45px;
border-radius: 50%;
display: inline-block;
line-height: 45px;
border: 2px solid #f21e4e;
text-align: center;
}
.main-logo .logo:hover {
color: #f21e4e;
}
.main-logo .logo-white {
background-color: transparent;
color: #ffffff !important;
border: 2px solid #ffffff !important;
}
.main-logo .logo-white:hover {
color: #ffffff;
}
/* animation */
.customFadeInUp {
-webkit-animation-name: customFadeInUp;
animation-name: customFadeInUp;
}
@-webkit-keyframes customFadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes customFadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slow {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
.delay-0-2s {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.delay-0-3s {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.delay-0-4s {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.delay-0-5s {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.delay-0-6s {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.delay-0-7s {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.delay-0-8s {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.delay-0-9s {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.delay-0-10s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
/* ------------------------------
Section
------------------------------ */
.section {
padding: 80px 0px 50px 0px;
}
.section-heading {
text-align: center;
margin-bottom: 75px;
}
.section-heading h2 {
line-height: 1;
}
.section-description {
display: inline-block;
line-height: 1;
margin-bottom: 5px;
color: #ffffff;
border-radius: 0px;
position: relative;
padding: 5px 10px;
font-size: 13px;
}
.section-title {
font-weight: 900;
color: #35404e;
}
.section-sub-heading {
margin: auto;
text-align: center;
margin-bottom: 40px;
}
.section-sub-title {
font-weight: 800;
position: relative;
margin: auto;
text-align: center;
display: inline-block;
}
.section-sub-title:after {
position: absolute;
content: "";
left: 0px;
top: auto;
width: 100%;
height: 1px;
bottom: -4px;
background-color: #f21e4e;
z-index: -1;
}
.section-sub-title:before {
position: absolute;
content: "";
left: 0;
top: auto;
width: 14px;
height: 14px;
bottom: -10px;
border-radius: 50%;
background-color: #f21e4e;
right: 0;
margin: auto;
z-index: 2;
border: 4px solid #F9F9FF;
}
/* -----------------------------------
Menu
----------------------------------- */
.main-menu {
padding-top: 40px;
}
.main-menu .menu {
background-color: #ffffff;
display: none;
list-style: none;
margin: 0;
padding: 0px 20px;
position: absolute;
top: 86px;
width: 150px;
right: 50px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.main-menu .menu li {
padding-top: 15px;
}
.main-menu .menu li:first-child {
padding-top: 20px;
}
.main-menu .menu li:last-child {
padding-bottom: 20px;
}
.main-menu .menu li a {
display: block;
text-align: left;
text-decoration: none;
color: #35404e;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.main-menu .menu li a.active {
position: relative;
color: #f21e4e;
}
.main-menu .menu li a.active:after {
position: absolute;
content: "";
left: 0px;
top: 0px;
width: 2px;
height: 100%;
background-color: #f21e4e;
margin-left: -20px;
bottom: 0;
}
.main-menu .hamburger-menu {
display: inline-block;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: absolute;
right: 50px;
top: 40px;
margin-left: auto;
height: 45px;
}
.main-menu .hamburger-menu:hover {
cursor: pointer;
}
.main-menu .hamburger-menu .g-lines {
padding-top: 12px;
}
.main-menu .hamburger-menu .line {
background: #ffffff;
display: block;
height: 2px;
margin: 0 0 6px;
width: 30px;
margin-left: auto;
text-align: left;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.main-menu .hamburger-menu .line:first-child {
width: 17px;
}
.main-menu .hamburger-menu .line:nth-child(3) {
width: 22px;
}
.main-menu .hamburger-menu .line-dark {
background: #35404e;
}
.main-menu .hamburger-menu.open .line {
margin: 0 0 5px;
}
.main-menu .hamburger-menu.open .line:first-child {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 4px;
transform-origin: 4px;
width: 30px;
}
.main-menu .hamburger-menu.open .line:nth-child(2) {
opacity: 0;
}
.main-menu .hamburger-menu.open .line:nth-child(3) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 8px;
transform-origin: 8px;
width: 30px;
}
.main-menu-left .menu {
left: 50px !important;
}
.main-menu-left .hamburger-menu {
left: 50px !important;
right: auto !important;
}
.main-menu-left .hamburger-menu .line {
margin-left: 0;
}
/* ------------------------------
Home
------------------------------ */
.home {
height: 100vh;
background-position: center center;
background-size: cover;
position: relative;
z-index: 1;
}
.home:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000000;
z-index: -1;
}
.home-banner {
text-align: center;
margin-top: 15px;
}
.home-banner h6 {
color: #eee;
margin-bottom: 25px;
font-weight: 400;
}
.home-banner h1 {
margin-bottom: 25px;
color: #ffffff;
letter-spacing: 0.5px;
font-weight: 800;
text-align: center;
}
.home-banner h1.cd-headline {
font-size: 40px;
font-weight: 800;
}
.home-banner h1.cd-headline span {
padding: 0;
}
.home-banner h1.cd-headline .cd-words-wrapper {
text-align: center;
}
.home-banner h1.cd-headline .cd-words-wrapper:after {
background-color: transparent;
}
.home-banner p {
color: #ffffff;
margin: auto auto 30px auto;
}
.home-banner .social-icons {
margin-bottom: 30px;
z-index: 1;
position: relative;
}
.home-banner .social-icons li {
margin-right: 20px;
width: 35px;
height: 35px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
text-align: center;
}
.home-banner .social-icons li i {
color: #eee;
line-height: 35px;
font-size: 15px;
}
.home-banner .social-icons li i:hover {
color: #f21e4e;
}
.home-banner .social-icons li:last-child {
margin-right: 0px;
}
.home-banner .g-buttons .btn-custom {
margin-right: 20px;
}
.home .copyright {
position: absolute;
bottom: 40px;
margin: auto;
width: 100%;
}
.home .copyright span {
font-size: 15px;
color: #eee;
margin-bottom: 0;
font-weight: 400;
letter-spacing: 0.3px;
}
.home .copyright span .sel {
padding: 0px 4px;
opacity: 0.5;
}
.home-1:after {
opacity: 0;
}
.home-2:after {
opacity: 0.5;
}
.home-3:after {
top: 0;
left: -50%;
opacity: 0.6;
width: 100%;
-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
}
.home-4 {
background-color: #F9F9FF;
overflow: hidden;
}
.home-4:after {
top: 0;
left: 50%;
opacity: 1;
width: 100%;
background-color: #f21e4e;
-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
z-index: -1;
}
.home-4 .home-banner h1 {
color: #35404e;
}
.home-4 .home-banner p, .home-4 .home-banner .social-icons i, .home-4 .home-banner h6 {
color: #35404e;
}
.home-4 .home-banner .social-icons li {
background-color: rgba(53, 64, 78, 0.1);
}
.home-4 .hero {
position: absolute;
right: 0px;
top: 0;
width: 100%;
height: 100%;
background-position: center bottom;
background-size: cover;
}
.home-4 .copyright span {
color: #35404e;
}
.home-5 {
background-color: #f21e4e;
background-position: center bottom;
}
.home-5:after {
top: 0;
left: -50%;
opacity: 0.1;
width: 100%;
-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
}
.home-5 .home-banner h1 {
color: #ffffff;
}
.home-5 .home-banner p, .home-5 .home-banner .social-icons i, .home-5 .home-banner h6 {
color: #ffffff;
}
.home-5 .home-banner .social-icons li {
background-color: rgba(255, 255, 255, 0.1);
}
.home-5 .home-banner .social-icons li i:hover {
color: #ffffff;
}
.home-5 .home-banner .btn-custom {
background-color: #ffffff;
color: #35404e;
border: 1px solid #ffffff;
}
.home-5 .home-banner .btn-custom:hover {
background-color: transparent;
color: #ffffff;
}
.home-5 .copyright p {
color: #ffffff;
}
.home-6:after {
opacity: 0;
}
.home-6 .home-banner h1 {
color: #35404e;
}
.home-6 .home-banner p, .home-6 .home-banner .social-icons i, .home-6 .home-banner h6 {
color: #35404e;
}
.home-6 .home-banner .social-icons li {
background-color: rgba(53, 64, 78, 0.1);
}
.home-6 .copyright span {
color: #35404e;
}
.home-dark {
background-color: #353353;
}
.home-dark:after {
opacity: 0;
}
/* ------------------------------
About
------------------------------ */
.about-hero {
margin-bottom: 30px;
}
.about-hero img {
background-color: #eee;
border-radius: 5px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.about-info {
margin-bottom: 30px;
position: relative;
}
.about-info h5 {
margin-bottom: 20px;
}
.about-info .g-listes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 15px;
}
.about-info .liste li {
margin-bottom: 13px;
}
.about-info .liste li span {
font-weight: 700;
margin-right: 10px;
color: #35404e;
}
.about-info .liste:last-child {
margin-left: auto;
}
.about-info .g-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.about-info .btn-custom {
margin-right: 30px;
}
.about-info .social-icons li {
margin-right: 15px;
}
.about-info .social-icons li i {
color: #35404e;
font-size: 15px;
}
.about-info .social-icons li i:hover {
color: #f21e4e;
}
.about-box {
background-color: #ffffff;
padding: 20px;
text-align: center;
border-radius: 20px;
margin-bottom: 30px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.about-box h2 {
font-weight: 900;
font-family: "Poppins", sans-serif;
margin-bottom: 0;
line-height: 1.3;
}
.about-box h2:after {
content: '+';
position: absolute;
padding-left: 2px;
font-size: 25px;
font-weight: 400;
top: 25px;
}
.about-box p {
margin-bottom: 0;
text-transform: capitalize;
}
.timeline {
padding: 30px 30px 40px 30px;
border-radius: 20px;
background-color: #ffffff;
margin-bottom: 30px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.timeline-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.timeline-item .icon {
position: relative;
}
.timeline-item .icon:after {
position: absolute;
content: "";
left: auto;
top: auto;
width: 8px;
height: 8px;
background-color: #f21e4e;
border-radius: 50%;
margin-top: 10px;
margin-left: -3px;
}
.timeline-item .icon:before {
position: absolute;
content: "";
left: auto;
top: auto;
width: 1px;
height: calc(100% - 30px);
background-color: #f21e4e;
margin-top: 30px;
}
.timeline-item .box {
padding-left: 50px;
margin-bottom: 50px;
}
.timeline-item .box h5 {
margin-bottom: 5px;
}
.timeline-item .box h5 span {
color: #35404e;
font-weight: 400;
font-size: 16px;
text-transform: capitalize;
}
.timeline-item .box small {
color: #ffffff;
padding: 3px 8px;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.5px;
}
.timeline-item .box p {
margin-top: 10px;
margin-bottom: 0;
}
.timeline-item:last-child .box {
margin-bottom: 0px;
}
/* Skills */
.skill-item {
margin-bottom: 30px;
}
.skill-item p {
font-weight: 600;
margin-bottom: 5px;
}
.skill-item .skill-progress {
background-color: #eee;
border-radius: 20px;
}
.skill-item .skill-progress-bar {
width: 0;
height: 4px;
position: relative;
border-radius: 20px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skill-item .skill-progress-bar span {
position: absolute;
right: 0;
top: -24px;
font-size: 13px;
font-weight: 500;
}
/* ------------------------------
Services
------------------------------ */
.service-item {
padding: 30px;
margin-bottom: 60px;
border-radius: 20px;
text-align: center;
position: relative;
background-color: #ffffff;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.service-item .icon {
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
margin: auto;
position: absolute;
top: -40px;
left: 0;
right: 0;
border: 8px solid #F9F9FF;
}
.service-item .icon i {
line-height: 60px;
font-size: 20px;
color: #ffffff;
}
.service-item .icon h4 {
color: #ffffff;
line-height: 60px;
}
.service-item h5 {
margin-top: 50px;
margin-bottom: 30px;
position: relative;
display: inline-block;
padding: 10px 20px;
}
.service-item h5:after {
position: absolute;
content: "";
left: auto;
top: 0;
width: 30px;
height: 30px;
border-top: 1px solid #f21e4e;
border-right: 1px solid #f21e4e;
right: 0;
}
.service-item h5:before {
position: absolute;
content: "";
left: 0;
top: auto;
width: 30px;
height: 30px;
bottom: 0;
border-bottom: 1px solid #f21e4e;
border-left: 1px solid #f21e4e;
}
.service-item p {
margin-bottom: 5px;
}
.service-item:hover {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
/* testimonials */
.testimonials-item {
padding: 30px;
border-radius: 20px;
background-color: #ffffff;
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
margin: auto;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.testimonials-item .icon {
font-size: 30px;
display: inline-block;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
position: relative;
z-index: 1;
margin-top: 10px;
}
.testimonials-item .icon span {
color: #ffffff;
line-height: 40px;
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.testimonials-item .image {
margin: auto;
margin-bottom: 20px;
padding-top: 5px;
}
.testimonials-item .image img {
width: 90px;
height: 90px;
border-radius: 50%;
margin: auto;
border: 2px solid #f21e4e;
padding: 2px;
}
.testimonials-item h6 {
font-weight: 600;
}
.testimonials-item .job {
margin-bottom: 20px;
font-size: 15px;
}
.testimonials .owl-dots {
text-align: center;
line-height: 0;
margin-bottom: 30px;
}
.testimonials .owl-dot span {
display: block;
width: 10px;
height: 10px;
background-color: transparent;
border: 0;
margin: 0 6px;
border-radius: 20px;
border: 1px solid #f21e4e;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.testimonials .owl-dot.active span {
background-color: #f21e4e;
}
.testimonials .owl-stage-outer {
padding-bottom: 30px;
}
/* clients */
.clients-item {
margin-bottom: 30px;
border-radius: 20px;
}
.clients-item img {
opacity: 0.8;
}
.clients-item:hover img {
opacity: 1;
}
/* Pricing */
.pricing-item {
text-align: center;
padding: 30px 0px;
border-radius: 20px;
position: relative;
margin-bottom: 30px;
background-color: #ffffff;
z-index: 1;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.pricing-item:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 110px;
background-color: #ffffff;
right: 0;
z-index: -1;
border-radius: 20px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom: 1px solid #f21e4e;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.pricing-item h5 {
margin-bottom: 15px;
line-height: 1;
}
.pricing-item .content {
position: relative;
}
.pricing-item .content .price {
background: #ffffff;
width: 80px;
height: 80px;
margin: auto;
border-radius: 50%;
z-index: 2;
border: 1px solid #f21e4e;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.pricing-item .content .price h3 {
font-weight: 700;
line-height: 66px;
color: #f21e4e;
position: absolute;
margin: auto;
text-align: center;
left: 0;
right: 0;
}
.pricing-item .content .price h3 span {
font-size: 11px;
color: #f21e4e;
font-weight: 400;
margin-top: 19px;
position: absolute;
margin-left: -41px;
}
.pricing-item .content ul {
list-style-type: none;
margin: 30px 0;
}
.pricing-item .content ul li {
margin-bottom: 10px;
text-align: center;
}
.pricing-item .content ul li:last-child {
margin-bottom: 0;
}
.pricing-item:hover {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.pricing-item:hover .price {
background-color: #f21e4e;
}
.pricing-item:hover .price h3, .pricing-item:hover .price span {
color: #ffffff !important;
}
/* ------------------------------
Works
------------------------------ */
.works-filters {
margin-bottom: 35px;
text-align: center;
}
.works-filters li {
margin-right: 30px;
font-weight: 700;
cursor: pointer;
margin-bottom: 5px;
}
.works-filters li.active {
color: #f21e4e;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.works-item {
margin-bottom: 30px;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.works-item .image {
position: relative;
overflow: hidden;
border-radius: 20px;
}
.works-item .image img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.works-item .image .overly {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding: 0px 20px 20px 20px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.works-item .image .overly p {
text-transform: capitalize;
font-weight: 500;
color: #ffffff;
margin-bottom: 0;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.works-item .image .overly .info {
width: 100%;
}
.works-item .image .overly .details a {
margin-right: 10px;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #ffffff;
text-align: center;
color: #35404e;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.works-item .image .overly .details a i {
color: #35404e;
font-size: 14px;
line-height: 30px;
}
.works-item .image .overly .details a:last-child {
margin-right: 0px;
}
.works-item .image:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.works-item .image:hover .overly {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(33%, rgba(0, 0, 0, 0)), color-stop(66%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.7) 100%);
opacity: 1;
}
.works-item .image:hover .overly .details a:hover {
background-color: #f21e4e;
}
.works-item .image:hover .overly .details a:hover i {
color: #ffffff;
}
.works-items .mix {
display: none;
}
/* ---------------------------------
Blog
--------------------------------- */
.blog-item {
padding: 30px;
text-align: center;
margin-bottom: 60px;
background-color: #ffffff;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.blog-item .thumbnail {
margin-top: -60px;
margin-bottom: 25px;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.blog-item .thumbnail img {
border-radius: 20px;
}
.blog-item h5 {
margin-bottom: 15px;
}
.blog-item h5 a {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.blog-item p {
margin-bottom: 25px;
}
.blog-item:hover {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.blog-item:hover h5 a {
color: #f21e4e;
}
/* pagination */
.pagination {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.pagination li {
width: 35px;
height: 35px;
border: 1px solid #f21e4e;
margin-right: 10px;
border-radius: 50%;
}
.pagination li a {
line-height: 33px;
color: #f21e4e;
font-weight: 600;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pagination li.active, .pagination li:hover {
background-color: #f21e4e;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.pagination li.active a, .pagination li:hover a {
color: #ffffff;
}
/* ---------------------------------
Blog-single
--------------------------------- */
.blog-single {
padding: 30px;
border-radius: 20px;
background-color: #ffffff;
margin-bottom: 30px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.blog-single .thumbnail {
margin-bottom: 15px;
}
.blog-single img {
border-radius: 5px;
margin-bottom: 15px;
}
.blog-single .title {
margin-bottom: 16px;
}
.blog-single .quote {
background-color: #F9F9FF;
padding: 20px;
border-left: 3px solid #f21e4e;
}
.blog-single .meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 35px;
}
.blog-single .meta p {
font-size: 14px;
}
.blog-single .meta p span {
margin-right: 20px;
}
.blog-single .meta p i {
color: #f21e4e;
margin-right: 5px;
}
.blog-single .meta .social-links li {
margin-right: 15px;
}
.blog-single .footer-author {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #F9F9FF;
padding: 30px;
border-radius: 5px;
margin-top: 50px;
}
.blog-single .footer-author img {
width: 110px;
margin-right: 20px;
border-radius: 50%;
margin-bottom: 0;
}
.blog-single .footer-author p {
margin-bottom: 0;
}
/* widget */
.widget {
margin-bottom: 30px;
background-color: #ffffff;
padding: 15px 20px 20px 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.widget-title {
margin-bottom: 10px;
}
.widget-search .search-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
width: 100%;
}
.widget-search .search-form .form-group {
width: 100%;
margin-bottom: 0;
}
.widget-search .search-form .form-control {
background-color: #ffffff;
border: 1px solid #eee;
font-size: 16px;
}
.widget-search .search-form .form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.widget-search .search-form .submit-btn {
background-color: #f21e4e;
color: #ffffff;
border: none;
position: absolute;
right: 0;
top: 0;
width: 50px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
}
.widget-search .search-form .submit-btn i {
color: #ffffff;
font-weight: 400;
}
.widget-categories ul .cat-item:not(:last-child) {
margin-bottom: 10px;
}
.widget-categories ul a {
font-weight: 500;
width: 100%;
}
.widget-categories ul a:hover {
color: #f21e4e;
}
.widget-categories ul .badge-pill {
color: #ffffff;
background-color: #f21e4e;
cursor: pointer;
padding: 4px 10px;
border-radius: 30px;
}
.widget-categories ul .badge-pill:hover {
color: #eee;
}
.widget-recent-posts .post-item {
margin-bottom: 30px;
}
.widget-recent-posts .post-item img {
width: 80px;
height: 80px;
margin-right: 15px;
border-radius: 5px;
}
.widget-recent-posts .post-item p {
margin-bottom: 0;
margin-top: 5px;
font-size: 14px;
}
.widget-recent-posts .post-item:last-child {
margin-bottom: 0;
}
.widget-tags li {
background-color: #eee;
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 5px;
text-transform: capitalize;
font-size: 14px;
}
.widget-tags li:last-child {
margin-bottom: 0;
}
/* ------------------------------
Contact
------------------------------ */
.contact-item {
margin-bottom: 30px;
text-align: center;
background-color: #ffffff;
padding: 20px 2px;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.contact-item p:first-child {
color: #35404e;
font-weight: 700;
margin-bottom: 5px;
}
.contact-item p:first-child i {
margin-right: 8px;
}
.contact-item p:last-child {
margin-bottom: 0;
}
.contact-item .social-icons li {
margin-right: 20px;
}
.contact-item .social-icons li i {
color: #515c6a;
font-size: 15px;
}
.contact-item .social-icons li i:hover {
color: #f21e4e;
}
.contact-item .social-icons li:last-child {
margin-right: 0px;
}
.contact_form {
margin-bottom: 30px;
background-color: #ffffff;
padding: 30px;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.contact_form .form-group {
margin-bottom: 20px;
}
.contact_form .form-control {
background-color: transparent;
border: 1px solid #eee;
border-radius: 20px;
padding: 20px;
font-size: 16px;
color: #35404e;
display: inline-block;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.contact_form .form-control:focus, .contact_form .form-control:hover {
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #eee;
-webkit-box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}
.contact_form .form-control ::-moz-placeholder {
color: #35404e !important;
}
/* google-map */
.google-map {
line-height: 0;
border: 1px solid #eee;
border-radius: 5px;
}
.google-map iframe {
width: 100%;
height: 470px;
border: 0;
}
/* -----------------------------
Preloader
--------------------------------- */
.loading {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #F9F9FF;
z-index: 99999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.loading .circle {
margin: auto;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f21e4e;
-webkit-animation: load 0.9s infinite linear;
animation: load 0.9s infinite linear;
}
@-webkit-keyframes load {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes load {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
/* ------------------------------
Responsive
------------------------------ */
@media screen and (max-width: 991px) {
.home-3:after,
.home-5:after {
left: 0;
width: 100%;
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
}
.home-4:after {
display: none;
}
.home-4 .hero {
display: none;
}
.home-5 .hero {
display: none;
}
.main-menu .hamburger-menu .line-dark-2 {
background: #35404e;
}
}
@media screen and (max-width: 768px) {
.blog-single .meta {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.blog-single .meta .social-links {
margin-left: 0 !important;
margin-top: 10px;
}
.hide-logo {
display: none;
}
}
@media screen and (max-width: 567px) {
.blog-single .footer-author {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
.home-3 {
background-position: unset;
}
.about-info .g-listes,
.about-info .g-bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.about-info .liste:last-child {
margin-left: 0;
}
.about-info .g-bottom .btn-custom {
margin-bottom: 20px;
}
.main-menu-left .hamburger-menu {
left: 15px !important;
}
}
@media screen and (max-width: 450px) {
h1,
.home-banner h1.cd-headline {
font-size: 36px;
}
.main-menu .hamburger-menu {
right: 15px;
}
.max-width-400 {
width: auto;
}
.about-box h2 {
font-size: 28px;
}
}
@media screen and (max-width: 320px) {
.home {
min-height: 700px;
}
h1,
.home-banner h1.cd-headline {
font-size: 28px;
}
}
/* ------------------------------
Dark
------------------------------ */
body.dark {
background-color: #353353;
color: #eee;
}
body.dark .about-info .social-icons li i,
body.dark .contact-item .social-icons li i {
color: #eee;
}
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6,
body.dark .section-title,
body.dark .about-info ul li span,
body.dark .contact-item p:first-child,
body.dark .main-menu .menu li a {
color: #ffffff;
}
body.dark .testimonials-item,
body.dark .service-item,
body.dark .pricing-item,
body.dark .pricing-item:after,
body.dark .pricing-item .content .price,
body.dark .timeline,
body.dark .skill-item .skill-progress,
body.dark .blog-item,
body.dark .blog-single,
body.dark .widget,
body.dark .form,
body.dark .about-box,
body.dark .main-menu .menu,
body.dark .contact-item,
body.dark .contact_form {
background-color: #302f4e;
-webkit-box-shadow: none;
box-shadow: none;
}
body.dark .service-item .icon {
border: 8px solid #353353;
}
body.dark .section-sub-title:before {
border: 4px solid #353353;
}
body.dark .blog-single .footer-author,
body.dark .blog-single .quote,
body.dark .widget-search .search-form .form-control,
body.dark .widget-tags li, body.dark .loading {
background-color: #353353;
}
body.dark .widget-search .search-form .form-control,
body.dark .form .form-control {
border: 1px solid #353353;
}
body.dark .about-box h2 {
color: #f21e4e;
}
body.dark .contact_form .form-control, body.dark .google-map {
border: 1px solid rgba(255, 255, 255, 0.1);
}