/*--------------------------------------------------------------------------------------
Theme Name: Bensen - product landing tempalte
Theme URI:
Author: Dreambuzz
Author URI: https://themeforest.net/user/dreambuzz/portfolio
Description: Description
Version: 1.0.0
----------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 SLIDER AREA
        2.3 SEARCH FORM AREA
    3. ABOUT AREA
    4. PROMOTIONS AREA
    5. MENUS AREA
    6. EVENT AREA
    7. TEAM AREA
    8. BLOG AREA
    9. INSTAGRAM FEED AREA
    10. FOOTER AREA
    11. SCROLL TO TOP


----------------------------------------------------------------------------------------*/

/*--------------------
   1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,600,600i,700,700i,800,900|Raleway:300,400,400i,700,800,900,900i');


a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #212324;
}

a:hover {
    color: #c1934c;
}

ul {
    list-style-type: none;
    padding-left: 0px;
}

a:focus,
a:hover {
    outline: 0 solid;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    color: #000;
}

html{
    overflow-x: hidden;
}

html,
body {
    width: 100%;
    max-width: 100%;
}

body {
    color: #555555;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
}

a:hover {
    text-decoration: none
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.navbar-toggle {
    border: 2px solid #fff;
    border-radius: 0;
}

.navbar-toggle .icon-bar {
    background: #fff none repeat scroll 0 0;
}

.is-sticky .navbar-header .collapse,
.is-sticky .navbar-toggle {
    border: 2px solid #1a1a1a;
}

.is-sticky .navbar-toggle .icon-bar {
    background: #1a1a1a none repeat scroll 0 0;
}



/*--------------------------
   BUtton STYLES
---------------------------*/

.btn {
    color: #fff;
    font-weight: 700;
    display: inline-block;
    font-size: 13px;
    margin-top: 15px;
    padding: 12px 45px;
    border-radius: 0px;
    line-height: 26px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-transform: uppercase;
}


.btn i {
    margin-left: 15px;
}

.btn-feature,
.btn-white:hover,
.btn-grey:hover,
.btn-black:hover {
    background: #ed1c24;
    color: #fff;
    border-color: #ed1c24;
}

.btn-white {
    background: #fff;
    color: #000;
    border-color: #fff;
    padding: 11px 45px;
}

.btn-grey {
    border-color: #fff;
    background: transparent;
    color: #fff;
}

.btn-black,
.btn-feature:hover {
    background: #232323;
    border-color: #232323;
    color: #fff;
}

.btn-danger {
    background: #ed1c24;
}

.btn-circled {
    border-radius: 25px;
}



.btn-outline-dark {
    border: 1px solid#ddd;
    color: #000;
}



.btn-trans-gey {
    border: 1px solid#eee;
    color: #000;
}

.btn-trans-gey:hover {
    border: 1px solid#ed1c24;
    color: #fff;
    background: #ed1c24;
}




/*-----------------------------------
 HEADING SECTION
-----------------------------*/

.heading-title {
    color: #ed1c24;
    font-size: 40px;
}

.heading-left {
    padding-top: 40px;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.m-auto {
    margin: 0 auto;
    width: 100%;
}

section {
    padding: 80px 0px 120px;
}

.heading {
    text-align: center;
    margin-bottom: 60px;
    padding-top: 50px;
}

.heading p {
    color: #999999;
    line-height: 24px;
    margin: 20px auto 0;
}

.bg-light {
    background: #fafafa;
}

h4 {
    font-size: 18px;
    line-height: 28px;
}



/* HEADING AREA */

.heading {
    margin-bottom: 60px;
}

.heading h2 {
    font-size: 45px;
    line-height: 50px;
    font-weight: 800;
}

.heading-left h2 {
    font-family: "Poppins", sans-serif;
}



a.learn-more {
    color: #ed1c24;
    text-transform: uppercase;
    text-decoration: underline;
}



/*-----------------------------------
 MAIN Navigation SYLES
--------------------------------------*/

#main-nav {
    padding: 20px 0px;
}

#main-nav li a {
    padding: 8px 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.top-social {
    padding-top: 15px;
}

.top-social li a i {
    width: 30px;
    height: 30px;
    background: #ddd;
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
}

#main-nav .top-social li a {
    padding: 8px 5px;
}

#main-nav li a {
    position: relative;
}

#main-nav li a.active {
    color: #ed1c24;
}

#main-nav li a.active:before {
    position: absolute;
    content: "";
    bottom: 0px;
    width: 30px;
    height: 1px;
    background: #ed1c24;
}




/*-----------------------------------
 MAIN BANNER SYLES
--------------------------------------*/

.main-banner-coontent {
    padding: 160px 0px 120px;
}


.banner-bg {
    background: url("../img/bg/banner-1.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

.dark-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}


.dark-overlay2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}



/*------------------------
 MAIN NAVIGATION
-------------------------------*/

.header-white {
    background: #fff;
    padding: 0px;
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
}

.site-navigation .navbar-nav li a {
    position: relative;
    padding: 20px 22px 20px;
    color: #2f2f2f;
    text-align: center;
    line-height: 30px;
    letter-spacing: 0px;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

.header-white .navbar-nav {
    padding-top: 20px;
}


.site-navigation.white {
    padding-top: 30px;
}


.site-navigation.white .navbar-nav li a {
    color: #fff;
    font-weight: 400;
    position: relative;
}


.site-navigation.white .navbar-nav li a:after {
    position: absolute;
    top: 27px;
    left: 0px;
    content: "";
    width: 2px;
    height: 15px;
    background: #555;
}


.dropdown-toggle::after {
    display: none !important;
}


.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 20px;
    padding-left: 20px;
}

.header-white.navbar-expand-lg .navbar-nav .nav-link {
    color: #111;
}

.header-white {
    padding-top: 0px;
    background: #fff;
}

.site-navigation.white.header-white {
    border: 0px;
    padding: 15px 0px;
}

.site-navigation.white.header-white,
.site-navigation.white .navbar-nav {
    padding-top: 10px;
}

.dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    border-radius: 0px;
    border: 0px;
    min-width: 250px;
    width: 100%;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
}


.dropdown .dropdown-menu a {
    padding: 15px 20px !important;
    text-align: left !important;
}


.site-navigation.white .navbar-nav .dropdown .dropdown-menu a {
    color: #000;
}


/*--------------------------
 TOP SOCIAL
------------------------*/

.top-social {
    margin-top: 5px;
}

.top-social i {
    width: 45px;
    height: 45px;
    background: #fff;
    color: #000;
    border-radius: 100%;
}

/*----------- FOrm Control --------*/

.form-control {
    height: 40px;
}

::placeholder {
    color: #ddd;
    font-size: 13px;
}

textarea.form-control {
    height: auto;
}





/*------------------------------
HOME SLIDER
-----------------------------*/

#main-slider {}

.slider-content {
    display: table;
    height: 550px;
    width: 100%;
    text-align: center;
}

.slider-table-cell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.slide-1 {
    background: url("../img/bg/slider-1.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

.slide-2 {
    background: url("../img/bg/slider-2.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

.slide-3 {
    background: url("../img/bg/slider-3.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}


.slider-content h1 {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 55px;
}

.slider-content p {
    color: #fff;
    margin: 20px 0px;
}

.no-border {
    border: 0px;
}

/*--------------------------------
 MAIN STYLE START
--------------------------------*/

/*------------ Static Banner ------------*/

.banner-padding {
    padding: 190px 0px 120px;
}

.main-banner-coontent.white p {
    margin: 20px 0px;
}

.banner-bg-2 {
    background: url("../img/banner/home-04.webp");
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;
}

.banner-bg {
    background: url("../img/banner/video-bg.jpg");
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;
}


.white h5,
.white h1,
.white p {
    color: #fff;
}

.lg-title {
    text-transform: uppercase;
    font-size: 80px;
    line-height: 80px;
    font-weight: 800 !important;
}


.subtitle {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 10px;
}

.main-banner-coontent p {
    font-size: 16px;
    line-height: 32px;
}

.video-play i {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border: 1px solid#fff;
    text-align: center;
    background: #fff;
    display: inline-block;
    border-radius: 100%;
    padding-top: 12px;
    font-size: 22px;
    color: #000;
}

.main-banner-coontent .video-play {
    color: #fff;
    font-weight: 700;
    margin-top: 40px;
    display: block;
}

.md-title {
    text-transform: uppercase;
    font-size: 55px;
    line-height: 55px;
    font-weight: 800;
}


/*------------------------
FEATURE SECTION
---------------------------*/

.bg-dark {
    background: #111 !important;
}

.feature-box {
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
}

.feature-content {
    padding: 30px 25px;
}

.feature-content h4 {
    margin-bottom: 10px;
}

.features-block {
    color: #eee;
    padding: 30px;
    padding-left: 80px;
}

.features-icon {
    position: absolute;
    left: 0px;
    top: 40px;
    color: #fff;
    font-size: 40px;
}

.features-block h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 32px;
}


#features {
    position: relative;
    padding-bottom: 65px;
}

.feature-bg-img {
    position: absolute;
    right: 0px;
    top: 0px;
    min-height: 500px;
    width: 30%;
    height: 100%;
    background: url("../img/about/item-01.webp") center center;
    z-index: 999;
}


/*----------------------------
 ABOUT SECTION
----------------------------*/

#about {
    position: relative;
}

.about-bg {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50%;
    background: #2c30f7;
    height: 100%;
}


.about-block {
    padding-top: 65px;
    color: #fff;
    padding-right: 40px;
}

.about-block h5,
.about-block h3 {
    color: #fff;
}


.about-block p {
    margin: 20px 0px;
    display: block;
}

#about-carousel{
    margin-top: 40px;
}


.btn-trans-white {
    border: 1px solid#fff;
    color: #fff;
}

.btn-trans-white:hover {
    background: #fff;
    color: #000;
}

.about-box {
    padding: 20px;
    padding-left: 100px;
}

.about-box h2 {
    font-size: 80px;
    font-weight: 800;
    opacity: 0.2;
    margin-left: -50px;
    text-transform: uppercase;
}

.about-box p {
    color: #111;
}


/*-------------------------
 PROCESS STYLES
------------------------------*/

#process {
   padding-top: 120px;
}

#process .container-fluid {
    padding: 0px;
}

.process-box {
    text-align: center;
    padding: 70px 30px 60px 30px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.process-box.active,
.process-box:hover {
    background: #fff;
}

.process-box i {
    font-size: 40px;
    width: 90px;
    height: 90px;
    text-align: center;
    background: #eee;
    color: #000;
    margin-bottom: 10px;
    border-radius: 100%;
    line-height: 40px;
    padding-top: 30px;
}

.process-box h4 {
    margin: 10px 0px;
}


.line {
    width: 50px;
    height: 1px;
    margin: 0 auto;
    background: #000;
    margin-bottom: 10px;
}

/*----------------------
 VIDEO SECTION 
-----------------------------*/

.bg-feature {
    background: #2c30f7;
}

#parallax {
    padding: 0px;
}

.parallax-content {
    padding: 100px 0px 80px 0px;
}

.parallax-content .md-title {
    color: #fff;
}


.video-bg {
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
}


a.video-overlay-content {
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 30%;
    top: 38%;
    background: transparent;
    border: transparent;
}

button:focus,
button:hover {
    cursor: pointer;
}

.video-overlay-content {
    text-align: center;
}

.video-overlay-content i {
    font-size: 30px;
    background: #fff;
    color: #000;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    display: inline-block;
    line-height: 30px;
    padding-top: 20px;
}

.video-overlay-content h4 {
    color: #fff;
    text-transform: uppercase;
    margin-top: 10px;
}


/*--------------------------
 TESTIMONIAL AREA
-----------------------------*/

#testimonial{
    padding-top: 120px;
}
.review-content {
    text-align: center;
    padding: 60px 0px;
}

.review-content i {
    font-size: 60px;
    line-height: 40px;
    opacity: .2;
}

.review-content p {
    font-size: 26px;
    line-height: 40px;
    font-family: "Raleway", sans-serif;
    margin: 25px 0px;
    color: #000;
}

.rating i {
    font-size: 15px;
    opacity: 1;
    color: #eff46b;
}

/*--------------------------------
 PRICING AREA
------------------------------------*/

#pricing {
    background: #f5f5f5;
    padding-bottom: 160px;
}

.pricing-block {
    border: 1px solid#eee;
    padding: 40px 0px 20px 40px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    border-radius: 5px;
}

.pricing-block .price-sub {
    text-transform: uppercase;
    display: none;
}

.pricing-block .price-title {
    background: #000;
    color: #fff;
    padding: 5px 8px;
    display: inline-block;
}

.pricing-block .pricing {
    font-size: 80px;
    line-height: 80px;
    font-family: "Poppins", sans-serif;
    padding: 30px;
    text-align: center;
}

.pricing-block ul li {
    position: relative;
    color: #000;
    font-size: 16px;
    line-height: 36px;
}


.pricing-block ul li i {
    margin-right: 15px;
}

.pricing-block .btn {
    margin-bottom: -50px;
}


.pricing-block:hover,
.pricing-block.active {
    background: #fff;
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    border-color: #fff;
}


/* ---------------------
   FOOTER AREA
-------------------------*/

#footer-area {
    padding: 80px 0px;
    background: #000;
}

.footer-top-area h3 {
    text-align: center;
    margin-bottom: 40px;
}


.footer-contact {
    position: relative;
    padding-left: 75px;
}

.footer-icon {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    font-size: 52px;
}

.footer-contact h4 {
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 800;
}


.footer-contact p {
    line-height: 18px;
    font-size: 18px;
    color: #999;
}

.footer-contact h4 {
    color: #fff;
}

.footer-top-area h3,
.footer-icon {
    color: #fff;
}

.footer-content {
    color: #999;
    margin-top: 30px;
}

.footer-content .copy {
    color: #eee;
}



/*--------------------
 Sticky footer
-----------------------*/

#footer-area {
}


/*---------------------------
 APP HOME
------------------------------*/

.banner-bg-app {
    position: relative;
}

.banner-app-img {
    z-index: 1;
}

.app-banner-content {
    padding-top: 150px;
    text-align: center;
}

.app-padding {
    padding: 80px 0px;
}

.app-nav {
    border-bottom: 1px solid#eee;
}


.header-white.app-nav .navbar-nav {
    padding-top: 0px;
}

.app-banner-content p {
    margin: 20px 0px;
}



/*-----------------------------
  APP FEATURES
-----------------------------*/

.app-feature-box {
    text-align: center;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
    margin-bottom: 30px;
}

.app-feature-box i {
    font-size: 30px;
}

.app-feature-box h4 {
    text-transform: uppercase;
    margin: 15px 0px;
}


/*-----------------------------

-------------------------------*/

#services {
    position: relative;
    padding-bottom: 45px;
}

.service-bg-img {
    position: absolute;
    left: -60px;
    bottom: 0px;
    width: 60%;
    min-height: 400px;
    height: 100%;
    background: url("../img/app/featured-article.png")no-repeat;
}



.service-block {
    position: relative;
    padding-left: 60px;
    padding-top: 20px;
}

.service-icon {
    position: absolute;
    left: 0px;
    top: 30px;
    font-size: 22px;
    color: #fff;
    width: 100%;
    height: 100%;
}

.service-block h4 {
    color: #fff;
    margin-bottom: 10px;
}

/*------------------------------
 PRODUCTS GALLERY
-------------------------------*/

.gallery-img {
    padding-bottom: 40px;
}


a:hover {
    cursor: pointer;
}


#navbarNav.navbar-collapse.collapse.show {
    background: #fff;
}

#navbarNav.navbar-collapse.collapse.show .navbar-nav li a {
    color: #000;
}

/* Text logo support: keep original image-toggle logic but add text styling */
.logo-text {
    display: inline-block;
    font-family: 'Poppins', 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.8px;
    text-transform: none;
    line-height: 1;
    margin-top: 0;
}

.white-logo {
    display: inline-block;
    color: #fff;
}

.black-logo {
    display: none;
    color: #111;
}

.header-white .white-logo {
    display: none;
}

.header-white .black-logo {
    display: inline-block;
}

/* enforce colors for text logo inside the navigation */
.site-navigation .logo-text.white-logo {
    color: #fff !important;
}

.site-navigation.header-white .logo-text.black-logo {
    color: #111 !important;
}

/* align brand vertically with navbar items */
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.site-navigation .navbar-nav {
    align-items: center;
}