:root{
--brand:#0088D9;
--brand-dark:#0E2146;
--brand-light:#89B8E4;
--brand-light2:#EAF1FB;
--text:#0E2146;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/roboto.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-feature-settings: "ss01" 1;

}

@font-face {
    font-family: "Roboto";
    src: url("fonts/roboto-italic.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: italic;
    font-feature-settings: "ss01" 1;
}

.language-switcher a {
    color:var(--brand-dark);
    text-decoration:none;
    padding:.25rem .5rem;
    border-radius:6px;
    transition:.2s;
}


.language-switcher a.active{
    color:var(--brand) !important;
}

.language-switcher a:hover{
    color:var(--brand);
}

/* ===== SERVEIS 2  ===== */

#serveis2 {
    overflow:hidden;
}

#serveis2 .carousel-item{
    padding:4rem 5rem;
}

#serveis2 img{
    width:100%;
    height:350px;
    object-fit:cover;
    object-position:center;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

#serveis2 h2{
    font-weight:700;
    margin-bottom:1.5rem;
}

#serveis2 p{
    font-size:1.1rem;
    line-height:1.8;
    color:#666;
}

#serveis2 .carousel-control-prev,
#serveis2 .carousel-control-next{
    width:50px;
}

#serveis2 .carousel-control-prev-icon,
#serveis2 .carousel-control-next-icon{
    width:3rem;
    height:3rem;
    border-radius:50%;
    background-color:rgba(0,0,0,.25);
    background-size:45%;
}

#serveis2 .carousel-indicators{
    bottom:-40px;
}

#serveis2 .carousel-indicators button{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#bbb;
    border:0;
}

#serveis2 .carousel-indicators .active{
    background:var(--brand)   /* el teu color corporatiu */
}

/* Mòbil */

@media (max-width:991px){

    #serveis2 .carousel-item{
        padding:2rem 1rem 4rem;
        text-align:center;
    }

    #serveis2 img{
        margin-bottom:2rem;
    }

}

/* ===== SERVEIS 2 END ===== */

.card-icon{
    width: 128px;
    height: 128px;
    object-fit: contain;
}


body {
	font-family:'Roboto',sans-serif;
	font-size:18px;
	line-height:1.4;
	color:var(--text);
	background:#fafafa;
}

p {
	color: var(--brand-dark);
	font-size:1rem;
}

.card p {
	font-size:1.2rem;
}

nav a, nav li a {
	background:white;
}

nav a:hover, nav li a:hover {
	background:white;
}

.tel:hover {
    background-color: var(--brand-light) !important;
}


h1 {
    font-size:clamp(3.5rem,7vw,5rem);
    line-height:.9;
    text-transform:uppercase;
    font-weight:750;
    letter-spacing:-2px;
    /*margin-top:2rem;*/
    margin-bottom: 2rem;
}

h2 {
    font-size:clamp(1.5rem,5vw,2rem);
    font-weight:800;
    text-transform:uppercase !important;
}

h3 {
    font-size:2rem;
}

.lead{
    font-size:1.15rem;
    font-weight:400;
    margin-bottom: 2rem;
}


em,i {
    font-style: italic;
}

strong {
	font-weight:500;
}

/*a {
	color:var(--brand-dark);
	text-decoration:none;
}*/

a {
    color: inherit;
    text-decoration: none;
    background: var(--brand-light);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: .2s;
}

a:hover {
    background: var(--brand-light);
}





.hero {
	background:linear-gradient(180deg, white, var(--brand-light2));
	background:var(--brand-dark);
}

@media (min-width: 992px) {

	.hero {
		position: sticky;
	    background-attachment: fixed;
	    top: 0px;
	    z-index: 0;
	}

	main {
   		position: relative;
    	z-index: 1;
	}
}

#serveis {
	background-color:#F7FAFD;
}

#serveis2 {
    background-color:#fff;
}

#mapa {
	background-color:#EEF4FC;
}

iframe {
	margin-bottom:-5px !important;
}




h1,h2,h3,h4,h5 {
	color:var(--brand-dark);
}

.btn-brand{
	background:var(--brand);
	color:#fff;
	border:none;
}
.btn-brand:hover{
	background:var(--brand-dark);
	color:#fff;
}
.hero-box{
	padding:3rem;
	text-align:center;
}

.card {
	border:none;border-radius:10px;
	background:white;
	box-shadow:0 10px 25px rgba(0,0,0,.06);
	transition:.25s
}

.card-body:hover{
	transform:translateY(-10px)
	
}

.card h5 {
    font-size: 1.5rem;
    text-transform:uppercase;
    font-weight:700;
}




.card-body {
transition:.25s
    /*display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: --text;*/
}

.card-body p {
    flex-grow: 1;
}



footer {
	background:var(--brand-dark);
}

footer p {
	font-weight:400;
	color:#fff;
	font-size: 1rem;
	padding:60px 0px;
}