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

Project     :   Buten - Product Marketing Landing Page
Author      :   thememeta
Athor URI   :   https://themeforest.net/user/thememeta

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

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

[Table of contents]

Default CSS
Site Preloader
Header
Home Area
Home Slider
Home Newsletter
About Area
Section Heading
Features Area
Video Area
Core Feature Area
Why Choose Area
Newsletter Area
Product Area
Testimonial Area
FAQ Area
Contact Area
Footer

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

/*-------------------------------------------------------------------------------------
    Default CSS
---------------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800');
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}

body {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: #000;
    position: relative;
    overflow-x: hidden;
    letter-spacing: 1px
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

a,
a:visited,
a:focus,
a:active,
a:hover {
    text-decoration: none;
    outline: none;
}

input:required,
input:invalid,
textarea:required,
textarea:invalid {
    -webkit-box-shadow: none;
    box-shadow: none;
}

a,
button {
    -webkit-transition: 0.3s;
    transition: 0.3s
}

a {
    color: #2c3e50;
    font-size: 14px
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3 {
    font-weight: 400;
    margin-top: 0
}

h1 {
    font-size: 56px;
    line-height: 66px
}

h2 {
    font-size: 36px;
    line-height: 46px
}

h3 {
    font-size: 24px;
    line-height: 34px
}

h4 {
    font-size: 20px;
    line-height: 30px
}

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

h6 {
    font-size: 16px;
    line-height: 26px
}

p {
    font-size: 14px;
    color: #555;
    line-height: 24px;
    font-weight: 500;
}

.d-table {
    width: 100%;
    height: 100%
}

.animation-jump {
    position: relative;
    -webkit-animation: animation-jump 2s ease-in-out infinite;
    animation: animation-jump 2s ease-in-out infinite;
}

.animation-bg {
    -webkit-animation: animation-bg 25s ease-in-out infinite;
    animation: animation-bg 25s ease-in-out infinite;
}

@-webkit-keyframes animation-jump {
    0% {
        top: 3px;
    }
    50% {
        top: -3px;
    }
    100% {
        top: 3px;
    }
}

@keyframes animation-jump {
    0% {
        top: 3px;
    }
    50% {
        top: -3px;
    }
    100% {
        top: 3px;
    }
}

@-webkit-keyframes animation-bg {
    0% {
        background-position: top;
    }

    50% {
        background-position: bottom;
    }
    100% {
        background-position: top;
    }
}

@keyframes animation-bg {
    0% {
        background-position: top;
    }

    50% {
        background-position: bottom;
    }
    100% {
        background-position: top;
    }
}

/*-------------------------------------------------------------------------------------
    Site Preloader
---------------------------------------------------------------------------------------*/

.preloader {
    background-color: #1c1c1c;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999999;
}

.preloader .spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

/*-------------------------------------------------------------------------------------
    Header
---------------------------------------------------------------------------------------*/

#header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    padding: 10px 0
}

#header.sticky {
    position: fixed;
    width: 100%;
    -webkit-box-shadow: 0 2px 10px #ccc;
    box-shadow: 0 2px 10px #ccc;
    background-color: #fff;
    z-index: 999;
    padding: 14px 0;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.navbar-nav {
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.navbar-nav .nav-item .nav-link {
    font-weight: 700;
    font-size: 15px;
    padding: 0 15px;
    color: #fff;
    letter-spacing: 2px
}

.nav-item .nav-link:hover,
.nav-item .nav-link.active,
.sticky .nav-item .nav-link {
    color: #131a48
}

.sticky .nav-item .nav-link.active,
.sticky .nav-item .nav-link:hover {
    color: #2273f8
}

.navbar-nav.buy-btn .nav-link {
    background-color: #28a745 !important; /* Bootstrap green */
  color: #fff !important;
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: 700;
}

.navbar-nav.buy-btn .nav-link:hover {
    background-color: #131a48;
    color: #fff;
}

.sticky .navbar-nav.buy-btn a {
    background-color: #2273f8;
    color: #fff;
}

.sticky .navbar-nav.buy-btn .nav-link:hover {
    color: #fff;
}

.logo-scroll,
.sticky .logo {
    display: none
}

.sticky .logo-scroll {
    display: block
}

/*-------------------------------------------------------------------------------------
    Home Area
---------------------------------------------------------------------------------------*/

#home-area {
    background-image: url(../images/banner-1.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
    height: 100vh
}

.caption-content {
    height: 100vh
}

.caption-content h1 {
    color: #fff;
    font-weight: 800;
}

.caption-content p {
    color: #ddd;
    margin: 20px 0 10px;
}

.caption-content a {
    background-color: #131a48;
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    display: inline-block;
    font-weight: 600;
    margin: 40px 0 0;
}

.caption-content a:hover {
    background-color: #fff;
    color: #2273f8;
}

.caption-content a i {
    padding-right: 2px;
    font-size: 18px;
}

.caption-img {
    padding: 25% 0 0;
}

/*-------------------------------------------------------------------------------------
    Home Slider
---------------------------------------------------------------------------------------*/

#home-area.slider {
    background-image: url(../images/banner-1.jpg);
}

.slide-single {
    padding: 0 12%;
}

.slide-single .caption-img img {
    max-width: 350px;
    margin: 0 auto;
    padding: 8% 0 0
}

.home-slider .owl-dots {
    position: absolute;
    left: 0;
    bottom: 80px;
    width: 100%;
    text-align: center
}

.home-slider .owl-dot {
    display: inline-block;
    width: 15px;
    height: 6px;
    margin: 0 4px;
    background-color: #fff;
    border-radius: 2px;
    margin: 0 4px;
    border: 0;
    outline: 0
}

.home-slider .owl-dot.active {
    width: 25px;
}

.owl-item.active .caption-content h1 {
    -webkit-animation: 1s .3s fadeInLeft both;
    animation: 1s .3s fadeInLeft both;
}

.owl-item.active .caption-content p {
    -webkit-animation: 1s .5s fadeInRight both;
    animation: 1s .5s fadeInRight both;
}

.owl-item.active .caption-content a {
    -webkit-animation: 1s .8s fadeInUp both;
    animation: 1s .8s fadeInUp both;
}

/*-------------------------------------------------------------------------------------
    Home Newsletter
---------------------------------------------------------------------------------------*/

#home-area.newsletter {
    background-image: url(../images/banner-2.jpg);
    position: relative
}

.home-news-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.newsletter .caption-img img {
    max-width: 350px;
    margin: 10% auto 0
}

.home-newsletter {
    background-color: #fff;
    padding: 40px 30px 50px;
    border-radius: 10px;
    margin: 9% 40px 0
}

.home-newsletter h2 {
    font-weight: 800;
    text-align: center;
    margin: 0 0 30px;
}

.home-newsletter input {
    height: 50px;
    font-size: 15px;
    border: 1px solid #e6f0fa;
}

.home-newsletter button {
    width: 100%;
    height: 50px;
    color: #fff;
    background-color: #2273f8;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    outline: 0
}

.home-newsletter button:hover {
    background-color: #0857d8;
}

/*-------------------------------------------------------------------------------------
    About Area
---------------------------------------------------------------------------------------*/

#about-area {
    padding: 100px 0;
}

.about-img img {
    border-radius: 10px;
}

.about-content h2 {
    font-weight: 800;
    margin: 0 0 10px;
}

.about-content h4 {
    font-weight: 600;
    color: #2273f8;
}

.about-content ul {
    margin: 20px 0 0;
}

.about-content ul li {
    font-weight: 600;
    padding: 3px 0;
    font-size: 14px;
    line-height: 24px
}

.about-content li i {
    color: #2273f8;
}

/*-------------------------------------------------------------------------------------
    Section Heading
---------------------------------------------------------------------------------------*/

.section-heading h2 {
    font-weight: 800;
}

.section-heading {
    margin: 0 0 60px;
}

/*-------------------------------------------------------------------------------------
    Features Area
---------------------------------------------------------------------------------------*/

#feature-area {
    background-color: #fafafa;
    padding: 90px 0 30px;
}

.feature-single {
    margin: 0 0 60px;
}

.feature-single h4 {
    font-weight: 600;
    margin-bottom: 5px
}

.feature-single i {
    display: inline-block;
    font-size: 30px;
    margin: 0 0 15px;
    color: #2273f8;
    padding: 20px;
    border-radius: 50%;
    -webkit-box-shadow: 0 4px 15px 0 #ccc;
    box-shadow: 0 4px 15px 0 #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    background-color: #fff
}

.feature-single:hover i {
    color: #fff;
    background-color: #2273f8
}

/*-------------------------------------------------------------------------------------
    Video Area
---------------------------------------------------------------------------------------*/

#video-area {
    position: relative;
    background-image: url(../images/video-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 90px 0 100px
}

.video-overlay {
    background-color: rgba(34, 115, 248, 0.8);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

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

.video-content p {
    color: #ddd;
    margin: 0 0 50px;
}

.video-content,
.video-player {
    position: relative
}

.video-player a {
    font-size: 35px;
    color: #2273f8;
    border-radius: 50%;
    display: inline-block;
    background-color: #fff;
    width: 80px;
    height: 80px;
    line-height: 80px;
    position: relative;
    z-index: 2;
    padding: 0 28px;
}

.video-player a:hover {
    color: #fff;
    background-color: #131a48;
}

.pulse1 {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    border: 3px solid rgba(255, 255, 255, .1);
    -webkit-animation: pulsejg1 1.3s linear infinite;
    animation: pulsejg1 1.3s linear infinite;
    border-radius: 999px;
    -webkit-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
    box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pulse2 {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    opacity: 0;
    border: 1px solid rgba(255, 255, 255, 0);
    -webkit-animation: pulsejg2 0.9s linear infinite;
    animation: pulsejg2 0.9s linear infinite;
    border-radius: 999px;
    -webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
    box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@-webkit-keyframes pulsejg1 {
    0% {
        -webkit-transform: scale(.6);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(.6);
        opacity: 0;
    }

    60% {
        -webkit-transform: scale(.9);
        opacity: .2;
    }

    70% {
        -webkit-transform: scale(1.1);
        opacity: .35;
    }

    80% {
        -webkit-transform: scale(1.25);
        opacity: .2;
    }

    100% {
        -webkit-transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes pulsejg1 {
    0% {
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0;
    }

    60% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .1;
    }

    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .25;
    }

    80% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
        opacity: .1;
    }

    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0;
    }
}

@-webkit-keyframes pulsejg2 {
    0% {
        -webkit-transform: scale(.6);
        opacity: 0;
    }

    40% {
        -webkit-transform: scale(.8);
        opacity: .05;
    }

    50% {
        -webkit-transform: scale(1);
        opacity: .1;
    }

    60% {
        -webkit-transform: scale(1.1);
        opacity: .3;
    }

    80% {
        -webkit-transform: scale(1.2);
        opacity: .1;
    }

    100% {
        -webkit-transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes pulsejg2 {
    0% {
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0;
    }

    40% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .05;
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .1;
    }

    60% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .3;
    }

    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: .1;
    }

    100% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0;
    }
}

/*-------------------------------------------------------------------------------------
    Core Feature Area
---------------------------------------------------------------------------------------*/

#core-feature-area {
    padding: 90px 0 70px;
}

.core-feat-content {
    padding-top: 20px;
}

.core-feat-single {
    background-color: #fff;
    padding: 20px 20px 8px;
    border-radius: 10px;
    border: 1px solid #eff0f1;
    margin: 0 0 30px;
    -webkit-box-shadow: 0 5px 15px #e6f0fa;
    box-shadow: 0 5px 15px #e6f0fa
}

.core-feat-single i {
    color: #2273f8;
    font-size: 20px;
    display: inline-block;
}

.core-feat-single h4 {
    font-weight: 600;
    margin-bottom: 5px
}

.core-feat-img {
    background-image: url(../images/circle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: center;
}

.core-feat-img img {
    max-width: 300px;
}

/*-------------------------------------------------------------------------------------
    Why Choose Area
---------------------------------------------------------------------------------------*/

#why-choose-area {
    padding: 90px 0 30px;
    background-color: #fafafa;
}

.why-choose-img img {
    max-width: 300px
}

.why-choose-single {
    margin: 0 0 30px;
    overflow: hidden
}

.why-choose-single .icon {
    width: 20%;
    float: left;
}

.why-choose-single .content {
    width: 80%;
    float: left;
}

.why-choose-single i {
    display: inline-block;
    font-size: 30px;
    width: 80px;
    height: 80px;
    border: 2px dashed #2273f8;
    border-radius: 50%;
    line-height: 80px;
    padding: 0 24px;
    color: #2273f8;
    margin: 15px 0 0;
}

.why-choose-single h4 {
    font-weight: 600;
    margin-bottom: 5px
}

/*-------------------------------------------------------------------------------------
   Newsletter Area
---------------------------------------------------------------------------------------*/

#newsletter-area {
    padding: 100px 0;
    background-image: url(../images/newsletter-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative
}

.newsletter-overlay {
    background-color: rgba(34, 115, 248, 0.8);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.newsletter-box {
    padding: 40px;
    border-radius: 10px;
    background-color: #fff;
    position: relative
}

.newsletter-box h2 {
    font-weight: 800;
    margin: 0 0 5px
}

.newsletter-box p {
    margin: 0
}

.newsletter-form {
    position: relative;
    margin: 14px 0 0
}

.newsletter-form input {
    border-radius: 30px;
    height: 50px;
    padding-left: 30px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(52, 69, 199, 0.4);
    box-shadow: 0px 0px 15px 0px rgba(52, 69, 199, 0.4);
    font-size: 14px
}

.newsletter-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 50px;
    padding: 0 40px;
    border-radius: 30px;
    border: 0;
    background-color: #2273f8;
    color: #fff;
    outline: 0;
    cursor: pointer
}

.newsletter-form button:hover {
    background-color: #0857d8;
}

/*-------------------------------------------------------------------------------------
    Product Area
---------------------------------------------------------------------------------------*/

#product-area {
    padding: 90px 0 100px;
}

.product-single {
    border: 1px solid #eff0f1;
    padding: 35px 20px 45px;
    border-radius: 10px;
    background-color: #fafafa
}

.product-single img {
    max-width: 200px;
}

.product-single h4 {
    font-weight: 800;
    color: #2273f8;
    margin: 0 0 20px;
}

.product-single h2 {
    font-weight: 700;
    margin: 10px 0 20px;
    font-size: 30px
}

.product-single a {
    display: inline-block;
    padding: 8px 16px;
    color: #fff;
    background-color: #2273f8;
    font-weight: 600;
    border-radius: 30px;
}

.product-single a:hover {
    background-color: #0857d8;
}

/*-------------------------------------------------------------------------------------
    Testimonial Area
---------------------------------------------------------------------------------------*/

#testimonial-area {
    padding: 90px 0 135px;
    background-image: url(../images/banner-1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#testimonial-area .section-heading h2 {
    color: #fff
}

.client-info img {
    max-width: 80px;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.client-info h4 {
    color: #fff;
    font-weight: 600;
    margin: 0
}

#testimonial-area .section-heading p,
.client-info p {
    color: #ddd;
}

.client-comment p {
    color: #fff;
    font-style: italic
}

.client-comment i {
    color: #f39c12
}

.testimonial-carousel .owl-dots {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    text-align: center
}

.testimonial-carousel .owl-dot {
    display: inline-block;
    width: 15px;
    height: 6px;
    margin: 0 4px;
    background-color: #fff;
    border-radius: 2px;
    margin: 0 4px;
    border: 0;
    outline: 0
}

.testimonial-carousel .owl-dot.active {
    width: 25px;
}

/*-------------------------------------------------------------------------------------
    FAQ Area
---------------------------------------------------------------------------------------*/

#faq-area {
    padding: 90px 0 72px
}

#accordion .card {
    margin: 0 0 20px;
    border: 0;
    border-radius: 10px;
}

#accordion .card-header {
    border-radius: 10px;
    border: 0;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(52, 69, 199, 0.4);
    box-shadow: 0px 0px 15px 0px rgba(52, 69, 199, 0.4);
    background-color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: relative
}

#accordion .card-header.active a,
#accordion .card-header:hover a,
#accordion .card-header:hover:after {
    color: #fff;
}

#accordion .card,
#accordion .card-header.active,
#accordion .card-header:hover {
    background-color: #2273f8;
}

#accordion .card-header a:after {
    content: "\eab2";
    font-family: "IcoFont";
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 20px
}

#accordion .card-header.active a:after {
    content: "\eab9";
    color: #fff
}

#accordion .card-header a {
    font-weight: 600;
    font-size: 18px;
    display: block
}

#accordion .collapse.show,
#accordion .card-body {
    background-color: #2273f8;
    color: #fff;
    border-radius: 0 0 10px 10px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-size: 14px;
    line-height: 24px
}

.faq-img img {
    max-width: 300px;
    margin-top: 10px
}

/*-------------------------------------------------------------------------------------
   Contact Area
---------------------------------------------------------------------------------------*/

#contact-area {
    padding: 90px 0 85px;
    background-image: url(../images/map.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fafafa
}

.contact-info {
    padding: 0 0 0 15%;
}

.contact-info-single {
    margin: 0 0 30px;
    overflow: hidden
}

.contact-info-single .icon {
    width: 25%;
    float: left;
    margin-right: 10px;
    text-align: center
}

.contact-info-single .content {
    width: 70%;
    float: left;
}

.contact-info-single i {
    font-size: 30px;
    color: #2273f8;
    border: 1.2px solid #2273f8;
    border-radius: 4px;
    width: 55px;
    height: 55px;
    display: inline-block;
    line-height: 55px
}

.contact-info-single p {
    font-size: 15px;
    color: #555
}

.contact-form input {
    height: 50px;
    border: 1px solid #e6f0fa;
    font-size: 14px
}

.contact-form textarea {
    border: 1px solid #e6f0fa;
    padding-top: 12px;
    font-size: 14px
}

.contact-form button {
    background-color: #2273f8;
    border: 0;
    color: #fff;
    padding: 10px 30px;
    border-radius: 4px;
    outline: 0;
    cursor: pointer
}

.contact-form button:hover {
    background-color: #0857d8;
}

.help-block.with-errors li {
    color: #ff0000;
    margin: 4px 0 0;
}

.messages {
    margin: 15px 0 0
}

.messages button {
    color: #000;
    padding: 0;
    background-color: transparent
}

.messages button:hover {
    background-color: transparent
}

/*-------------------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------------------*/

#footer {
    padding: 65px 0 0;
    background-color: #1c1c1c;
    overflow: hidden
}

#footer h4 {
    color: #fff;
    font-weight: 700;
    margin: 0 0 15px
}

.footer-social-icons ul li {
    display: inline-block;
}

.footer-social-icons ul li a {
    display: block;
    background-color: #2273f8;
    color: #fff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 16px;
    line-height: 45px;
    margin: 0 2px
}

.footer-social-icons ul li a:hover {
    background-color: #fff;
    color: #2273f8;
}

#footer p {
    color: #fff;
    padding: 30px 0 50px;
    text-align: center;
}

#footer p a {
    color: #2273f8
}

#footer p a:hover {
    color: #0857d8
}

/* Override navbar link color */
.navbar-nav .nav-item .nav-link {
    font-weight: 700;
    font-size: 15px;
    padding: 0 12px;   /* tighter spacing */
    color: #000 !important; /* black font */
    letter-spacing: 1px; /* reduced gap between letters */
}

/* Keep hover/active colors distinct */
.nav-item .nav-link:hover,
.nav-item .nav-link.active {
    color: #2273f8 !important; /* your brand blue */
}

/* Sticky header (when scrolled) */
#header.sticky .nav-item .nav-link {
    color: #000 !important;
}

/* ===== NAV + HERO TIGHTENING ===== */
#header{
  margin-bottom:0 !important;
  padding:0 !important;
}

/* Kill the big vertical-centering space */
.caption-content{
  height:auto !important;          /* was 100vh in the theme */
  padding-top:8px !important;
}

/* Keep a tiny cushion before the hero text */
#home-area{
  margin-top:0 !important;
  padding-top:12px !important;
}

#home-area h1 {
    color: #000 !important;
    font-weight: 800;
}

#home-area p {
    color: #000 !important;
}

/* Tagline: 3 stacked lines + smaller size */
.tagline{
  color:#0a1f44;
  margin:6px 0 2px;
  font-weight:800;
}
.tagline .line{
  display:block;
  font-size:clamp(24px, 3.4vw, 34px); /* slightly smaller */
  line-height:1.2;
  letter-spacing:.02em;
}

/* Make both the title and the subtext black per request */
#home-area h1,
#home-area p{
  color:#000 !important;
}

/* ===========================
   TruShelf: consolidated overrides
   =========================== */
:root { --accent:#2273f8; }

/* Header: fixed, visible on load */
#header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  background:#fff !important;
  padding:10px 0 !important;
  margin:0 !important;
  z-index:1000 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* Navbar links: black by default, blue on hover/active */
.navbar-nav .nav-item .nav-link{
  color:#000 !important;
  padding:0 12px;
  font-weight:700;
  letter-spacing:1px;
}
.nav-item .nav-link:hover,
.nav-item .nav-link.active{
  color:var(--accent) !important;
}

/* Hero: sit below fixed header; remove theme's 100vh gap */
#home-area{
  background:#f7f9fc;
  height:auto !important;
  margin-top:0 !important;
  padding-top:90px !important;  /* adjust 80–100px if your header height changes */
}
.caption-content{
  height:auto !important;        /* cancel theme's 100vh */
  padding-top:8px !important;
}

/* Hero text colors + tagline (3 lines) */
.site-title{ color:#000; font-weight:800; }
#home-area p{ color:#000 !important; }

.tagline{
  color:#0a1f44;
  margin:8px 0 2px;
  font-weight:800;
}
.tagline .line{
  display:block;
  font-size:clamp(22px,3.1vw,32px);
  line-height:1.2;
  letter-spacing:.02em;
}

/* Section rhythm + subtle alternation */
.section-pad{ padding:56px 0; }
#shop-assist   { background:#f9fafc; }
#shelf-assist  { background:#f1f5f9; }
#operations    { background:#f9fafc; }

/* Compact spacing for download buttons */
#home-area .btn-success {
  background-color: #28a745 !important; /* Bootstrap green */
  border-color: #28a745 !important;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 18px;
  margin: 0 !important;
}
#home-area .btn-success + .btn-success {
  margin-top: 10px !important; /* small gap between iOS & Android */
}

/* Remove gap after hero subtitle */
#home-area p.muted {
  margin-bottom: 8px !important;  /* reduce space below paragraph */
}

/* Remove extra top margin above buttons in hero */
#home-area .mt-3 {
  margin-top: 8px !important;   /* tighten gap after subtitle */
}

/* Already set: small bottom spacing between stacked buttons */
#home-area .mt-3 a {
  margin-right: 8px !important;   /* smaller side gap */
  margin-bottom: 6px !important;  /* consistent vertical spacing */
}

/* Download button hover → black */
#home-area .btn-success:hover {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* Dropdown download menu items hover → black */
.dropdown-menu .dropdown-item:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* Remove Bootstrap's .mr-2 creating extra gap */
#home-area .btn-primary.mr-2 {
  margin-right: 8px !important;   /* override default 16px */
}

/* Align stacked download buttons consistently */
#home-area .btn-success.btn-block {
  width: auto;          /* prevent full-width stretch */
  display: inline-block;
}

/* Flex gap for hero buttons */
#home-area .mt-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;               /* equal spacing between all buttons */
  margin-top: 8px !important;
}

#home-area .mt-3 .btn {
  margin: 0 !important;   /* remove Bootstrap’s default margins */
}

#home-area .d-flex.gap-2 {
  gap: 10px;              /* even spacing between buttons */
}

.hero-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Hero image: never overflow, always scale */
.hero-image { 
  width: 100%;
  overflow: hidden;            /* clip anything accidental */
}
.hero-image img {
  width: 100% !important;      /* fill the column width */
  max-width: 100% !important;  /* never exceed the column */
  height: auto !important;     /* keep aspect ratio */
  display: block;
  margin: 0 auto;
}

/* Tight mobile stacking and spacing */
@media (max-width: 767.98px) {
  #home-area .row.align-items-center {
    gap: 12px;                  /* small space between text and image */
  }
}


/* --- Reduce vertical gaps between sections --- */
.section-pad {
  padding-top: 40px !important;   /* was 64px+ */
  padding-bottom: 40px !important;
}

#home-area {
  padding-bottom: 40px !important; /* tighten gap after hero image */
}

/* Remove big margins under rows */
#shop-assist .row.mb-3,
#shelf-assist .row.mb-3,
#operations .row.mb-3 {
  margin-bottom: 20px !important;
}

#shop-assist .col-lg-4.mb-4,
#shelf-assist .col-lg-4.mb-4,
#operations .col-lg-4.mb-4 {
  margin-bottom: 20px !important;
}

/* Force image before text on small screens */
@media (max-width: 767.98px) {
  #home-area .row.align-items-center { display: flex; flex-wrap: wrap; }
  #home-area .hero-image { order: -1; }           /* image first */
}