/* Global */


*{
    
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

:root {
    --Strada-Silver: #D3D7D1;
    --Strada-Pale-Silver: #F5F4EF;
    --Strada-Deep-Silver: #A2A09C;
    --Strada-Charcoal: #383D45;
    --Strada-Pale-Gold: #F3E5BE;
    --Strada-Gold: #BDAD8B;
    --Strada-Deep-Gold: #7D725C;
    --Strada-Black: #000;
    --Color-Neutral-neutral-lightest: #EEE;
    --Strada---Error-State: #D79002;
    
    --Sizes-Display-1: 80px;
    
    --Sizes-Heading-1: 48px;
    --Sizes-Heading-2: 30px;
       
    --Sizes-Body-1: 16px;
    --Sizes-Body-2: 18px;
    
    --Sizes-Button-L: 16px;
    --Sizes-Button-S: 14px;
}


@media only screen and (max-width: 990px) {
    
    :root {

        --Sizes-Display-1: 48px;
        
        --Sizes-Heading-1: 32px;
        --Sizes-Heading-2: 22px;
        
        --Sizes-Body-1: 14px;
        --Sizes-Body-2: 15px;
}
    
}

h1{
    font-size: var(--Sizes-Heading-1);
    margin-bottom: 32px;
}

h2{
     font-size: var(--Sizes-Heading-2);
}

@media only screen and (max-width: 990px) {
   
h1{
    margin-bottom: 24px;
} 
}


@font-face {
  font-family: 'strada-icons';
  src: url('./assets/icons/strada-icons.eot?48719701');
  src: url('./assets/icons/strada-icons.eot?48719701#iefix') format('embedded-opentype'),
       url('./assets/icons/strada-icons.woff2?48719701') format('woff2'),
       url('./assets/icons/strada-icons.woff?48719701') format('woff'),
       url('./assets/icons/strada-icons.ttf?48719701') format('truetype'),
       url('./assets/icons/strada-icons.svg?48719701#strada-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}


body{
     -webkit-font-smoothing: antialiased;
}


@keyframes slideIn {
  from {margin-right: -270px; }
  to { margin-right: 0px;}
}


@keyframes slideOutTop {
  from {
      margin-top: -20px;
      opacity:0; 
    }
  to { 
      margin-top: 0px;
      opacity:1;
    }
}


@keyframes slideInTop {
  from {
      margin-top: 0px;
      opacity:1; 
    
    }
  to { 
      margin-top: -10px;
      opacity:0;
     
    }
}


/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--Strada-Deep-Silver);
    margin-left: 16px;
    margin-right: 16px;
    height: 4px!important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #F5F4EF;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Keep the scrollbar always visible */
::-webkit-scrollbar-thumb:vertical {
  min-height: 4px!important;
}


body{
    margin: 0;
}

*{
    font-family: "Instrument Sans", sans-serif;
}

section{
    padding-top: 80px;
    padding-bottom: 80px;

}

@media only screen and (max-width: 990px) {
    
    
    section{
    padding-top: 48px;
    padding-bottom: 48px;
}
    
}

.container{
    max-width: 1200px;
    padding-left: 120px;
    padding-right: 120px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1350px) {
    
    .container{
        padding-left: 40px;
        padding-right: 40px;
    }
}


@media only screen and (max-width: 990px) {
    
    .container{
        padding-left: 16px;
        padding-right: 16px;
    }
    
}

.parallax{
    
    background-position: 50% 40%;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 380px;
}

.parallax .overlay{
    background: url("./assets/images/overlay.svg");
    background-size: contain;
    background-position: 100% -1%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}


.flex{
    display: flex;
}

@media only screen and (max-width: 1040px) {
    .flex{
        flex-direction: column;
    }
    


}

@media only screen and (max-width: 990px) {
    .flex{
        flex-direction: column;
    }
    


}

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

    .parallax{
        background-attachment: inherit;
        height: 104px;
        min-height: 104px;
      
    }

}




.buttonL {
    color: var(--Strada-Pale-Silver);
    font-size: var(--Sizes-Button-L);
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 50px;
    border: 2px solid var(--Strada-Pale-Silver);
    display: flex;
    padding: 12px 24px;
    text-decoration: none;
    transition: all 0.4s;
}

.buttonL:hover{
    border-radius: 50px;
    border: 2px solid var(--Strada-Pale-Silver);
    background: var(--Strada-Silver-Gradient, linear-gradient(110deg, #D3D7D1 0.62%, #F5F4EF 29.65%, #F5F4EF 65.27%, #A2A09C 96.62%));
    color: var(--Strada-Charcoal);

    /* Button L */
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.buttonS {
    color: var(--Strada-Pale-Silver);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 50px;
    border: 2px solid var(--Strada-Pale-Silver);
    display: flex;
    padding: 7px 24px;
    text-decoration: none;
    transition: all 0.4s;
    max-height: 32px;
}

.buttonS:hover{
    border-radius: 50px;
    border: 2px solid var(--Strada-Pale-Silver);
    background: var(--Strada-Silver-Gradient, linear-gradient(110deg, #D3D7D1 0.62%, #F5F4EF 29.65%, #F5F4EF 65.27%, #A2A09C 96.62%));
    color: var(--Strada-Charcoal);

    /* Button L */
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 700;
}

.button.gold{
    color: var(--Strada-Pale-Gold);
    border: 2px solid var(--Strada-Pale-Gold);
}

.button.gold:hover{
    color: #FFF;
    border: 2px solid #FFF;
    background: none;
}

.button.charcoal{
    border-radius: 50px;
    border: 2px solid var(--Strada-Charcoal);
    color: var(--Strada-Charcoal);

}

.button.charcoal:hover{
    border: 2px solid #FFF;

}

.button.buttonS.charcoal:hover{
    background: var(--Strada-Pale-Silver, #F5F4EF);
}


.button.download{
    align-items: center;
}

.button.download:after{
    content: "";
    background-image: url(./assets/images/download.svg);
    height: 24px;
    width: 24px;
    margin-bottom: 2px;
    margin-left: 8px;
}


@media only screen and (max-width: 1040px) {

    .button{
        width: fit-content;
    }
}

.full-width{
    width: 100%;
}


.mob-show{
    display: none;
}

.mob-hide{
    
}


@media only screen and (max-width: 1040px) {
    
    .mob-show{
        display: block;
        margin-top: 24px;
    }

    .mob-hide{
        display: none;
    }
}






/* Header */

.header{
    position: fixed;
    background: rgba(0,0,0,0);
    width: 100%;
    height: 80px;
    z-index: 99;
}

.header.scrolled{
    background: #383D45;
    transition: all 1s;
    
}

.header > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header .nav ul{
    display: flex;
    list-style: none;
}

.header .nav ul a{
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Instrument Sans";
    margin-left: 32px;
}

.header .nav ul a:hover{
    color:#A2A09C;
}

.header .nav ul li.current_page_item a{
    color:#F3E5BE;
}

.header .logo:hover{
    filter: brightness(0) saturate(100%) invert(91%) sepia(19%) saturate(385%) hue-rotate(357deg) brightness(99%) contrast(92%);
    cursor: pointer;
}

.header .nav-mob{
    display: none;
}

.mobile-menu{
    display: none;
    transition: all 1s;
    z-index: 100;

}

.mobile-menu ul li a{
    color: #FFFFFF;
    text-decoration: none;  
    font-size: 14px;
}

.mobile-menu ul li a.active{
  color: var(--Strada-Pale-Gold, #F3E5BE);
}

.mobile-menu ul{
    margin-top: 48px;
    padding-left: 16px;
}

.mobile-menu ul li{
    margin-bottom: 40px;
    
}


@media only screen and (max-width: 990px) {
    
    .header .nav{
        display: none;
    }
    
    .header img{
        max-width: 221px;
    }
    
    .header .nav-mob{
    display: block;
    }
    
    .mobile-menu.open{
        display: block;
        position: fixed;
        height: 100%;
        width: 70%;
        max-width: 350px;
        min-width: 270px;
        top: 0px;
        right: 0px;
        background: #000000;
        padding:16px;
        margin-right: -270px;
        animation: slideIn 0.4s ease-in-out;
        animation-fill-mode: forwards;
        background-image: url("./assets/images/Mobile-menu-lines.svg");
        background-size: cover;
        
}
    
    .mobile-menu .close{
        float: right;
        
    }
    
}



/* HP Hero Component */

.hero{
    background-color: #383D45;
    padding-top: 0px;
    padding-bottom: 0px;
 
}



.hero .hero-wrap{
    background-position: 40vw bottom;
    background-size: contain;
    background-repeat: no-repeat;
}



.hero .hero-wrap.part1{
    background-position: 40vw bottom;
    padding-top: 80px;
    padding-bottom: 48px;
    background-image: url(./assets/images/contour-bg01.svg);
}

.hero .hero-wrap.part2{
    background-position: 40vw top;
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url(./assets/images/contour-bg02.svg);
}


@media only screen and (max-width: 1480px) {
    .hero .hero-wrap{
    background-size: auto;
}
    
}


@media only screen and (max-width: 768px) {
    .hero .hero-wrap{

}
    
.hero .hero-wrap.part1{
     background-position: right top;
    padding-top: 80px;
    padding-bottom: 32px;
    background-image: url(./assets/images/strada-hp-lines-01-mobile.svg);
}

.hero .hero-wrap.part2{
    background-position: right top;
    padding-top: 48px;
    padding-bottom: 48px;
      background-image: url(./assets/images/strada-hp-lines-02-mobile.svg);
}


}


.hero.metal-commodities .hero-wrap.part1{
     background-position: 60vw bottom;
    background-image: url(./assets/images/MC-contour-bg01.svg);
}


.hero.metal-commodities .hero-wrap.part2{
    background-position: 60vw top;
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url(./assets/images/MC-contour-bg02.svg);
}

.hero.metal-commodities p {
    color: var(--Strada-Pale-Gold);
}

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

.hero.metal-commodities .hero-wrap.part1{
     background-position: right top;
    padding-top: 48px;
    padding-bottom: 31px;
    background-image: url(./assets/images/strada-hp-lines-01-mobile.svg);
}

.hero.metal-commodities .hero-wrap.part2{
    background-position: right top;
    padding-top: 48px;
    padding-bottom: 48px;
      background-image: url(./assets/images/strada-hp-lines-02-mobile.svg);
}


}


.hero .display1{
    color: var(--Strada-Silver);
    font-size: var(--Sizes-Display-1);
    line-height: 110%;
    font-weight: 400;
    margin-top: 64px;
    margin-bottom: 80px;
}

.hero h1{
    color: var(--Strada-Silver);
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-weight: 500;
    line-height: 110%; 
    letter-spacing: -0.96px;
    max-width: 564px;
    margin-bottom: 32px;
    margin-top: 0px;
}

.hero p{
    color: var(--Strada-Silver);
    font-size: var(--Sizes-Body-1);
    font-weight: 400;
    line-height: 130%;
    max-width: 600px;    
    margin-top: 0px;
    margin-bottom: 0px;
    
}

.hero .hero-image{
    min-height: 380px;

}




@media only screen and (max-width: 1350px) {
    
   .hero .hero-image{
    min-height: 220px;
    background-position: 30%;
} 
}

@media only screen and (max-width: 1170px){
      .hero .hero-image{
       background-size: cover;
      
} 
}

@media only screen and (max-width: 1040px){
    
        .hero.home .button{
        margin-top: 32px;
 
}
    
       .hero h1{
           max-width: 100%;
}
    
    .hero p{
    max-width: 100%;
    
}
    
}


@media only screen and (max-width: 990px){
    

    .hero .display1{
        margin-top: 32px;
        margin-bottom: 40px;
}
    
    .hero h1{

    margin-bottom: 24px;
    margin-top: 0px;
}
    
    .hero .hero-image{
        min-height: 204px;
      
} 
    .hero.home .button{
        margin-top: 32px;
 
}

    
}


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

    .hero .hero-image{
        min-height: 104px;
    }
}


.hero .flex{
    justify-content: space-between;
}

.hero .buttonL{
}





/* Metal COmmodities Hero Component */


.hero.metal-commodities .display1{
    margin-top: 0px;
    color: var(--Strada-Pale-Gold);

    /* Display 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Display-1);
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 88px */
    letter-spacing: -1.6px;
}

.hero.metal-commodities .button-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.hero.metal-commodities .part1 .container{
    margin-top: 64px;
}

.hero.metal-commodities .buttonS{
    /* Button S */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Button-S);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 18.2px */
    text-transform: uppercase;
    margin-bottom: 24px;
    width: fit-content;
   
}


.hero.metal-commodities .part2{
    background-color: var(--Strada-Gold, #BDAD8B);
}

.hero.metal-commodities .part2 h1{
    color: var(--Strada-Charcoal);


    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
}


.hero.metal-commodities .part2 p{
    color: var(--Strada-Charcoal);

    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.hero.metal-commodities .part2 .flex{
    margin-top: 80px;
}

.hero.metal-commodities .part2 .card{
    width: calc(33.33% - 40px)
}

.hero.metal-commodities .part2 .card h2{
    color: var(--Strada-Charcoal);

    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-bottom: 16px;
}

@media only screen and (max-width: 990px) {
    
    
    
    .hero.metal-commodities .part2 .flex{
    margin-top: 0px;
    }
    
    .hero.metal-commodities .part2 .card{
        width: 100%;
        margin-top: 40px;
    }
    
    
    .hero.metal-commodities .part2 .card img{
        height: 32px;
        width: 32px;
    }
    
    .hero.metal-commodities .button-wrap{
        align-items: flex-start;
        justify-content: flex-end;
        margin-top: 40px;
    }
    
    .hero.metal-commodities .part1 .container{
        margin-top: 32px;
    }
    
    .hero.metal-commodities .buttonS:last-child{
        margin-bottom: 0px;
    }

    
}




/* CTA Component */


.cta-component{
    padding-top: 80px;
    padding-bottom: 80px;
    background:#BDAD8B;
}

.cta-component h1{
    color: var(--Strada-Charcoal);
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    max-width: 564px;
    margin-top: 0px;
    margin-bottom: 80px;
}

.cta-component .card{
    width: calc(33.33% - 60px);
}

.cta-component .card h2{
    color: var(--Strada-Charcoal);

    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-top: 24px;
    margin-bottom: 16px;
}

.cta-component .card p{
    color: var(--Strada-Charcoal);

    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-bottom: 0px;/* 20.8px */
}

.cta-component .buttonS{
   
}

.cta-component .flex{
    justify-content: space-between;
}

@media only screen and (max-width: 1040px) {
    
     .cta-component .buttonS{
   margin-top: 32px;
}
    
    
    .cta-component .card{
    width: 100%;
}
    
    .cta-component h1{
      max-width: 100%;
    }
    
}


@media only screen and (max-width: 990px) {
    
    .cta-component{
        padding-top: 48px;
        padding-bottom: 48px;
    }
    
    .cta-component h1{
        margin-bottom: 0px;
    }
    
    .cta-component .card{
        margin-top: 40px;
    }
    
    
    .cta-component .card{
    width: 100%;
}
    
    .cta-component .card img{
        height: 32px;
        width: 32px;
    }
    
    .cta-component .buttonS{
        margin-top: 40px;
    }
    
    .cta-component  .flex{
     
    }

    .cta-component .card h2{
        margin-top: 16px;
    }
}


/* Home Map Component */

.home-map .flex h2{
    color: var(--Strada-Charcoal);
    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-right: 72px;
    max-width: 564px;
    margin-top: 0px;
    margin-bottom: 64px;
}

.home-map .flex p{
    color: var(--Strada-Charcoal);
    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    max-width: 564px; 
    margin-top: 0px;
    margin-bottom: 64px;
}

.home-map .map{
    width: 100%;
}

.home-map h2{
    color: var(--Strada-Charcoal);

    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-top: 16px;
    margin-bottom: 8px;
}

.home-map .countries span{
    color: var(--Strada-Deep-Gold);

    /* Body 2 Caps Bold */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-2);
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 23.4px */
    text-transform: uppercase;
    margin-right: 8px;
}


@media only screen and (max-width: 1040px) {

    .home-map .flex h2{
     
        margin-bottom: 32px;
    }
}



@media only screen and (max-width: 990px) {
    
    .container.map-wrap{
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .home-map .flex p{
    margin-bottom: 24px;
}
    
    .home-map .map{
        overflow: hidden;
        height: 232px;
    }
    
    .home-map .map img{
        transform: scale(125%);
    }
    
    .home-map .flex h2{
        margin-right: 0px;
        margin-bottom: 24px;
    }
}





/*  Info COmponent  */

.info-component{
    background: var(--Strada-Pale-Silver);
    padding-bottom: 0px;
}


.info-component h1{
    color: var(--Strada-Charcoal);

    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    margin-bottom: 80px;
    margin-top: 0px;
    max-width: 560px;
}

.info-component .card{
    width: calc(50% - 36px);
    margin-bottom: 42px;
}

.info-component .card h2{
    color: var(--Strada-Charcoal);

    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-top: 16px;
    margin-bottom: 16px;
}

.info-component .card p{
    color: var(--Strada-Charcoal);

    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.info-component .flex{
    flex-wrap: wrap;
    justify-content: space-between;
   
}

.info-component .parallax{
    margin-top: 38px;
}


@media only screen and (max-width: 1040px) {
    
    
.info-component .flex{
   flex-direction: row;
   
}
    
    .info-component h1{
        max-width: 100%;
}
    
}

@media only screen and (max-width: 990px) {
    
    .info-component h1{
        margin-bottom: 40px;
}
    
 
    .info-component .card{
    width: 100%;
        margin-bottom: 40px;
}
    
    .info-component .card img{
        height: 32px;
        width: 32px;
    }
    

    
}





/* Timeline COmponent  */


.timeline-component{
    background-color: #383D45;
    background-repeat: no-repeat;
    background-size: calc(100% + 800px);
    background-position: 50% calc(50% + 150px);
    background-image: url(./assets/images/strada-hp-lines.svg);

}

.timeline-component h1{
    color: var(--Strada-Pale-Silver);

    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    margin-bottom: 32px;
    margin-top: 0px;
}

.timeline-component p{
    color: var(--Strada-Pale-Silver);
    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    max-width: 600px;
}

.timeline{
    background-repeat: repeat-x;
    background-position: calc(50% - 32px) 50%;
    background-size: auto;
    margin-top: 38px;
    background-image: url(./assets/images/Timeline.svg)
}



.timeline .item{
    width: 240px;
    max-height: 240px;
    height: 240px;
    
}

.timeline .item p{
    max-height: 124px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 248px;
    font-size: var(--Sizes-Body-1);
}

.timeline .item:nth-of-type(3) p{
    width: 297px;
}

.timeline .item:nth-of-type(odd){
    margin-top: 272px;
}


.timeline .item:nth-of-type(even){
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
 
}

.timeline .item:nth-of-type(odd):before{
    content: "";
    width: 15px;
    height: 15px;
    background: #BDAD8B;
    display: block;
    border-radius: 50%;
}

.timeline .item:nth-of-type(even):after{
    content: "";
    width: 15px;
    height: 15px;
    background: #BDAD8B;
    display: block;
    border-radius: 50%;
}

.timeline h2{
    color: var(--Strada-Gold);
    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
}


.timeline .item h2{
    margin-bottom: 8px;
}
.timeline .item p{
    margin-top: 0px;
}


.timeline {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: grab;
}

.timeline.scrolled .flex{
        flex-direction: row;
    }
    
    
.timeline.scrolled .item{
    width: 240px;
    min-width: 240px;
  
}

.timeline.scrolled{
     background-image: none!important;
        padding-bottom: 30px;
        margin-top: 18px;
       
}

@media only screen and (max-width: 1540px){

    .timeline.scrolled{
        overflow-x: scroll;
    }

}

.timeline.scrolled .container {
    background-image: url(./assets/images/Timeline.svg);
    background-repeat: repeat-x;
    background-position: calc(0% - 104px) 50%;
    background-size: auto;
    overflow: visible;
    max-width: fit-content;
    min-width: fit-content;
         
    }

@media only screen and (max-width: 1540px){

    .timeline.scrolled .container {
        background-position: calc(0% - 204px) 50%;


    }

}



@media only screen and (max-width: 1440px){
    .timeline .container {
        padding-left: 40px;
        padding-right: 30px;
    }
}

@media only screen and (max-width: 1280px){
    
    

    .timeline-component{
    
        background-size: calc(100% + 1400px);
        background-position: 50% calc(50% + 50px);
    }

    
    .timeline .flex{
        flex-direction: row;
    }
    
    
    .timeline .item{
    min-width: 232px;
  
}
    
    .timeline{
    overflow-x: scroll;
     background-image: none!important;
        padding-bottom: 30px;
        margin-top: 18px;
       
}
   
     .timeline.scrolled .container {
         background-image: url(./assets/images/Timeline.svg);
         background-repeat: repeat-x;
         background-position: calc(0% - 204px) 50%;
         background-size: auto;
         overflow: visible;
         max-width: fit-content;
         min-width: fit-content;
         
    }
}


@media only screen and (max-width: 1280px){
   
     .timeline .container {
        background-position: calc(50% - 38px) 50%;
    }
    
    .timeline .item:nth-of-type(odd){
        
    }
    
       
    .timeline .item:nth-of-type(even){
      justify-content: end;
        display: flex;
        flex-direction: column;
    }
}


@media only screen and (max-width: 1040px){
    
    .timeline{
        margin-top: -40px;
    }
    .timeline.scrolled{
        margin-top: -8px;
    }
    
    
    .timeline-component p{
    max-width: 100%;
}
    
    .timeline .item{
        max-height: 200px;
    }
    
    .timeline .item:nth-of-type(odd){
    margin-top: 232px;
}
    
}

@media only screen and (max-width: 768px){
        .timeline .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* Testimonials */

.testimonials-component {
    background: var(--Strada-Pale-Silver);
}

.testimonials-component h1{
    color: var(--Strada-Charcoal);
    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    margin-bottom: 80px;
    margin-top: 0px;
    max-width: 564px;
    
}

.testimonials-component .flex{
    justify-content: space-between;
    flex-wrap: wrap;

}

.testimonials-component .card{
    width: calc(33.33% - 60px);
}

.testimonials-component .card h2{
    color: var(--Strada-Charcoal);

    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-top: 0px;
    margin-bottom: 16px;
}

.testimonials-component .card p{
    color: var(--Strada-Charcoal);

    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.testimonials-component .card .author{
    color: var(--Strada-Charcoal);

    /* Body 1 Bold */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 20.8px */  
}

@media only screen and (max-width: 1040px) {
    
    .testimonials-component h1{
        max-width: 100%;
    }
    
    .testimonials-component .flex{
   flex-direction: row;

}
    
}

@media only screen and (max-width: 990px) {
    
    .testimonials-component h1{
        margin-bottom: 0px;
    }
    
    .testimonials-component .card{
    width: 100%;
}
    .testimonials-component .card{
        margin-top: 40px;
    }
    
    
}




/* Companies */

.companies-component{
    background: var(--Strada-Gold);
    background-image: url(./assets/images/HP-bg02.svg);
    background-repeat: no-repeat;
    background-position: 36vw top;
    background-size: 70% 90%;
}


.companies-component h1{
    color: var(--Strada-Charcoal);


    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    margin-top: 0px;
    max-width: 564px;
}

.companies-component .group h2{
    color: var(--Strada-Charcoal, #383D45);

    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2, 30px);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-top: 80px;
    margin-bottom: 0px;
}

.companies-component p{
    color: var(--Strada-Charcoal);


    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */   
    max-width: 564px;
}

.companies-component .card h2{
    color: var(--Strada-Charcoal);

    /* Heading 2 Bold */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 39px */
    margin-top: 48px;
}

.companies-component .flex{
    justify-content: flex-start;
    flex-wrap: wrap;
}

.companies-component .card{
    width: calc(33.33% - 40px);
    margin-right: 60px;
}

.companies-component .card:nth-child(3n){
    margin-right: 0px;
}

.companies-component .buttonS{
    border-color:  var(--Strada-Charcoal);
    color: var(--Strada-Charcoal);
    width: fit-content;
}

.companies-component .buttonS:hover{
    border-color: #FFF;
    color: #FFF;
   background: none;
}

@media only screen and (max-width: 1040px){
    
    .companies-component .flex{
    flex-direction: row;
}
}


@media only screen and (max-width: 990px) {
    
    .companies-component .card:nth-child(3n){
    margin-right: 0px;
}
    
    
    .companies-component .group h2{
        margin-top: 60px;
}
    
    .companies-component .group h2:first-of-type{
        margin-top: 40px;
}
    
    .companies-component .card{
        width: 100%;
        margin-right: 0px;
}
    
    .companies-component .card h2{
        margin-top: 40px;
}
    
    .companies-component{
        background-image: none;
}


    
}




/* FAQs */

.faq-component{
    background: var(--Strada-Charcoal);
    color: var(--Strada-Pale-Silver);
}

.faq-component h1{
    color: var(--Strada-Pale-Silver);


    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    margin-top: 0px;

}

.faq-component p{
    color: var(--Strada-Pale-Silver);

    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    max-width: 564px;
}

.faq-component .faq{
    transition: all 0.4s;
    border-bottom: 1px solid var(--Strada-Black);
    cursor: pointer;
    
}

.faq-component .faq .answer{
    display: none;
    overflow: hidden;
    font-size: var(--Sizes-Body-1);
}

.faq-component .faq.closing .answer{
    display: block;
    height: 0px;
    transition: all 0.4s;
    animation: slideInTop 0.4s ease-in-out;
    animation-fill-mode: forwards;
}

.faq-component .faq:first-of-type{
    border-top: 1px solid var(--Strada-Black);
    margin-top: 80px;
}

.faq-component .faq.visible .answer{
    animation: slideOutTop 0.4s ease-in-out;
    display: block;
    opacity: 1;
    height: auto;
    transition: all 1s;
    padding-bottom: 24px;
    max-width: 600px;
}

.faq-component .faq .question{
    color: var(--Strada-Pale-Silver);

    /* Body 2 Bold */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-2);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 23.4px */
    padding-top: 24px;
    padding-bottom: 24px;
    transition: all 0.4s;
}

.faq-component .faq.visible .question{
    padding-bottom: 20px;
    
}

.faq-component .faq .question:hover{
    color: var(--Strada-Gold);
}

.faq-component .faq.visible .question{
    color: var(--Strada-Gold);
}

.faq-component .faq .question:after {
    content:"\E808";
    font-family: "strada-icons";
    font-style: normal;
    font-weight: normal;
    font-size: 32px;
    margin-right: 8px;
    float: right;
    transition: all 0.3s;
}

.faq-component .faq.visible .question:after {
    transform: rotate(180deg);
    
}


.faq-component {
    background-position: 50vw 120px;
    background-size: auto;
    background-repeat: no-repeat;
    transition: background-size 9s;
    
}

.faq-component .container{
    position: relative;
}

.faq-component .flex{
    justify-content: space-between;
}

.faq-component .flex .button{
    height: fit-content;
}


@media only screen and (max-width: 1040px) {

.faq-component p{

    max-width:100%;
}
}


@media only screen and (max-width: 990px) {
    
    .faq-component .question{
        padding-right: 48px;
        position: relative;
    
}
    
    
    .faq-component .faq .question:after {
        position: absolute;
        right: 0px;
        height: 100%;
        top: 0px;
        display: flex;
        align-items: center;
}
    
    
    .faq-component .faq:first-of-type{
    margin-top: 40px;
}
    
    .faq-component{
    background-image:none!important;
}

    .faq-component .parallax{
        height: 104px;
        margin-top: 0px;
        background-position: bottom;
}
    
    .faq-component .button{
    margin-top: 40px;
}

    
    
}




/* Products Component  */


.products-component{
    background: var(--Strada-White);



}

.products-component h1{
    color: var(--Strada-Charcoal);
    /* Heading 1 */
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    margin-bottom: 80px;
    margin-top: 0px;
}

.products-component h2{
    color: var(--Strada-Charcoal, #383D45);

    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2, 30px);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-right: 72px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.products-component p{
    color: var(--Strada-Charcoal, #383D45);

    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
     margin-top: 0px;
    max-width: 564px;
}

.products{
    background-repeat: repeat-x;
    background-position: calc(50% - 32px) 50%;
    background-size: auto;
    margin-top: 80px;
    max-width: 1260px;
    position: relative;
}


.products .container{
    padding:0px;
    
}

.products-wrap{
    overflow-x: hidden;
    max-width: 1260px;
    padding-left: 150px;
    padding-right: 90px;
}


@media only screen and (max-width: 1500px){
    
    .products-wrap{
       transform: none;
        padding-left: 120px;
        padding-right: 60px;
    }

}

@media only screen and (max-width: 1350px) {
      .products-wrap{
       transform: none;
        padding-left: 40px;
        padding-right: 0px;
    }
}


@media only screen and (max-width: 1280px){
    
     .products-wrap{
       padding-right: 0px;
    }

}

@media only screen and (max-width: 990px) {
      .products-wrap{
       transform: none;
        padding-left: 16px;
        padding-right: 0px;
    }
}


.products .item{
    margin-right: 60px;
     width: 360px!important;
}

@media only screen and (max-width: 990px) {
 .products .item{
    margin-right: 16px;
     width: 305px!important;
}
    


}

.products .container{
    max-width: 1260px;
}


.products .item img{
    max-width: 100%;
   
}

.products .item p{
    max-height: 124px;
    margin-bottom: 20px;
    overflow: hidden;
    font-size: var(--Sizes-Body-1);
}

.products .gradient{
    background: url("./assets/images/metal-products-gradient-overlay.svg");
    mix-blend-mode: multiply;
    width: 34px;
    height: 100%;
    position: absolute;
    right: 60px;
    top: 0px;
}

.products .carousel-clip{
    background: #FFF;
    width: 60px;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
}


@media only screen and (max-width: 1280px){
    
    .products .gradient{
        right: 0px;
        display: none;
 
    }
    
    
    .products .carousel-clip{
        display: none;
    }


}


.products .item:nth-of-type(odd){

}


.products .item:nth-of-type(even){

 
}


.products h2{
    color: var(--Strada-Gold);
    /* Heading 2 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
}


.products .item h2{
    margin-bottom: 16px;
    margin-top: 16px;
    color: var(--Strada-Charcoal);

    /* Heading 2 Bold */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 39px */
}
.products .item p{
    margin-top: 8px;
}


.products {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: grab;
}

.products.scrolled .flex{
        flex-direction: row;
    }
    
    
.products.scrolled .item{

  
}

.products.scrolled{
    overflow-x: scroll;
     background-image: none!important;
        padding-bottom: 30px;
        margin-top: 18px;
       
}

.products.scrolled .container {

    overflow: visible;
    max-width: 1200px;
    padding-left: calc(50% - 600px);  
    padding-right: calc(50% - 600px); 
    }


.products.scrolled::-webkit-scrollbar-track {
  background: var(--Strada-Deep-Silver);
    margin-left: 840px;
    margin-right: 0px;
}


.products .slick-track{
        display: flex;
    }
    



@media only screen and (max-width: 1440px){


    
}

@media only screen and (max-width: 1280px){
    
.products .slick-slide{
      
    }

}


@media only screen and (max-width: 990px){
    
    
    .products-wrap{
        padding-right: 0px;

    }

    .products .gradient{
        display: none;
    }

    
    .products-component h2{
        margin-bottom: 24px;
        margin-right: 0px;
    }
    
    .products .slick-track{
       width: fit-content!important;
    }
    
    .products{
        margin-top: 40px;
    }
    
    .products-component h1{
    margin-bottom: 24px;
    margin-top: 0px;
}
   
    .products .item img{
        max-width: 100%;
    }
    
    .products .item {
        margin-right: 16px;
    }
    
}


.glider {
    background:#D3D7D1;
    height:2px;
    margin-top:80px;
    width:360px;
    position:relative;
    float: right;
    right: 60px;
}

.glider-handle {
    background:#383D45;
    height:2px;
    cursor:pointer;
    position:absolute;
    left:0px;
}

@media only screen and (max-width: 1280px){
    .glider {
    right: 0px;
}
    
}

@media only screen and (max-width: 990px){
    .glider{
        margin-top: 20px;
    }
}


@media only screen and (max-width: 480px){
    
    .glider {
        width: calc(100% - 32px);
        float: none;
        right: unset;
}
    
}


/* Download banner */

.download-component{
    background: var(--Strada-Charcoal);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    color: var(--Strada-Pale-Silver);
}


.download-component h1{
    color: var(--Strada-Pale-Silver);
    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    margin-bottom: 16px;
    margin-top: 0px;
    margin-right: 40px;
}

.download-component a:not(.button){
    color: var(--Strada-Pale-Gold);
    font-size: var(--Sizes-Body-2);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-decoration-line: underline;
}

.download-component .flex{
      align-items: center;
    justify-content: space-between;
    min-width: 1200px;
}

.download-component .flex > div{
    display: flex;
    margin-right: 32px;
}

@media only screen and (max-width: 1200px){
    .download-component .flex{
    min-width: 100%;
}
    
    .download-component .button{
        width: 240px;
    }

}


@media only screen and (max-width: 1150px){
    
    .download-component .flex{
        align-items: flex-start;
    }
    
    .download-component .flex > div{
   flex-direction: column-reverse;
}
    .download-component .flex > div img{
        max-width: 74px;
        margin-bottom: 24px;
    }
    
    .download-component .button{
        margin-top: 32px;
        width: 240px;
    }
}


/* Logistics Component */


.logistics-component{
    background: var(--Strada-Pale-Silver);
}

.logistics-component h1{
    color: var(--Strada-Charcoal);
    /* Heading 1 */
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
    max-width: 564px;
    margin-top: 0px;
    margin-bottom: 80px;
}

.logistics-component .flex {
    justify-content: space-between;
}

.logistics-component .flex .card{
    width: calc(50% - 36px);
}

.logistics-component .button{
    height: fit-content;
}


.logistics-component .mob-show{
    margin-top: 40px;
}


.logistics-component.style3 .mob-show{
    margin-top: 26px;
}


.logistics-component .flex .card h2{
    color: var(--Strada-Charcoal);

    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-top: 0px;
    margin-bottom: 16px;
}




@media only screen and (max-width: 990px){
    
    .logistics-component h1{
    max-width: 343px;
        margin-bottom: 40px;
    }
    
    .logistics-component .flex .card{
    width:100%;
    }
    
    .logistics-component .flex .card:first-child{
   margin-bottom: 40px;
    }
    
    .logistics-component.style2 .flex .card:first-child, .logistics-component.style3 .flex .card:first-child, .logistics-component.style4 .flex .card:first-child {
   margin-bottom: 0px;
    }
    
}


.logistics-component.style2 h1{
 
    margin-bottom: 32px;
}

@media only screen and (max-width: 990px){
    .logistics-component.style2 h1{
 
    margin-bottom: 24px;
}
}
    
    
    

.logistics-component.style2 p{
    color: var(--Strada-Charcoal);
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 18.2px */
}


.logistics-component.style3 h1{
 
    margin-bottom: 32px;
}

@media only screen and (max-width: 990px){
    .logistics-component.style3 h1{
 
    margin-bottom: 24px;
}
}
    
    

.logistics-component.style3 p{
 
   color: var(--Strada-Charcoal);
    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.logistics-component.style3 .flex .card {
    width: calc(50% - 31px);
}


.logistics-component.style4 h1{
 
    margin-bottom: 32px;
}



@media only screen and (max-width: 990px){
.logistics-component.style3 .flex .card {
    width: 100%;
}
    
.logistics-component.style4 h1{
 
    margin-bottom: 24px;
}


}



.logistics-component.style4 p{
    color: var(--Strada-Pale-Gold);
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}


{}


/* Companies Component 2 */


.companies-component-2{
    background: #383D45;
}


.companies-component-2 h2{
    color: var(--Color-Neutral-neutral-lightest);

    /* Heading 2 */
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-bottom: 16px;
}

.companies-component-2 p{
    color: var(--Color-Neutral-neutral-lightest);

    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.companies-component-2 .button{
    width: fit-content;
    margin-top: 24px;
}

.companies-component-2 .flex{
    justify-content: space-between;
}

.companies-component-2 .card{
    width: calc(50% - 36px);
}


@media only screen and (max-width: 990px) {

    .companies-component-2 .card{
    width: 100%;
}

        .companies-component-2 .card:first-child{
   margin-bottom: 72px;
}


    
}




/* Strada Metals Banner */

.strada-metals-banner{
    background: #383D45;
}

.strada-metals-banner h1{
    color: var(--Color-Neutral-neutral-lightest);
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.96px;
    margin-bottom: 32px;
    margin-top: 0px;
}

.strada-metals-banner p{
    color: var(--Color-Neutral-neutral-lightest);
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    max-width: 800px;
}

.strada-metals-banner .flex{
    justify-content: space-between;
    align-items: center;
}

.strada-metals-banner .button{
    width: fit-content;
    margin-top: 40px;
}

@media only screen and (max-width: 990px) {
    
    .strada-metals-banner img{
        display: none;
    }
    
}



/* Error 404 */

.error-page {
    height: 100vh;
}

.error-page .parallax {
    height: calc(100vh - 610px);
}

.hero.error{
    
}

.hero.error .flex{
    align-items: flex-start;
}

.hero.error .display1{

}

.hero.error .button{
    margin-top: 64px;
}

@media only screen and (max-width: 990px) {
   .hero.error .button{
    margin-top: 24px;
} 
}




/* Error 404 */


.hero.general .display1{
    margin-bottom: 48px;
}

.hero.general .hero-wrap.part1{
    padding-bottom: 80px;
}

.hero.general  p{
     color: var(--Strada-Silver);
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
}


.general-content{
    color: var(--Strada-Charcoal, #383D45);
    background: var(--Strada-Pale-Silver, #F5F4EF);
}

.general-content h2, .general-content h3, .general-content h4, .general-content h5{
    margin-bottom: 32px;
}

.parallax.general{
    background-size: 100%;
}

.general-content .spacer{
    height: 64px;
}

.general-content .wrap{
    max-width: 800px;
}

.general-content p{
    font-size: var(--Sizes-Body-1);
}

.general-content h2{
    color: var(--Strada-Charcoal);
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; 
    letter-spacing: -0.96px;
    margin-top: 80px;
}

.general-content h2:first-of-type{
    margin-top: 0px;
}


.general-content h3{
    color: var(--Strada-Charcoal);
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
    margin-top: 80px;
}

.general-content h4{
    color: var(--Strada-Charcoal);
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-2);
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 23.4px */
    text-transform: uppercase;
    margin-top: 40px;
}

.general-content h5{
    color: var(--Strada-Charcoal, #383D45);
    /* Body 2 Bold */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-2, 18px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 23.4px */
    margin-top: 80px;
}



.general-content blockquote{
    color: var(--Strada-Deep-Gold);
    font-size: var(--Sizes-Body-2);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 23.4px */
    padding-left: 16px;
    margin-left: 0px;
    margin-right: 0px;
    border-left: 2px var(--Strada-Deep-Gold) solid;
}

.general-content ul{
    margin-top:  24px;
    margin-bottom: 24px;
}

.general-content li{
    margin-bottom:  16px;
}

@media only screen and (max-width: 990px) {
    
    .general-content .spacer{
        height: 32px;
    }
    
    .general-content h2, .general-content h3, .general-content h4, .general-content h5{
    margin-bottom: 24px;
}
    
}




/* Contact */


.hero.contact .hero-wrap.part1{
    background-position: left bottom;
    padding-top: 80px;
    padding-bottom: 48px;
    background-image: url(./assets/images/strada-cp-lines-01.svg);
}


.hero.contact .button{
    width: fit-content;
    margin-top: 16px;
}

.hero.contact .display1{
    color: var(--Strada-Pale-Silver);
}

.hero.contact .button:first-of-type{
  
    margin-top: 32px;
    cursor: pointer;
    user-select:none;
}

.hero.contact .button.mail:before {
    content: "\E801";
}

.hero.contact .button.call:before {
    content: "\E803";
}
.hero.contact .button:before{
    font-family: "strada-icons";
    font-style: normal;
    font-weight: normal;
    font-size: 23px;
    transition: all 0.3s;
    margin-right: 8px;
}

.contact .form{
    max-width: 564px;
    width: 100%;
   margin-top: 64px;
    margin-left: 72px;
}

@media only screen and (max-width: 990px) {
    
    .contact .form{
   margin-top: 72px;

}
    
    .hero.contact .hero-wrap.part1{
        padding-bottom: 32px;
        background-image: url(./assets/images/strada-cp-lines-01-mob.svg);
        background-position: right top;
    }



    
    .hero.contact .button:first-of-type{

        margin-top: 32px;
    }
    
    .contact .form{
        margin-left: 0px;
        max-width: 100%;
    }

}
.contact .form .container{
     padding:0px;
    height: 100%;
}


.contact .form-wrap .form-field input[type='text'],.contact .form-wrap .form-field input[type='email']{
    background: none;
    border: none;
    border-bottom: 1px solid var(--Strada-Pale-Gold);
    color: var(--Strada-Pale-Gold);
    height: 36px;
    margin-bottom: 32px;
    width: 100%;
    font-size: var(--Sizes-Body-1);
    border-radius: 0px!important;
}

.contact .form-wrap .form-field.over input[type='text'],.contact .form-wrap .form-field.over input[type='email']{
  
    border-bottom: 1px solid var(--Strada---Error-State);

}

.contact .form-wrap .form-field input[type='checkbox']{
    border: 1px solid #D79002;
}

.contact .form-wrap .form-field input[type='text']::placeholder{
    color: var(--Strada-Pale-Gold);
    /* Body 1 Regular */
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    display: none!important;
}

.contact .form-wrap textarea{
    background: none;
    border: none;
    border-bottom: 1px solid var(--Strada-Pale-Gold);
    color: var(--Strada-Pale-Gold);
    height: 228px;
    margin-bottom: 32px;
    width: 100%;
    font-size: var(--Sizes-Body-1);
    border-radius: 0px!important;
}


@media only screen and (max-width: 990px){
    .contact .form-wrap textarea{
    padding-bottom:  50px;
}
}


.contact .form-wrap textarea::placeholder{
    color: var(--Strada-Pale-Gold);
    /* Body 1 Regular */
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.contact .form-wrap .form-field{
    position: relative;
}

.contact .form-wrap .validation{
    display: none;
    color: var(--Strada---Error-State);
    /* Body 1 Regular */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-left: 4px;
}

.contact .form-wrap .validation.over{
    display: block;
   

}

.contact .form-wrap .form-field .placeholder{
    position: absolute;
    top: 10px;
    left: 2px;
    color: var(--Strada-Pale-Gold);
    /* Body 1 Regular */
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    display: flex;
}


.contact .form-wrap .form-field:not(.checkbox) .validation{
    position: absolute;
    top: 10px;
    right: 2px;
   
}



.confirm-submit.hidden{
    display: none;
}

.contact .form-wrap .form-field.checkbox label{
    color: var(--Strada-Pale-Gold);
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.contact .form-wrap .form-field.checkbox input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.contact .confirm-submit{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.contact .confirm-submit.hidden{
    display: none;
}



/* Textarea counter */


.char-counter{
    color: var(--Strada-Pale-Gold);
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    margin-top: -70px;
    margin-bottom: 42px;
}

.char-max{
    margin-bottom: 32px;
}


/* Custom checkbox */
.contact .form-wrap .form-field.checkbox .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    display: flex;
}

.contact .form-wrap .form-field.checkbox .container .privacy{
    text-decoration: none;
    margin-left: 4px;
    color: var(--Strada-Pale-Gold);
}

/* Create a custom checkbox */
.contact .form-wrap .form-field.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: none;
    border: 1px solid var(--Strada-Pale-Gold);
}

.contact .form-wrap .form-field.checkbox .over .checkmark{
    border-color: var(--Strada---Error-State);
}

/* On mouse-over, add a grey background color */
.contact .form-wrap .form-field.checkbox:hover input ~ .checkmark {
   
}

/* When the checkbox is checked, add a blue background */
.contact .form-wrap .form-field.checkbox input:checked ~ .checkmark {

}

/* Create the checkmark/indicator (hidden when not checked) */
.contact .form-wrap .form-field.checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.contact .form-wrap .form-field.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.contact .form-wrap .form-field.checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--Strada-Pale-Gold);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.contact .form-wrap .form-field.checkbox .placeholder{
    position: static;
}

.companies-component.our-companies{
    background-image: none;
}

.companies-component.our-companies .card{
    display: flex;
    flex-direction: column;
}

.companies-component.our-companies .card h2{
    margin-bottom: 16px;
}

.companies-component.our-companies a.mail:before {
    content: "\E801";
}

.companies-component.our-companies a.call:before {
    content: "\E803";
}
.companies-component.our-companies a.link:before{
    font-family: "strada-icons";
    transition: all 0.3s;
    margin-right: 8px;
    color: var(--Strada-Charcoal);
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.companies-component.our-companies a.link{
    color: var(--Strada-Charcoal);
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    text-decoration: none;
    margin-bottom: 16px;
    transition: all 0.4s;
  
}

.companies-component.our-companies a.link:hover:before{
    color: #FFF;

}

.companies-component.our-companies a.link:hover{
 color: #FFF;
  
}


.contact .form-wrap.hidden{
    display: none;
}


.contact .confirm-submit{
    text-align: center;
    color: var(--Strada-Pale-Gold);
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
}

.contact .confirm-submit .thank-you{
    color: var(--Strada-Pale-Gold);
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
}

.contact .confirm-submit .button{
    margin-left: auto;
    margin-right: auto;
}


.contact #animation-loader{
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(50% - 122px);
}





/* Engineering Services */


.hero.engineering-services .display1{
  
    color: var(--Strada-Pale-Silver);

}

.hero.engineering-services p{
  
    color: var(--Strada-Pale-Silver);

}

.hero.engineering-services .hero-wrap.part1 {
    background-position: 40vw bottom;
    background-image: url(./assets/images/ES-contour-bg01.svg);
}

.hero.engineering-services .buttonS:last-child{
    margin-bottom: 0px;
}

.hero.engineering-services .hero-wrap.part2{
    background-image: none;
}

.hero.engineering-services .part2 .card h2{
    margin-bottom: 16px;
}

.logistics-component.style2 .container > p{
    max-width: 600px;
}


.logistics-component.style2 .flex {
    flex-wrap:wrap; 
}



.logistics-component.style2 .flex .card, .logistics-component.style3 .flex .card, .logistics-component.style4 .flex .card{
    margin-top: 80px;
}

@media only screen and (max-width: 990px) {
    
    .logistics-component.style2 .flex .card, .logistics-component.style3 .flex .card, .logistics-component.style4 .flex .card{
    margin-top: 40px;
}

    
}

@media only screen and (max-width: 768px) {
    .hero.engineering-services .hero-wrap.part1 {
        background-position: right top;
        padding-top: 48px;
        padding-bottom: 31px;
        background-image: url(./assets/images/strada-hp-lines-01-mobile.svg);
        background-size: 100%;
        background-position: top right !important;
    }
}




.procurement-component{
    background: var(--Strada-Charcoal);
    color: var(--Strada-Pale-Silver);
    padding-top: 80px;
    padding-bottom: 80px;
}

.procurement-component h1{
    margin-top: 0px;
    font-weight: 500;
}

.procurement-component > .container > p{
   max-width: 600px;
}

.procurement-component .flex{
    margin-top: 80px;
}

.procurement-component .flex .card{
    margin-right: 60px;
}

.procurement-component .flex .card h2{
    margin-top: 16px;
    margin-bottom: 16px;
    color: var(--Strada-Pale-Silver);
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 24.2px */
}

.procurement-component .flex .card  p{
    color: var(--Strada-Pale-Silve);
    font-size: var(--Sizes-Body-1);
    font-style: normal;
    font-weight: 400;
}


@media only screen and (max-width: 990px) {
   
    .procurement-component{
        padding-top: 48px;
        padding-bottom: 48px;
}

    .procurement-component .flex{
    margin-top: 40px;
}

    
    .procurement-component .flex .card{
        margin-bottom: 40px;
        margin-right: 0px;
    }
    
    .procurement-component .flex .card img{
        height: 32px;
        width: 32px;
    }
    
     .procurement-component .flex .card:last-child{
        margin-bottom: 0px;
    }
    
}


.logistics-component.style3 {
    background: var(--Strada-Gold);
}

.logistics-component.style3 .flex > div > p{
    max-width: 600px;
}


.logistics-component.style4{
    background: var(--Strada-Charcoal, #383D45);
    color: var(--Strada-Pale-Gold, #F3E5BE);
}

.logistics-component.style4 .flex .card .button{
    width: fit-content;
    color: var(--Strada-Pale-Gold);
    font-size: var(--Sizes-Button-L);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 18.2px */
    text-transform: uppercase;
    padding: 7px 20px;
}


.logistics-component.style4 .flex .card .button:hover{
   color: #FFF;
}

.logistics-component.style4 h1{
    color: var(--Strada-Pale-Gold);
    /* Heading 1 */
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-1);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
}


.logistics-component.style4 .flex .card h2{
    color: var(--Strada-Pale-Gold);
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 33px */
}

.logistics-component.style4 .flex .card{
    
}

.logistics-component.style4 .flex .card:last-child{
    margin-bottom: 0px;
}



@media only screen and (max-width: 990px) {
    .logistics-component.style4 .flex .card .button{
    width: fit-content;
    color: var(--Strada-Pale-Gold);
    font-size: var(--Sizes-Button-S);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 18.2px */
    text-transform: uppercase;
}
}


/* Cookies modal */


.cookies-modal {
    background: var(--Strada-Black, #000);
    position: fixed;
    width: 100%;
    bottom: 0px;
    padding: 42px 0px;
}

.cookies-modal .flex{
    justify-content: space-between;
    align-items: flex-start;
}

.cookies-modal .flex > div:nth-child(2){
   text-align: right;
    justify-content: flex-end;
    display: flex;
    flex-wrap: wrap;
         max-width: 345px;
}

.cookies-modal h2{
    color: var(--Strada-Silver, #D3D7D1);
    font-size: var(--Sizes-Heading-2);
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 24.2px */
    margin-top: 0px;
}

.cookies-modal p{
    color: var(--Strada-Silver, #D3D7D1);
    font-family: "Instrument Sans";
    font-size: var(--Sizes-Body-1, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 18.2px */
    max-width:  660px;
}

.cookies-modal .button{
    width:  fit-content;
    cursor: pointer;
}

.cookies-modal .button.gold:hover{
    border-radius: 50px;
    border: 2px solid var(--Strada-Pale-Silver);
    background: var(--Strada-Silver-Gradient, linear-gradient(110deg, #D3D7D1 0.62%, #F5F4EF 29.65%, #F5F4EF 65.27%, #A2A09C 96.62%));
    color: var(--Strada-Charcoal);
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.cookies-modal .button:first-of-type{
    margin-bottom: 24px;
}

@media only screen and (max-width: 990px) {
    .cookies-modal .flex > div:nth-child(2){
   text-align: left;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
        margin-top: 32px;
   
}
}





/* Footer */

.footer{
    background: #383D45;
    width: 100%;
 
}

.footer > .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.footer .nav ul{
    display: flex;
    list-style: none;
}

.footer .nav ul a{
    color: #F3E5BE;
    font-family: "Instrument Sans";
    margin-left: 24px;
    font-size: 16px;
    font-weight: 400;
    
}

.footer .nav ul a:hover{
    color: var(--Strada-Pale-Silver);
    text-decoration: none;
    transition: all 0.4s;
    
}

.footer .copyright{
      color: #F3E5BE;
}


.footer .socials{
    display: flex;
    align-items: center;
}

.footer .socials a{
    margin-left: 12px;
    text-decoration: none;
    color: #BDAD8B;
}

.footer .socials a:first-child{
    margin-left: 0px;
}

.footer .socials a:hover{
   color: #F3E5BE;
}

.footer .socials a:after{
    font-family: "strada-icons";
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    transition: all 0.3s;
}

.footer .socials .facebook:after{
    content:"\E800";
    font-size: 24px;
}

.footer .socials .youtube:after{
    content:"\E802";
    font-size: 26px;
  
}

.footer .socials .x:after{
    content:"\E804";
    font-size: 25px;
  
}

.footer .socials .insta:after{
    content:"\E806";
}

.footer .socials .linkedin:after{
    content:"\E807";
}

.footer .logo:hover{
    filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(329%) hue-rotate(296deg) brightness(106%) contrast(92%);
    cursor: pointer;
}



@media only screen and (max-width: 1350px) {
    

    .footer > .container{
   flex-direction: column;

   text-align: center;
    }
    
    
    .footer{
         height: 100%;
        max-height: 344px;
        box-sizing: border-box;
    }
    
    .footer .nav ul{
        padding-left: 0px;
    }
    
}

@media only screen and (max-width: 990px) {
    
    .footer .socials a{
    margin-left: 24px;
   
}
    
    
    .footer .nav ul{
        flex-direction: column;
        margin-bottom: 0px;
    }
    
    .footer  img{
        max-width: 221px;
    }
    
    .footer .nav ul a{
        margin-left: 0px;
    }
    
    .footer .nav ul li{
    margin-bottom: 24px;
    
    }
    
    .footer .socials{
        margin-top: 8px;
    }
    
    .footer .copyright{
        margin-top: 32px;
    }
    
}