/* ===================================
    styles.css
  ====================================== */

  /*Definim variables constans*/
:root {
  --colorprimari: rgba(42, 39, 49);
  --colorblau: rgba(128, 140, 197);
  --colorgris: #e1e7ee;
  --colorvainilla: rgba(251, 240, 214);
}

section.llamada {
    padding: 80px 0;
    background: var(--colorprimari);
}

/* theme color and basic options */

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: 'Barlow', sans-serif; }


.colorprimari {
  color: var(--colorprimari);
}
.blanc{
    color: #fff;
}
.gris{
    color: #e1e7ee;
}


.texte-dorat {
    --bs-text-opacity: 1;
    color: var(--colorvainilla);
}


.texte-gris {
    --bs-text-opacity: 1;
    color: var(--colorgris);
}


.title-style8 {
    padding-bottom: 15px;
    padding-left: 40px;
    padding-top: 25px;
    position: relative;
    font-weight: 600;
    z-index: 1;
}

.title-style8:before {
    /*border: 5px solid var(--colorgris);
    left: 0;
    top: 0;
    width: 150px;*/
    border: 3px solid var(--colorblau);
    left: 5%;
    top: 100%;
    width: 194px;
    bottom: 0;
    content: "";
    margin: auto;
    position: absolute;
    z-index: -1;
}

  

/* Button style */
.butn {
  background: var(--colorblau);
  color: #fff;
  border-radius: 10px;
  font-weight: 500;
  padding: 15px 20px;
  display: unset;
}

a.butn:hover, a.butn:active {
    background: var(--colorvainilla);
    color: var(--colorprimari); }
/*
.butn:hover {
    background: var(--colorvainilla);
    color: var(--colorprimari);}

.butn:before {
    background: var(--colorvainilla);
    color: var(--colorprimari);}*/



.butn.white {
  background: var(--colorvainilla);
  color: var(--colorprimari);
  border-radius: 10px;
  font-weight: 500;
  padding: 15px 20px;
}
a.butn.white:hover, a.butn.white:active {
    background: var(--colorblau);
    color: white;
}



.bg-primari {
  background: var(--colorprimari);
}

.bg-blau {
  background: var(--colorblau); }

.price .value h3 span {
font-size: 20px;
position: absolute;
top: 5px;
right: 10; }

.price .valor {
  padding: 20px 0 2px 0;
  position: relative; }
.price .valor h3 {
    display: inline-block;
    padding-right: 10px;
    font-size: 30px;
    font-weight: 400;
    position: relative;
    margin-bottom: 0; }
.price .valor h3 span {
font-size: 25px;
position: absolute;
top: -4px;
right: 10; }

.price .type {
    background: var(--colorblau);
}
.price .active .type {
    background: var(--colorprimari);
}

.box-circle-large {
left: 0;
bottom: 0;
width: 1.37em;
height: 1.37em;
background: rgba(251, 249, 214, 0.5); }

.box-circle-small {
  top: 0;
  right: 0;
  width: 0.59em;
  height: 0.59em;
  background: rgba(251, 249, 214, 1); }



.bg-light-gray {
    background-color: var(--colorgris);
}

.banner-creative {
  background: var(--colorprimari);
  padding: 15% 0; }



/* ===================================
    nav-menu.css
  ====================================== */
.menu_area-light .navbar-nav > li > a { font-size: 15px; color: var(--colorvainilla);}
.attr-nav > ul > li > a { color: var(--colorvainilla);}


@media screen and (min-width: 992px){
    .header-style5 #top-bar { background: var(--colorvainilla); }
    .header-style5 #top-bar i { font-size: 18px; color: #fff; } 
    .scrollHeader .attr-nav > ul > li > a { color: #38393a;}
}

@media screen and (max-width: 991px){ 
    .header-style5 .navbar-toggler { background: #efefef; }
    /*Canviam color texte menu mobils*/
    .menu_area-light .navbar ul li a {color: #38393a;}
    .attr-nav > ul > li > a {padding: 0 0 10px 0;    }
}