/*===============================================
Template Name: Nivaan Packaging - Transport & Logistics HTML5 Template
Author:  https://themeforest.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: Nivaan Packaging
Tags:   delivery company, grid, logistics, moving, moving company, shipping, courier, shipping company, storage, transport, transport company, warehouse.
================================================*/
    
/*TABLE OF CONTENTS*/
/*=====================
01. Nivaan Packaging Header Top Menu Area Css
02. Nivaan Packaging Nav Menu Area Css 
03. Nivaan Packaging Slider Area Css
04. Nivaan Packaging Breadcumb Area Css
05. Nivaan Packaging Featrue Area Css
06. Nivaan Packaging Section Title Css
07. Nivaan Packaging About Area Css
08. Nivaan Packaging Service Area Css
09. Nivaan Packaging Service Details Area Css
10. Nivaan Packaging Video Area Css
11. Nivaan Packaging Why Choose Us Area Css
12. Nivaan Packaging Portfolio Area Css 
13. Nivaan Packaging Portfolio Details Area Css
14. Nivaan Packaging Testimonial Area Css
15. Nivaan Packaging Pricing Area Css
16. Nivaan Packaging Skill Area Css
17. Nivaan Packaging Team Area Css
18. Nivaan Packaging Counter Area Css
19. Nivaan Packaging Contact Area Css
20. Nivaan Packaging Mission Vision Area Css
21. Nivaan Packaging Mission Area Css
22. Nivaan Packaging Contact Address Area Css
23. Nivaan Packaging Blog Area Css
24. Nivaan Packaging Blog Details Area Css
25. Nivaan Packaging Case Study Area Css
26. Nivaan Packaging Faq Area Css
27. Nivaan Packaging News Letter Area CSS
28. Nivaan Packaging Footer Area CSS
29. Nivaan Packaging Scrollup Section
30. Nivaan Packaging Search Popup Css
31. Nivaan Packaging Loader Css
=======================*/

/*=========================================
 <-- Nivaan Packaging Header Top Menu Area Css  -->
===========================================*/

.header-top-area {
    background: #0E1317;
    padding: 4px;
    position: relative;
}

.header-top-area::before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    height: 100%;
    width: 28%;
    background: linear-gradient(90deg, #F02830 -20.95%, #FF5E14 102.22%);
    clip-path: polygon(12% 0%, 100% 0%, 100% 101%, 0% 101%);
}

.single-header-top-address {
    margin-right: 80px;
    float: left;
}

.single-header-top-address.fast {
    padding-left: 40px;
}

.single-header-top-address.last {
    margin-right: 0;
    position: relative;
}

.single-header-top-address.last:after {
    position: absolute;
    content: "";
    left: -40px;
    top: 8px;
    height: 45px;
    width: 1px;
    background: #aeadad;
}

.top-address-icon {
    float: left;
    margin-right: 20px;
    margin-top: 10px;
}

.top-address-text {
    overflow: hidden;
}

.top-address-text p {
    color: #fff;
    line-height: 20px;
    margin: 0;
}

.top-address-text span {
    color: #CED3D9;
    font-size: 12px;
}

.header-top-button {
    text-align: right;
}

.header-top-button a {
    color: #0E1317;
    padding: 14px 42px;
    position: relative;
    z-index: 1;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    background: #fff;
    display: inline-block;
    border-radius: 3px;
    z-index: 1;
    transition: .5s;
}

.header-top-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #0E1317;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.header-top-button a i {
    margin-left: 6px;
}

.header-top-button a:hover{
    color: #fff;
}

.header-top-button a:hover:before{
    width: 100%;
}

ul.sub-menu li a span {
    background: #FF3C00;
    padding: 5px 10px;
    color: #fff;
    opacity: 1;
    border-radius: 2px;
    margin-left: 5px;
    transition: .5s;
}

ul.sub-menu li:hover a span {
    background: rgba(255,255,255, 0.20);
}

/*=====================================
<--  Nivaan Packaging Nav Menu Area Css -->
=======================================*/


.prygo_nav_manu {
    padding: 0 100px;
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #10102E !important;
    transition: .5s;
    z-index: 999;
    padding: 10px 100px;
}

.logo {
    position: relative;
}

.sticky .logo {
    margin-top: 0;
}

.sticky.prygo_nav_manu:before {
    display: none;
}

/* Nivaan Packaging Menu Css*/

nav.prygo_menu {
    text-align: right;
}

.prygo_menu ul {
    list-style: none;
    display: inline-block;
}

.prygo_menu>ul>li {
    display: inline-block;
    position: relative;
    z-index: 2;
}

.prygo_menu > ul > li > a {
    display: block;
    margin: 20px 10px 18px;
    -webkit-transition: .5s;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

nav.prygo_menu span {
    font-size: 13px;
    padding-left: 6px;
    font-family: FontAwesome;
    opacity: .5;
}

.prygo_menu > ul > li > a:hover {
    color: #ff3c00;
}



/*** Sub Menu Style ***/
.prygo_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 217px;
    text-align: left;
    background: #fff;
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #ff3c00;
    opacity: 0;
}

.prygo_menu ul li:hover>.sub-menu {
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 100%;
     opacity: 1;
     z-index: 9999;
 }

.prygo_menu ul .sub-menu li {
     position: relative;
}

.prygo_menu ul .sub-menu li a {
    display: block;
    padding: 12px 20px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    -webkit-transition: .1s;
    visibility: inherit !important;
    color: #211e3b !important;
}

.prygo_menu ul .sub-menu li:hover>a,
.prygo_menu ul .sub-menu .sub-menu li:hover>a,
.prygo_menu ul .sub-menu .sub-menu .sub-menu li:hover>a,
.prygo_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
     background:#ff3c00;
     color: #fff !important;
}

/* sub menu 2 */

.prygo_menu ul .sub-menu .sub-menu {
     left: 100%;
     top: 130%;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     visibility: hidden;
}

.prygo_menu ul .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

/* sub menu 3 */

.prygo_menu ul .sub-menu .sub-menu li {
    position: relative;
}

.prygo_menu ul .sub-menu .sub-menu .sub-menu {
     right: 100%;
     left: auto;
     top: 130%;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     visibility: hidden;
}

.prygo_menu ul .sub-menu .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

/* sub menu 4 */

.prygo_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}

.prygo_menu ul .sub-menu .sub-menu .sub-menu .sub-menu {
}

.prygo_menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

.prygo_menu li a:hover:before{
    width:100%;
}

.prygo_nav_manu.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

.prygo_nav_manu.sticky .main_sticky {
    display: inherit;
}

.sticky .prygo_menu li a {
    color: #fff;
}

.prygo_nav_manu.sticky a.dtbtn {
    color: #fff;
    background: #F16722;
    border: 2px solid #F16722;
}

.prygo_nav_manu.sticky a.dtbtn:hover {
    color: #43baff;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

/* Header Contact Right CSS */

.header-src-btn {
    display: inline-block;
    position: relative;
    padding-right: 30px;
}

.header-src-btn::before {
    position: absolute;
    content: "";
    right: 0;
    top: -55px;
    width: 2px;
    height: 70px;
    background: #ddd;
}

.header-contact-btc {
    float: right;
}

.search-box-btn.search-box-outer {
    position: absolute;
    bottom: 4px;
    right: 35px;
}

.header-contact {
    display: inline-block;
}

.header-contact-icon {
    display: inline-block;
}

.header-contact-text {
    display: inline-block;
}

.header-contact-icon {
    display: inline-block;
    padding-left: 25px;
    padding-right: 20px;
}

.header-contact-text p {
    font-size: 18px;
    color: #0E1317;
    font-weight: 700;
    margin-bottom: 0;
}

.header-contact-text span {
    font-size: 14px;
    font-weight: 700;
    color: #6D7A8E;
}

.header-contact-icon img {
    margin-top: -30px;
}

.sticky .search-box-btn.search-box-outer i {
    color: #fff;
}

.sticky  .header-contact-text p {
    color: #fff;
}

/* Style Two */

.prygo_nav_manu.style-two {
    padding: 0 100px;
    position: relative;
    margin-bottom: -100px;
    border-bottom: 1px solid #3C4E68;
    z-index: 4;
}

.prygo_nav_manu.style-two:before {
    height: 110%;
    width: 24%;
    background: #FFDA2B;
    clip-path: inherit;
    z-index: 1;
}

.prygo_nav_manu.style-two.inner-page:before {
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
}

.prygo_nav_manu.style-two .logo {
    position: inherit;
    margin-top: 0;
    z-index: 1;
}

.prygo_nav_manu.style-two .prygo_menu > ul > li > a {
    color: #fff;
    margin: 32px 10px 30px;
}

.prygo_nav_manu.style-two .header-src-btn {
    padding-right: 0;
}

.prygo_nav_manu.style-two .search-box-btn.search-box-outer {
    position: inherit;
    bottom: inherit;
    right: inherit;
    margin-left: 15px;
}

.prygo_nav_manu.style-two .search-box-btn.search-box-outer i {
    color: #fff;
}

.prygo_nav_manu.style-two .header-src-btn::before {
    display: none;
}

.prygo_nav_manu.style-two .header-contact-text span {
    color: #FFDA2B;
}

.prygo_nav_manu.style-two .header-contact-text p {
    color: #fff;
}

.prygo_nav_manu.style-two .header-contact-btc {
    position: relative;
}

.prygo_nav_manu.style-two .header-contact-btc::before {
    position: absolute;
    content: "";
    left: -10px;
    top: -17px;
    height: 155%;
    width: 1px;
    background: #3C4E68;
}

.prygo_nav_manu.style-two.inner-page .header-contact-text span {
    color: #6D7A8E;
}


/*
<!-- ============================================================== -->
<!-- Prygo Slider Area Css -->
<!-- ============================================================== -->*/

.banner-area {
    background: url(../img/banner1-new.jpg);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    height: 700px;
    position: relative;
}

.banner-title h1 {
    font-size: 110px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 110px;
}

.banner-sub-title {
    padding-bottom: 20px;
}

.banner-sub-title h5 {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    letter-spacing: 1px;
    padding-left: 8px;
}

.banner-sub-title h5:before {
    position: absolute;
    content: "";
    left: 0;
    top: -6px;
    width: 25px;
    height: 30px;
    background: #F02830;
    z-index: -1;
}

.banner-text {
    padding: 35px 0 42px;
}

.banner-text p {
    font-size: 18px;
    color: #fff;
    width: 58%;
}

.button a {
    color: #fff;
    padding: 20px 41px;
    position: relative;
    z-index: 1;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}

.button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
    transition: .5s;
}

.button a i {
    margin-left: 8px;
    font-weight: 800;
}

.button a:hover:before{
    background: linear-gradient(to right, #FF5E14 6%, #F02830 96%);
}

/* Button Style Two */

.button.two a {
    background: #00AFF5;
    z-index: 1;
    position: relative;
    display: inline-block;
    transition: .5s;
    padding: 15px 35px;
    margin: 0 12px;
    border-radius: 3px;
}

.button.two a.active{
    background:#FFDA2B;
    color: #0E1317;
}

.button.two a:before {
    width: 0%;
    background:#FFDA2B;
    border-radius: 3px;
}

.button.two a.active:before {
    background:#00AFF5;
}

.button.two a:hover:before{
    width: 100%;
}

.button.two a:hover{
    color: #0E1317;
}

.button.two a.active:hover{
    color: #fff;
}

/* Slider Area CSS */

.slider-area {
    background: url(../img/banner1-new.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 900px;
    position: relative;
}

.slider-content {
    text-align: center;
    margin-top: 110px;
}

.slider-sp-title {
    position: relative;
    z-index: 1;
}

.slider-sp-title h1 {
    color: transparent !important;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #fff;
    font-size: 300px;
    text-transform: uppercase;
    position: absolute;
    top: -160px;
    opacity: 0.2;
    left: 0;
    right: 0;
    z-index: -1;
}

.slider-title h1 {
    font-size: 95px;
    color: #fff;
    margin: 0;
}

.slider-sub-title h5 {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    letter-spacing: 1px;
    padding-left: 8px;
    display: inline-block;
}

.slider-sub-title h5:before {
    position: absolute;
    content: "";
    left: 0;
    top: -6px;
    width: 25px;
    height: 30px;
    background: #00AFF5;
    z-index: -1;
}

.slider-button {
    margin-top: 54px;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Breadcumb Area Css -->
<!-- ============================================================== -->*/

.breadcumb-area {
    background: url(../img/banner1-new.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-content {
    text-align: center;
}

.breadcumb-title h1 {
    font-size: 90px;
    color: #fff;
}

.breadcumb-content-menu {
    padding-top: 10px;
}

.breadcumb-content-menu ul li {
    display: inline-block;
    list-style: none;
}

.breadcumb-content-menu ul li a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.breadcumb-content-menu ul li a i{
    margin-left: 10px;
}

.breadcumb-content-menu ul li span {
    color: #F02830;
    font-size: 20px;
    font-weight: 500;
    margin-left: 10px;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Featrue Area Css -->
<!-- ============================================================== -->*/

.row.fcr-tp {
    background: #F3F3F5;
    padding: 50px 30px 20px;
    border-radius: 3px;
    position: relative;
    margin-top: -125px;
    z-index: 1;
}

.single-feature {
    background: #fff;
    padding: 32px 30px 44px;
    margin-bottom: 30px;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.single-feature::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: url(../img/fc1.png);
    z-index: -1;
    transition: .5s;
}

.feature-icon {
    float: left;
    margin-right: 28px;
    margin-top: 4px;
}

.feature-icon i {
    font-size: 36px;
    background: #F3F3F5;
    height: 70px;
    width: 70px;
    display: inline-block;
    text-align: center;
    border: 4px solid #E7E9EC;
    line-height: 74px;
    border-radius: 100%;
    transition: .5s;
}

.feature-title h2 {
    font-size: 22px;
}

/* Feature Hover CSS */

.single-feature:hover::before{
    width: 100%;
}

.single-feature:hover .feature-title h2{
    color: #fff;
}

.single-feature:hover .feature-icon i{
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    border-color: #fff;
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Section Title Css -->
<!-- ============================================================== -->*/

.section-title {
    position: relative;
    z-index: 1;
}

.section-title h1 {
    margin: 0;
    font-weight: 800;
}

.section-title h5 {
    font-size: 16px;
    color: #0E1317;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    z-index: 1;
    letter-spacing: 1px;
    padding-left: 8px;
    margin-bottom: 15px;
}

.section-title h5:before {
    position: absolute;
    content: "";
    left: 0;
    top: -6px;
    width: 25px;
    height: 30px;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
}

h2.shape-title {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0E1317;
    font-size: 120px;
    text-transform: uppercase;
    position: absolute;
    top: -31px;
    opacity: 0.1;
    left: 25px;
    z-index: -1;
}

.section-title p {
    padding-top: 24px;
}

.section-title.text-center {
    margin-bottom: 62px;
}

.section-title.text-center h2.shape-title {
    left: 0;
    right: 0;
}

/* Style Two */

.section-title.style-two p {
    padding-top: 24px;
    color: #6D7A8E;
}

.section-title.style-two h5:before {
    background:#00AFF5;
}

.about-area .section-title h5 {
    margin-top: 0;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging About Area Css -->
<!-- ============================================================== -->*/

.about-area {
    padding: 120px 0 115px;
}

.about-content {
    padding-left: 20px;
}

.about-content-inner {
    padding-top: 16px;
}

.about-content-icon i {
    font-size: 20px;
    color: #F02830;
    height: 45px;
    width: 45px;
    line-height: 43px;
    border: 1px solid #F02830;
    text-align: center;
    border-radius: 50%;
}

.about-content-icon {
    float: left;
    margin-right: 25px;
}

.about-content-inner-text {
    overflow: hidden;
}

.about-content-inner-text p {
    width: 90%;
}

.about-content-inner-text h3 {
    font-size: 18px;
    padding-bottom: 10px;
    margin-top: 4px;
}

.about-button {
    padding-top: 32px;
}

/* Style Two */

.about-content-thumb {
    float: left;
    margin-right: 20px;
    margin-top: 5px;
}

.style-two .about-thumb img {
    width: 100%;
    margin-left: -25px;
}

.about-content-inner-text p {
    color: #6D7A8E;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Service Area Css -->
<!-- ============================================================== -->*/

.service-area {
    background: url(../img/sr-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 115px 0 110px;
}

.single-service {
    overflow: hidden;
    background: #fff;
    margin-bottom: 30px;
}

.service-thumb {
    position: relative;
}

.service-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: rgba(0,0,0,0.3);
    transition: .5s;
}

.single-service:hover .service-thumb:before{
    width: 100%;
}

.service-content {
    text-align: center;
    padding: 32px;
}

.service-content-icon {
    position: relative;
    margin-top: -44px;
}

.service-content-icon i {
    font-size: 40px;
    display: inline-block;
    height: 90px;
    width: 90px;
    text-align: center;
    line-height: 90px;
    color: #fff;
    border: 4px solid #fff;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.service-content-icon i:after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    transition: .5s;
    z-index: -1;
}

.service-content-inner h2 {
    font-size: 24px;
    padding-top: 12px;
}

.service-content-inner p {
    line-height: 26px;
    padding-top: 14px;
}

.service-content-button {
    padding-top: 15px;
}

.service-content-button a {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid #F02830;
    display: block;
    padding: 9px 20px;
    color: #F02830;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.service-content-button a i {
    margin-left: 10px;
}

.service-content-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
    transition: .5s;
}

.single-service:hover .service-content-button a{
    color: #fff;
}

.single-service:hover .service-content-button a:before{
    width: 100%;
}

.single-service:hover .service-content-icon i:after{
    background: #287FF5;
}

.owl-dots {
    text-align: center;
    padding: 18px 0 0;
}

.owl-dot {
    display: inline-block;
    margin: 0 4px;
}

.owl-dot.active {
    display: inline-block;
    border: 2px solid #f00;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.owl-dot.active span {
    border-radius: 50%;
    background-color: #F02830;
    display: inline-block;
    position: relative;
    top: -3px;
    border: 2px solid #fff;
    width: 14px;
    height: 14px;
}

.owl-dot span{
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #F02830;
    display: inline-block;
    position: relative;
    top: -3px;
}

/* Service Style Two */

.service-area.style-two {
    background: url(../img/sr-bg2.jpg);
    padding: 115px 0 370px;
}

.style-two .service-thumb {
    position: relative;
}

.style-two .service-content-box {
    position: absolute;
    bottom: 20px;
}

.style-two .service-content-icon {
    position: absolute;
    left: 50px;
    top: -8px;
    z-index: 2;
}

.style-two .service-content-icon i {
    border-radius: 50%;
    font-size: 45px;
    line-height: 94px;
}

.style-two .service-content-icon i:after {
    background: #00AFF5;
    border-radius: 50%;
}

.style-two .service-content-inner {
    background: #fff;
    margin: 0 20px;
    padding: 30px 30px 12px;
    clip-path: polygon(0% 0%, 70% 0%, 100% 100%, 0% 101%);
    transition: .5s;
    position: relative;
    z-index: 1;
}

.style-two .service-content-inner::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #00AFF5;
    z-index: -1;
    transition: .5s;
}

.style-two .service-content-inner h2 {
    transition: .5s;
}

.style-two .service-content-inner p {
    width: 90%;
    transition: .5s;
    padding-top: 12px;
}

.style-two .service-sp-title {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0E1317;
    font-size: 120px;
    text-transform: uppercase;
    position: absolute;
    top: -16px;
    opacity: 0.1;
    font-size: 40px !important;
    right: 112px;
    z-index: 1;
}

.style-two .service-content-button {
    padding-top: 0;
    position: absolute;
    right: 18px;
    bottom: 32px;
}

.style-two .service-content-button a {
    display: inline-block;
    background: #FFDA2B;
    padding: 8px 16px;
    font-size: 16px;
    border: transparent;
    color: #0E1317;
}

.style-two .service-content-button a:before {
    display: none;
}

.style-two .service-content-button a i {
    margin-left: 0;
}

.style-two .single-service:hover .service-content-button a {
    color: #0E1317;
}

.style-two .single-service:hover .service-content-icon i:after{
    background: #FFDA2B;
}

.style-two .single-service:hover .service-content-inner::before {
    width: 100%;
}

.style-two .single-service:hover .service-content-inner h2,
.style-two .single-service:hover .service-content-inner p{
    color: #fff;
}

/* Style Three */

.service-area.style-two.three {
    padding: 115px 0 90px;
}

.style-two.three .service-content-inner::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
    transition: .5s;
}

.style-two.three .single-service:hover .service-content-icon i:after{
    background: #fff;
}

.style-two.three .single-service:hover .service-content-icon i{
    border-color: #287FF5;
    color: #F02830;
}

.style-two.three .service-content-button a {
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    color: #FFF;
}

.style-two.three .single-service:hover .service-content-button a {
    background: #287FF5;
    color: #fff;
}

/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Service Details Area Css -->
<!-- ============================================================== -->*/

.service-detials-area {
    padding: 120px 0 90px;
}

/*widget search*/

.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

.service-detials-area .widget_search {
    background: #F5F5F5;
    box-shadow: none;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #0D0E14;
    border: 0;
    border: 2px solid #9DA7B3;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #FF3C00;
    border-radius: 0 4px 4px 0;
}

/*widget categories box*/

.service-detials-area .widget-categories-box {
    background: #F5F5F5;
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: none;
}

.widget-categories-box {
    background: #fff;
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

/*title*/

.categories-title h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: 2px solid #E9E9EA;
    padding: 0px 0 15px;
    margin: 0 0 30px;
    position: relative;
    padding-left: 10px;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 24px;
    width: 3px;
    background: #FF3C00;
}

/*categories menu*/

.widget-categories-menu ul {
    display: block;
}

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    margin-bottom: 15px;
    background: transparent;
    padding: 16px 20px 16px;
    border-radius: 4px;
    transition: .5s;
    border: 2px solid #CED3D9;
    position: relative;
    z-index: 1;
}

.widget-categories-menu ul li:hover {
    border: 2px solid #F02830;
}

.widget-categories-menu ul li:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    transition: .5s;
    z-index: -1;
}

.widget-categories-menu ul li:hover:before{
    width: 100%;
}

.widget-categories-menu ul li a {
    display: block;
    color: #0D0E14;
    transition: .5s;
}

.widget-categories-menu ul li a span {
    display: inline-block;
    float: right;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    height: 22px;
    width: 22px;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #fff;
    line-height: 22px;
    transition: .5s;
}

.widget-categories-menu ul li:hover a span {
    background: #fff;
    color: #0E1317;
}

.widget-categories-menu ul li:hover a {
    color: #fff;
}

.pdf-button a {
    display: block;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    padding: 15px 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.pdf-button a i {
    float: right;
    font-size: 20px;
    margin-top: 2px;
}

/* Sidber Recent Post */

.sidber-widget-recent-post {
    margin-bottom: 20px;
    background: #F3F3F5;
    overflow: hidden;
}

.sidber-widget-recent-post .recent-widget-content {
    padding-top: 20px;
}

.sidber-widget-recent-post .recent-widget-content a {
    color: #0E1317;
    font-size: 18px;
}

.sidber-widget-recent-post .recent-widget-content span i {
    margin-right: 7px;
    color: #F02830;
}

/* Sidber Achivement CSS */

.widget-achivement ul li {
    list-style: none;
    margin-bottom: 6px;
}

.widget-achivement ul li a i {
    font-size: 17px;
    margin-right: 3px;
}

.widget-achivement ul li a {
    font-weight: 600;
    transition: .5s;
}

.widget-achivement ul li a span {
    float: right;
}

.widget-achivement ul li a:hover{
    color: #F02830;
}

/* Sidber Widget Gallery CSS */

.widget-gallery {
    overflow: hidden;
}

.widget-gallery-thumb {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Sidber Widget Tags CSS */

.widget-tags a {
    display: inline-block;
    border: 2px solid #9DA7B3;
    padding: 3px 20px;
    margin: 4px 3px;
    border-radius: 2px;
    color: #0E1317;
    font-weight: 500;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover{
    color: #fff;
    border-color: #F02830;
}

.widget-tags a:hover:before{
    width: 102%;
}

/* Service Details Content CSS */

.service-details-main-title {
    padding: 20px 0 18px;
}

.service-details-main-title h1 {
    font-size: 36px;
}

.service-details-video-thumb {
    position: relative;
    padding-top: 20px;
}

.service-details-overview-title {
    padding: 22px 0 15px;
}

.service-details-overview-title h2 {
    font-size: 30px;
}

.service-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.service-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    border-radius: 50%;
}

.service-details-choose-us {
    padding-bottom: 10px;
}

.service-details-choose-us-title {
    padding: 5px 0 15px;
}

.service-details-choose-us-title h2 {
    font-size: 30px;
}

.service-details-box {
    background: #F3F3F5;
    padding: 30px 30px 10px;
    margin-bottom: 30px;
}

.service-details-number {
    position: absolute;
    right: 60px;
}

.service-details-number h2 {
    font-size: 48px;
    text-transform: none;
    margin: 0;
    margin: 0;
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0E1317;
    opacity: .5;
}

.service-details-icon i {
    font-size: 50px;
    color: #F02830;
}

.service-details-content h2 {
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.service-details-thumb img {
    width: 100%;
}

.service-details-video-thumb-inner img {
    width: 100%;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Video Area Css -->
<!-- ============================================================== -->*/

.video-area {
    background: url(../img/video-bg-new.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 105px 0 385px;
}

.video-button {
    padding-top: 42px;
}

.video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding-top: 8px;
}

.video-icon a {
    width: 80px;
    height: 80px;
    line-height: 80px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    position: relative;
    color: #0E1317;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    -webkit-transition: .5s;
    background: #fff;
    font-size: 25px;
    z-index: 1;
}

/* Video Style Two */

.video-area.style-two {
    background: url(../img/video-bg2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 105px 0 435px;
}

.video-area.style-two .pr-video .video-icon {
    bottom: -110px;
    top: inherit;
}


@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}



/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Why Choose Us Area Css -->
<!-- ============================================================== -->*/

.why-choose-us-area {
    padding: 0 100px 0 0;
    position: relative;
    z-index: 1;
}

.why-choose-us-area:before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    height: 56%;
    width: 100%;
    background: url(../img/howit.jpg);
    z-index: -1;
}

.row.upper-bx {
    background: #fff;
    padding: 30px 40px 30px 18px;
    position: relative;
    margin-top: -250px;
}

.choose-us-thumb img {
    width: 100%;
}

.icon-box {
    padding-right: 30px;
}

.icon-box-icon {
    float: left;
    margin-right: 20px;
    margin-top: 18px;
}

.icon-box-icon i {
    font-size: 48px;
    color: #F02830;
}

.icon-box-content {
    overflow: hidden;
}

.icon-box-content h2 {
    font-size: 22px;
    padding-bottom: 10px;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging How IT Work Area Css -->
<!-- ============================================================== -->*/

.how-it-work-area {
    background: url(../img/howit.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 115px 0 82px;
}

.row.it-shape {
    position: relative;
    padding-top: 40px;
}

.row.it-shape:after {
    position: absolute;
    content: "";
    top: -7px;
    left: 162px;
    background: url(../img/sp.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    margin: auto;
}

.single-how-it-work {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 10px;
}

.how-it-work-icon i {
    display: inline-block;
    height: 150px;
    width: 150px;
    text-align: center;
    line-height: 172px;
    background: #F5CFCC;
    font-size: 80px;
    color: #F02830;
    border-radius: 100px 100px 100px 0;
    transition:.5s;
}

.how-it-work-content h2 {
    font-size: 22px;
    padding: 15px 0 12px;
}

.single-how-it-work:hover .how-it-work-icon i{
    background:#FF3C00;
    color:#fff;
}
/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Portfolio Area Css -->
<!-- ============================================================== -->*/

.portfolio-area {
    padding: 115px 0 0;
}

.portfolio-area.style-three {
    padding: 115px 0 90px;
}

.row.port-bt {
    position: relative;
    margin-bottom: -120px;
}

.single-portfolio {
    margin-bottom: 30px;
}

.portfolio-thumb {
    position: relative;
    z-index: 1;
}

.portfolio-thumb img {
    width: 100%;
}

.portfolio-content {
    position: absolute;
    bottom: 0;
    padding: 0 40px;
    transition: .5s;
    opacity: 0;
}

.portfolio-area.style-three .portfolio-content {
    padding: 0 30px;
}

.portfolio-content span a{
    height: 60px;
    width: 60px;
    display: inline-block;
    text-align: center;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    line-height: 60px;
    border-radius: 50%;
    font-size: 40px;
    color: #fff;
}

.portfolio-content h2 {
    font-size: 24px;
    padding: 14px 0 10px;
}

.portfolio-content h2 a {
    font-weight: 800;
    color: #fff;
}

.portfolio-content p {
    color: #fff;
}

.single-portfolio:hover .portfolio-thumb:before{
    height: 100%;
}

.single-portfolio:hover .portfolio-content{
    bottom: 20px;
    opacity: 1;
}

/* Style Two */

.portfolio-area.style-two {
    padding: 0 0 0 120px;
} 

.portfolio-area .row.prts-bgt {
    background: url(../img/prts-bg.jpg);
    padding: 116px 0 90px 100px;
    position: relative;
    margin-top: -320px;
}

.style-two .portfolio-content span a {
    background: #FFDA2B;
    color: #0E1317;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Portfolio Details Area Css -->
<!-- ============================================================== -->*/

.portfolio-detials-area {
    padding: 95px 0 100px;
}

.portfolio-details-main-title {
    padding: 0 0 18px;
}

.portfolio-details-text {
    padding-bottom: 1px;
}

.portfolio-details-overview-title {
    padding: 22px 0 15px;
}

.portfolio-details-overview-title h2 {
    font-size: 30px;
    font-weight: 800;
}

.portfolio-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.portfolio-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    border-radius: 50%;
}

.portfolio-details-thumb img {
    width: 100%;
}

.portfolio-details-thumb {
    margin-top: 20px;
}

.portfolio-details-clients-title {
    padding-bottom: 10px;
}

.portfolio-details-clients-title h2 {
    font-size: 30px;
    font-weight: 800;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Testimonial Area Css -->
<!-- ============================================================== -->*/

.testimonial-area {
    background: url(../img/test-bg.jpg);
    padding: 210px 0 120px;
}

.testimonial-area.style-two {
    padding: 120px 0 120px;
}

.single-testimonial {
    background: #fff;
    text-align: center;
    padding: 50px 10px 28px;
}

.testimonial-thumb img {
    text-align: center !important;
    display: inline-block !important;
}

.testimonial-content h2 {
    font-size: 22px;
    padding-top: 20px;
}

.testimonial-content span {
    color: #F02830;
    font-weight: 500;
}

.testimonial-content p {
    padding-top: 20px;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Pricing Area Css -->
<!-- ============================================================== -->*/

.pricing-area {
    padding: 115px 0 90px;
}

.price-spt-thumb {
    position: relative;
}

.price-spt-thumb-inner {
    position: absolute;
    bottom: -200px;
    right: 0;
    left: 203px;
    margin: auto;
}

.single-pricing {
    box-shadow: 0 2px 4px #0003;
    margin-bottom: 30px;
}

.pricing-head-content {
    background: url(../img/pr1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 40px 30px 85px;
    text-align: center;
    position: relative;
}

.single-pricing.two .pricing-head-content {
    background: url(../img/pr3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.pricing-title {
    margin-bottom: 30px;
}

.pricing-title h2 {
    font-size: 30px;
    color: #fff;
}

.pricing-tk {
    height: 120px;
    width: 120px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    border: 8px solid #00AFF5;
    top: 120px;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 2;
    transition: .5s;
}

.pricing-tk h2 {
    font-weight: 800;
    padding-top: 15px;
    line-height: 32px;
}

.pricing-tk span {
    font-size: 14px;
    color: #0E1317;
    font-weight: 700;
}

.pricing-body {
    padding: 60px 45px 50px;
    position: relative;
    z-index: 1;
}

.pricing-body::before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: #0E1317;
    z-index: -1;
    transition: .5s;
 }

.pricing-body::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pr-shape1.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    transition: .5s;
}

.pricing-body ul li {
    padding-bottom: 12px;
    list-style: none;
    transition: .5s;
}

.pricing-body ul li span {
    float: right;
}

.pricing-body ul li span i {
    color: #00AFF5;
    font-size: 12px;
    height: 25px;
    width: 25px;
    border: 2px solid #00AFF5;
    display: inline-block;
    text-align: center;
    line-height: 23px;
    border-radius: 50%;
}

.pricing-button {
    margin-top: 26px;
}

.pricing-button a {
    display: inline-block;
    padding: 14px 35px;
    background: #00AFF5;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: .5s;
}

.pricing-button a i {
    margin-left: 5px;
}

/* Pricing Hover CSS */

.single-pricing:hover .pricing-body::before{
    height: 100%;
}

.single-pricing:hover .pricing-body::after{
    background: url(../img/pr-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.single-pricing:hover .pricing-body ul li{
    color: #fff;
}

.single-pricing:hover .pricing-tk {
    border-color: #FFDA2B;
}

.single-pricing:hover .pricing-button a {
    background: #FFDA2B;
    color: #0E1317;
}

/* Pricing Active */

.single-pricing.active .pricing-head-content {
    background: url(../img/pr2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.single-pricing.active .pricing-tk {
    border: 8px solid #FFDA2B;
}

.single-pricing.active .pricing-button a {
    background: #FFDA2B;
    color: #0E1317;
}

.single-pricing.active .pricing-body::before {
    height: 100%;
}

.single-pricing.active  .pricing-body ul li{
    color: #fff;
}

.single-pricing.active .pricing-body::after{
    background: url(../img/pr-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.single-pricing.active:hover .pricing-tk {
    border: 8px solid #00AFF5;
}

.single-pricing.active:hover .pricing-button a {
    background: #00AFF5;
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Skill Area Css -->
<!-- ============================================================== -->*/

.skill-area {
    padding: 0  115px 0 0;
}

.upper-bx.two {
    background: url(../img/skill-bg.jpg);
    padding: 120px 90px 0 188px;
    position: relative;
    margin-top: -250px;
    background-repeat: no-repeat;
    background-size: cover;
}

.appointment-booking {
    background: #00AFF5;
    padding: 35px 50px 55px;
    margin-left: 75px;
}

.appointment-booking-title h2 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 36px;
}

.appointment-booking .form_box input {
    height: 60px;
    width: 100%;
    padding-left: 15px;
    margin-bottom: 10px;
    outline: 0;
    border: none;
    border-radius: 3px;
}

.appointment-booking select.custom-select {
    height: 60px;
    width: 100%;
    margin-bottom: 10px;
}

.appointment-booking select.custom-select.slc {
    width: 48%;
    float: left;
}

.appointment-booking select.custom-select.slc.tbs {
    margin-right: 12px;
}

.appointment-booking .quote_button {
    margin-top: 20px;
}

.appointment-booking .quote_button button {
    display: inline-block;
    background: #FFDA2B;
    padding: 15px 35px;
    font-weight: 700;
    text-transform: uppercase;
}

.appointment-booking .quote_button button i {
    margin-left: 5px;
}

/* Process Bar CSS */

.prossess-ber-plugin span {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    color: #0E1317;
}

.barfiller {
    width: 100%;
    height: 8px;
    position: relative;
    margin-bottom: 25px;
    margin-top: 12px;
    border-radius: 5px;
    filter: drop-shadow(0px 10px 10px rgba(60,115,206,0.2));
    background-color: #fff;
}

.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: #333;
  z-index: 1;
}

.barfiller .tipWrap { display: none; }

.barfiller .tip {
    font-size: 16px;
    left: 0px;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
    top: -39px;
    font-weight: 700;
    color: #0E1317;
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}

span.fill {
    background: #00AFF5 !important;
    border-radius: 5px;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Team Area Css -->
<!-- ============================================================== -->*/

.team-area {
    padding: 115px 0 90px;
}

.single-team {
    margin-bottom: 30px;
}

.team-thumb {
    position: relative;
}

.team-thumb img{
    width: 100%;
}

.team-content {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    width: 80%;
    margin: auto;
    text-align: center;
    background: #fff;
    padding: 25px 15px 32px;
    transition: .5s;
}

.team-content-inner h2 {
    font-size: 24px;
    transition: .5s;
}

.team-content-inner span {
    padding-top: 5px;
    display: inline-block;
    color: #6D7A8E;
    font-size: 14px;
    font-weight: 700;
    transition: .5s;
}

.team-icon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    transition: .5s;
    opacity: 0;
}

.team-icon a {
    height: 40px;
    width: 40px;
    display: inline-block;
    background: transparent;
    border: 2px solid #fff;
    line-height: 37px;
    border-radius: 50%;
    margin: 0 3px;
    transition: .5s;
    color: #fff;
}

.single-team:hover .team-content{
    padding: 25px 15px 92px;
    background: #00AFF5;
}

.single-team:hover .team-icon{
    bottom: 36px;
    opacity: 1;
}

.single-team:hover .team-content-inner h2,
.single-team:hover .team-content-inner span{
    color: #fff;
}

.team-icon a:hover{
    background: #FFDA2B;
    border-color: #FFDA2B;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Counter Area Css -->
<!-- ============================================================== -->*/

.counter-area {
    background: url(../img/counter-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 120px 0 300px;
}

.single-counter {
    text-align: center;
    margin-bottom: 30px;
}

.counter-icon i {
    font-size: 60px;
    color: #fff;
}

.counter-content h2 {
    font-size: 48px;
    color: #fff;
    display: inline-block;
}

.counter-content span {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
}

.counter-content p {
    color: #E7E9EC;
    font-weight: 700;
    padding-top: 2px;
}

/* Style Two */

.counter-area.style-two {
    background: #fff;
    padding: 5px 0 80px;
}

.counter-area.style-two .counter-content h2 {
    color: #0E1317;
}

.counter-area.style-two .counter-content p {
    color: #3C4E68;
}

.counter-area.style-two .counter-icon i {
    color: #F02830;
}

.counter-area.style-two .counter-content span {
    color: #0E1317;
}

/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Contact Area Css -->
<!-- ============================================================== -->*/

.row.contact-box {
    background: #fff;
    padding: 55px 40px 55px;
    box-shadow: 0px -20px 70px rgba(0, 0, 0, 0.05);
    position: relative;
    margin-bottom: -235px;
    z-index: 1;
}

.contact-title h2 {
    font-size: 36px;
    margin-bottom: 40px;
    margin-top: 0;
}

.contact-thumb {
    margin-right: 40px;
}

.contact-thumb img {
    width: 100%;
}

.input-box input {
    width: 100%;
    height: 54px;
    margin-bottom: 20px;
    padding-left: 15px;
    border: 2px solid #9DA7B3;
    transition: .5s;
}

.input-box textarea {
    width: 100%;
    height: 180px;
    padding-left: 15px;
    border: 2px solid #9DA7B3;
    padding-top: 12px;
    transition: .5s;
}

.input-button button {
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    display: inline-block;
    padding: 14px 40px;
    outline: 0;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 500;
}

.input-button {
    padding-top: 20px;
}

.input-button button i {
    margin-left: 7px;
}

.input-box input:focus, .input-box textarea:focus {
    border-color: #FF3C00;
    outline: 0;
    box-shadow: 0 0 6px rgb(204, 48, 0, 0.6);
}

/* Map Area */

.map-area {
    position: relative;
    margin-bottom: -10px;
}

.map-area .container-fluid {
    padding: 0;
}

.map-area iframe {
    width: 100%;
    height: 650px;
}

.row.cnt-bx {
    position: relative;
    background: #fff;
    margin-top: -230px;
    padding: 30px 15px 20px;
    filter: drop-shadow(0px 20px 70px rgba(0, 0, 0, 0.05));
}

.google-map iframe {
    width: 100%;
    height: 560px;
}

.form-box {
    margin-bottom: 10px;
}

.form-box input {
    width: 100%;
    height: 60px;
    background: #F3F3F5;
    outline: 0;
    border: 0;
    padding-left: 20px;
}

.form-box textarea {
    background: #F3F3F5;
    border: 0;
    outline: 0;
    height: 170px;
    width: 100%;
    padding-top: 18px;
    padding-left: 20px;
}

.form-button button {
    display: inline-block;
    background: #FFDA2B;
    padding: 16px 36px;
    font-weight: 700;
    text-transform: uppercase;
    outline: 0;
}

.form-button button i {
    margin-left: 5px;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Mission Vision Area Css -->
<!-- ============================================================== -->*/

.mission-vision-area {
    background: url(../img/msvs.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 115px 0 65px;
}

/*tabe*/

.tab {
    padding-top: 50px;
    position: relative;
    left: 10px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.tabs {
    display: table;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
}

.tabs li {
    float: left;
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.tabs li a {
    color: #fff;
    font-weight: 600;
    display: inline-block;
    outline: none;
    padding: 8px 38px;
    transition: all 0.2s ease-in-out;
    border: 2px solid #FF5E14;
    margin-right: 25px;
}

.tabs_item {
    display: none;
    padding: 30px 0;

}

.tabs_item:first-child {
    display: block;
}

li.current a {
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    color: #fff;
}

.tabs-inner-text p {
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Mission Area Css -->
<!-- ============================================================== -->*/

.mission-area {
    padding: 115px 0 170px;
}

.row.mrc-mrgn {
    margin-top: 90px;
}

.mission-history-box {
    background: #F3F3F5;
    padding: 38px 45px 32px;
    width: 74%;
    margin-bottom: 25px;
    position: relative;
}

.mission-history-box::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    transition: .5s;
}

.mission-history-box:hover:before{
    width: 100%;
}

.mission-history-box:after {
    position: absolute;
    content: "";
    right: -11px;
    top: 76px;
    height: 22px;
    width: 22px;
    background: #F3F3F5;
    transform: rotate(45deg);
    transition: 1s;
    z-index: -1;
}

.mission-history-right .mission-history-box:after {
    right: inherit;
    top: 90px;
    left: -11px; 
}

.mission-history-right .mission-history-content h2::before {
    top: -12px;
    right: -45px;
    left: inherit;
}

.mission-history-box:hover:after{
    background: #FF5E14;
}

.mission-history-right .mission-history-box:hover:after{
    background: #F02830;
}

.mission-history-content h2 {
    font-size: 22px;
    position: relative;
    margin-bottom: 10px;
    transition: .5s;
}

.mission-history-content p {
    transition: .5s;
    position: relative;
}

.mission-history-years {
    text-align: right;
    margin-right: 145px;
    margin-bottom: 150px;
}

.mission-history-years h1 {
    font-size: 36px;
}

.mission-history-content h2::before {
    position: absolute;
    content: "";
    left: -44px;
    top: -12px;
    height: 30px;
    width: 2px;
    background: #f00;
}

.mission-history-box:hover .mission-history-content h2,
.mission-history-box:hover .mission-history-content p{
    color: #fff;
}

/* Mission Right Box CSS */

.mission-history-right {
    position: relative;
    padding-left: 70px;
}

.mission-history-right::before {
    position: absolute;
    content: "";
    left: -65px;
    top: -57px;
    height: 110%;
    width: 100%;
    background: url(../img/line.png);
    background-repeat: no-repeat;
}

.mission-history-right .mission-history-years {
    text-align: left;
}

.line-button {
    position: absolute;
    top: -13%;
    left: -16%;
}

.line-button.two {
    top: inherit;
    bottom: -82px;
}

.line-button a {
    display: inline-block;
    height: 55px;
    width: 55px;
    line-height: 55px;
    border: 1px solid #FF3C00;
    border-radius: 50%;
    text-align: center;
    position: relative;
    transition: .5s;
}

.line-button a::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.line-button a:hover:before{
    width: 100%;
}

.line-button a:hover{
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Contact Address Area Css -->
<!-- ============================================================== -->*/

.contact-address-area {
    padding: 120px 0 90px;
}

.contact-address-box {
    margin-left: 65px;
}

.contact-address-single-box {
    border: 2px solid #E5E5E5;
    padding: 30px 35px 30px;
    margin-bottom: 30px;
	transition:.5s;
}

.contact-address-icon {
    float: left;
    margin-right: 30px;
}

.contact-address-icon i {
    display: inline-block;
    background: #F3F3F5;
    height: 90px;
    width: 90px;
    text-align: center;
    line-height: 90px;
    font-size: 45px;
    color: #F02830;
    border-radius: 50%;
}

.contact-address-content h5 {
    font-size: 16px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.contact-address-content p {
    margin-bottom: 0;
    color: #0E1317;
}

.contact-address-button {
    padding-top: 40px;
}

.contact-address-single-box:hover{
	border: 2px solid #F02830;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Blog Area Css -->
<!-- ============================================================== -->*/

.blog-area {
    padding: 115px 0 90px;
}

.single-blog {
    background: #fff;
    box-shadow: 0px 10px 70px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.blog-thumb {
    position: relative;
}

.blog-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: rgba(0,0,0,0.3);
	transition:.5s;
}

.single-blog:hover .blog-thumb:before{
	width:100%;
}

.blog-thumb img {
    width: 100%;
}

.blog-meta-date {
    position: relative;
    margin-top: -28px;
    z-index: 1;
}

.blog-meta-date span {
    background: #287FF5;
    display: inline-block;
    padding: 3px 27px 1px;
    color: #fff;
    border-radius: 0 30px 30px 0;
    font-size: 14px;
}

.blog-meta-date span i {
    margin-right: 5px;
}

.blog-meta span {
    font-size: 14px;
    font-family: "Rubik", serif;
    font-weight: 600;
    color: #0E1317;
}

.blog-meta span i {
    color: #F02830;
    margin-right: 5px;
    font-size: 16px;
}

.blog-content {
    padding: 20px 35px 38px;
}

.blog-title h2 {
    font-size: 24px;
}

.blog-title h2 a {
    font-weight: 700;
    transition: .5s;
}

.blog-title h2 a:hover{
    color: #F02830;
}

.blog-button {
    padding-top: 28px;
}

.blog-button a {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    border: 2px solid #F02830;
    display: inline-block;
    padding: 7px 26px;
    color: #0E1317;
    font-family: "Rubik", serif;
    background: transparent;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.blog-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: -1px;
    height: 102%;
    width: 0%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
    transition: .5s;
}

.single-blog:hover .blog-button a:before{
    width: 101%;
}

.single-blog:hover .blog-button a{
    color: #fff;
}

.blog-button a i {
    margin-left: 5px;
    font-size: 14px;
}

/* Style Two */

.blog-area.style-two .blog-button a {
    border: 2px solid #00AFF5;
	background:#00AFF5;
	color:#fff;
}

.blog-area.style-two .blog-button a:before{
	background:#FFDA2B;
}

.blog-area.style-two .single-blog:hover .blog-button a{
	border:2px solid #FFDA2B;
}

.blog-area.style-two .blog-meta-date span {
    background: #FFDA2B;
	color:#3C4E68;
}

.blog-area.style-two .blog-meta span i {
    color: #00AFF5;
}

.blog-area.style-two .blog-title h2 a:hover {
    color: #FFDA2B;
}

.blog-area.style-two .owl-nav {
    position: absolute;
    bottom: 200px;
    left: -48%;
}

.blog-area.style-two .owl-prev i {
    border: 2px solid #f5f5f5;
	color:#0E1317;
	border-radius:0;
	background: #f5f5f5;
	line-height:60px;
}

.blog-area.style-two .owl-prev i:after {
    background: #FFDA2B;
	border-radius:0;
}

.blog-area.style-two .owl-next i {
    background: #FFDA2B;
    border: 2px #FFDA2B;
	border-radius:0;
	line-height:60px;
	color: #0E1317;
}

.blog-area.style-two .owl-next i:hover {
    color: #0E1317;
}

.blog-area.style-two .owl-prev i:after,
.blog-area.style-two .owl-next i:after{
	display:none;
}


/***
======================================================
<--  Nivaan Packaging Blog Details Area Css -->
======================================================***/

.blog-detials-area {
    padding: 100px 0 100px;
}

.blog-grid-area {
    padding: 120px 0 90px;
}

.blog-details-main {
    background: #fff;
    padding: 30px;
    box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.05);
}

.blog-details-meta {
    background: #F3F3F5;
    padding: 16px 30px;
}

.blog-details-meta span {
    margin-right: 30px;
}

.blog-details-meta span i {
    color: #F02830;
    padding-right: 5px;
}

.blog-details-content {
    padding: 20px 0 18px;
}

.blog-details-content h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-des {
    padding: 30px 0 10px;
}

.blog-details-blockquote {
    background: rgba(240,40,48,0.1);
    padding: 40px 38px 26px;
    position: relative;
    margin-bottom: 10px;
}

.blog-details-blockquote::before {
    position: absolute;
    content: "";
    background: url(../img/quite.png);
    top: 40px;
    left: 60px;
    height: 75px;
    width: 75px;
    background-repeat: no-repeat;
}

.blog-details-blockquote blockquote {
    font-size: 18px;
    color: #0E1317;
    font-weight: 500;
    font-family: "Rubik", serif;
}

.blog-details-video-thumb {
    margin-top: 30px;
}

.blog-details-video-thumb img {
    width: 100%;
}

.blog-details-video-thumb-inner img {
    width: 100%;
}

.blog-details-content h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-content-list p i {
    font-size: 14px;
    height: 32px;
    width: 32px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 31px;
    border-radius: 100%;
    margin-right: 15px;
}

.blog-detials-area .blog-content {
    padding: 20px 30px 38px;
}

.blog-details-button a {
    display: inline-block;
    border: 2px solid #F02830;
    padding: 3px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 10px;
}

.blog-details-button a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: -1px;
    height: 104%;
    width: 104%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-button a.active {
    border-color: #9DA7B3;
    background: transparent;
    color: #0E1317;
    transition: .5s;
    margin-left: 10px;
}

.blog-details-button a.active:before{
    background: transparent;
}

.blog-details-button a.active:hover:before{
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
}

.blog-details-button a.active:hover{
    color: #fff;
    border-color: #F02830;
}

.blog-details-social {
    text-align: right;
}

.blog-details-social a {
    display: inline-block;
    border: 2px solid #9DA7B3;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    transition: .5s;
    margin-left: 5px;
}

.blog-details-social a:hover{
    background: #287FF5;
    border-color: #287FF5;
    color: #fff;
}

/* Blog Details Author */

.blog-details-author {
    border-top: 2px solid #CED3D9;
    padding-top: 40px;
    margin-top: 32px;
}

.blog-details-author-inner {
    background: #F3F3F5;
    padding: 30px 30px 25px;
}

.blog-details-author-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-author-content h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
}

/* Comment CSS */

.blog-details-comment {
    margin-bottom: 10px;
}

.blog-details-comment-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-comment-content {
    overflow: hidden;
}

.blog-details-comment-content h2 {
    font-size: 18px;
    margin-top: 0;
}

.blog-details-comment-content span {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.blog-details-comment-reply {
    position: absolute;
    right: 25px;
}

.blog-details-comment-reply a {
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
}

.blog-details-comment.reply {
    margin-left: 70px;
    padding-top: 35px;
    border-top: 2px solid #9DA7B3;
}

/* Blog Details Contact */

.blog-details-contact {
    border-top: 2px solid #9DA7B3;
    margin: 12px 20px 10px;
    padding-top: 8px;
}


/*progress bar*/

.progress-box {
    width: 600px;
    margin: 35px auto 0 0px;
    font-family: 'Fira Sans';
}

.circle_percent {
    font-size: 90px;
    width: 87px;
    height: 87px;
    position: relative;
    background: #FFEAE3;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin: 0 20px 0 0;
    z-index: 1;
}

.circle_inner {position: absolute; left: 0; top: 0; width: 1em; height: 1em; clip:rect(0 1em 1em .5em);}
.round_per {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #FF3C00; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:1.05s;}
.percent_more .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #FF3C00; content:'';}
.circle_inbox {position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background: #fff; z-index:3; border-radius: 50%;}

.percent_text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    font-size: 22px;
    line-height: 26px;
    color: #232323;
    text-align: center;
}

/*circle progress title*/

.extra-progress {
    display: inline-block;
    padding: 0 0 0  70px;
}

.circle-progress-title {
    display: inline-block;
}

.circle-progress-title h4 {
    font-size: 18px;
    line-height: 28px;
    color: #232323;
    font-weight: 500;
    position: relative;
    top: -30px;
}

/***
======================================================
<--  Nivaan Packaging Case Study Area Css -->
======================================================***/

/* Portfolio Nav */
.portfolio_nav {
    margin-bottom: 40px;
}

.portfolio_menu ul {
    text-align: center;
    list-style: none;
}

.portfolio_nav ul li {
    background: #F6F5F5;
    font-size: 15px;
    font-family: 'Fira Sans';
    transition: all 0.5s ease 0s;
    cursor: pointer;
    padding: 6px 25px;
    font-weight: 500;
    position: relative;
    margin: 0 3px;
    margin-bottom: 7px;
    display: inline-block;
    border-radius: 30px;
}

.portfolio_menu ul li a{
    display: block;
    color:#fff;
    text-transform:uppercase;
    position:relative;
    transition:.5s;
}

.portfolio_menu ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 24px;
    height: 2px;
    width: 0%;
    background: #fff;
    transition:.5s;
}

.portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
    color: #fff;
    background: #FF3C00;
}

/***======================================================
<-- Nivaan Packaging Faq Area Css -->
======================================================***/

.video-icon {
    display: inline-block;
}

.video-icon-cda a {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 100%;
    color: #FF3C00;
    background: #fff;
    display: inline-block;
    text-align: center;
    position: relative;
    -webkit-animation: hassan 1s linear infinite;
    animation: hassan 1.5s linear infinite;
    -webkit-transition: .5s;
    font-size: 28px;
    z-index: 1;
}

@-webkit-keyframes hassan {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4),  0 0 0 5px rgba(255,255,255, 0.4);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4),  0 0 0 5px rgba(255,255,255, 0.4)
    }
    100% {
        -webkit-box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 0 40px rgba(255, 255, 255, 0)
    }
}
@keyframes hassan {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 5px rgba(255,255,255, 0.4);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 5px rgba(255,255,255, 0.4)
    }
    100% {
        -webkit-box-shadow:0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 40px rgba(255,255,255, 0);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 40px rgba(255,255,255, 0)
    }
}

/*
<!-- ============================================================== -->
<!-- Nivaan Packaging News Letter Area CSS -->
<!-- ============================================================== -->*/

.newsletter-area {
    padding: 0 0 0 397px;
}

.newsletter-area.style-two {
    padding: 0;
}

.newsletter-area.style-three {
    background: #287FF5;
    padding: 65px 0;
    position: relative;
    margin-bottom: -80px;
}

.newsletter-area .nsbg {
    background: url(../img/ns-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    padding: 80px 235px 80px 30px;
    position: relative;
    margin-bottom: -90px;
}

.newsletter-area.style-two .row.nsbg {
    padding: 80px 0 80px 30px;
}

.newsletter-title h2 {
    font-size: 36px;
    color: #fff;
    margin-top: 5px;
}

.newsletter-form input {
    width: 70%;
    height: 60px;
    outline: 0;
    padding-left: 20px;
    border: 0;
}

.newsletter-form button {
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    border: 0;
    height: 60px;
    padding: 0 30px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    right: 158px;
}

.newsletter-area.home-two.style-two .newsletter-form button {
    background: #FFDA2B;
	color:#0E1317;
}


/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Footer Area CSS -->
<!-- ============================================================== -->*/

.footer-area {
    padding: 16px;
    background: url(../img/footer-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.footer-area.two {
    padding: 115px 0 10px;
}

.widget-title {
    padding-bottom: 46px;
}

.widget-title h2 {
    font-size: 20px;
    color: #fff;
}

.footer-widget-logo {
    margin-top: 6px;
}

.footer-widget-text {
    padding-top: 38px;
}

.footer-widget-text p {
    color: #E6E7E8;
    width: 96%;
}

.footer-widget-social {
    padding-top: 20px;
}

.footer-widget-social a {
    height: 40px;
    width: 40px;
    display: inline-block;
    border: 1px solid #fff;
    text-align: center;
    color: #fff;
    position: relative;
    line-height: 38px;
    border-radius: 50%;
    margin-right: 8px;
    z-index: 1;
    transition: .5s;
}

.footer-widget-social a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.footer-widget-social a:hover:before{
    width: 100%;
}

.footer-widget-social a:hover{
    border-color: transparent;
}

/* Recent Post CSS */

.footer-widget-recent-post {
    margin-bottom: 25px;
}

.recent-widget-thumb {
    float: left;
    margin-right: 25px;
}

.recent-widget-content a {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: "Rubik", serif;
    display: block;
    line-height: 26px;
	transition:.5s;
}

.recent-widget-content span {
    font-size: 14px;
    color: #9DA7B3;
    padding-top: 7px;
    display: block;
}

.recent-widget-content span i {
    margin-right: 10px;
    display: inline-block;
}

.recent-widget-content a:hover{
	color:#F02830;
}

/* Footer Menu CSS */

.footer-menu {
    float: left;
    margin-right: 70px;
}

.footer-menu.two {
    margin-right: 0;
}

.footer-menu ul li {
    list-style: none;
    margin-bottom: 14px;
    transition: .5s;
}

.footer-menu ul li a {
    color: #9DA7B3;
    font-size: 16px;
    font-family: "Rubik", serif;
    font-weight: 600;
    transition: .5s;
}

.footer-menu ul li a:hover{
    color: #F02830;
}

.coppy-right-text {
    padding-top: 16px;
}

.coppy-right-text p {
    text-align: center;
    color: #fff;
}

/* Home Two CSS */

.footer-area.home-two .recent-widget-content a:hover {
    color: #00AFF5;
}

.footer-area.home-two .footer-menu ul li a:hover {
    color: #00AFF5;
}

.footer-area.home-two .footer-widget-social a:before {
    background:#00AFF5;
}

/*
<!-- ============================================================== -->
<!-- Nivaan Packaging Scrollup Section -->
<!-- ============================================================== -->*/

.scroll-area{
  position: relative;
  z-index: 999;
 }

.scroll-area .go-top {
    position: fixed;
    cursor: pointer;
    top: 0;
    right: 30px;
    color: #ffffff;
    background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    z-index: 9999;
    width: 45px;
    text-align: center;
    height: 45px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.9s ease-out 0s;
    -moz-transition: all 0.9s ease-out 0s;
    border-radius: 10px; 
}

.scroll-area .go-top i {
      position: absolute;
      top: 50%;
      left: -4px;
      right: 0;
      margin: 0 auto;
      font-size: 15px;
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: all 0.5s ease-out 0s;
      -moz-transition: all 0.5s ease-out 0s;
  }

.scroll-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%; 
}

.scroll-area .go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, #00132b 0%, #00132b 100%);
    background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;;
    border-radius: 100%;
}

.scroll-area .go-top:focus, .scroll-area .go-top:hover {
      color: #fff; 
  }

.scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
        opacity: 1;
        visibility: visible; 
}

.scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
        opacity: 0;
        top: 0;
        visibility: hidden;
 }

.scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
        opacity: 1;
        visibility: visible;
        top: 50%; 
}

.scroll-area .go-top.active {
    top: 95%;
    -webkit-transform: translateY(-98%);
    -moz-transform: translateY(-98%);
    opacity: 1;
    visibility: visible;
    border-radius: 0;
    right: 30px;
    border-radius:100%;
}

.top-wrap {
  position: relative; 
}

.top-wrap .go-top-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background: #FF3C00;
}

 .top-wrap .go-top-button i {
      font-size: 20px;
      font-weight: 700;
      padding-left: 4px;
      color: #fff;
 }

.top-wrap .go-top-button::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 45px;
    height: 45px;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
    opacity: 0;
    background-image: -moz-linear-gradient(0deg, #F02830 0%, #F02830 100%);
    background-image: -webkit-linear-gradient(0deg, #F02830 0%, #F02830 100%);
    border-radius: 100%;
}

.top-wrap .go-top-button:hover {
      background-color: #222;
      color: #fff; 
  }
  
.scroll-area.home-two .top-wrap .go-top-button {
    background: #00AFF5;
}
 .scroll-area.home-two .top-wrap .go-top-button::after {
    background-image: -moz-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
    background-image: -webkit-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
}

@keyframes ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8; }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2); } }


/*==========================================
    Nivaan Packaging Search Popup Css
=========================================*/

.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-popup .close-search i{
    position: relative;
    font-size: 30px;
    color: #ffffff;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #000000;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-popup .close-search.style-two i{
    font-size:20px;
    color:#ffffff;
}

.search-box-btn.search-box-outer i {
    font-size: 15px;
    display: inline-block;
    color: #0a2c3d;
    cursor: pointer;
}


/*=============================
<--  Coursol Nav Css -->
===============================*/

.owl-nav {
    position: absolute;
    bottom: 90px;
    left: -48%;
}

.owl-prev {
    display: inline-block;
    margin-right: 12px;
}

.owl-next {
    display: inline-block;
}

.owl-prev i {
    height: 60px;
    width: 60px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 58px;
    font-size: 20px;
    border-radius: 50%;
    font-weight: 800;
    background: transparent;
    border: 2px solid #F02830;
    color: #F02830;
}

.owl-prev i:after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    transition: .5s;
    z-index: 1;
    border-radius: 50%;
}

.owl-prev i:hover:after{
    width: 100%;
    z-index: -1;
}

.owl-prev i:hover{
    color: #fff;
}

.owl-next i {
    height: 60px;
    width: 60px;
    display: inline-block;
    background: transparent;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
    border-radius: 50%;
    border: 2px transparent;
    transition: .5s;
    position: relative;
    z-index: 1;
}
.owl-next i:hover{
    color: #F02830;
}

.owl-next i:after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #F02830 6%, #FF5E14 96%);
    z-index: -1;
    border-radius: 50%;
}

.owl-next i:hover:after{
    background: transparent;
    border: 2px solid #F02830;
}

/*===========================
<-- Nivaan Packaging Loader Css -->
=============================*/

.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}

.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #9A241C;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.loader:before {
  position: absolute;
  content: '';
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #FF3C00;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader:after {
  position: absolute;
  content: '';
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 52%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
  left: -100%;
}

.loaded .loder-section.right-section {
  right: -100%;
}

.loaded .loader-wrapper {
  visibility: hidden;
}

.loaded .loader {
  top: -100%;
  opacity: 0;
}
