/*-----------------------------------------------------------------------------
Author: Salvatore Cozzolino
Site version 1.0
Component CSS style
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
* Design Name: L&B Consulting
* Author: Salvatore Cozzolino
* Site: https://www.cozzolinosalvatore.it
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
Font face Inter regular (400) and bold (700)
-----------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*-----------------------------------------------------------------------------
Font face Arno Pro Bold (700)
-----------------------------------------------------------------------------*/
/*@import url("https://use.typekit.net/wta0wyi.css");*/
/*-----------------------------------------------------------------------------
Font face Lexend - Goggole Fonts
-----------------------------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Ledger&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&display=swap');
/*Bold
font-family: "arno-pro", serif;
font-weight: 700;
font-style: normal;

Bold Italic
font-family: "arno-pro", serif;
font-weight: 700;
font-style: italic;
*/

/*Color and fontface vars*/
:root{
  --leb-color-main:      #0f2c27;
  --leb-color-text:      #404040;
  --leb-color-second:    #829077;
  --leb-color-third:     #d0c7be;
  --leb-color-fourth:    #7d7e6d;
  --leb-color-light:     #f4f5ef;
  --leb-color-white:     #FFFFFF;
  --leb-color-accent:    #b79d74;
  
  /*--leb-fontface-main: 'Pt Serif', serif;*/
  --leb-fontface-main: "Frank Ruhl Libre", serif;
  --leb-fontface-page: "Open Sans", sans-serif;
  
  /*Sizes small to extra larg*/
  --s-xs:   0.75rem;/*12px*/
  --s-s:    1.50rem;/*24px*/
  --s-m:    3.00rem;/*48px*/
  --s-l:    4.50rem;/*72px*/
  --s-xl:   6.00rem;/*96px*/
  --s-xxl: 12.00rem;/*192px*/
}
/*-----------------------------------------------------------------------------
Colors
-----------------------------------------------------------------------------*/
.leb-main     {color: var(--leb-color-main)!important;}
.leb-text     {color: var(--leb-color-text)!important;}
.leb-second   {color: var(--leb-color-second)!important;}
.leb-third    {color: var(--leb-color-third)!important;}
.leb-fourth   {color: var(--leb-color-fourth)!important;}
.leb-light    {color: var(--leb-color-light)!important;}
.leb-white    {color: var(--leb-color-white)!important;}
.leb-accent   {color: var(--leb-color-accent)!important;}
/*-----------------------------------------------------------------------------
Background colors
-----------------------------------------------------------------------------*/
.leb-bg-main     {background-color: var(--leb-color-main);}
.leb-bg-text     {background-color: var(--leb-color-text);}
.leb-bg-second   {background-color: var(--leb-color-second);}
.leb-bg-third    {background-color: var(--leb-color-third);}
.leb-bg-fourth   {background-color: var(--leb-color-fourth);}
.leb-bg-light    {background-color: var(--leb-color-light);}
.leb-bg-white    {background-color: var(--leb-color-white);}
.leb-bg-accent    {background-color: var(--leb-color-accent);}
/*-----------------------------------------------------------------------------
Bootstrap overwrite container
-----------------------------------------------------------------------------*/
@media (min-width: 1600px) {
  .container {
    max-width: 90%;
  }
}
/*-----------------------------------------------------------------------------
breadcrumb
-----------------------------------------------------------------------------*/
.breadcrumb{
  font-weight: 400;
  font-size: 1rem;
}
.breadcrumb a{
  font-weight: 700;
  font-size: 1rem;
  color: var(--leb-color-text);
  text-decoration: none;
  transition: color .35s ease;
  font-family: var(--leb-fontface-page);
}
.breadcrumb a:hover{
  color: var(--leb-color-accent);
}
/*-----------------------------------------------------------------------------
Image utility
-----------------------------------------------------------------------------*/
.img-fluid{
  width: 100%;
}
/*-----------------------------------------------------------------------------
Overlay page transition
-----------------------------------------------------------------------------*/
.overlay-page {
  display: flex;
  justify-content: center;
  align-content: center;
  
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  
  z-index: 99999;
  
  background: var(--leb-color-main);
}
.overlay-page img {
  align-self: center;
  position: relative;
}
/*-----------------------------------------------------------------------------
Back to top Style
-----------------------------------------------------------------------------*/
#backToTop, #whatsapp{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all .3s ease;
  width: 4.5rem;
  height: 4.5rem;

  font-size: 1.5rem;
  line-height: 4.5rem;
  text-align: center;

  border-radius: 6rem;
  z-index: 9999;
  text-decoration: none;
}
#backToTop{
  right: 2rem;
  bottom: 2rem;
  background-color: var(--leb-color-accent);
  opacity: 0;
}
#whatsapp{
  right: 1rem;
  bottom: 2rem;
  color: var(--leb-color-white);
  background-color: #075E54;
}
#backToTop i{
  color: var(--leb-color-light);
}
/*-----------------------------------------------------------------------------
Override bootstrap height utility Style
-----------------------------------------------------------------------------*/
.min-vh-100{
  min-height: calc(100vh - 80px);
}
/*-----------------------------------------------------------------------------
General Section Style
-----------------------------------------------------------------------------*/
.section{
  padding: clamp(var(--s-xl), 10vw, var(--s-xxl)) 0;
}
.section-t{
  padding-top: clamp(var(--s-xl), 10vw, var(--s-xxl));
}
.section-b{
  padding-bottom: clamp(var(--s-xl), 10vw, var(--s-xxl));
}
.inner-section{
  padding: clamp(var(--s-m), 5vw, var(--s-xl)) 0;
}
.inner-section-t{
  padding-top: clamp(var(--s-m), 5vw, var(--s-xl));
}
.inner-section-b{
  padding-bottom: clamp(var(--s-m), 5vw, var(--s-xl));  
}
.inner-page{
  height: 80px;
}
/*-----------------------------------------------------------------------------
Padding auto from 1.5rem to 3rem
-----------------------------------------------------------------------------*/
.p-auto{
  padding: clamp(var(--s-s), 1.5625vw, var(--s-m));
}
.px-auto{
  padding: 0 clamp(var(--s-s), 1.5625vw, var(--s-m));
}
.py-auto{
  padding: clamp(var(--s-s), 1.5625vw, var(--s-m)) 0;
}
.pr-auto{
  padding-right: clamp(var(--s-s), 1.5625vw, var(--s-m));
}
.pl-auto{
  padding-left: clamp(var(--s-s), 1.5625vw, var(--s-m));
}
/*-----------------------------------------------------------------------------
Padding left or right from 2rem to 8.3% for sections
-----------------------------------------------------------------------------*/
.p-section-auto{
}
.pr-section-auto{
}
.pl-section-auto{
}
@media screen and (min-width: 992px){
  .p-section-auto{
    padding: 0 8.3%;
  }
  .pr-section-auto{
    padding-right: 8.3%;
  }
  .pl-section-auto{
    padding-left: 8.3%;
  }
}
/*------------------------------------------------
Link CTA style
------------------------------------------------*/
.cta-link{
  display: inline-block;
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  text-decoration: none;
  font-size: 1.25rem;
  text-align: center;
  color: var(--leb-color-light);
  background-color: var(--leb-color-accent);
  border-radius: 4rem;
}
.cta-link i{
  display: none;
}
@media (hover: hover){
  .cta-link{
    position: relative;
    display: inline-block;
    width: auto;
    height: 4rem;
    line-height: 4rem;
    text-decoration: none;
    font-size: 1.25rem;
    text-align: center;
    background-color: unset;
  }
  .cta-link i{
    position: relative;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    color: var(--leb-color-light);
    background-color: var(--leb-color-second);
    border-radius: 64px;
  }
  .cta-link span{
    position: relative;
    left: -4rem;
    display: inline-block;
    height: 4rem;
    padding: 0 2rem;
    line-height: 4rem;
    color: var(--leb-color-light);
    background-color: var(--leb-color-accent);
    border-radius: 64px;
    transform-origin: left;
    transition: all .35s ease;
  }
  .fi{
    transform-origin: left;
    transform: scale(0);
    transition: all .35s ease;
  }
  .si{
    left: -4rem;
    transform-origin: right;
    transform: scale(1);
    transition: all .35s ease;
  }
  .cta-link:hover span{
    left: 0;
  }
  .cta-link:hover .fi{
    transform: scale(1);
  }
  .cta-link:hover .si{
    transform: scale(0);
  }
}
/*-----------------------------------------------------------------------------
Wrapping image style
-----------------------------------------------------------------------------*/
.img-wrap{
  overflow: hidden;
  border-radius: .75rem;
}
.img-wrap img{
  transition: .35s ease;
}
.img-wrap:hover img{
  transform: scale(1.1) rotate(.75deg);
}
/*-----------------------------------------------------------------------------
End components style
-----------------------------------------------------------------------------*/