:root{

--flux-container-size: 2rem;
--border-radius: 0.5rem;
--pricing-color:#f2ebd6;
--p-color:#5f5842;
--title-color:#232323;
--accent-color:#8797b1;
--btn-hover:#b7948e;
--bg-light:#f4f4f4;
--color-wa:rgb(37, 199, 37);
--font-family:'Roboto';
--accent-font-family:'Lustria';

--margin:auto;
--container-max-width:100%;

--grid-columns:3;
--col-mode:auto-fit;
--col-min:auto;
--col-max:1fr;
--header-gap:35%;


--gap:1rem;
--gapx2:2rem;

--half-size:0.5rem;
--size:1rem;
--sizeX2:1.5rem;
--sizeX3:2rem;
--sizeX4:2.5rem;
--sizeX5:3rem;

}

/**Base**/

*:not(hr){
    margin: 0;
    border: 0;
    
}

body{
    max-width: 100%;
    font-family: var(--font-family);
    color:var(--p-color);
    font-size: 1.08rem;
}

::marker{
    font-size: var(--sizeX2);
}

a{
    text-decoration: none;
}


img,video{
    max-width: 100%;
    height: auto;
    margin:0 auto
}
iframe{
    width: 100%;
}

section{
    padding: 4em 0;
}
section:nth-child(odd):not(:first-of-type){
    background: var(--bg-light);
}



p{
    margin-bottom: var(--sizeX3);
    color:var(--p-color);
    line-height: var(--sizeX2);
    font-weight: 500;
}



/**Utility**/
.mx-auto{
    margin:0 auto
}
.text-white{
    color:white !important;
}
.bg-light{
    background-color: var(--bg-light);
}

.dark-font{
    color:#232323;
}

.lead{
    font-family: var(--accent-font-family);
    color:var(--title-color);
    margin-bottom: var(--size);
    font-size: var(--sizeX2);
}

.color-primary{
    color:var(--accent-color);
}
.accent-font{
    font-family: 'Lustria';
}

.text-center{
    text-align: center;
}

.text-uppercase{
    text-transform: uppercase;
}

.mb-0{
    margin-bottom:0 !important
}

.my-3{
    margin: var(--sizeX3) auto !important;
}
.my-5{
    margin: var(--sizeX5) auto !important;
}

.my-max{
    margin:88px auto!important
}

.mt-1{
    margin-top:var(--size)
}

/**Components**/

/**Header**/
header{
    position: sticky;
    top:0;
    background: white;
    z-index: 99;
}

.head{
    display: flex;
    justify-content: center;
    padding-block: var(--size);
    flex-wrap: wrap;
}

.head img{
    max-width: 50%;
    margin: 0;
}
.head button{
    display: none;
}

.title{
    color:var(--title-color);
    font-family: var(--accent-font-family);
    font-size: var(--sizeX3);
    margin-bottom: var(--sizeX2);
}

.hero{
    padding: 0;
   /* background-size: cover;
    background: url(../images/slide_ori.webp) center center;
    height: 630px;*/

}

.hero-text{
    color:white;
    max-width: 50%;
}

.hero-text__title{
    font-size: clamp(2rem,3rem,6em);
    line-height: 1.15;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-family: var(--accent-font-family);
}

.hero-text__paragraph{
    font-size: 1.3rem;
    margin-bottom: 30px;
}

.hero img[alt="slide ori"]{
    display: none;
}


.custom-list{
    list-style-type: circle;
    padding-left: 0;
    margin-left: 1rem;
}


.list-item{
    margin-bottom: var(--size);
}


.pricing-list-wrapper{
    background:var(--pricing-color);
    padding: var(--sizeX2);
}

.pricing-list{
    list-style-type: none;
    padding-left:0;
    margin-left: 0;
}

.pricing-list__item{
    display: flex;
    justify-content: space-between;
}

.pricing-list__item{
    padding: var(--size) 0;
    border-bottom: 1px dashed var(--p-color);
    
}

.pricing-list__item__title{
    font-family: var(--accent-font-family);
    font-size: var(--size);
    color: var(--title-color);
    margin-bottom: var(--half-size);
}


.mini-heading{
    color: var(--accent-color);
    font-family: var(--accent-font-family);
    font-size: var(--sizeX2);
    margin-bottom: var(--sizeX2);
}

.centered-heading{
    font-family: var(--accent-font-family);
    color: var(--title-color);
    font-size: var(--sizeX2);
    margin-bottom:var(--half-size)
}
.masonry-wrap{
    position: relative;
}
.masonry-item__mini-title{
    font-weight: bold;
    text-transform: uppercase;
    color: var(--accent-color);
    font-size: var(--size);
    margin: var(--size) 0;
}

.masonry-item__title{
    color:var(--title-color);
    font-size: var(--sizeX2);
    margin: var(--size) 0;
    font-family: var(--accent-font-family);
}

.column-text__header{
    font-family: var(--accent-font-family);
    font-size: var(--sizeX4);
    color: var(--title-color);
    margin-bottom:var(--size) ;
}

.video-card{
    margin-top:var(--sizeX5) ;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
}
.video-card__video{
    width: 100%;
    height: 100%;
    position: relative;
}

.video-card__video-play-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    transform: translate(-50%, -50%);
}

.video-card__video-play-btn svg{
    background: white;
    border-radius: 50%;
}

.video-card__description{
    padding: var(--sizeX3);
    background: var(--accent-color);
    color:white;
}



.masonry-item{
    position: absolute;

    overflow: hidden;
}


.full-video{
    max-width: 100%;
    height: 460px;
    padding: 0;

}

.full-video a{
    height: 100%;
    display: block;
    position: relative;
    
}
.full-video img{
    height: 100%;
    object-fit: cover;
    width: 100%;
}


.btn{
    padding: var(--size) var(--half-size);
    width: clamp(250px,300px,400px);
    font-weight: bold;
    margin-top:var(--size);
    transition: all 200ms;
}

.btn--primary{
    background: var(--accent-color);
    color: white;
}

.btn--unstyled{
    background: var(--pricing-color);
    padding: var(--half-size) var(--size) ;
    width: auto;
    margin: 0;
    font-size: 16px;
    color: var(--title-color);
}


.btn--primary:hover,
.btn--unstyled:hover{
    background: var(--btn-hover);
}


form{
    max-width: 100%;
}

form >*:not(label){
    border-radius: var(--border-radius);
    border: 1px solid #e0d9c5;
    padding: var(--size);
    width: clamp(250px,90%,100%);
    margin: var(--size) 0;
    display: block;
    

}

form button{
    width: auto;
    margin-bottom: var(--sizeX5);
    margin-inline: 0 !important;
    border-radius: 0;
}


input::placeholder, textarea::placeholder,option{
    font-size: var(--size);
    font-family:var(--font-family);
}


.btn-whatsapp{
    background: var(--color-wa);
    padding:var(--half-size) var(--size);
    border-radius: var(--border-radius);
    font-weight: bold;
    display: inline-flex;
    gap: var(--half-size);
    align-items: center;

}
.social-wrapper{
    margin:var(--sizeX3) auto;
}
a.social{
    font-size: 2rem;
    margin:var(--sizeX3) auto
}
.btn--icon{
    display: inline-flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}
/**Footer**/

.h-menu {
    list-style: none;
    padding: 0.9rem 0;
    display: flex;
    gap: var(--size);
    background: #c23d3d;
    position: fixed;
    bottom: 0;
    justify-content: center;
    width: 100%;
}


#alerts{
    margin: 0;
    border: none;
    padding: 0;

}

.alert{
    padding: var(--size) !important;
    color: white;
    font-size: var(--size);
    line-height: 2rem;
    margin-top: var(--size) !important;
}
.alert--success{
    background: #83A342;

}
.alert--danger{
    background: #b92d2d;

}


/**Grid**/
.grid{
    display: grid;
    
}

.grid--fixed-columns{
    gap:var(--header-gap);
    grid-template-columns: repeat(var(--grid-columns),minmax(var(--col-min),var(--col-max)));
}

.grid--wrapped-columns{
    --col-min:250px;
    gap: 1rem;
    grid-template-columns: repeat(var(--col-mode),minmax(calc(var(--col-min) - 1rem),var(--col-max)));
    align-items: center;
}

.grid--wrapped-2columns{
    
    gap:var(--gap);
    grid-template-columns: repeat(var(--col-mode),minmax(calc(var(--col-min) - var(--gap)),var(--col-max)));
}

.grid--wrapped-2columnsx2{
    
    gap:var(--gapx2);
    grid-template-columns: repeat(var(--col-mode),minmax(calc(var(--col-min) - var(--gapx2)),var(--col-max)));
}


/*Container*/
.container--wide{
    width: calc(var(--container-max-width) - var(--size));
    max-width: var(--container-max-width);
    margin: var(--margin);
}
.container{
    width: calc(100% - var(--size)*2);
    max-width: var(--container-max-width);
    margin: var(--margin);
}


@media screen and (min-width:576px){
    
   

    .container{
        --container-max-width:540px;

    }
    
}

@media screen and (min-width:768px){

    .grid--wrapped-2columns{
        --col-min:50%;
    }

    .container{
        --container-max-width:720px;
        
    }
}

@media screen and (min-width:992px){
    img[alt="slide ver"]{
        display: none;
    }
    img[alt="slide ori"]{
        display: block !important;        
        width: 100%;
    }

    .container{
        --container-max-width:960px;
        
    }

    .head {
        justify-content: space-between !important;
    }

    .head button{
        display: inline-block;
    }
}

@media screen and (min-width:1200px){
    .container{
        --container-max-width:1140px;
        
    }

    .h-menu-wrapper{
        display: none;
    }
}

@media screen and (min-width:1400px){
    .container{
        --container-max-width:1320px;
    }
}