:root {
    --primary-color: #F8CB11;
    --secondary-color: #2a353d;
    --secondary-light-color: #cecfb9;
}

body {
    background-color: var(--secondary-color);
}

@font-face {
    font-family: "romboFont";
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Cuneiform.eot);
    src: url(fonts/Cuneiform.eot?#iefix) format("embedded-opentype"), url(fonts/Cuneiform.woff2) format("woff2"), url(fonts/Cuneiform.woff) format("woff"), url(fonts/Cuneiform.ttf) format("truetype");
}

/*
#about{
    background: url(../img/acercade/bienvenido4.jpg) no-repeat center center !important;
    background-size: cover !important;
}
    */

.tit-bienvenido{
    font-size: 34px;
    color: var(--secondary-color);
    text-shadow: 3px 3px 6px var(--primary-color), -3px -3px 6px var(--primary-color);
}


.txt-pri-shadow{
    color: var(--primary-color);
    text-shadow: 3px 3px 6px var(--primary-color), -3px -3px 6px var(--secondary-color);
}

.subtext{
    color:var(--secondary-color); 
    font-weight: bold; 

}

#contact{
    background-color: var(--secondary-light-color);
}

#opiniones{
    background-color: var(--secondary-light-color);
}

#porqueele{
    padding: 50px !important;
}

@media (max-width: 767px) {
    #porqueele {
        padding: 10px !important;
    }
}


.contactocognito{
    padding: 15px 15px 40px 15px;
	background-color: #f7f7f7;
	margin: 4px 147px;
	border-radius: 27px;
}

@media (max-width: 767px) {
    .contactocognito {
        margin: 2px !important;
    }
}

.border-nav-rombo {
    border-bottom: 2px solid var(--primary-color) !important;
}

.r-text-yellow {
    color: var(--primary-color);
    font-family: "romboFont";
}
.mnumobil {
    font-size: 36px;
}
.r-text {
    color: #b9bec4;
    font-family: "romboFont";
}
.r-text-black {
    color: var(--secondary-color);
    font-family: "romboFont";
}
.text-theme-color-2 {
    color: var(--primary-color) !important;
}
.back-secundario,
.bg-theme-colored-transparent,
.menuzord .showhide em {
    background-color: var(--primary-color) !important;
}
.back-Primario {
    background-color: #b9bec4 !important;
}
.border-left-theme-color-2-6px,
.border-left-theme-color-2-4px {
    border-left: 6px solid var(--primary-color) !important;
}
.border-right-theme-color-2-6px {
    border-right: 6px solid var(--primary-color) !important;
}
.bg-up-negro {
    background-color: #000;
    color: #fff;
}
.bg-up-negro a {
    color: #fff;
}
.back-secundario ul a {
    color: #000 !important;
}
.our-services-gallery .gallery-item .our-services-details {
    height: 240px;
    overflow: hidden;
}
span.category {
    height: 188px;
}
.cog-confirmation__message p {
    color: #f8cb11 !important;
    font-family: "ducodeFont" !important;
    font-size: 20px !important;
}
.cog-header {
    display: none !important;
}
.cog-abuse {
    display: none !important;
}
.cog-branding {
    display: none !important;
}
.cog-body {
    background-color: #f7f7f7 !important;
}
.grid-container, .grid-productos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 10px;
}

@media (max-width: 767px) {
    .grid-productos {
        grid-template-columns: repeat(1, 1fr); /* 2 columnas en pantallas pequeñas */
    }
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-light-color);
    padding: 10px;
}

.grid-item.sin-borde {
    border: 0px !important;
}

.grid-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px;
}
.grid-item p {
    margin-bottom: 3px;
}
.grid-item small {
    font-size: 0.8em;
}
.grid-why {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 10px;
}
h1.producto {
    font-size: 1.6rem;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
}
