?
| Current Path : /home/webyoo/www/events/crm/marketing-agency/css/ |
| Current File : /home/webyoo/www/events/crm/marketing-agency/css/style.css |
/* ===================================
Table of Content
====================================== */
/*
- Fonts
- Scrollbar
- General
- Loader
- Navbar
- Side Menu
- Header
- Services
- Counter-Section
- portfolio-Section
- Testimonial-Section
- Client-Section
- Blog-Section
- Contact-Section
- Footer
- Media Quesries
*/
/* ===================================
Google font
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');
/* ===================================
Scrollbar
====================================== */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
width: 12px;
background: white;
border-left: 0 solid white;
border-right: 0 solid white;
}
::-webkit-scrollbar-thumb {
background: #d43030;
width: 0;
height: 25%;
transition: .5s ease;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background: #202020;
}
/* ===================================
General
====================================== */
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
}
h2 {
font-size: 48px;
font-weight: 600;
color: #202020;
font-family: 'Montserrat', sans-serif;
}
p {
font-size: 24px;
font-weight: 400;
color: #202020;
text-align: justify;
}
.title-text {
font-size: 65px;
letter-spacing: -3px;
}
/*Opacity*/
.opacity-1 {opacity: 0.1;}
.opacity-2 {opacity: 0.2;}
.opacity-3 {opacity: 0.3;}
.opacity-4 {opacity: 0.4;}
.opacity-5 {opacity: 0.5;}
.opacity-6 {opacity: 0.6;}
.opacity-7 {opacity: 0.7;}
.opacity-8 {opacity: 0.8;}
.opacity-8 {opacity: 0.9;}
/*Social icons background hover*/
.facebook-hover:hover{color: #fff; transition: 0.5s ease; background-color: #4267B2;}
.twitter-hover:hover{color: #fff; transition: 0.5s ease; background-color: #1DA1F2;}
.google-plus-hover:hover{color: #fff; transition: 0.5s ease; background-color: #db4a39;}
.linked-in-hover:hover{color: #fff; transition: 0.5s ease; background-color: #2867B2;}
.instagram-hover:hover{color: #fff; transition: 0.5s ease; background-color: #C13584;}
.gmail-hover:hover{color: #fff; transition: 0.5s ease; background-color: #D44638;}
/*Social icons hover*/
.facebook-hvr:hover {color: #4267B2; background-color: #ffffff;}
.twitter-hvr:hover{color: #1DA1F2; background-color: #ffffff;}
.youtube-hvr:hover{color: #FF0000; background-color: #ffffff;}
.instagram-hvr:hover{color: #C13584; background-color: #ffffff;}
/*Theme text color classes*/
.red {
color: #d43030;
}
/*Button*/
.btn {
z-index: 2;
letter-spacing: .5px;
border-radius: 0;
font-weight: 500;
overflow: hidden;
position: absolute;
line-height: inherit;
display: inline-block;
color: #202020;
border: 2px solid transparent;
text-transform: capitalize;
transition: all .5s ease !important;
}
.btn.button {
font-size: 12px !important;
font-weight: 500;
color: #202020;
padding: 9px 34px !important;
line-height: 1.8em !important;
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
font-family: 'Montserrat', sans-serif;
}
.btn.btn-rounded {
border-radius: 50px;
}
.btn.white-btn {
background: transparent;
border-color: #202020;
color: #202020;
}
.center-button {
text-align: center;
}
/*Button Hover*/
.button:after {
content: '\EA46';
position: absolute;
opacity: 0;
top: 8px;
right: -20px;
transition: 0.5s;
font-weight: 700;
font-size: 16px;
font-family: LineIcons;
}
.button:hover {
padding-right: 24px;
padding-left: 8px;
}
.button:hover:after {
opacity: 1;
right: 10px;
}
/* ===================================
Preloader
====================================== */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: #FFFFFF;
z-index: 999;
}
.center {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* loader-32 */
.loader-32 .loader-container {
width: 220px;
}
.loader-32 .ball-wrapper {
position: relative;
display: inline-block;
width: 50px;
margin: 0 10px;
padding-bottom: 10px;
}
.loader-32 .ball-holder {
position: relative;
overflow: hidden;
height: 130px;
}
.loader-32 .ball {
position: absolute;
bottom: 0;
left: 50%;
display: block;
width: 30px;
height: 30px;
border-radius: 25px;
border: 1px solid #202020;
background-color: #202020;
transform-origin: center;
animation: loader32 1s infinite linear;
z-index: 2;
transform: translateY(0px) translateX(-50%) translateZ(0);
}
.loader-32 .ball-wrapper:nth-child(2) .ball {
background-color: #d43030;
border: 1px solid #d43030;
}
.loader-32 .ball-wrapper:nth-child(3) .ball {
background-color: #fec107;
border: 1px solid #fec107;
}
.loader-32 .shadow {
position: absolute;
bottom: 9px;
width: 100%;
height: 6px;
border-radius: 50%;
background: rgb(161, 160, 161);
opacity: 1;
z-index: 1;
animation: shadow32 1s infinite linear;
}
.ball-wrapper:nth-of-type(1) .ball,
.ball-wrapper:nth-of-type(1) .shadow {
animation-delay: 0s;
}
.ball-wrapper:nth-of-type(2) .ball,
.ball-wrapper:nth-of-type(2) .shadow {
animation-delay: 0.2s;
}
.ball-wrapper:nth-of-type(3) .ball,
.cube-wrapper:nth-of-type(3) .shadow {
animation-delay: 0.3s;
}
@keyframes loader32 {
0% {
transform: translate(-50%, 10px);
}
40% {
transform: translate(-50%, -90px);
width: 30px;
height: 30px;
}
50% {
transform: translate(-50%, -100px);
width: 30px;
height: 30px;
}
65% {
transform: translate(-50%, -90px);
width: 30px;
height: 30px;
}
75% {
transform: translate(-50%, 0px);
width: 30px;
height: 30px;
}
100% {
transform: translate(-50%, 10px);
width: 50px;
height: 15px;
}
}
@keyframes shadow32 {
0% {
transform: scale(0.9, 0.9);
opacity: 1;
}
50% {
transform: scale(0.2, 0.2);
opacity: 0.3;
}
100% {
transform: scale(0.9, 0.9);
opacity: 1;
}
}
/* ===================================
Navbar
====================================== */
.navbar {
padding: 0;
z-index: 111;
background-color: transparent !important;
align-items: flex-end;
}
.nav-btn {
bottom: 20px;
right: 20px;
position: absolute;
}
.navbar-brand {
background-color: #d43030;
padding: 20px 10px 21px 10px;
}
.navbar-brand:hover {
background-color: #000;
position: relative;
}
.navbar-brand img {
width: 100%;
}
.navbar-fixed-top.scrolled {
transition: background-color 600ms linear;
}
.navbar-fixed-top.scrolled .button {
display: none;
}
.navbar-fixed-top.scrolled .sidemenu_btn {
left: 96%;
transition: none;
}
/*side menu button*/
.sidemenu_btn {
width: 36px;
padding: 6px;
left: 50%;
top: 20px;
z-index: 999;
margin-top: 12px;
cursor: pointer;
text-align: center;
position: absolute;
display: inline-block;
transition: none;
}
.sidemenu_btn span {
height: 2px;
width: 100%;
background: #202020;
display: block;
margin: auto;
transition: .5s ease;
}
.sidemenu_btn:hover span:first-child,
.sidemenu_btn:hover span:last-child {
width: 70%;
}
.sidemenu_btn span:nth-child(2) {
margin: 4px 0;
}
/* ===================================
Side Menu
====================================== */
.side-menu {
width: 100%;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 2032;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
transform: translate3d(0, -100%, 0);
transition: transform .5s ease;
background: linear-gradient( rgba(212, 48, 48, 0.9), rgba(212, 48, 48, 0.9)), url('../img/side-menu.jpg');
}
.side-menu.left {
left: 0;
right: auto;
transform: translate3d(-100%, 0, 0);
}
.side-menu.before-side {
width: 280px;
}
.side-menu.side-menu-active,
.side-menu.before-side {
transform: translate3d(0, 0, 0);
}
.side-menu-opacity {
opacity: 0;
}
.pul-menu .side-menu.side-menu-active {
visibility: visible;
opacity: 1;
}
.side-menu .logo-image {
margin: 0 0 4.5rem 0;
}
/*Side overlay*/
#close_side_menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #202020;
transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
display: none;
z-index: 1031;
opacity: 0.4;
}
/*side close btn*/
.side-menu .btn-close {
height: 33px;
width: 33px;
display: inline-block;
text-align: center;
position: absolute;
top: 42px;
right: 40px;
cursor: pointer;
}
.side-menu.before-side .btn-close {
display: none;
}
.side-menu .btn-close::before,
.side-menu .btn-close::after {
position: absolute;
right: 16px;
content: ' ';
height: 24px;
width: 2px;
background: #fff;
top: 5px;
}
.side-menu .btn-close:before {
transform: rotate(45deg);
}
.side-menu .btn-close:after {
transform: rotate(-45deg);
}
.side-menu .inner-wrapper {
padding: 2.5rem 5rem;
height: 100%;
position: relative;
overflow-y: auto;
display: flex;
align-items: center;
text-align: left;
flex-wrap: wrap;
}
.pul-menu.pushwrap .side-menu .inner-wrapper {
padding: 3.5rem 2.5rem;
}
.side-menu .side-nav {
margin-bottom: 30px;
display: block;
}
.side-nav .navbar-nav .nav-link {
display: block;
margin: 3px 0;
padding: 0 !important;
opacity: 0;
transition: all 0.8s ease 500ms;
transform: translateY(30px);
}
.side-nav .navbar-nav .nav-link:first-child {
transition-delay: .1s;
}
.side-nav .navbar-nav .nav-link:nth-child(2) {
transition-delay: .2s;
}
.side-nav .navbar-nav .nav-link:nth-child(3) {
transition-delay: .3s;
}
.side-nav .navbar-nav .nav-link:nth-child(4) {
transition-delay: .4s;
}
.side-nav .navbar-nav .nav-link:nth-child(5) {
transition-delay: .5s;
}
.side-nav .navbar-nav .nav-link:nth-child(6) {
transition-delay: .6s;
}
.side-nav .navbar-nav .nav-link:nth-child(7) {
transition-delay: .7s;
}
.side-nav .navbar-nav .nav-link:nth-child(8) {
transition-delay: .8s;
}
.side-nav .navbar-nav .nav-link:nth-child(9) {
transition-delay: .9s;
}
.side-menu.side-menu-active .side-nav .navbar-nav .nav-link {
transform: translateY(0);
opacity: 1;
}
.side-nav .navbar-nav .nav-link {
display: inline-table;
color: #fff;
padding: 5px 0 5px 0 !important;
font-size: 36px;
font-weight: 700;
line-height: normal;
position: relative;
border-radius: 0;
}
.side-nav .navbar-nav .nav-link::after {
content: "";
position: absolute;
background: #fff;
display: inline-block;
width: 0;
height: 3px;
bottom: 0;
left: 0;
overflow: hidden;
transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.side-nav .navbar-nav .nav-link:hover::after,
.side-nav .navbar-nav .nav-link:focus::after,
.side-nav .navbar-nav .nav-link.active::after {
width: 100%;
}
.side-nav .navbar-nav .nav-link.active {
background: transparent;
}
.side-menu-inner-content {
border-bottom: solid 1px rgba(255, 255, 255, 0.5);
padding-bottom: 30px;
}
.side-menu p {
margin-bottom: 0;
font-size: 16px;
}
.menu-company-details {
margin-bottom: 15px;
margin-top: -15px;
}
.menu-company-details span {
display: block;
color: #FFFFFF;
font-size: 16px;
font-weight: 300;
margin-bottom: 5px;
}
.social-icons-simple {
margin-bottom: 0;
margin-left: -10px;
}
.social-icons-simple li {
display: inline-block;
padding-left: 8px;
}
.social-icons-simple li:first-child {
padding-left: 0;
}
.social-icons-simple li a {
display: block;
font-size: 16px;
height: 40px;
line-height: 42px;
border: 1px solid transparent;
text-align: center;
width: 40px;
border-radius: 50%;
position: relative;
z-index: 1;
overflow: hidden;
transition: background-color .5s ease;
color: #ffffff;
}
.social-icons-simple li.animated-wrap a:hover {
background-color: transparent;
}
/* ===================================
Header
====================================== */
.header-section {
padding: 120px 0;
}
.header-section p {
margin-top: 24px;
line-height: 36px;
letter-spacing: -1px;
}
.header-section .header-text {
padding: 0;
}
/* ===================================
Services
====================================== */
.services {
padding: 120px 0;
background-color: #fec107;
}
.services .card {
padding-top: 20px;
padding-bottom: 20px;
border: transparent;
text-align: center;
cursor: pointer;
transition: all .3s ease;
background-color: transparent;
}
.services .card:hover{
transition: all .6s ease;
background-color: #202020;
}
.services .card:hover .text{
color: #fff;
}
.services .card:hover i{
color: #fff;
}
.services .card:hover .heading{
color: #fff;
}
.services .card i {
font-size: 50px;
}
.services .card .heading {
font-size: 18px;
font-weight: 600;
}
.card-body .text {
text-align: center;
font-size: 16px;
font-weight: 300;
color: #202020;
}
.services .row-2 {
margin-top: 100px;
}
.service-image img {
display: flex;
justify-content: center;
width: 100%;
}
.service-image {
position: absolute;
left: 110px;
}
/* ===================================
Counter-section
====================================== */
.counter-section {
padding-bottom: 120px;
}
.num_counter{
padding-top: 40px;
}
.counter-section .counter {
margin: 6px;
text-align: center;
display: inline-block;
}
.counter-section .count-title {
color: #d43030;
padding: 5px 0;
font-weight: 600;
margin-bottom: 0;
font-size: 42px;
}
.counter-section .count-text {
font-weight: 400;
font-size: 18px;
color: #202020;
padding: 0 20px;
}
/* ===================================
Portfolio-Section
====================================== */
.portfolio-section {
padding: 120px 0;
}
.portfolio-section h5 {
color: #d43030;
font-size: 16px;
font-weight: 500;
text-align: center;
}
.portfolio-section h2 {
text-align: center;
}
.portfolio-section p {
padding-left: 100px;
padding-right: 100px;
margin-top: 50px;
margin-bottom: 95px;
text-align: center;
}
.portfolio-section .button-section {
margin-top: 42px;
}
.portfolio-section h3 {
color: #202020;
font-size: 30px;
font-weight: 400;
text-align: center;
}
.button-section p {
margin-top:0;
margin-bottom: 30px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
width: 100px;
height: 40px;
}
.carousel-control-next,
.carousel-control-prev {
bottom: 30%;
}
/* ===================================
Testimonial-Section
====================================== */
.testimonial-section {
padding: 120px 0;
background-color: #d43030;
}
.testimonial-section h2 {
color: #fdfdfd;
}
.testimonial-section p {
color: #fdfdfd;
font-size: 18px;
margin-top: 68px;
word-spacing: -4px;
}
.testimonial-image {
width: 80px;
height: 80px;
display: block;
margin: auto;
}
.testimonials .quote i {
color: #fdfdfd;
font-style: italic;
font-size: 20px;
}
.testimonials p {
text-align: center;
margin-top: 34px;
}
.testimonials h5 {
font-size: 24px;
color: #fdfdfd;
font-weight: 400;
margin-top: 25px;
}
/* ===================================
Client-Section
====================================== */
.client-section {
padding-top: 60px;
padding-bottom: 60px;
}
/* ===================================
Blog-Section
====================================== */
.blog-section {
padding: 120px 0;
position: relative;
}
.blog-section .blog-image {
position: absolute;
}
.blog-section .blog-image img {
display: flex;
justify-content: center;
width: 100%;
}
.blog-text {
padding: 50px 0 0 70px;
}
.blog-section .blog-text p {
font-size: 16px;
font-weight: 400;
}
/* ===================================
Contact-Section
====================================== */
.contact-section {
padding: 120px 0;
background-color: #fec107;
}
.contact-section .form-section {
padding-top: 130px;
}
.contact-section h2 {
margin-bottom: 75px;
text-align: left;
}
.contact-section .contact-form {
margin-right: 90px;
}
.contact-section .contact-form .form-control {
border: none;
padding: 0;
background: transparent;
font-weight: normal;
border-radius: 0;
box-shadow: none;
margin-bottom: 50px;
color: #202020;
font-size: 14px;
transition: border .9s ease;
border-bottom: 1px solid #202020;
}
.contact-form .form-control::placeholder {
color: #202020;
}
.form-control:focus {
color: #202020;
box-shadow: 0 0 0 0.0rem transparent;
}
.contact-section .button {
margin-top: 15px;
}
.contact-section p {
font-size: 17px;
margin-top: 30px;
}
.contact-section .media {
margin-top: 50px;
}
.contact-section .text-field {
padding-right: 45px;
}
.contact-section .media i {
font-size: 25px;
color: #202020;
}
.contact-section .media-body {
margin-left: 20px;
}
.contact-section .media-body h5 {
font-size: 14px;
font-weight: 700;
color: #202020;
margin-bottom: 10px;
}
.contact-section .media-body p {
font-size: 16px;
font-weight: 500;
color: #252525;
margin-top: 0;
margin-bottom: 0;
}
.contact-section .media-body span {
margin-left: 20px;
}
.contact-section li{
list-style: none;
display: inline-block;
}
.contact-section .button {
background-color: #202020;
color:#dfdfdf;
width: 100%;
}
.contact-section .button:after {
display: none;
}
.contact-section .button:hover {
background-color: #d43030;
border: 2px solid #d43030;
}
/* ===================================
Footer
====================================== */
footer {
padding: 120px 0;
background-color: #f6f6f6;
}
footer .footer-social-icons ul {
margin-bottom: 0;
}
.footer-social-icons ul li {
margin-right: 5px;
margin-left: 5px;
font-size: 15px;
display: inline-block;
}
.footer-social-icons ul li a {
overflow: hidden;
border-radius: 50%;
display: block;
color: #333333;
height: 40px;
line-height: 42px;
width: 40px;
border: 1px solid transparent;
text-align: center;
}
footer p {
margin-top: 8px !important;
font-size: 14px;
text-align: right;
}
/* ===================================
Media Queries
====================================== */
@media (max-width: 992px) {
p {
font-size: 22px;
}
/*Navbar*/
.navbar .button {
left: 5%;
}
.navbar-fixed-top.scrolled .sidemenu_btn {
left: 95%;
}
/*Side Menu*/
.side-menu p {
text-align: center;
}
/*header section*/
.title-text {
font-size: 48px;
text-align: center;
}
.header-section p {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
/*Services Section*/
.service-image {
position: relative;
margin-top: 30px;
left: 0;
}
.services .card {
margin-bottom: 30px;
}
.services .row-2 {
margin-top: 0;
}
.card-body .text {
font-size: 17px;
}
/*Counter Section*/
.counter-section {
padding-top: 80px;
padding-bottom: 0;
}
.counter-section .counter {
display: block;
}
.counter-section .count-text {
text-align: center;
}
/*Portfolio Section*/
.portfolio-section p{
padding-left: 0;
padding-right: 0;
}
/*Blog section*/
.blog-section .blog-image {
position: relative;
}
.blog-text {
padding: 50px 0 0 0;
text-align: center;
}
.blog-section .blog-text p {
font-size: 17px;
text-align: center;
}
.contact-section .form-section {
padding-top: 0;
}
.contact-section h2 {
text-align: center;
}
.contact-section .text-field {
padding-right: 15px;
}
.contact-section .contact-form {
margin-right: 0;
}
/*Testimonial Section*/
.testimonial-section h2 {
text-align: center;
}
.testimonial-section p {
text-align: center;
font-size: 18px;
}
.testimonial-section .testimonial-carousel {
margin-top: 50px;
}
/*Footer*/
.footer-social-icons {
text-align: center;
}
footer p {
font-size: 16px;
text-align: center;
}
}
@media (max-width: 768px) {
.wow {
visibility: visible !important;
animation: none !important;
}
/*Navbar*/
.navbar .button {
display: none;
}
.sidemenu_btn {
left: 94%;
}
.navbar-fixed-top.scrolled .sidemenu_btn {
left: 94%;
}
/*Side Menu*/
.side-menu .side-nav {
margin-bottom: 50px;
}
/*Contact Section*/
.contact-section .media-body span {
margin-left: 15px;
}
}
@media (max-width: 576px) {
p {
font-size: 16px;
}
h2 {
font-size: 40px;
}
.title-text {
font-size: 40px;
}
/*Navbar*/
.navbar{
height:75px;
background-color: #fff;
}
.navbar-brand{
background-color: #202020;
padding: 14px 10px 14px 10px;
}
.sidemenu_btn {
left: 87%;
}
.navbar-fixed-top.scrolled .sidemenu_btn {
left: 87%;
}
.navbar-fixed-top.scrolled {
background-color: #fff !important;
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35);
transition: none;
}
/*Side Menu*/
.side-menu .inner-wrapper {
padding: 3.5rem 2rem;
}
.side-menu .logo-image {
margin: 0 0 1.5rem 0;
}
.menu-company-details span {
font-size: 15px;
}
.side-menu p {
font-size: 15px;
}
/*Services Section*/
.card-body .text {
font-size: 16px;
}
.services .card i {
font-size: 40px;
}
/*Counter Section*/
.counter-section .counter {
margin: 50px;
}
/*Testimonial Section*/
.testimonial-section p {
font-size: 14px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
display: none;
}
/*Portfolio Section*/
.portfolio-section p br{
display: none;
}
/*Clients Section*/
.clients-img{
padding-left: 30px;
padding-right: 30px;
}
/*Contact Section*/
.contact-section .button {
margin-right: 15px;
margin-left: 15px;
}
}
@media (max-width: 370px){
/*Side Menu*/
.side-menu .inner-wrapper{
padding: 1.5rem 4rem;
}
.side-nav .navbar-nav .nav-link{
padding: 0 !important;
}
.side-menu p{
font-size: 11px;
}
.side-menu-inner-content{
padding-bottom: 0;
}
.side-menu .side-nav{
margin-bottom: 40px;
}
}