@import url("assets/css/owl.carousel.min.css");
    @import url("assets/css/owl.theme.default.min.css");

    @import url("assets/css/bootstrap.min.css");
    
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



/* Definició de colors UPV */

    body {
    --base-font-family: "Inter", sans-serif;
    --alternative-font-family: "Poppins", sans-serif;
    --regular-font-weight: 400;
    --bold-font-weight: 700;
    --base-line-height: 1.3;
    --primary: #D73333;
    --primary-dark: #A40E0E;
    --secondary: #59CBE8;
    --secondary-dark: #338FC2;
    --dark: #111111;
    --bg-base: white;
    --white: white;
    --gray: #CFCFCF;
    --gray-light: #F1F1F1;
    --gray-dark: #5B5B5B;
    --gray-upv: #5B6770;
    --gray-dark-upv:#3F4444;
    --box-shadow-sm: 0px 2px 6px rgba(0, 0, 0, 0.15);
    --box-shadow-lg: 0px 3px 9px rgba(0, 0, 0, 0.20);
    --base-font-size: 1.25rem;
    --small-font-size: 1rem;
    --extra-small-font-size: 0.75rem;
    --h1-font-size: 4rem;
    --h2-font-size: 2.625rem;
    --h3-font-size: 1.777rem;
    --h4-font-size: 1.75rem;
    --gap: 1rem;
    --margin-base: 1rem;
    --gap-xs: .5rem;
    --border-radius: 24px;
    --border-width: 1px;
    --transition-base: all ease .3s .05s
    }


    .bg-dark {
    background-color:var(--dark)
    }
    .text-dark {
    color:var(--dark) !important
    }
    .border-dark {
    border-color:var(--dark)
    }
    .bg-white {
    background-color:var(--white)
    }
    .text-white {
    color:var(--white) !important
    }
    .border-white {
    border-color:var(--white)
    }
    .bg-primary {
    background-color:var(--primary)
    }
    .text-primary {
    color:var(--primary) !important
    }
    .border-primary {
    border-color:var(--primary)
    }
    .bg-primary-dark {
    background-color:var(--primary-dark)
    }
    .text-primary-dark {
    color:var(--primary-dark) !important
    }
    .border-primary-dark {
    border-color:var(--primary-dark)
    }
    .bg-secondary {
        background-color:var(--secondary) !important
    }
    .text-secondary {
    color:var(--secondary) !important
    }
    .border-secondary {
    border-color:var(--secondary)
    }
    .bg-secondary-dark {
    background-color:var(--secondary-dark)
    }
    .text-secondary-dark {
    color:var(--secondary-dark) !important
    }
    .border-secondary-dark {
    border-color:var(--secondary-dark)
    }
    .bg-gray {
    background-color:var(--gray)
    }
    .text-gray {
    color:var(--gray) !important
    }
    .border-gray {
    border-color:var(--gray)
    }
    .bg-gray-light {
    background-color:var(--gray-light)
    }
    .text-gray-light {
    color:var(--gray-light) !important
    }
    .border-gray-light {
    border-color:var(--gray-light)
    }
    .bg-gray-dark {
    background-color:var(--gray-dark)
    }
    .text-gray-dark {
    color:var(--gray-dark) !important
    }
    .border-gray-dark {
    border-color:var(--gray-dark)
    }
    .bg-gray-upv {
    background-color:var(--gray-upv)
    }
    .text-gray-upv {
    color:var(--gray-upv) !important
    }
    .border-gray-upv {
    border-color:var(--gray-upv)
    }
    .bg-gray-dark-upv {
    background-color:var(--gray-dark-upv)
    }
    .text-gray-dark-upv {
    color:var(--gray-dark-upv) !important
    }
    .border-gray-dark-upv {
    border-color:var(--gray-dark-upv)
    }

    body {
        font-size: var(--base-font-size);
        color: var(--dark);
        font-family: var(--base-font-family);
        font-weight: var(--regular-font-weight);
        line-height: var(--base-line-height);
    }

    h1,
h2,
h3,
h4,
.carousel-title,
.h1,
.h2,
.h3,
.h4 {
 font-family:var(--alternative-font-family)
}
.text-sm {
 font-size:var(--small-font-size) !important
}
.text-xs {
 font-size:var(--extra-small-font-size) !important
}
h1,
.carousel-title,
.h1 {
 font-size:var(--h1-font-size);
 line-height:1
}
h2,
.h2 {
 font-size:var(--h2-font-size);
 line-height:1.2
}
h3,
.h3 {
 font-size:var(--h3-font-size)
}
h4,
.h4 {
 font-size:var(--h4-font-size)
}
h1,
h2,
strong,
.carousel-title {
 font-weight:var(--bold-font-weight)
}
h4,
h5 {
 font-weight:var(--regular-font-weight)
}

:is(h1,
h2,
h3,
h4,
.carousel-title):not(:only-child) {
 margin-top:1em;
 margin-bottom:max(1rem,.5em)
}
:is(h1,
h2,
h3,
h4,
.carousel-title):first-child {
 margin-top:unset
}



ul:not(.nav) li {
 margin-left:calc(var(--margin-base)*1.5);
 list-style:square
}
ul:not(.nav) li::marker {
 color:var(--primary)
}
ul:not(.nav) li>ul li::marker {
 color:var(--primary-dark)
}
ol li {
 list-style:none;
 position:relative;
 padding-left:2rem
}
ol {
 counter-reset:number
}
ol li>ol li::before {
 color:var(--primary-dark)
}
ol ol {
 margin-left:calc(var(--margin-base)*1.5)
}
ol li::before {
 content:counters(number, ".") ". ";
 counter-increment:number;
 color:var(--primary);
 position:absolute;
 left:0;
 top:0;
 font-weight:var(--bold-font-weight);
 font-family:var(--alternative-font-family)
}
ol.roman {
 counter-reset:list-counter
}
ol.roman li {
 counter-increment:list-counter
}
ol.roman li::before {
 content:counter(list-counter, lower-roman) ". "
}
.list-secondary {
 --primary: var(--secondary);
 --primary-dark: var(--secondary-dark)
}

    .btn {
        text-transform: uppercase;
        font-size: var(--extra-small-font-size);
        padding: 10px 16px;
        background-color: var(--primary);
        color: var(--white);
        text-decoration: unset;
        display: inline-flex;
        align-items: center;
        transition: var(--transition-base);
        justify-content: center;
    }

    .btn:hover {
        background-color: var(--primary-dark);
        color: #fff;
    }

    .btn.outline {
        background-color: unset;
        outline: var(--border-width) solid var(--primary);
        outline-offset: -1px;
        color: var(--primary);
    }

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

    .btn-arrow {
        background-color: var(--secondary);
        position: absolute;
        bottom: 0;
    }

    .btn-arrow:hover, .btn-arrow:focus {
        background-color: var(--secondary-dark);
        
    }

    .btn-arrow svg {
        transition: var(--transition-base);
        transform: translateX(0px);
    }

    .btn-arrow:hover svg {
        transform: translateX(10px);
        transition: var(--transition-base);
    }

    :is(h1, h2, h3, h4, .carousel-title):not(:only-child) {
        margin-top: 1em;
        margin-bottom: max(1rem,.5em);
        font-weight: 700;
    }

    .relative {
        position:relative;
    }

    .absolute {
        position: absolute;
        z-index: 1;
    }

    .section-padding {
        padding: 30px 0;
    }

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

    .text-parallax {
        position:absolute;
        top: 40px;
        right: 5%;
        z-index: 2;
    }

    .text-parallax h2 {
        font-size: 120px;
        font-weight: bold;
    }

    .poli-links p {
        font-size: var(--extra-small-font-size);
        margin-bottom: 0;
    }

    .flex {
        display: flex;
        align-items: baseline;
      }

    .flex-col {
        flex-direction: column;
        z-index: 1;
        position: relative;
        height: 100%;
      }
    
    .round {
        display: flex;
        align-items: center;
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    

    /* Navegació */

    #upv-logo {
        margin: 0 0 0 12px !important;
        padding: 0 32px 0 0;
        max-width: 220px;
    }

    .site-description, .site-title {
        word-wrap: break-word;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2em;
        color: #5B5B5B;
    }

    #site-title-text a {
        text-decoration: none;
    }

    ul.nav li a {
        color: #111111;
        text-decoration: none;
    }

    ul.nav li a.active {
        font-weight: 700;
    }


    /* Portada*/ 

    .titol-info {
        top: 10vh;
    }

    .img-form {
        width: 100vw;
        height: 120vh;
        object-fit: cover;
    }

    .caixa::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: linear-gradient(180deg,rgba(0, 0, 0, 0.78),transparent);
        transition: var(--transition-base);
        z-index: 0;
    }

    .caixa {
        min-height: 421px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        color: var(--white);
        position: relative;
        height: 100%;
        padding: 20px;
    }

    .titol-gran {
        font-size: 2rem;
        color: #f1f1f1;
        font-family: 'Dosis', sans-serif;
    }

    .p-principal {
        font-family: 'Dosis', sans-serif;
        font-size: 1.5rem;
        margin-top: 10px;
    }

    .titol-gran .mesgran {
        font-size: 1.5em;
        font-weight: bold;
    }

    .titol-gran:not(.titol-portada) {
        margin-top: 0;
    }

    .card img, 
    .ratio43 {
        aspect-ratio: 4/3;
        object-fit: cover;
    }

    figcaption {
        position: absolute;
        bottom: 5px;
        background-color: #fffc;
        padding: 5px;
        margin-left: 5px;
        font-style: italic;
        font-size: small;
    }




@media (min-width:768px){

    .site-branding {
        margin: 28px 40px;
    }

    #upv-logo {
        border-right: 1px solid #ccc;
    }

    .titol-gran {
        font-size: 5rem;
    }

    .section-padding {
        padding: 100px 0;
    }

    .header-video {
        min-height: 50vh;
    }

}

@media (max-width:767px){ 

    .owl-mobilitat .text-2 {
        bottom: 2%;left: 1%;right: auto;
    }

    .owl-mobilitat .text-3 {
        top: 5%;
    }

    .owl-mobilitat .text-4 {
        top:25%
    }

    .owl-mobilitat .text-5 {
        top: 10%;
      }


    ul.nav li a {
        font-size: medium;
    }

}