/*
Theme Name: The Farm House - One Page Organic Food, Fruit and Vegetables Products HTML5 Template
Theme URI: http://live.envalab.com/html/the-farm-house
Author: ENVALAB TEAM
Author URI: http://envalab.com/
Description: The Farm House – One Page Organic Food, Fruit & Vegetables Products HTML5 Template that perfectly designed for all kinds of organic farming business and Organic Store, including organic food, organic fruits and vegetables, organic farm, agricultural company or basically everything related to eco-friendly lifestyle.
Version: 1.0
*/

/**
 *** Table of Content ***
 * Header area
 * Slider area
 * About area
 * Product area
 * Prices area
 * Portfolio area
 * Faq area
 * Testimonial top area
 * Sponsor area
 * App area
 * Contact area
 * Footer area
 * Scroll top area
 * Only-Text-slider-with-fixed-background-image css
 * Only-Image-slider-with-fixed-Text css
 * Pre Loader Style
**/

/* Header area start */
.farm-navbar-area {
    position: absolute;
    width: 100%;
    z-index: 100;
    transition: 2s;
}
.farm-navbar-area.sticky {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 55;
    transition: 1s;
}
.farm-navbar-area.sticky .menu li a {
    line-height: 80px;
}
.farm-navbar-area.sticky .navbar-brand {
    width: 140px;
}
nav.navbar {
    background: #141414 none repeat scroll 0 0;
    border-radius: 0;
    padding: 0;
}
.navbar-brand {
    padding: 0;
    width: 180px;
    position: absolute;
    top: 0;
}
.menu li a {
    color: #fff;
    font-size: 16px;
    text-transform: capitalize;
    padding: 0 20px 0 0 !important;
    margin-right: 20px;
    position: relative;
    line-height: 100px;
    transition: .4s;
}
.fa-pencil-square-o {
    color: #fff;
    font-size: 19px;
    background: #ff4301;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: .4s;
}
.fa-pencil-square-o:hover {
    background: #fff;
    color: #ff4301;
}
.menu li a::before {
    position: absolute;
    width: 2px;
    height: 2px;
    content: "";
    background: #727272;
    right: 0;
    top: 50%;
    margin-top: -1.5px;
}
.menu li:last-child a::before {
    display: none;
}
.menu li a:hover {
    color: #ff4301;
    text-decoration: underline;
}
.menu li.current-menu-item a {
    color: #ff4301;
    text-decoration: underline;
}
/* Header area end */

/* Slider area start */
.farm-welcome-text {
    color: #fff;
    position: relative;
}
.noslider {
    background: rgba(0, 0, 0, 0) url("IMAGENES/verduras.png ") no-repeat scroll center center / cover;
}
.welcome-text span {
    color: #ff4301;
    text-decoration: underline;
}
.farm-welcome-text::before {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: url(img/cloud-bg.png) no-repeat center center / cover;
    content: "";
    height: 150px;
    z-index: 22;
}
.farm-slider-item img{
    width:100%;
}
.welcome-text-content {
    background: url(img/transparent-bg.png) no-repeat center 55%;
}
.farm-social-icon {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 25;
}
.farm-social-icon a {
    background: #fff none repeat scroll 0 0;
    color: #141414;
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 50px;
    margin-bottom: 11px;
    font-size: 18px;
    transition: .4s;
}
.farm-social-icon a:hover {
    background: #5068ac;
    color: #fff;
    position: relative;
    right: 5px;
}
.farm-social-icon a:last-child {
    margin-bottom: 0;
}
.farm-home-slider-area .slick-prev.fa.fa-angle-left.slick-arrow {
    left: 90px;
}
.farm-home-slider-area .slick-next.fa.fa-angle-right.slick-arrow {
    right: 90px;
}
.farm-home-slider-area .slick-prev.fa.fa-angle-left.slick-arrow,
.farm-home-slider-area .slick-next.fa.fa-angle-right.slick-arrow {
    top:60%;
    color: #FF4301;
    background:rgba(0, 0, 0, .5);
}
.farm-home-slider-area .slick-next.fa.fa-angle-right.slick-arrow:hover,
.farm-home-slider-area .slick-prev.fa.fa-angle-left.slick-arrow:hover {
    color:#fff;
}
.big-background-default-image {
    background-image: url(img/welcome-bg.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    width:100%;
    height:100%;
    z-index:0;
    backface-visibility:hidden
}
/* slider area end */

/* start about us area */
.farm-about-us {
    padding-top: 80px;
    padding-bottom: 115px;
}
h2.content-title,
h2.content-subtitle {
    color: #ff4301;
}
.farm-about-content h3 {
    color: #333333;
    margin-bottom: 40px;
    font-size: 18px;
}
.farm-about-content h4 span {
    background: #333 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin-right: 20px;
    text-align: center;
    width: 50px;
    position: relative;
}
.farm-about-content span::before {
    border: 1px solid #535353;
    border-radius: 50%;
    content: "";
    height: 85%;
    left: 7.5%;
    position: absolute;
    top: 7.5%;
    width: 85%;
}
.farm-about-content h4 {
    margin-bottom: 20px;
    font-size: 18px;
}
h2.content-title {
    position: relative;
    text-transform: capitalize;
    margin-bottom: 23px;
}
h2.content-title::before {
    background: #f3f3f3 none repeat scroll 0 0;
    content: "";
    height: 2px;
    margin-top: -1px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 40%;
}
.contact-botton a {
    background:  #458e0a none repeat scroll 0 0;
    box-shadow: 7px 7px 0 #d6d6d6;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    padding: 12px 40px;
    margin-top: 30px;
    transition: .4s;
    text-transform: capitalize;
}
.contact-botton a:hover {
    background: #ff4301 none repeat scroll 0 0;
}
.farm-about-us .contact-botton a {
    background: #458e0a;
    box-shadow: 7px 7px 0 #ffd9cc;
}
.farm-about-us .contact-botton a:hover {
    background: #000;
}
/* start about us end */

/* product area start*/
#product .farm-product-slider .col-md-6 {
	float: left;
}
.farm-latest-products .farm-section-title {
    background:none;
}
.farm-section-title h2 {
    background: url(img/title-bg.png) no-repeat center center;
}
.farm-section-title h4 {
    margin-top: 10px;
}
.farm-latest-products {
    background: #f7f7f7;
    position: relative;
    padding-top: 145px;
    padding-bottom: 95px;
}
.farm-single-product div {
    display: inline-block;
    vertical-align: middle;
}
.farm-single-product img {
    display: inline-block;
    vertical-align: middle;
}
.farm-single-product {
    background: #fefbfb none repeat scroll 0 0;
    height: 240px;
    line-height: 248px;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    transition: .4s;
}
.farm-single-product::before {
    background: #333333 none repeat scroll 0 0;
    content: "";
    height: 170%;
    position: absolute;
    right: -25%;
    top: -69%;
    transform: rotate(-34deg);
    width: 70%;
}
.product-free {
    left: 110px;
    position: relative;
}
.product-select .col-md-6:nth-child(even) .farm-single-product::before {
    background: #333333;
}
.farm-section-title {
    margin-bottom: 65px;
}
.farm-latest-products::before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(img/latest-product-bg.png) no-repeat center center;
    content: "";
    background-attachment: fixed;
}
.hover-product {
    left: -100%;
    position: absolute;
    top: 0;
    transition: .4s;
}
.hover-product a {
    background: #ff4301 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    line-height: normal;
    padding: 8px 40px;
    font-family: 'Just Another Hand', cursive;
    font-size: 40px;
    -webkit-box-shadow: 8px 8px 0px rgba(255, 67, 1, 0.2);
    -moz-box-shadow: 8px 8px 0px rgba(255, 67, 1, 0.2);
    box-shadow: 8px 8px 0px rgba(255, 67, 1, 0.2);
}
.farm-single-product:hover .hover-product {
    left: 10%;
}
.product-select .col-md-6:nth-child(odd) .farm-single-product:hover {
    border: 2px solid #ff4301
}
.product-select .col-md-6:nth-child(even) .farm-single-product:hover {
    border-color: #ff4301
}
.farm-product-slider .slick-dots {
    margin-top: 50px;
}
.slick-dots {
    text-align: center;
}
.slick-dots li {
    display: inline-block;
}
.slick-dots li button {
    background: #d9d9d9 none repeat scroll 0 0;
    border-radius: 50px;
    font-size: 0;
    height: 8px;
    margin-right: 5px;
    width: 30px;
	cursor: pointer;
}
.slick-dots li.slick-active button {
    background: #787878;
}
/* product area end */

/* prices area start */
.farm-pricing-list{
    padding-top: 100px;
    padding-bottom: 100px;
}
.table-heading {
  background: #333333 none repeat scroll 0 0;
  color: #fff;
    font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
}
.farm-pricing-table tbody {
    padding: 10px 20px;
}
.farm-pricing-table tbody tr {
    border-bottom: 2px solid #f7f7f7;
}
.farm-pricing-table tbody tr:last-child{
    border-bottom:none;
}
.farm-pricing-table table {
    width: 100%;
    border: 2px solid #f7f7f7
}

/* Mejorar presentación de la tabla de precios: permitir textos largos en la columna NOMBRE */
.farm-pricing-table table {
    table-layout: auto; /* permitir que las columnas se ajusten al contenido (mostrar precios completos) */
    width: 100%;
}
.farm-pricing-table th,
.farm-pricing-table td {
    word-wrap: break-word;
    white-space: normal; /* permitir salto de línea */
    vertical-align: middle;
}
.farm-pricing-table th:nth-child(1),
.farm-pricing-table td:nth-child(1) {
    /* columna NOMBRE más ancha */
    width: 68%;
}
.farm-pricing-table th:nth-child(2),
.farm-pricing-table td:nth-child(2) {
    width: 20%;
    text-align: left;
}
.farm-pricing-table th:nth-child(3),
.farm-pricing-table td:nth-child(3) {
    width: 12%;
    text-align: left;
}
.farm-pricing-table td {
    padding:13px 16px;
}
.farm-pricing-table th {
    padding: 11px 16px;
}
.farm-pricing-table tr {
    position: relative;
}
.farm-pricing-table tr::before {
    background: #ddd none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 90%;
    left: 5%;
}
.farm-pricing-table tr:first-child::before,
.farm-pricing-table tr:last-child::before {
    opacity: 0;
}
.farm-pricing-table tr td:last-child {
    color: #8f8f8f;
}

/* Compact table: smaller font, tighter padding and thin separators */
.farm-pricing-table th,
.farm-pricing-table td {
    font-size: 13px; /* más compacto */
    line-height: 1.2;
}
.farm-pricing-table td:nth-child(2),
.farm-pricing-table td:nth-child(3),
.farm-pricing-table th:nth-child(2),
.farm-pricing-table th:nth-child(3) {
    white-space: nowrap; /* mantener precio en una sola línea */
    word-break: normal; /* evitar cortes por carácter */
    overflow: visible; /* mostrar precio completo */
    text-overflow: clip;
    text-align: right;
    padding-right: 12px;
}

/* Proporciones de columnas para dar más espacio a la columna de precio */
.farm-pricing-table col:nth-child(1) { width: 65%; }
.farm-pricing-table col:nth-child(2) { width: 25%; }
.farm-pricing-table col:nth-child(3) { width: 10%; }
.farm-pricing-table td {
    padding: 6px 10px; /* menos padding para filas más juntas */
}
.farm-pricing-table th {
    padding: 8px 10px; /* encabezado más compacto */
}
.farm-pricing-table table {
    border-collapse: collapse;
}

/* filas: separador fino */
.farm-pricing-table tbody tr {
    border-bottom: 1px solid #f0f0f0; /* línea más fina */
}
.farm-pricing-table tbody tr:last-child{
    border-bottom:none;
}
.farm-price-content h2 {
    margin-top:15px;
    margin-bottom:25px;
}
.farm-price-content h4 {
    line-height: 30px;
    margin-bottom: 26px;
}
.farm-price-content .contact-botton a {
    margin-top: 20px;
}
.farm-price-content h2.content-title::before {
    width: 55%;
}
/* prices area end */

/* portfolio area start */
.farm-portfolio-section {
    background-color: #333333;
    background-image: url(img/product-gallery-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    padding-top: 150px;
    padding-bottom: 40px; /* reducido para menos espacio debajo de la galería */
}
.farm-portfolio-section .farm-section-title {
    margin-bottom: 35px;
}
.farm-portfolio-section .farm-section-title h2 {
    background:none;
}
.farm-portfolio-section .farm-section-title {
    color: #458e0a;
    background: url(img/project-title.png) no-repeat center center;
}
.farm-project-nav {
    color: #fff;
    font-size: 23px;
    margin-bottom: 40px;
    text-align: center;
}
.farm-portfolio-section .farm-project-nav {
    width: 100%;
}
.farm-project-nav li {
    display: inline-block;
    text-transform: capitalize;
    transition: .4s;
    margin-right: 35px;
}
.farm-project-nav li:last-child {
    margin-right: 0
}
.farm-project-nav li:hover,
.farm-project-nav li.active {
    color: #ff4301;
    text-decoration: underline;
    cursor: pointer;
}
.farm-single-project {
    /* Usar layout por Grid: quitar floats/anchos antiguos */
    float: none;
    width: auto;
    box-sizing: border-box;
    height: 320px;
    line-height: 260px;
    margin: 0 0 40px 0; /* el gap del grid controla separación horizontal */
    text-align: center;
    cursor: pointer;
}


/* WhatsApp contact link styles */
.farm-contact-section .contact-content a {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.farm-contact-section .contact-content a .fa-whatsapp {
    color: #25D366;
    font-size: 22px;
}

/* Hover: icono WhatsApp más oscuro y ligera animación */
.farm-contact-section .contact-content a .fa-whatsapp {
    transition: color .18s ease, transform .12s ease;
}
.farm-contact-section .contact-content a:hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.95;
}
.farm-contact-section .contact-content a:hover .fa-whatsapp {
    color: #1AA34A; /* tono más oscuro al pasar el cursor */
    transform: translateY(-1px) scale(1.05);
}


.project-img {
    background: #f1f0f0;
    box-shadow: 7px 7px 1px #454545;
    position: relative;
    overflow: visible;
     margin:5px ;
   
   
}

.farm-project-active::after {
  content: "";
  display: block;
  clear: both;
}


.project-weight {
    background: #a6c290 none repeat scroll 0 0;
    bottom: 0;
    color: #100f0f;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: -80px;
    transition: .4s;
}
.project-weight h3 {
    line-height: 60px;
}
.farm-single-project:hover .project-weight {
    bottom: 0;
}
.farm-single-project > h4 {
    color: #0f0e0e;
    line-height: 0;
    position: relative;
    z-index: 54;
    line-height: 50px;
}
/* portfolio area end */

/* faq area start */
.farm-faqs-section {
    padding-top: 150px;
    padding-bottom: 145px;
}
.farm-house-accourdion {
    margin-top: 40px
}
.card-header a {
    color: #333333;
    font-size: 18px;
    padding: 18px 15px;
    display: block;
}
.card-body {
    background: #f3f3f3 none repeat scroll 0 0;
    color: #333;
    font-size: 15px;
}
.card-header.active a {
    color:#989898;
}
.card-header a[aria-expanded="true"] {
    color:#989898;
}
.card-header a[aria-expanded="true"]::before {
    content: "\f107";
    line-height: 20px;
}
.card-header a {
    position: relative;
}
.card-header a::before {
    position: absolute;
    content: "\f105";
    font-family: fontawesome;
    right: 0;
    width: 20px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    background: #ff4301;
}
.panel-collapse.collapse.show .card-body {
    border-color: #fff !important;
}
.card-header {
    padding: 0;
	background: transparent;
}
.card-body {
    border-top: 1px solid #ececec;
}
.card-title {
    margin-bottom: 0;
}
.farm-house-accourdion .panel-group .panel {
    border: 0;
    border-bottom: 1px solid #eee;
    box-shadow: none;
}
/* faq area end */

/* testimonial top area start */
.farm-client-says-section {
    background: url(img/testimonial-bg.jpg) no-repeat center center / cover;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    padding-top: 100px;
    padding-bottom: 150px;
}
.farm-client-says-section::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    content: "";
    left: 0;
    top: 0;
}
.single-client-btn {
    padding-right: 10%;
    float:right;
}
.single-client-btn a.client-btn {
    background: #ff4301 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 50px;
    margin-bottom: 50px;
    padding: 20px 60px;
    text-transform: capitalize;
    transition: .4s;
    font-family: 'Kalam', cursive;
}
.single-client-btn a.client-btn:hover {
    color: #ff4301;
    background: #fff;
}
.single-client {
    color: #fff;
    width:70%;
    float:right;
}
.single-client h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 45px;
    font-style: italic;
}
.single-client h2.content-subtitle {
    font-family: 'Kalam', cursive;
    font-size: 40px;
    margin-top: 40px;
    color: #fff;
}
.bloc {
    font-size: 590px;
    height: 150px;
    line-height: 150px;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 150px;
    color: #fff;
}
.bloc > span {
    display: inline-block;
}
.blocquate-slick {
    position: static;
}
.slick-prev.fa.fa-angle-left.slick-arrow {
    height: 130px;
    left: 0;
    position: absolute;
    width: 70px;
	cursor: pointer;
    line-height: 130px;
    top: 50%;
    margin-top: -65px;
    font-size: 50px;
    color: #fff;
    background: rgba(255, 255, 255, .3);
    transition: .4s;
    z-index: 5;
}
.slick-next.fa.fa-angle-right.slick-arrow {
    height: 130px;
    right: 0;
    position: absolute;
    width: 70px;
	cursor: pointer;
    line-height: 130px;
    top: 50%;
    margin-top: -65px;
    font-size: 50px;
    color: #fff;
    background: rgba(255, 255, 255, .3);
    transition: .4s;
}
.single-client {
    padding-right: 10%;
}
.slick-next.fa.fa-angle-right.slick-arrow:hover,
.slick-prev.fa.fa-angle-left.slick-arrow:hover {
    background: #e73d01;
}
.single-client h4 {
    padding-top: 30px;
    text-transform:uppercase;
}
/* testimonial top area end */

/* sponsor area start */
.farm-sponsor-section{
    padding-top: 90px;
    padding-bottom: 90px;
}
.farm-sponsor-title h2.content-title::before {
    width: 73%;
}
.farm-single-sponsor {
    float: left;
    text-align: center;
    width: 25%;
}
.farm-single-sponsor img {
    opacity: .5;
    transition: .4s;
}
.farm-single-sponsor:hover img {
    opacity: 1
}
.sponsor-prev.slick-prev.fa.fa-angle-left.slick-arrow {
    background: transparent none repeat scroll 0 0;
    color: #e6e6e6;
    font-size: 50px;
    height: 50px;
    left: auto;
    line-height: 50px;
    margin-right: 0;
    position: absolute;
    right: 7%;
    top: -35%;
    width: 50px;
    transition: .4s;
}
.sponsor-next.slick-next.fa.fa-angle-right.slick-arrow {
    background: transparent none repeat scroll 0 0;
    color: #e6e6e6;
    font-size: 50px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    right: 0;
    top: -35%;
    width: 50px;
    transition: .4s;
}
.sponsor-next.slick-next.fa.fa-angle-right.slick-arrow:hover,
.sponsor-prev.slick-prev.fa.fa-angle-left.slick-arrow:hover {
    color: #ff4301
}
.sponsor-slider-active .slick-slide img {
    display: inline-block;
}
/* sponsor area end */

/* app area start */
.farm-section-title {
    background: rgba(0, 0, 0, 0) url("img/our-app-bg.png") no-repeat scroll center center;
}
.farm-android-mokup .farm-section-title {
    background-position: left center;
    background-size: 100% 100%;
    display: inline-block;
}
.get-app h2.section-title {
    margin-left: 50px;
    color: #333333;
}
.app-content h4 {
    color: #333333;
    margin-bottom: 40px;
}
.app-button {
    margin-top:10px;
}
.app-button img {
    margin-right: 20px
}
.RTC {
    position: relative;
    padding-top: 60px;
    padding-bottom: 100px;
}
.app-img {
    bottom: 0;
    position: absolute;
    right: 0;
}
.farm-android-mokup .farm-section-title {
    margin-bottom: 25px;
}
.farm-android-mokup {
    background: #f7f7f7;
    padding-top: 35px;
}
/* app area end */

/* contact area start */
.farm-contact-section {
    background: #333333;
    padding-top: 140px;
    padding-bottom: 140px;
}
.farm-contact-section .farm-section-title {
    background: url(img/contact-title-bg.png) no-repeat center center;
    color: #fff
}
.farm-contact-section .farm-section-title h2 {
    background:none;
}
.single-inputc input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #424242;
    border-radius: 6px;
    color: #fff;
    height: 50px;
    margin-bottom: 20px;
    padding-left: 15px;
    width: 100%;
}
select.porpose-select {
    background: #333;
    border: 1px solid #424242;
    border-radius: 7px;
    color: #fff;
    height: 50px;
    margin-bottom: 20px;
    padding-left: 15px;
    width: 100%;
    opacity: .6;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.porpose .fa {
    color: #8C8C8C;
    font-size: 25px;
    position: absolute;
    right: 6%;
    padding-top: 12px;
    font-weight: bold;
}
select::-moz-focus-inner {
    border: 0;
    outline: 0;
}
.text-area textarea {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #424242;
    border-radius: 7px;
    color: #fff;
    height: 150px;
    margin-bottom: 30px;
    opacity: 155;
    padding: 15px;
    width: 100%;
}
.single-submit input {
    background: #ff4301 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    height: 50px;
    text-transform: capitalize;
    width: 150px;
    box-shadow: 5px 5px 0 #5c3629;
    transition: .4s;
}
.single-submit input:hover {
    background: #fff;
    color: #ff4301;
}
select.porpose-select option {
    padding-left: 15px;
}
.single-contact {
    background: #282828 none repeat scroll 0 0;
    padding: 40px 0;
    border-radius: 10px;
    margin-bottom: 20px;
}
.contact-content > h3 {
    color: #fff;
}
.contact-content {
    color: #a8a8a8;
    padding-left: 100px;
}
.contact-icon {
    background: #fff none repeat scroll 0 0;
    border-radius: 50%;
    color: #000;
    float: left;
    height: 60px;
    line-height: 60px;
    margin-left: 30px;
    margin-right: 20px;
    text-align: center;
    width: 60px;
    font-size: 24px;
}

/* Color de los iconos dentro de la sección de contacto (mapa/teléfono) */
.farm-contact-section .contact-icon .fa {
    color: #25D366; /* verde coincidiente con WhatsApp */
}
.single-contact:hover p {
    color: #ff4301;
}
.farm-contact-form {
    overflow: hidden;
}
.farm-contact-form .success,
.farm-contact-form .error {
    display: none;
}
.farm-contact-form .success  {
    color: green;
}
.farm-contact-form .error  {
    color: red;
}
/* app area end */

/* footer area start */
.copyright-section span {
    color: #8f8f8f;
}
.copyright-section a {
    color: #8f8f8f;
}
.copyright-section {
    color: #333333;
    padding: 25px 0;
}
/* footer area end */

/*finalize css*/
.farm-price-content h4 a {
    color: #ff4301;
    text-decoration: underline;
}

/*final css*/
.item-content {
    position: absolute;
    left: 0;
    top: 15%;
    width: 100%;
}
.farm-slider-item{
    position: static;
}

/*scroll to top start*/
.scrollToTop {
    margin: 0;
    position: fixed;
    bottom: 17px;
    right: 25px;
    width: 55px;
    height: 55px;
    z-index: 1000;
    display: none;
    text-decoration: none;
    background: #ff4301;
    opacity:0.9;
    border-radius:100%;
    transition:all 0.2s;
}
.scrollToTop  .scroll-fa {
    text-align: center;
    font-size: 40px;
    color: #ffffff;
    border-radius: 0px;
    opacity: 1;
    padding-top:4px;
    transition:all 0.2s;
}
.scrollToTop:hover {
    opacity: 1;
}
.scrollToTop:hover .scroll-fa {
    color:#000;
}
/*scroll to top end*/

/* Only-Text-slider-with-fixed-background-image css*/
.bg-fixed-farm-welcome-text {
    color: #fff;
    height: 100vh;
}
.bg-fixed-farm-welcome-text::before {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: url(img/cloud-bg.png) no-repeat center center / cover;
    content: "";
    height: 150px;
    z-index: 22;
}
.bg-fixed-welcome-text-content {
    background: url(img/transparent-bg.png) no-repeat center 88%;
    padding:230px 0px;
}

/* Only-Image-slider-with-fixed-Text css */
.fixed-txt-farm-welcome-text {
    color: #fff;
    position: relative;
}
.fixed-txt-farm-welcome-text::before {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: url(img/cloud-bg.png) no-repeat center center / cover;
    content: "";
    height: 150px;
    z-index: 22;
}
.fixed-txt-farm-welcome-text .farm-home-slider img {
    width: 100%;
}
.fixed-txt-farm-welcome-text .item-content {
    position: absolute;
    z-index: 99;
}
.fixed-txt-farm-welcome-text .welcome-text-content {
    top: 0;
    position: absolute;
    left: 0;
    padding:250px 0px !important;
    width: 100%;
}
.fixed-txt-farm-welcome-text .farm-home-slider-area button {
    z-index: 999;
}
/* END Only-Image-slider-with-fixed-Text css */

/* Parralax-Background css */

/* END Parralax-Background css */

/* Pre Loader Style */
.js div#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 988899;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #fff url('img/loader.gif') no-repeat center center;
}
/* END of Pre Loader Style */


/* CARRITO*/

    /* ==== CARRITO ==== */
    /* ==== CARRITO ==== */
/* carrito de compras */




/* ==================================== */
/* 1. Estilos del Contenedor Principal */
/* ==================================== */

.cart-wrapper {
    /* Mantenemos lo anterior, pero añadimos el posicionamiento fijo */
    position: fixed; 
    top: 20px; /* Separación de 20 píxeles desde el borde superior */
    right: 20px; /* Separación de 20 píxeles desde el borde derecho */
    z-index: 2000; /* Asegura que el carrito esté por encima de todos los demás elementos */
    
    /* El resto de las propiedades del cart-wrapper se mantienen: */
    display: inline-block;
    /* ... (etc.) */
}
/* ==================================== */
/* 2. Icono y Contador */
/* ==================================== */

#cart-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: #f7f7f7;
    transition: background-color 0.3s;
}

#cart-icon:hover {
    background-color: #e0e0e0;
}

#cart-icon img {
    width: 30px; /* Tamaño del icono un poco más grande */
}

.cart-count {
    background-color: #4CAF50; /* Color primario de agricultura/naturaleza */
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    margin-left: -5px; /* Superponer un poco el contador al ícono */
    min-width: 18px;
    text-align: center;
}

/* ==================================== */
/* 3. Dropdown del Carrito (EL MENÚ) */
/* ==================================== */

.cart-dropdown {
    /* Mantenemos el estilo de posicionamiento relativo del dropdown */
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 
    padding: 15px;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
    
    /* Asegúrate que el estado visible tenga un display que lo muestre (ej: block, flex, etc.) */
    display: block; /* o flex, si usas flexbox internamente */ 
    opacity: 1;
    transform: translateY(0);
}

.cart-dropdown.hidden {
    /* Añadir !important garantiza que el carrito se oculte 
       incluso si hay otros estilos que intentan mostrarlo.
    */
    display: none !important; 
    
    opacity: 0; 
    transform: translateY(-10px);
}
.cart-dropdown h4 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    font-size: 1.2em;
    color: #333;
}

/* ==================================== */
/* 4. Lista de Productos y Elementos */
/* ==================================== */

.cart-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px; /* Altura máxima con scroll si hay muchos productos */
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9em;
    border-bottom: 1px dashed #eee;
}

.cart-item-info {
    flex-grow: 1;
    padding-right: 10px;
}

.item-name {
    font-weight: bold;
    color: #4CAF50;
}

.item-quantity, .item-price {
    color: #666;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #e74c3c; /* Color de peligro para eliminar */
    cursor: pointer;
    font-size: 1.1em;
    padding: 5px;
    line-height: 1;
    transition: color 0.2s;
}

.cart-item-remove:hover {
    color: #c0392b;
}

.cart-item-empty {
    text-align: center;
    color: #999;
    padding: 10px 0;
}

/* ==================================== */
/* 5. Resumen y Botones de Acción */
/* ==================================== */

.cart-summary {
    padding-top: 10px;
}

.total {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

/* Estilos de botones (modernos y planos) */
.cart-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.btn {
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
    flex: 1; /* Ocupar el mismo espacio */
    font-size: 0.9em;
}

.btn-primary {
    background-color: #4CAF50; /* Botón Comprar WhatsApp */
    color: white;
    border: 2px solid #4CAF50;
}

.btn-primary:hover {
    background-color: #43A047;
    border-color: #e2e8e2;
}

.btn-secondary {
    background-color: #e0e0e0; /* Botón Vaciar */
    color: #333;
    border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
    background-color: #ccc;
    border-color: #ccc;
}

#lista-carrito {
  width: 100%;
  border-collapse: collapse;
}

#lista-carrito th, #lista-carrito td {
  border-bottom: 1px solid #eee;
  text-align: center;
  padding: 8px;
}




/* ================================================= */
/* MEDIDA ESTILOS PARA PANTALLAS PEQUEÑAS (MÓVILES) */
/* ================================================= */
@media (max-width: 768px) {
    
    /* 1. Posicionamiento del Contenedor Principal (.cart-wrapper) */
    .cart-wrapper {
        /* Mantenemos la posición fija, pero lo movemos a la derecha */
        top: 5px;      /* Un poco menos de margen superior */
        right: 50px;    /* Un poco menos de margen derecho */
    }

    /* 2. El Menú Desplegable (.cart-dropdown) */
    .cart-dropdown {
        /* Ocupa casi todo el ancho de la pantalla */
        width: 80vw; /* 90% del ancho de la ventana (viewport width) */
        
        /* Centrar el dropdown bajo el ícono y darle margen */
        right: -15px; /* Ajuste para que se vea centrado debajo del ícono en la esquina */
        
        /* Diseño visual */
        border-radius: 8px; /* Bordes ligeramente más pequeños */
        padding: 12px;
    }
    
    /* 3. Acciones del Carrito (Botones) */
    .cart-actions {
        /* Hacer que los botones se apilen verticalmente en lugar de estar uno al lado del otro */
        flex-direction: column;
        gap: 8px;
    }

    .btn {
        width: 100%; /* Los botones ocupan el ancho completo */
        font-size: 1em;
        padding: 10px 15px;
    }
    
    /* 4. Lista de Items (Opcional, si deseas ajustar la tipografía) */
    .cart-item-info {
        font-size: 0.95em;
    }
    
}


/* Estilos para los controles de cantidad en el carrito */
.cart-item-quantity-controls {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio entre los botones y el número */
}

.quantity-btn {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1em;
    width: 30px; /* Ancho fijo para botones */
    text-align: center;
    line-height: 1; /* Para centrar el texto +/- */
    transition: background-color 0.2s;
}

.quantity-btn:hover {
    background-color: #ddd;
}

.item-quantity-display {
    font-weight: bold;
    min-width: 15px; /* Asegura que el número no se mueva */
    text-align: center;
    font-size: 0.9em;
}

/* Ajuste general para la lista (para que los controles quepan) */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9em;
    border-bottom: 1px dashed #eee;
}

.cart-item-info {
    /* Dar menos espacio a la info para que los botones quepan */
    flex-grow: 1;
    min-width: 120px; 
    padding-right: 10px;
}

  /* termina carrito de compras */


  /* responsive */
.farm-project-active {
    display: grid;
    /* Espacio reducido entre productos */
    gap: 12px; 
  
  /* Esto hace que sea responsivo:
     - auto-fit: Crea tantas columnas como quepan.
     - minmax(280px, 1fr): Cada columna tendrá un mínimo de 280px. 
                           Si la pantalla es más pequeña, se adaptará a una sola columna. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  
  /* Puedes añadir un padding general al contenedor de la galería si quieres 
     que los productos no toquen los bordes de la pantalla. */
    padding: 12px; /* menos padding para reducir separación vertical */
  
 
}

.farm-single-project {
        /* Anulamos floats/anchos antiguos para que CSS Grid funcione correctamente */
        float: none;
        width: auto;

    /* Asegura que el contenido interno se centre si es necesario */
    text-align: center;
  
    /* Si los productos tienen un fondo blanco y un borde, puedes definirlo aquí */
    background-color: #fff;
    border-radius: 5px; /* Bordes redondeados, si te gusta */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave para destacar el producto */
    overflow: hidden; /* Asegura que la imagen no se desborde si tiene bordes */
    margin-bottom: 0; /* dejar que el gap del grid controle el espacio vertical */
}
.farm-single-project .project-img {
  width: 100%; /* Asegura que ocupe todo el ancho de su contenedor de producto */
  /* Puedes darle una altura fija para todas las imágenes si quieres que sean uniformes. */
  height: 250px; /* Ejemplo: una altura uniforme */
  overflow: hidden; /* Muy importante para que la imagen no se salga si es más grande */
  position: relative; /* Necesario para posicionar el precio con absolute */
}
.farm-single-project .project-weight {
  /* Posiciona el precio ABSOLUTAMENTE dentro del contenedor de la imagen */
  position: absolute;
  bottom: 10px; /* Separado del borde inferior de la imagen */
  right: 10px; /* Separado del borde derecho de la imagen */
  background-color: rgba(100, 201, 23, 0.7); /* Fondo semi-transparente */
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 1.1em;
}

.farm-single-project .project-weight h3 {
    margin: 0; /* Elimina el margen por defecto del h3 */
    color: inherit; /* Hereda el color blanco del padre */
}
.farm-single-project .product-name {
  margin-top: 15px; /* Espacio entre la imagen y el nombre del producto */
  margin-bottom: 15px; /* Espacio debajo del nombre del producto */
  font-size: 1.3em;
  color: #333;
}

/* Forzar 4 columnas en pantallas grandes (escritorio) */
@media (min-width: 992px) {
    .farm-project-active {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Si Isotope está activo, éste aplica position:absolute a los items.
     Anulamos esas reglas para que el Grid funcione correctamente. */
.farm-project-active.isotope,
.farm-project-active {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}
.farm-project-active .isotope-item,
.farm-project-active .farm-single-project {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* Asegurar que los hijos ocupen todo el ancho de su celda */
.farm-project-active > .farm-single-project {
    display: flex;
    flex-direction: column;
}

/* ========================= */
/* Reglas de imágenes responsive */
/* ========================= */
/* Todas las imágenes se ajustan al contenedor sin desbordar */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Clase utilitaria para imágenes que deben cubrir su contenedor */
.responsive-img,
.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene recorte centrado */
    display: block;
}

/* Ajustes específicos para galerías/productos y sliders */
.farm-single-product img,
.farm-single-project .project-img img,
.farm-single-sponsor img,
.farm-home-slider .farm-slider-item img,
.app-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Si se quiere una versión contenida (no recortada) usar .responsive-img (height:auto) */
.responsive-img { height: auto; object-fit: unset; }

/* Mejora para imágenes de fondo: asegurar que cubran y estén centradas */
.bg-cover {
    background-size: cover;
    background-position: center center;
}

/* Pequeños ajustes móviles: evitar que imágenes muy altas consuman demasiado espacio */
@media (max-width: 480px) {
    .farm-single-product,
    .farm-single-project .project-img {
        height: auto; /* permitir altura variable en móviles */
    }
    .farm-single-project .project-img {
        min-height: 160px; /* asegurar un tamaño razonable */
    }
}

/* Ajustes específicos para móviles: una columna clara y menos altura */
@media (max-width: 767px) {
    .farm-project-active {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .farm-single-project {
        height: auto !important;
        line-height: normal !important;
        margin-bottom: 8px !important;
        display: block;
    }

    .farm-single-project .project-img {
        height: auto !important;
        min-height: 160px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .farm-single-project .project-img img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .farm-single-project .project-weight {
        bottom: 8px !important;
        right: 8px !important;
        font-size: 0.95rem !important;
        padding: 6px 10px !important;
        background-color: rgba(100,201,23,0.5) !important; /* más transparente */
        z-index: 3 !important;
    }

    .farm-single-project .product-name {
        font-size: 1.05rem !important;
        padding: 10px 8px !important;
    }
}

/* Mantener estilos originales del autor para la sección "Sobre nosotros".
   Revertido: no forzar tamaño ni alineación aquí para preservar la apariencia previa. */

/* Excepción: conservar exactamente el tamaño y alineación original de la imagen secundaria
    en 'Sobre nosotros' incluso si la utilidad .responsive-img se aplica vía JS. */
.farm-about-img img.keep-original {
    width: auto !important;
    height: auto !important;
    max-width: 420px !important; /* ajustable: mantiene la imagen a un tamaño razonable */
    display: inline-block !important;
    margin: 0 !important;
}

/* Desktop: alinear la imagen a la derecha y centrarla verticalmente con el texto */
@media (min-width: 768px) {
    .farm-about-us .row {
        align-items: center; /* centra verticalmente columna texto + imagen */
    }
    .farm-about-img {
        display: flex;
        justify-content: flex-end; /* colocar la imagen al borde derecho de su columna */
        align-items: center;
    }
    .farm-about-img img.keep-original {
        max-width: 420px !important;
        display: inline-block !important;
    }
}

/* (Removed column-swap rules to restore original layout: image on the right) */

/* Garantizar columnas lado a lado en escritorio y alinear la imagen a la derecha */
@media (min-width: 768px) {
    .farm-about-us .container > .row {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
    }
    .farm-about-us .col-md-6 {
        float: none !important;
        width: 50% !important;
        box-sizing: border-box;
    }
    .farm-about-us .col-md-6:first-child {
        padding-right: 40px; /* separación del texto respecto a la imagen */
    }
    .farm-about-img {
        text-align: right !important;
        display: block !important;
    }
    .farm-about-img img.keep-original {
        display: inline-block !important;
        margin: 0 !important;
        max-width: 480px !important; /* aumenta un poco para coincidir con la captura */
        height: auto !important;
    }
}



/* === SOLUCIÓN DE CHOQUE: AUMENTAR ESPACIO DEBAJO DE LA GALERÍA === */
.farm-portfolio-section {
    /* Mantener estilos de fondo */
    background-color: #333333;
    background-image: url(img/product-gallery-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    padding-top: 200px;
    
    /* AUMENTO CRÍTICO: Usar un valor alto (e.g., 150px) para garantizar la separación */
    padding-bottom: 300px; 
}

 /* Color del ícono instagram */
./* Estilos generales del contenedor de contacto */
.single-contact {
    display: flex; /* Para alinear el ícono y el texto en una fila */
    align-items: center; /* Centra verticalmente el ícono y el texto */
    background-color: #333; /* Color de fondo oscuro como en la imagen */
    padding: 15px 20px; /* Espaciado interno */
    margin-bottom: 10px; /* Espacio entre cada tarjeta de contacto */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    color: #fff; /* Color de texto blanco por defecto */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

/* Estilos para los enlaces dentro de single-contact (si el div entero es clickeable) */
.single-contact a {
    text-decoration: none; /* Elimina el subrayado del enlace del ícono */
    color: inherit; /* Hereda el color del texto del padre */
}

/* Estilo para el ícono circular */


/* Asegúrate de que tu .contact-icon tenga estos estilos para el círculo blanco */
.single-contact .contact-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff; /* Fondo blanco del círculo */
    font-size: 24px; /* Tamaño del ícono */
    margin-right: 15px; /* Espacio a la derecha */
    flex-shrink: 0;
}

/* ESTILOS ESPECÍFICOS PARA EL ÍCONO DE INSTAGRAM */
.single-contact .contact-icon .fa-instagram {
    /* Define el degradado de colores de Instagram */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    
    /* Hace que el fondo se recorte por la forma del ícono (texto) */
    -webkit-background-clip: text; /* Para navegadores basados en WebKit (Chrome, Safari, Edge) */
    background-clip: text; /* Estándar */
    
    /* Hace que el "texto" (el ícono) sea transparente para que el degradado se vea a través */
    -webkit-text-fill-color: transparent; /* Para navegadores basados en WebKit */
    color: transparent; /* Como fallback o para otros navegadores */
}

/* Opcional: Estilo para el enlace del nombre de usuario para que coincida */
.single-contact .contact-content p a {
    color: #e7e3df; /* Un rosa/rojo representativo para el texto */
    text-decoration: none; /* Elimina el subrayado si lo hay */
}
/* Estilos del círculo (Reutiliza el código que ya tienes) */
.single-contact .contact-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff; /* Fondo blanco para el círculo */
    font-size: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Color específico del ícono de Ubicación */
.single-contact .contact-icon .fa-location-dot {
    color: #25D366; /* Un color verde brillante, similar al de tu imagen. */
}

/* Estilo específico para el ícono de WhatsApp dentro del contenedor contact-icon */
.single-contact .contact-icon .fa-whatsapp {
    color: #25D366; /* El color verde oficial de WhatsApp */
}

/* Opcional: Si quieres darle un fondo verde al círculo y el ícono blanco */
/* Si el círculo es blanco, omite esta parte */
/* Si el círculo es blanco, omite esta parte */
/* Si quieres que el círculo sea verde, usa esto: */
/*
.single-contact .contact-icon {
    background-color: #25D366;
}
.single-contact .contact-icon .fa-whatsapp {
    color: #fff;
}
*/