/*--------------------------------------------------------------------------------------
Theme Name: SMART PRODUCT LANDING
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Product Landing HTML template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: BDEXPERT
Version: 1.0
----------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 SIDE PUSH MENU AREA
        2.3 WELCOME TEXT AREA
    3. ABOUT AREA
    4. FEATURES AREA
    5. PRODUCT AREA
    6. CLIENT AREA
    7. SUBSCRIBER AREA
    8. CONTACT AREA
    8. GALLERY AREA
    9. VIDEO AREA
    10. FOOTER AREA
    11. SCROLL TO TOP
    12. PRELOADER
----------------------------------------------------------------------------------------*/


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

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Josefin+Sans:400,600,700');
.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

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

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

button:focus {
    outline: 0;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'Josefin Sans', sans-serif;
    text-transform: capitalize;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    color: #494949;
    background-color: #DFFFD6;
}

a {
    color: #494949;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

.navbar-header .collapse,
.navbar-toggle {
    border: 2px solid white;
    border-radius: 0;
}

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


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

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

.area-title p {
    margin-bottom: 0;
}

.section-padding {
    padding: 100px 0;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.margin-bottom {
    margin-bottom: 50px;
}

.margin-top {
    margin-top: 50px;
}

.gray-bg {
    background: #F3F3F3;
    color: #5b5a5a
}

.light-gradient-bg {
    background: rgba(0, 0, 0, 0) -webkit-radial-gradient(#009cde, #00b2da) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) radial-gradient(#009cde, #00b2da) repeat scroll 0 0;
    color: #fff;
}

.dark-gradient-bg {
    background: #DFFFD6;
    background: #DFFFD6;
    color: #fff;
}

.dark-gradient-bg .area-title:after {
    background: #009cde;
}

.dark-gradient-bg a {
    color: #fff;
}

.attachment-area {
    padding: 50px 0;
    padding-bottom: 10px;
    background: #DFFFD6;
}

.single-attachment {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #4A5D23;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.attachment-img img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.attachment-info h3 {
    margin-top: 15px;
    font-size: 18px;
    color: #4A5D23;
}

.buy-now {
    display: inline-block;
    background: #4A5D23;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    margin-top: 10px;
}

.buy-now:hover {
    background: #333;
}
/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
    height: 100%;
    position: relative;
    width: 100%;
}

.top-area-bg {
    background-image: url("img/slider/slide_8.jpg");
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.top-area-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 16%); 
    z-index: 1;
}

.top-area-bg * {
    position: relative;
    z-index: 2;
}


.top-area-bg::after {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}


/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

.mainmenu-area {
    position: relative;
    z-index: 9999;
}

.mainmenu-area-bg {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
}

.is-sticky .mainmenu-area-bg {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    opacity: 1;
}

.navbar {
    border-bottom: 0 none;
    border-top: 0 none;
    margin-bottom: 0;
    background-color: #4A5D23;
}

.navbar-header {
    margin-top: 25px;
    background-color: #4A5D23;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky .navbar-header {
    margin-top: 6px;
}

.navbar-brand {
    padding: 0;
    margin-left: 5px;
}

.navbar-brand>img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

a.navbar-brand {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: inherit;
    text-transform: uppercase;
}

.navbar-brand {
    height: auto;
    margin-top: -6px;
}

ul#nav {
    float: right;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul#nav li {
    overflow: hidden;
    padding: 40px 15px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul#nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #ffffff;
    font-family: "Josefin Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky ul#nav li {
    padding: 20px 15px;
}

.is-sticky ul#nav li a {
    color: #000000;
}

ul#nav li a::before,
ul#nav li a::after {
    background: #009cde none repeat scroll 0 0;
    bottom: -13px;
    content: "";
    height: 2px;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0%;
}

ul#nav li a::after {
    bottom: -9px;
    width: 0%;
}

ul#nav li.active a::before,
ul#nav li.active a::after {
    opacity: 1;
    width: 100%;
}

ul#nav li.active a::after {
    width: 50%;
}

ul#nav li:hover a::before,
ul#nav li:hover a::after {
    left: auto;
    opacity: 1;
    right: 0;
    width: 100%
}

ul#nav li.active:hover a::before,
ul#nav li.active:hover a::after {
    left: 0;
}

ul#nav li:hover a::after {
    width: 50%;
}

.is-sticky .mainmenu-area {
    z-index: 99999;
}

.side-push-menu {
    color: #fff;
    float: right;
    height: 100px;
    padding-left: 20px;
    padding-top: 35px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 60px;
}

.push-menu-open-button {
    background: #fff none repeat scroll 0 0;
    color: #009cde;
    cursor: pointer;
    font-size: 20px;
    height: 30px;
    padding-top: 3px;
    position: absolute;
    right: 0;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
}

.push-menu-open-button:hover {
    color: #ffffff;
    background: #009cde;
}

.push-menu-open-button::before {
    border-left: 1px dashed;
    content: "";
    height: 100%;
    left: -20px;
    position: absolute;
    top: 0;
    width: 1px;
}

.is-sticky .push-menu-open-button {
    background: #000 none repeat scroll 0 0;
}

.is-sticky .push-menu-open-button:hover {
    background: #009cde none repeat scroll 0 0;
}

.is-sticky .side-push-menu {
    padding-top: 15px;
    height: 60px;
}

.shoping-curt {
    color: #fff;
    float: right;
    font-size: 25px;
    height: 100px;
    padding: 35px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
}

.is-sticky .shoping-curt {
    height: 60px;
    padding: 15px 35px;
    color: #000000;
}

.shoping-curt-button {
    cursor: pointer;
    height: 30px;
    left: 50%;
    margin-left: -15px;
    position: absolute;
    width: 30px;
}

.shoping-curt:hover .shoping-curt-button {
    color: #009cde;
}

.shoping-curt-button::after {
    background: #009cde none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    content: "2";
    font-size: 12px;
    height: 20px;
    line-height: 1.5;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 20px;
}

.shoping-curt ul {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 3px 6px #333;
    font-size: 15px;
    list-style: outside none none;
    margin: 0;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 100px;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 250px;
    opacity: 0;
    z-index: 9;
}

.shoping-curt:hover ul {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
}

.cart-items>div {
    border-bottom: 1px dashed #009cde;
    padding: 15px 10px;
}

.cart-items>div:last-child {
    border-bottom: 0 none;
    padding: 0;
}

.cart-item {
    padding-left: 80px !important;
    position: relative;
}

.cart-img {
    left: 0;
    position: absolute;
    top: 5px;
    width: 70px;
}

.cart-content a {
    color: #494949;
}

.cart-content a:hover {
    color: #009cde;
}

.shoping-curt .total {
    height: 40px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.cart-btn a {
    background: #494949 none repeat scroll 0 0;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 5px 10px;
    text-transform: uppercase;
}

.cart-btn a:hover {
    background: #009cde none repeat scroll 0 0;
}

.cart-btn a:last-child {
    float: right;
}

.pull-right.cart-remove {
    color: #009cde;
    height: 15px;
    position: absolute;
    right: 0;
    width: 15px;
}

.pull-right.cart-remove:hover {
    color: red;
}

.cart-content span {
    display: block;
}

.is-sticky .shoping-curt ul {
    top: 60px;
}


/*-----------------------------------
    2.2 SIDE PUSH MENU AREA
------------------------------------*/

.push-menu-and-content {
    background: #272727 none repeat scroll 0 0;
    color: #fff;
    height: 100%;
    padding: 30px;
    max-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    right: -300px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    z-index: 9999;
}

.push-menu-and-content.menu-open {
    right: 0;
}

.search-bar {
    margin-bottom: 30px;
}

.search-bar form {
    border: 1px solid #555;
    height: 35px;
    position: relative;
    width: 100%;
}

.search-bar form input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    height: 100%;
    letter-spacing: 1px;
    padding: 5px;
    position: absolute;
    width: 100%;
}

.search-bar form button {
    background: #009cde none repeat scroll 0 0;
    border: 0 none;
    height: 35px;
    position: absolute;
    right: -1px;
    top: -1px;
    width: 40px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.search-bar form button:hover {
    background: #ffffff;
    color: #009cde;
}

.push-menu {
    margin-bottom: 40px;
}

.push-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.push-menu ul li {
    display: block;
}

.push-menu ul li a {
    color: #fff;
    display: block;
    font-size: 14px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 5px 0;
    text-transform: uppercase;
}

.push-menu ul li a i {
    float: right;
}

.push-menu ul li a:hover,
.push-menu ul li a:focus {
    color: #009cde;
}

.push-menu-close {
    background: #009cde none repeat scroll 0 0;
    color: #fff;
    cursor: pointer;
    font-size: 35px;
    height: 40px;
    left: 0;
    padding-top: 3px;
    position: absolute;
    text-align: center;
    top: 24px;
    width: 40px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.push-menu-close:hover {
    background: #fff none repeat scroll 0 0;
    color: #009cde;
}

.push-menu-logo {
    margin-bottom: 40px;
    text-align: center;
}

.push-menu-logo img {
    max-width: 70%;
}

.smart-img-and-about-content {
    margin-bottom: 40px;
}

.smart-img-and-about-content img {
    margin-bottom: 30px;
}

.push-menu-and-content .smart-social-bookmark {
    margin-bottom: 20px;
}

.push-menu-and-content .smart-social-bookmark ul {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.push-menu-and-content .smart-social-bookmark ul li {
    display: inline;
}

.push-menu-and-content .smart-social-bookmark ul li a {
    color: #fff;
    display: inline-block;
    height: 30px;
    text-align: center;
    width: 30px;
}

.push-menu-and-content .smart-social-bookmark ul li a:hover {
    color: #009cde;
}


/*-----------------------------------
    2.3 WELCOME TEXT AREA
-------------------------------------*/

.welcome-text-area {
    -moz-box-pack: center;
    -ms-flex-line-pack: center;
    align-content: center;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: "Josefin Sans", sans-serif;
    font-size: 20px;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1.5em;
    padding-top: 100px;
    width: 100%;
}

.welcome-slider {
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50%;
}

.welcome-text h1,
.welcome-text h2 {
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
    color: #fff;
}

.welcome-text h1 {
    font-size: 50px;
    letter-spacing: 2px;
    margin-bottom: 30px;
    line-height: 70px;
}

.welcome-text h1 span {
    color: #fff;
}

.welcome-text h2 {
    font-size: 36px;
}

.call-to-action {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 15px;
}

.call-to-action a {
    background: #fff none repeat scroll 0 0;
    border-radius: 50px;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 40px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.call-to-action a:hover {
    background: -webkit-radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%);
    background: radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%);
    color: #ffffff;
}

.top-right-text {
    position: absolute;
    top: -10px;
    right: -13px; 
    color: black;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); 
    z-index: 3; 
    background-color: #fff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.swiper-container {
    padding-left: 8.8%;
    padding-top: 100px;
    text-align: right;
    width: 100%;
}

.swiper-slide {
    height: auto;
    padding: 0 15px;
    width: 390px;
}

.swiper-slide img {
    margin: 0 auto;
}

/* Clients Section */
.clients {
    text-align: center;
    padding: 50px 0px;
    padding-bottom: 20px;
    background: #DFFFD6;
    overflow: hidden;
}

.client-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.client-slider {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: slide 20s linear infinite;
}

.client-slider .client {
    max-height: 120px;
    display: flex;
    align-items: center;
    gap: 10px; /* Reduce space between image and text */
    background: #4A5D23;
    padding: 10px 10px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    min-width: 280px; /* Slightly reduce width */
}

.client img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4CAF50;
}

.client-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align text to the left */
    justify-content: center;
    color: #fff;
    font-size: 14px;
}

.client-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px; /* Reduce gap */
}

.stars {
    font-size: 14px; /* Smaller stars */
    color: #FFD700;
    margin-bottom: 3px;
}

.client p {
    font-size: 12px;
    color: #fff;
    text-align: left;
    margin: 0;
    line-height: 1.2; /* Reduce space between lines */
}


@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }  /* Only move half, to loop */
}


/*-----------------------------
    3. ABOUT AREA
-------------------------------*/
.about-content {
    background-color: #4A5D23; /* Same as body background */
    padding: 20px; /* Creates space inside the box */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    display: inline-block; /* Makes it fit the content width */
}
 
.row.top-promo {
    margin: 0;
}

.row.top-promo>.col-lg-3 {
    padding: 0;
}

.single-promo {
    margin-bottom: 50px;
    min-height: 260px;
    overflow: visible;
    -webkit-perspective: 800px;
    perspective: 800px;
    position: relative;
    text-align: center;
}

.promo-icon-and-title,
.promo-details {
    background: #4A5D23;
    background: #4A5D23;
    box-shadow: 0 0 3px;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    overflow: hidden;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 100%;
    border-radius: 20px;
}

.promo-details>img {
    opacity: 0.5;
    position: absolute;
    right: -100%;
    top: 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    z-index: -1;
}

.single-promo:hover .promo-details>img {
    right: -37%;
}

.promo-details {
    opacity: 0;
    /* -webkit-transform: translateY(150px) rotateX(-90deg);
    transform: translateY(150px) rotateX(-90deg);*/
    z-index: 1;
    border-radius: 20px;
}

.single-promo:hover .promo-icon-and-title {
    opacity: 0;
    /* -webkit-transform: translateY(-150px) rotateX(90deg);
    transform: translateY(-150px) rotateX(90deg);*/
}

.single-promo:hover .promo-details {
    opacity: 1;
    /*-webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);*/
}

.single-promo:hover .promo-icon,
.single-promo:hover h3 {
    color: white;
}

.promo-icon {
    font-size: 60px;
    height: 80px;
    margin: 0 auto 20px;
    padding-top: 30px;
    position: relative;
    text-align: center;
    width: 80px;
}

.single-promo h3 {
    font-size: 24px;
    letter-spacing: 2px;
    color: white;
}

.about-flow-content {
    text-align: center;
}

.about-content h3 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #fff;
}

.about-content h3 span {
    font-weight: 300;
}

.about-flow-menu {
    margin-bottom: 30px;
    margin-top: 30px;
}

.about-flow-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.about-flow-menu ul li {
    display: inline;
}

.about-flow-menu ul li a {
    display: inline-block;
    margin-right: 10px;
    max-width: 125px;
    position: relative;
}

.about-flow-menu ul li.active a {
    opacity: .5;
}

.about-right {
    float: right;
}

.about-left {
    float: right;
}


/*----------------------------
    4. FEATURES AREA
-----------------------------*/

.features-area {
    overflow: hidden;
    counter-reset: features;
}

.row.features-list {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
}

.area-title-icon {
    color: #009cde;
    font-size: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 80px;
}

.area-title h2 {
    font-size: 36px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 31px;
    padding-bottom: 15px;
    position: relative;
}

.area-title h2 span {
    font-weight: 700;
    color: black;
}

.area-title h2::after,
.area-title h2::before {
    background: #4A5D23;
    bottom: -5px;
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -50px;
    position: absolute;
    width: 100px;
}

.area-title h2::before {
    bottom: 3px;
    margin-left: -25px;
    width: 50px;
}

.area-title {
    margin-bottom: 80px;
}

.single-features {
    background: linear-gradient(to bottom, #4A5D23, #DFFFD6);
    border: 2px solid #4A5D23;
    border-radius: 30px;
    border-bottom-right-radius: 0px;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 5px 5px 5px 5px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.features-icon {
    height: 100px;
    left: 0;
    padding-top: 30px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100px;
}

.features-icon {
    color: #009cde;
    font-size: 60px;
    height: 100px;
    left: 0;
    padding-top: 47px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100px;
}

.single-features h3 {
    font-size: 20px;
    text-transform: capitalize;
    color: #F1F1F1;
}

.single-features::before {
    background: #4A5D23;
    background: #4A5D23;
    border-radius: 50%;
    color: #fff;
    content: counter(features, decimal);
    counter-increment: features;
    font-size: 22px;
    height: 35px;
    left: -15px;
    line-height: 1.6;
    margin-top: 5px;
    position: absolute;
    text-align: center;
    top: -17.5px;
    width: 35px;
}

.single-features:hover {
    box-shadow: 0 0 39px #ebebeb;
}

.features-img {
    position: relative;
    width: 100%;
}

.features-img img {
    display: block;
    margin: 50px auto 0;
}

.features-img ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.white-text {
    color: white;
}

.green-text {
    color: #4A5D23; /* Dark green color */
}
/*----------------------------
    5. PRODUCT AREA
------------------------------*/

.product-area {
    position: relative;
}

.product-area-bg {
    background: rgba(0, 0, 0, 0) url("img/product/product_area_bg.html") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.product-area-bg::after {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

.single-product {
    background: #fff;
    background: #fff;
    color: #009cde;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    padding-top: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    border-radius: 20px;
    border: 2px solid #4A5D23;
}

.product-img {
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.product-img::after {
    background: #fff;
    bottom: -25px;
    content: "";
    height: 70px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.product-img img {
    max-height: 280px;
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

.product-img .secondary-img {
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
}

.single-product:hover .primary-img,
.single-product:hover .secondary-img {
    opacity: 0;
    visibility: hidden;
}

.single-product:hover .secondary-img {
    opacity: 1;
    visibility: visible;
}

.product-name-and-specification {
    background: #fff none repeat scroll 0 0;
    padding-bottom: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    margin-bottom: 0px;
}

.single-product .price {
    color: #4A5D23;
    font-size: 28px;
    letter-spacing: 2px;
}

a.add-to-cut {
    background: #4A5D23;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    letter-spacing: 2px;
    margin-top: 10px;
    padding: 10px 40px;
    text-transform: uppercase;
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.single-product:hover a.add-to-cut {
    bottom: 120px;
    opacity: 1;
}

a.add-to-cut:hover {
    background: #4A5D23;
    color: #fff;
}

.row.product-list {
    display: block;
    margin: 0 auto;
}

.row.product-list .col-md-3 {
    padding: 5px;
    width: 100%;
}

.product-list.owl-carousel .owl-item img {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}

.product-area .owl-nav {
    display: none;
    margin-top: 30px;
}

.product-area .owl-nav>div {
    color: #DFFFD6;
    display: none;
    font-size: 40px;
    height: 40px;
    margin: 0 10px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
}

.product-area .owl-nav>div:hover {
    background: #DFFFD6 none repeat scroll 0 0;
    color: #fff;
}


/*-----------------------------
    6. CLIENT AREA
------------------------------*/

.client-area .owl-carousel .owl-item img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}


/*-----------------------------
    7. SUBSCRIBER AREA
------------------------------*/

.subscriber-area {
    color: #ffffff;
    font-family: josefin sans;
    position: relative;
}

.subscriber-area.section-padding {
    padding: 150px 0;
}

.subscriber-area-bg {
    background: rgba(0, 0, 0, 0) url("img/subscriber_bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-area-bg::after {
    background: rgba(0, 0, 0, 0) -webkit-radial-gradient(circle farthest-side at center bottom, #4A5D23, #4A5D23 125%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) radial-gradient(circle farthest-side at center bottom, #4A5D23, #4A5D23 125%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-bg-left {
    left: -20%;
    position: absolute;
    top: -25%;
}

.subscriber-area .area-title h2 {
    color: #ffffff;
}

.subscriber-area .area-title h2::after,
.subscriber-area .area-title h2::before {
    background: #ffffff none repeat scroll 0 0;
}

.subscriber-left-content,
.subscriber-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100px;
}

.subscriber-left-content h3,
.subscriber-left-content h2 {
    color: #fff;
    font-size: 30px;
    letter-spacing: 2px;
    position: relative;
}

.subscriber-left-content h2 {
    font-weight: 700;
}

.subscriber-left-content h3::before,
.subscriber-left-content h2::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: -10px;
    width: 50px;
}

.subscriber-left-content h2::before {
    bottom: -10px;
    left: auto;
    right: 0;
    top: auto;
    width: 30%;
}

.subscriber-form p {
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: capitalize;
}

.subscriber-form form {
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    height: 50px;
    position: relative;
    width: 100%;
}

.subscriber-form form input {
    background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0;
    border: 0 none;
    color: #009cde;
    height: 100%;
    left: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-form form button {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    color: #4A5D23;
    font-weight: 700;
    height: 100%;
    letter-spacing: 5px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 30%;
}

.subscriber-form form button:hover {
    background: #4A5D23 none repeat scroll 0 0;
    color: #fff;
}

label.mt10 {
    position: absolute;
    right: 0;
    text-align: right;
    top: -28px;
    right: 10px;
}

label.mt10.valid {
    color: #009cde;
    text-align: center;
    right: auto;
    top: 10px;
    width: 100%;
}


/*-----------------------------
    8. CONTACT AREA
------------------------------*/

.contact-form {
    font-family: "Josefin Sans", sans-serif;
}

.contact-form-area .modal-header {
    background: #009cde none repeat scroll 0 0;
    letter-spacing: 2px;
    text-align: center;
}

.contact-form .form-control {
    border: 1px solid #009cde;
    border-radius: 0;
    color: #009cde;
    font-size: 15px;
    height: auto;
    margin-bottom: 20px;
    max-height: 150px;
    padding: 10px;
}

.contact-form button {
    background: #009cde none repeat scroll 0 0;
    border: 0 none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px;
    width: 100%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    text-transform: uppercase;
}

.contact-form button:hover {
    background: #494949 none repeat scroll 0 0;
}

.contact-form-area .modal-header h4 {
    color: #fff;
}


/*-----------------------------
    8. GALLERY AREA
------------------------------*/
.swiper-container.gallery-swiper {
    padding-left: 0;
    padding-top: 0;
    background-image: url("img/promo1/12.png"); 
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .swiper-container.gallery-swiper {
        background-size: cover; 
        background-attachment: scroll; 
        background-size: 100% auto;
    }
}

/*-----------------------------
    9. VIDEO AREA
------------------------------*/

.video-area {
    position: relative;
}

.video-area-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.video-area-bg::after {
    background: rgba(0, 0, 0, 0) -webkit-radial-gradient(circle farthest-side at center bottom, #DFFFD6, #4A5D23 125%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) radial-gradient(circle farthest-side at center bottom, #DFFFD6, #4A5D23 125%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
}

.video-popup {
    min-height: 250px;
    position: relative;
}

.video-popup a {
    color: #fff;
    display: inline-block;
    font-size: 50px;
    height: 70px;
    left: 50%;
    padding-left: 6px;
    padding-top: 10px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 70px;
}

.player-wave {
    height: 200px;
    left: 50%;
    margin-left: -125px;
    margin-top: -125px;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 200px;
    z-index: -1;
}

.player-wave .waves {
    -webkit-animation: 3s ease-in-out 0s normal none infinite running waves;
    animation: 3s ease-in-out 0s normal none infinite running waves;
    background: rgba(0, 204, 204, 0.6) none repeat scroll 0 0 padding-box;
    border-radius: 50%;
    height: 250px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 250px;
}

.player-wave .wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.player-wave .wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.player-wave .wave-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@-webkit-keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
    }
}

@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
    }
}

.video-popup a:hover .player-wave .waves {
    background: rgba(255, 255, 255, .5);
}


/*-----------------------------
    10. FOOTER AREA
------------------------------*/

.footer-area ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.footer-area a {
    color: #5b5a5a;
}

.footer-area a:hover {
    color: #009cde;
}

.single-footer-widget h4 {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 40px;
    padding-bottom: 15px;
    position: relative;
}

.single-footer-widget h4::after,
.single-footer-widget h4::before {
    background: black none repeat scroll 0 0;
    bottom: -4px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 70px;
}

.single-footer-widget h4::before {
    bottom: 3px;
    width: 35px;
}

.footer-area .row>div:first-child h4 {
    margin-bottom: 10px;
}

.footer-area .row>div:first-child h4::after,
.footer-area .row>div:first-child h4::before {
    display: none;
}

.footer-logo {
    margin-bottom: 10px;
}

.footer-area ul li {
    display: block;
    margin-bottom: 15px;
    padding-left: 40px;
    position: relative;
}

.f_contact_icon {
    font-size: 24px;
    left: 0;
    position: absolute;
}

.footer-area ul li a {
    display: block;
}

ul.footer-list li {
    margin-bottom: 5px;
    padding: 5px 5px 5px 31px;
    position: relative;
}

.footer-area ul li a i {
    font-size: 20px;
    left: 4px;
    padding-right: 5px;
    position: absolute;
    top: 8px;
}

.flick-feed ul li {
    display: inline;
    padding: 0;
}

.flick-feed ul li a {
    display: inline-block;
    margin-right: 5px;
    width: 100px;
}

.flicker-popup>img {
    display: block;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center center 0;
    transform-origin: center center 0;
}

.footer-bottom-area {
    padding: 15px 0;
    background-color: #4A5D23;
}

.footer-copyright-social-bookmark ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 10px;
}

.footer-copyright-social-bookmark ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.footer-copyright-social-bookmark ul li a {
    display: inline-block;
    font-size: 20px;
    height: 35px;
    margin: 0 2px;
    padding-top: 3px;
    text-align: center;
    width: 38px;
}

.footer-copyright-social-bookmark ul li a i {
    margin: inherit;
    padding: inherit;
    position: inherit;
}

.footer-copyright-social-bookmark ul li a:hover {
    color: #009cde;
}

.footer-copyright p {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.footer-bottom-area.dark-gradient-bg a:hover {
    color: #00cccc;
}

.footer-bottom-area.dark-gradient-bg a {
    color: #fff;
}


/*------------------------------
    11. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
    background: #4A5D23 none repeat scroll 0 0;
    bottom: 20px;
    box-shadow: 0 0 0 7px transparent;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 7px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 99;
}

a.scrolltotop:hover {
    box-shadow: 0 0 0 0 #272727;
    background: #272727;
}


/*-----------------------------
    12. PRELOADER
------------------------------*/

.preloader-spinner {
    border: 5px solid #4A5D23;
}

.feature-image {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: -20px auto;
}
.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.feature-box {
    background: linear-gradient(to bottom, #FFA726, rgba(250, 245, 228, 0.6));
    padding: 8px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
/*-----------------------------
    HOME CAROUSEL VERSION
-------------------------------*/

.home-carousel .top-area-bg,
.home-features .top-area-bg {
    background-image: url("img/slider/slide_8.jpg");
}

.home-carousel .top-area-bg::after,
.home-features .top-area-bg:after {
    background: rgba(0, 0, 0, 0.5);
}

.home-carousel .home-slider {
    padding-top: 100px;
}

.home-carousel .home-slider .owl-item img {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}

.home-carousel ul#nav li a,
.home-carousel .shoping-curt,
.home-carousel .welcome-text,
.home-features ul#nav li a,
.home-features .shoping-curt,
.home-features .welcome-text {
    color: #fff;
}

.home-carousel .call-to-action a,
.home-features .call-to-action a {
    background: linear-gradient(to bottom, #FF8C00, #FFD700);
    color: #fff;
}

.home-carousel .call-to-action a:hover,
.home-features .call-to-action a:hover {
    background: rgba(0, 0, 0, 0) -webkit-radial-gradient(circle farthest-side at center bottom, #4A5D23, #4A5D23 125%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) radial-gradient(circle farthest-side at center bottom, #4A5D23, #4A5D23 125%) repeat scroll 0 0;
}


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

.home-features .welcome-text-area {
    text-align: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    overflow: hidden;
}

.home-features .welcome-text-area {
    color: #494949;
}

.home-features .welcome-text-area h1 {
    font-weight: 700;
}

.home-features .top-area-bg {
    height: 100%;
}

.top-area-bg.video-bg {
    background: transparent none repeat scroll 0 0;
    height: 100%;
}

.top-area-bg.video-bg::after {
    background: #fff none repeat scroll 0 0;
    opacity: 0.6;
}
/* btn fxid */
.fix-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 48px;
    height: 45px;
    border: 0.2px solid white;;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
    background-color: #4A5D23;
}
.sign {
    width: 100%;
    transition-duration: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sign svg {
    width: 17px;
}
.sign svg path {
    fill: white;
}
.text {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: white;
    font-size: 16px;
    padding-left: 10px;
    font-weight: 600;
    transition-duration: .3s;
}
.fix-btn:hover {
    width: 125px;
    border-radius: 40px;
    transition-duration: .3s;
}
.fix-btn:hover .sign {
    width: 30%;
    transition-duration: .3s;
    padding-left: 20px;
}
.fix-btn:hover .text {
    opacity: 1;
    width: 70%;
    transition-duration: .3s;
    padding-right: 10px;
}
.fix-btn:active {
    transform: translate(2px ,2px);
}
.fixed-button {
    position: fixed;
    right: 20px;
    top: 4.5%;
    z-index: 1000;
    transform: translateY(-50%);
}
.login-box {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4A5D23;
    color: rgb(255, 255, 255);
    width: 140px;
    padding: 10px 10px;
    border-radius: 5px;
    opacity: 0;
    z-index: 100;
    visibility: hidden;
    border: 1px solid green;
    transition: opacity 0.3s ease-in-out;
}
.show {
    opacity: 1 !important;
    visibility: visible !important;
}
.styled-link {
    color: #DFFFD6;
    font-size: 15px;
    font-weight: 600;

    text-decoration: underline;
  }

  .styled-link:hover {
    color: black;
  }

  .push-menu-and-content {
    display: none;
}

.push-menu-and-content.show {
    display: block;
}

.video-section {
    text-align: center;
    padding: 20px 0;
    background: #DFFFD6;
}

.video-container {
    width: 100%;
    height: 630px;
    overflow: hidden;
    white-space: nowrap;
}

.video-slider {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
}

.video-slider::-webkit-scrollbar {
    display: none; 
}

.video-wrapper {
    flex: 0 0 auto;
    width: 85vw; 
    max-width: 660px;
    height: auto;
    border-radius: 15px;
    overflow: hidden;
    background: #000; 
}

.video-wrapper iframe {
    width: 100%;
    height: 650px; 
    border-radius: 15px;
}

@media (max-width: 480px) {
    .video-section {
        padding: 15px 0;
    }

    .video-slider {
        gap: 15px;
        padding: 5px;
    }

    .video-wrapper {
        width: 90vw; 
        max-width: 320px;
    }

    .video-wrapper iframe {
        height: 650px; 
    }
}