/*
6 cuotas de  40.000 (tia yola y abuelos)
$ 45.000 (Tatúm)

alicia gimenez
*/
/*
Tipografias 
Botonera
Textos Josefina sans regular
Titulos Josefina Sans bold

Colores
Hover babdb5
Verde 72a28a
72a28a

https://share.google/Wxud1t7ifPFvWi14w
https://share.google/5FeK2MIeQIt6bwWZE
https://share.google/9V6hXI2NKfGp25epz

*/
:root {
    --jg-font-color: #000000;
    --jg-font-color-nav: #000000;
    --jg-font-over: #babdb5;
    --jg-bg-color: #ffffff;
    --jc-bg-color-menu: #f0efef;
    --jg-green: #72a28a;
}

html {
    font-size: 18px;
    color: var(--jg-font-color);
}
body {
    background-color: var(--jd-bg-color);
    position: relative;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3 {
    color: var(--jg-green);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 3rem;
}

a {
    color: inherit;
    text-decoration: none;
}
    a:hover {
        color: var(--jg-font-over)!important;
        text-decoration: none;
        transition: 0.5s;
    }

p {
    line-height: 1.2rem;
}

section {
    margin-top: 3rem;
}

.main-wrapper {
    padding-left: 9rem;
    padding-right: 9rem;
}

.fw-b {
    font-weight: 700 !important;
}

.z-100 {
    z-index: 100;
}

.wsnb {
    white-space: nowrap;
}

#banner {
    position: relative;
    overflow: hidden;
}
    
.icon-list {
    margin-top: 1rem;
    padding: 2rem 12rem;
}
    .icon-list.green {
        background-color: var(--jg-green);
        color: var(--jg-bg-color);
    }

    .icon-list.green h1, 
    .icon-list.green h2, 
    .icon-list.green h3 {
        color: var(--jg-bg-color);
    }
    .icon-list figure {
        font-size: 1.33rem;
        font-weight: 600;
        line-height: 1.6rem;
        margin: 0 0 0rem;
        text-align: center;
    }
        .icon-list figure .img {
            min-height: 110px;
            position: relative;
        }
            .icon-list figure .img img {
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
                top: 0;
                bottom: 0;
            }
        .icon-list figure figcaption {
            margin-top: 1.75rem;           
        }

   
/* menu */
.menu-main {
    background-color: var(--jc-bg-color-menu);
    color: var(--jg-font-color-nav);
    padding-bottom: 2.3rem;
    padding-top: 3rem;
}       
    .menu-main .navbar-expand-xxl .navbar-nav .nav-link  {
        color: var(--jg-font-color-nav);
        font-weight: 700;
        padding-left: 1.2rem;
        padding-right: 1.2rem;        
    }    
    .menu-main .navbar-expand-xxl .navbar-nav .nav-link.active,
    .menu-main .navbar-expand-xxl .navbar-nav .show>.nav-link,
    .menu-main .navbar-expand-xxl .nav-link:hover {
        color: var(--jg-font-over);        
    }

    .menu-main .navbar-brand {
        position: absolute;
        top: 37%;
        left: 50%;
        transform: translate(-50%, -50%);
    } 
    .menu-main .navbar-text a,
    .menu-main .navbar-text a:focus {
        color: var(--jg-font-color-nav);
    }
    .menu-main .navbar-text .list-inline-item:not(:last-child) {
        margin-right: 1.5rem;
    }

    
    .menu-main .navbar-toggler {
        border: none;
        padding: 0;    
    }
        .menu-main .navbar-toggler:focus {
            box-shadow: none;
        }

    .menu-overlayed {
        position: fixed;
        top: 0;
        background-color: var(--jc-bg-color-menu);
        bottom: 0;
        z-index: 102;
        padding: 26px 0px;
        overflow-y: auto;
        overflow-x: hidden;
        display: none;
        font-size: 2rem;
        width: 100%;            
    }
    .menu-overlayed a {
        color: var(--jg-font-color-nav);
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 15px;
        display: inline-block;
    }
        .menu-overlayed a.active {
            border-bottom: solid 3px var(--jg-font-color-nav);
        }
    .menu-overlayed img.scalable {
        scale: 1.5;
        padding: 0 0.5rem;
    }    
    .menu-overlayed .menu-close {
        position: absolute;
        right: 5rem;
        top: 0rem;
        font-size: 1.5rem;
    }


.zoom-out {
  transform: scale(1.2);
  animation: zoomOut 8s forwards;
}
@keyframes zoomOut {
    to {
        transform: scale(1);
    }
}


.veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    width: 100%;
    height: 100%;
    z-index: 10;
}
    .veil.slide-out {
        animation: veilOut 5s forwards;
    }
    @keyframes veilOut {
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
    
section#company {}
    section#company .main-wrapper.history {
        padding-left: 16%;
        padding-right: 16%;
    }
    section#company h1 {
        margin-top: 5%;
    }
    section#company .img-main {
        max-width: 65%;        
    }


#home {}
    #home .banner {
        position: relative;
        width: 100%;
        height: 800px;
        overflow: hidden;
    }

    #home  .slide {
        position: absolute;
        inset: 0;
        display: none;
    }
        #home .slide.active {
            display: block;
        }

    #home .floating-text {
        position: absolute;
        bottom: 31%;
        left: 10%;
        font-size: 32px;
        opacity: 0;
        transform: translateY(100px);
        color: var(--jg-bg-color);
        font-size: 3.8rem;
        font-weight: 800;
        line-height: 4.3rem;    
    }
        #home .floating-text .before-line {
            border-top: solid var(--jg-bg-color) 10px;
            padding-bottom: 1.6rem;
            width: 100px;
        }
        #home .floating-text.show {
            animation: textIn 1s forwards;
        }

    @keyframes textIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
   
    #home .dots {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 12px;
        z-index: 10;
    }
    #home .dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: rgba(255,255,255,0.4);
        cursor: pointer;
        transition: background 0.3s, transform 0.3s;
    }
        #home .dot:hover {
            transform: scale(1.2);
        }
        #home .dot.active {
            background: #fff;
        }
        
    #home #s-slider h1 {
        margin-left: 44px;
    }
	/*
	#home #s-slider .swiffy-slider .slider-container li {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8f8f8;
	}

	#home #s-slider .swiffy-slider .slider-container img {
		width: 100%;
		height: 272px;
		object-fit: contain;
	}
	*/
    #home #contacto h3 {
        color: var(--jg-font-color);
        font-size: 1.3rem;
        margin-bottom: 2rem;
        margin-top: 4rem;
        text-align: center;
    }

 #empresa {}
    #empresa .icon-list {
        margin-top: 1rem;
        padding: 3rem 4rem;
    }
    #empresa .icon-list figure {
        font-size: 1.1rem;
        font-weight: 400;
    }
        #empresa .icon-list figure figcaption {
            margin-top: 2.5rem;
            line-height: 1.4rem;
            padding: 0 3rem;
        }
    #empresa .img-fit {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
        

#servicios {}
    #servicios h3 {
        color: var(--jg-font-color);
        font-size: 1rem;
        margin-top: 0;    
    }
    #servicios h4 {
        font-size: 1rem;
        font-weight: 700;
        margin-top: 1.5rem;
    }
    #servicios li:not(.menu-overlayed li) {
        line-height: 1rem;
    }
   


/* contacto */
#contacto {}
    #contacto .banner {
        height: 800px;
    }
    #contacto h2 {
        color: var(--jg-font-color);
        font-size: 1.7rem;
        margin-bottom: 2.4rem;
        margin-top: 4rem;
    } 

    #contacto .icon-13 {
        scale: 1.3;
    }
    #contacto .icon-15 {
        scale: 1.65;        
    }
    #contacto .mt--7p {
        margin-top: -7px;
    }
    #contacto .mt--10p {
        margin-left: 5px;
    }
    #contacto .data {
        font-size: 1.7rem;
        font-weight: 500;
        padding-bottom: 70px;
    }
    #contacto .form {
        padding-right: 6rem;
    }
        #contacto form label {
            font-size: 1.35rem;
            font-weight: 500;
            margin-bottom: 3px;
            width: 100%;
        }
        #contacto form input[type="text"],
        #contacto form textarea {
            background-color: #e2e0e0;
            border: none;
            height: 50px;
            margin-bottom: 10px;
            padding: 15px;
            width: 100%;
        }
        #contacto form textarea {
            height: 11rem;        
        }

        form a.send {
            background-color: var(--jg-green);
            color: var(--jg-bg-color);
            padding: 0px 50px 0px 50px;
            text-decoration: none;
            font-size: 1.35rem;
            font-weight: 500;
            height: 50px;
            display: block;
            line-height: 50px;
            margin-top: 12px;
        }
            form a.send:hover {
                background-color: var(--jg-font-over);
                color: var(--jg-bg-color)!important;
                transition: 0.5s;
            }

        #contacto .error {
            border: solid 1px #ff165f!important; 
        }
        #contacto form .sending,
        #contacto form .sended,
        #contacto form .no-sended {
            display: none;
            text-align: center;
        }
            

/* footer */
footer {
    background-color: #bbbdb5;    
    font-size: 1rem;    
    font-weight: 700;
    padding: 1rem;
}
    footer .whatsapp {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
    }
    footer a:hover {
        color: #fff !important;        
    }