@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Geist:wght@100..900&family=Give+You+Glory&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('/galileo_website/static/src/fonts/Zekton Rg.otf');

@font-face {
    font-family: 'Zekton'; /* Nombra tu fuente */
    src: url('/galileo_website/static/src/fonts/Zekton Rg.otf') format('opentype'); /* Indica la ruta y el formato */
    font-weight: normal;
    font-style: normal;
}


:root {
    --orange: #AB530F;
    --green: #006171;
    --gray: #595D5F;
    --light: #FAFAFA;
    --green-blue: #1B849E;
    /* Assuming a slightly darker shade for borders/hovers */
    --orange-darker: #92470D;
    --green-darker: #004F5D;
    --gray-darker: #4B4E50;
    /* Assuming an even darker shade for active state */
    --orange-darkest: #7A3B0B;
    --green-darkest: #003E4A;
    --gray-darkest: #3D4042;
    /* Nuevos colores claros*/
    --green-light: #66AABB;
    --gray-light: rgba(166, 166, 166, 1);
    /* Specific yellow shades from original filled button */
    --yellow-main: #F7DA7D;
    --yellow-darker: #f0c942;
    --yellow-darkest: #e6bc32;
    --text-dark: #212529; /* Dark text color for light backgrounds */
    --text-light: #FFFFFF; /* Light text color for dark backgrounds */
    --font-title: 'Zekton';
    --font-text: Albert Sans
}

.d-full-none, #o_wsale_cta_wrapper {
    display: none !important;
}

body {
    line-height: 1.5 !important;
}

.o_cc5, .o_footer {
    --bg-light: #111827;
    --color-light: #FFFFFF;
    background-color: #fff;
    color: #000;
    --o-cc-bg: #111827;
}

.header_bottom {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.bg-contact, .bg-contact-directory, .bg-contact-no-img {
    background-image: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
}

.bg-legacy, .bg-warranty {
    background-image: none;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 400px auto;
    background-position: 0 150px;
}

.bg-microscopio {
    /*background-image: url(../img/galileo-microscopio-bg.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left
}


/*#galileo-hero {*/
/*    background-image: linear-gradient(219.09deg, #F4F4FF 22.15%, #FAFAFD 64.26%);*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: bottom right, bottom right;*/
/*}*/

.galileo-maintenance-hero, .galileo-self-sale-hero {
    /*background-image: url(../img/maintenance-bg.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
}

.galileo-hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
}

.galileo-directory-hero {
    background-image: url(../img/directory-hero.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.border-contacts-start, .border-contacts-end {
    border: none;
}

#col-galileo-hero {
    height: 350px;
}

@media (max-width: 768px) {
    .galileo-hero {
        /*background-image: linear-gradient(to right, #106371 50%, rgba(16, 99, 113, .8) 100%) !important;*/
        background-image: linear-gradient(to right, #edf8fb, #d8eef6) !important;
    }
}

@media (min-width: 992px) {
    /*#galileo-hero {*/
    /*    background-image: url(../img/galileo-bg-hero.png);*/
    /*    background-size: contain, cover;*/
    /*}*/
    #col-galileo-hero {
        height: 450px;
    }

    .bg-contact {
        background-image: url("../img/hand.png"), url(../img/galileo-rectangle.svg);
    }

    .bg-contact-directory {
        background-image: url("../img/footer-top-directory.png"), url(../img/galileo-rectangle.svg);
    }

    .border-contacts-end {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-contacts-start {
        border-left: 1px solid #dee2e6 !important;
    }

    #top_menu {
        width: 100%;
    }

    #wrapwrap header #top_menu_collapse #top_menu > li.nav-item:has(a[href$="blog"]) {
        margin-left: auto !important;
    }

    #wrapwrap header #top_menu_collapse #top_menu > li.nav-item a[href$="blog"],
    #wrapwrap header #top_menu_collapse #top_menu > li.nav-item a[href$="contactus"] {
        text-transform: uppercase;
        font-weight: 300;
        font-size: small;
    }
}


@media (min-width: 1200px) {
    .bg-contact {
        background-image: url("../img/hand.png"), url(../img/galileo-rectangle.svg);
    }

    .bg-contact-directory {
        background-image: url("../img/footer-top-directory.png"), url(../img/galileo-rectangle.svg);
    }
}

@media (min-width: 1400px) {
    .bg-contact {
        background-image: url("../img/hand.png"), url(../img/galileo-rectangle.svg);
    }

    .bg-contact-directory {
        background-image: url("../img/footer-top-directory.png"), url(../img/galileo-rectangle.svg);
    }

    .bg-legacy {
        background-image: url("../img/legacy-bg.png")
    }

    .bg-warranty {
        background-image: url("../img/warranty-bg.png")
    }

    #col-galileo-hero {
        height: 500px;
    }
}

@media (min-width: 1920px) {
    .bg-legacy, .bg-warranty {
        background-size: 500px auto;
        background-position: 0 150px;
    }
}


.form-control:focus, .form-select:focus {
    color: #212529;
    background-color: #FFFFFF;
    border-color: var(--green-light);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(102, 170, 187, 0.25);
}

.form-check-input:checked {
    background-color: var(--green);
    border-color: var(--green);
}

.form-check-input:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(102, 170, 187, 0.25);
}

.text-yellow-dark {
    color: #E5BD96 !important;
}

.text-yellow-gray {
    color: #CFCFCF !important;
}


.text-orange {
    color: var(--orange) !important;
}

.text-orange-darkest {
    color: var(--orange-darkest) !important;
}

.text-green {
    color: var(--green) !important;
}

.text-gray {
    color: var(--gray) !important;
}

.text-gray-light {
    color: var(--gray-light) !important;
}

.text-green-blue {
    color: var(--green-blue) !important;
}

.text-white {
    color: var(--text-light) !important;
}

.text-inherit {
    color: inherit !important;
}

.bg-green {
    background-color: var(--green) !important;
}

.bg-orange {
    background-color: var(--orange) !important;
}

.bg-yellow-dark {
    background-color: #ffe7d4 !important;
}

.bg-yellow {
    background-color: #F7DA7D
}

.bg-light {
    background-color: var(--light) !important;
}

.btn-yellow {
    background-color: #F7DA7D;
    color: #212529;
    border: 1px solid #f0c942;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    padding: 14px 16px;
    border-radius: 6px;
}

.btn-yellow:hover {
    background-color: #f0c942;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: #212529;
}

.btn-yellow:active {
    background-color: #e6bc32 !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
}

.btn-orange {
    background-color: var(--orange);
    color: #FFFFFF;
    border: 1px solid var(--orange-darker);
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 6px;
}

.btn-orange:hover {
    background-color: var(--orange-darker);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
}

.btn-orange:active {
    background-color: var(--orange-darkest) !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
    color: #FFF !important;
}

.btn-green {
    background-color: var(--green);
    color: #FFFFFF !important;
    border: 1px solid var(--green-darker);
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /*padding: 14px 16px;*/
    border-radius: 6px;
}

.btn-green:hover {
    background-color: var(--green-darker);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: #FFFFFF; /* Assuming white text for better contrast */
}

.btn-green:active {
    color: #FFFFFF;
    background-color: var(--green-darkest) !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
}

.btn-green.disabled,
.btn-green:disabled {
    background-color: var(--green);
    border-color: var(--green-darker);
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-gray {
    background-color: var(--gray);
    color: #FFFFFF; /* Assuming white text for better contrast */
    border: 1px solid var(--gray-darker);
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    padding: 14px 16px;
    border-radius: 6px;
}

.btn-gray:hover {
    background-color: var(--gray-darker);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: #FFFFFF; /* Assuming white text for better contrast */
}

.btn-gray:active {
    background-color: var(--gray-darkest) !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
}

.btn-outline-yellow {
    background-color: transparent;
    color: var(--yellow-main); /* Text color is the main color */
    border: 1px solid var(--yellow-main); /* Border color is the main color */
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; /* Add color to transition */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    padding: 14px 16px;
    border-radius: 6px;
}

.btn-outline-yellow:hover {
    background-color: var(--yellow-main); /* Background fills with main color */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: var(--text-dark); /* Text color changes for contrast */
    border-color: var(--yellow-main); /* Border stays or changes slightly (keeping main color here) */
}

.btn-outline-yellow:active {
    background-color: var(--yellow-darker) !important; /* Background becomes darker shade */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
    color: var(--text-dark); /* Text color stays contrasting */
    border-color: var(--yellow-darker) !important; /* Border matches active background */
}

.btn-outline-orange {
    background-color: transparent;
    color: var(--orange); /* Text color is the main color */
    border: 1px solid var(--orange); /* Border color is the main color */
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; /* Add color to transition */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 6px;
}

.btn-outline-orange:hover {
    background-color: var(--orange); /* Background fills with main color */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: var(--text-light); /* Text color changes for contrast */
    border-color: var(--orange); /* Border stays or changes slightly (keeping main color here) */
}

.btn-outline-orange:active {
    background-color: var(--orange-darker) !important; /* Background becomes darker shade */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
    color: var(--text-light); /* Text color stays contrasting */
    border-color: var(--orange-darker) !important; /* Border matches active background */
}

.btn-outline-green {
    background-color: transparent;
    color: var(--green); /* Text color is the main color */
    border: 1px solid var(--green); /* Border color is the main color */
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; /* Add color to transition */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 6px;
}

.btn-outline-green:hover {
    background-color: var(--green); /* Background fills with main color */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: var(--text-light); /* Text color changes for contrast */
    border-color: var(--green); /* Border stays or changes slightly (keeping main color here) */
}

.btn-outline-green:active {
    background-color: var(--green-darker) !important; /* Background becomes darker shade */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
    color: var(--text-light) !important;
    border-color: var(--green-darker) !important; /* Border matches active background */
}

.btn-outline-gray {
    background-color: transparent;
    color: var(--gray); /* Text color is the main color */
    border: 1px solid var(--gray); /* Border color is the main color */
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; /* Add color to transition */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    padding: 14px 16px;
    border-radius: 6px;
}

.btn-outline-gray:hover {
    background-color: var(--gray); /* Background fills with main color */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: var(--text-light); /* Text color changes for contrast */
    border-color: var(--gray); /* Border stays or changes slightly (keeping main color here) */
}

.btn-outline-gray:active {
    background-color: var(--gray-darker) !important; /* Background becomes darker shade */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    transform: scale(0.98);
    color: var(--text-light); /* Text color stays contrasting */
    border-color: var(--gray-darker) !important; /* Border matches active background */
}

.galileo-input {
    height: 52px;
    gap: 10px;
    border-width: 1px;
    padding: 16px 21px;
}

.galileo-title {
    font-family: var(--font-title) !important;
    font-weight: 600;
    font-size: 2.38rem;
    letter-spacing: 0;
}

.galileo-subtitle {
    font-family: var(--font-title) !important;
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: 0;
}

.galileo-subtitle *, .galileo-title * {
    font-family: var(--font-title) !important;
}

.galileo-text-small {
    font-family: Albert Sans;
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: 0;
}

.galileo-text-small * {
    font-family: Albert Sans;
}

.galileo-text-default, .galileo-text-default * {
    font-family: Albert Sans;
}

.galileo-h-line {
    height: 2px;
    background-color: #E5BD96;
    color: #E5BD96;
    width: 100%;
    margin: 24px auto;
}

.galileo-h-line-72-orange, .galileo-h-line-72-green, .galileo-h-line-full-green {
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--orange);
}

.galileo-h-line-72-green, .galileo-h-line-full-green {
    background-color: var(--green);
}

.galileo-h-line-full-green {
    width: 100%;
}

.fa.rounded-circle, .fa.rounded-empty-circle, .fa.rounded, .fa.rounded-0, .fa.rounded-leaf, .fa.img-thumbnail, .fa.shadow {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
}

.justify-content-space-between {
    justify-content: space-between;
}

/*\swiper*/

.card-category-container.hover-effect {
    background-color: rgba(247, 247, 247, 1);
    transition: background-color 0.3s ease-in-out;
}

.card-category-container.hover-effect .child-content {
    padding: .8rem;
    transition: padding 0.3s linear;
}

.card-category-container.hover-effect:hover {
    background-color: var(--green-light);
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
}

.card-category-container.hover-effect:hover .child-content {
    padding: 0; /* Elimina el padding del hijo */
    transition: padding 0.3s linear;
}

.img-container-4-3, .img-container-4-4, .img-blog-container, .img-blog-details-container, .img-container-2-1 {
    position: relative;
    width: 100%;
}

.img-container-2-1 {
    padding-top: 75%;
}

.img-container-4-3 {
    padding-top: 75%;
}

.img-container-maintenance {
    padding-top: 157%;
}

.img-blog-details-container {
    padding-top: 56%;
}

.img-container-4-4 {
    padding-top: 100%;
}

.img-blog-container {
    padding-top: 100%;
}

.img-4-3, .img-4-4, .img-maintenance, .img-blog, .img-blog-details, .img-2-1 {
    width: 100%;
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.img-2-1 {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.img-4-3 {
    aspect-ratio: 4/3;
}

.img-maintenance {
    aspect-ratio: 9/16;
}

.img-4-4 {
    aspect-ratio: 1/1;
}

.img-blog {
    aspect-ratio: 1/1;
    border-radius: 0.5rem
}

.img-blog-details {
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
}

.truncate-1, .truncate-2, .truncate-4, .text-blog {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-1 {
    -webkit-line-clamp: 1;
}

.truncate-2 {
    -webkit-line-clamp: 2;
}

.truncate-4 {
    -webkit-line-clamp: 4;
}

.text-blog {
    -webkit-line-clamp: 8;
}

.padding-section-top, .padding-section {
    padding-top: 30px;
}

.padding-section-bottom, .padding-section {
    padding-bottom: 30px;
}

.height-section {
    height: 280px;
}

@media (min-width: 576px) {
    .padding-section-top, .padding-section {
        padding-top: 70px;
    }

    .padding-section-bottom, .padding-section {
        padding-bottom: 70px;
    }

    .height-section {
        height: 350px;
    }

    .img-blog-container {
        padding-top: 142.2%;
    }

    .img-blog {
        aspect-ratio: 5/7;
        border-radius: 0.5rem 0 0 0.5rem;
    }

    .img-container-2-1 {
        padding-top: 43%;
    }

    .img-2-1 {
        aspect-ratio: 2.3/1;
    }

    .text-blog {
        -webkit-line-clamp: 4;
    }
}

.p-card-category {
    padding: .8rem;
    background-color: rgba(247, 247, 247, 1);
}

.pre_header {
    background-color: #E1F7FE !important;
}

.o_footer_copyright {
    display: none;
}

ul.galileo-pagination * {
    color: var(--green);
}

ul.galileo-pagination *:hover {
    color: var(--green);
}

/*swiper*/
.swiper {
    width: 100%;
    height: 100%;
}

.search-container {
    position: relative; /* Necesario para posicionar el icono absolutamente dentro */
    width: 100%;
}

/* Estilos para el input */
.search-input {
    padding-right: 2.8rem;
}

/* Estilos para el icono */
.search-icon {
    position: absolute; /* Posicionamiento absoluto respecto a .search-container */
    right: 1rem; /* Distancia desde el borde derecho del contenedor */
    top: 50%; /* Posiciona la parte superior del icono en el centro vertical */
    transform: translateY(-50%); /* Ajuste fino para centrar verticalmente el icono */
    color: #6c757d; /* Color grisáceo (Bootstrap's secondary color), similar a la imagen */
    pointer-events: none; /* Opcional: Evita que el icono interfiera con el clic en el input */
    font-size: 1.1rem; /* Tamaño del icono, ajústalo si es necesario */
}

#footer-letters div {
    display: inline !important;
}

/* SEO Content Section Styles */
.texto-seo-home h2 {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
}

.texto-seo-home p {
    margin-bottom: 8px !important;
}

/* Desktop: 2 columns layout */
@media (min-width: 768px) {
    .texto-seo-home {
        column-count: 2;
        column-gap: 60px;
        column-fill: balance; /* Distribute content evenly between columns */
        text-align: justify;
    }
    
    .texto-seo-home h2,
    .texto-seo-home p {
        break-inside: avoid; /* Prevent elements from breaking mid-content */
    }
}