/*
 Theme Name:   OsmosHouse Child
 Theme URI:    https://osmoshouse.com
 Description:  Default OsmosHouse child theme
 Author:       Ronald Gonzales
 Author URI:   https://osmoshouse.com
 Template:     generatepress
 Version:      0.1
*/

/* Custom variables */
 
:root {
  --font-helvetica-neue: var(--gp-font--helvetica-neue);
  --color-primary: var(--global-color-11);
  --color-secondary: var(--link-hover);
  --color-text: var(--contrast);
  --color-white: var(--base-3);
  --color-gradient-a: var(--global-color-13);
  --color-gradient-b: var(--global-color-14);
}



/* Custom Elementor */

.elementor-element .elementor-heading-title,
.elementor-heading .title-hero{
    line-height: 1.1;
}

.elementor-element .mb-0 p,
.elementor-element .mb-0 h2{
    margin-bottom: 0;
}

.hero-text{
    font-size: 12px;
    line-height: 22px;
}

.text-featured{
    font-size: 24px;
}

.text-weight-300{
    font-weight: 300;
}

.text-weight-500{
    font-weight: 500;
}

.text-weight-600{
    font-weight: 600;
}

.title-custom-size h2,
.title-custom-size h3,
.title-custom-size h4{
    font-size: 25px;
}


/* Button Elementor */

.my-btn .elementor-button{
    min-width: 230px;
    font-family: var(--font-helvetica-neue);
    border-width: 2px;
    border-style: solid;
    line-height: 1.2em;
    border-radius: 1.5rem;
    padding: 1rem 2rem;
    font-weight: 500;
    text-transform: uppercase;
}

.btn-primary .elementor-button {
    background-color: var(--color-primary);
}

.btn-primary .elementor-button:hover,
.btn-primary .elementor-button:active,
.btn-primary .elementor-button:visited,
.btn-primary .elementor-button:focus{
    background-color: var(--color-secondary);
}

.btn-secondary .elementor-button {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 400;
}

.btn-secondary .elementor-button:hover,
.btn-secondary .elementor-button:active,
.btn-secondary .elementor-button:visited,
.btn-secondary .elementor-button:focus{
    background-color: var(--color-primary);
    color: var(--color-white);
}


/* Menu */

.main-navigation .main-nav ul li.item-menu-cta a {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
    font-size: 15px;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-radius: 1.5rem;
    padding: .75em 1.2em;
    font-weight: 400;
    line-height: 1.2em;
    text-transform: uppercase;
}

.main-navigation .main-nav ul li.item-menu-cta a:hover,
.main-navigation .main-nav ul li.item-menu-cta a:active{
    background-color: var(--color-primary);
    color: var(--color-white);
    transition: all .3s;
}

.gp-icon svg {
    height: 1.5em;
    width: 1.5em;
    top: 0.5em;
}

#generate-slideout-menu .slideout-menu li.item-menu-cta{
    margin-left: 20px;
    margin-right: 20px;
}

.main-navigation.offside{
    padding: 2rem .875rem;
}

.main-navigation.offside .main-nav .menu-item a{
    text-transform: uppercase;
}

.main-navigation.offside .main-nav>ul{
    gap: .5rem;
}

/* Footer */

.footer-widgets .widget{
    margin-bottom: 20px;
}

.footer-widgets-container {
    padding: 80px 40px;
}

.generate-back-to-top{
    bottom: 100px;
}

@media only screen and (min-width:768px){
    .inside-footer-widgets .footer-widget-1{
        flex-basis: 10%;
    }
}

@media only screen and (max-width:768px){
    .main-navigation.has-branding .inside-navigation.grid-parent.grid-container,
    .main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .text-featured{
        font-size: 20px;
    }

    .footer-widgets-container {
        padding: 60px 20px;
    }

    .footer-widgets .widget {
        margin-bottom: 10px;
    }
}

/* Custom Classes */

.text-gradient{
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, var(--color-gradient-a) 25%, var(--color-gradient-b));
    -webkit-background-clip: text;
    background-clip: text;
}

.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px; /* Ancho del tooltip */
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px;
    font-size: 12px; /* Tamaño del texto del tooltip*/
    line-height: 16px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip:hover .tooltiptext ul {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tooltip:hover .tooltiptext ul li {
    text-align: left;
}