*{
    margin:0;
    padding:0;
}
body{
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(rgba(0, 0, 0, .2) 0% , rgba(0,0,0,0.2) 100%), url("img/site-banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: max-content;
}

html{
    font-size: 62.5%; /*makes root font size 10px - easier to calculate rem font*/
    overflow-x: hidden;
    height: max-content;
    scroll-behavior: smooth;
}

strong{
    font-weight: 600;
}
header{
    background-color:rgb(37, 63, 142);
    padding-top:2rem;
    text-align: center;
    height: max-content;
}

.header-margin{
    margin: 0rem 2rem;
    padding-bottom: 2rem;
}

.container{
    padding-top:1rem;
}
h1{
    margin:0;
    color:#fff;
    font-size: 3.2rem;
    
}
h2{
    padding-top:1em;
    display: flex;
    flex-direction: row;
    font-size: 3.2rem;
    
}

h2:before,
h2:after{
    content:"";
    flex: 1 1;
    border-bottom: 1px solid rgb(255, 255, 255);
    margin:auto;
}

h3{
    padding-bottom:1rem;
    font-size: 2.4rem;
}


/*======Main body========*/

.img-holder{
    margin-bottom: 1rem;
}

img{
    width:100%;
    display: block;
    border-radius: 5px 5px 0px 0px;
    
}
.text-heading{
    color: rgb(247, 247, 247);
    font-weight: 500;
    text-transform: uppercase;
}
.text-subheading{
    color: rgb(223, 223, 223);
    font-weight: 200;
}


.text-description{
    color: rgb(247, 247, 247);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    max-width: 75ch;
    font-size: 2.0rem;
    padding-bottom: 1rem;
}

.no-discover-more {
    max-width: 100ch;
}

.img-caption{
    
    background-color: rgba(63, 63, 63, 0.856);
    color:rgb(247, 247, 247);
    font-weight: 200;
    padding:0.5rem;
    font-size:1.6rem;
    

}

.story-body{
    padding:2rem;
    background-color: rgba(27, 27, 27, 0.877);
}


/*=====DISCOVER MORE SECTION=====*/
.discover-more{
    background-color: rgba(83, 83, 83, 0.856);
    padding:2rem;
}

.discover-more-h2{
    color: rgb(228, 228, 228);
    font-weight: 500;
    padding-bottom: 1em;
}

/*=====Cards=====*/
.card{
    position: initial;
    margin:1rem;
 }

.card-title{
font-size: 1.8rem;
}

.card-text{
font-size: 1.6rem;
}

.btn-primary{
    background-color:rgb(58, 83, 158);
    font-size: 1.2rem !important;
    padding: 0.5em 1em;
    border: none;
    -webkit-box-shadow: 0px 3px 0px rgba(0,0,0,0), 0px 3px 6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 3px 0px rgba(0,0,0,0), 0px 3px 6px rgba(0,0,0,0.5);
    box-shadow: 0px 3px 0px rgba(0,0,0,0), 0px 3px 6px rgba(0,0,0,0.5);
}

a:link,
a:visited{
    text-decoration: none;
    font-size: 1.8rem;
}

/*=====Navigation=====*/

.primary-navigation{
    display: block;
    z-index: 1000;
    font-size: 1.6rem;
    position: absolute;
    width:100%;
    background: rgba(0,0,0,0.95);
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transition: transform 350ms ease-out ;
    -webkit-transition: transform 350ms ease-out ;
    -moz-transition: transform 350ms ease-out ;
    -ms-transition: transform 350ms ease-out ;
    -o-transition: transform 350ms ease-out ;
    text-align: left;
    
    padding-top:2rem;
}

.primary-navigation ul{
    list-style-type: none;
}

.primary-navigation li{
    margin-bottom: 2rem;
}

.primary-navigation li a:link,
.primary-navigation li a:visited,
.site-map--list li a:link,
.site-map--list li a:visited,
.site-map--stories li a:link,
.site-map--stories li a:visited{
    color:#fff;
    transition: color 0.2s ease-in  ;
    -webkit-transition: color 0.2s ease-in  ;
    -moz-transition: color 0.2s ease-in  ;
    -ms-transition: color 0.2s ease-in  ;
    -o-transition: color 0.2s ease-in  ;
}

.primary-navigation li a:hover,
.primary-navigation li a:active,
.site-map--list li a:hover,
.site-map--list li a:active,
.site-map--stories a:hover,
.site-map--stories a:active{
    color:rgb(179, 179, 179);
    text-decoration: underline;
}

.centre-block{
    width: 50%;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
}

.primary-navigation[data-visible="true"]{
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
}

@supports(backdrop-filter: blur(1rem)){
    .primary-navigation{
        background: hsl(0 0% 0% / 0.9);
        backdrop-filter: blur(1rem); 
    }
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

.nav-toggle{
    position:absolute;
    top:2rem;
    right: 2rem;
    z-index:9999;
    background-image: url("img/icon-hamburger.svg");
    background-color: transparent;
    filter: invert();
    -webkit-filter: invert();
    background-repeat: no-repeat;
    background-size: cover;
    width:4rem;
    aspect-ratio: 1;
    border:0;

}

.nav-toggle[aria-expanded="true"]{
    background-image: url("img/close.svg");
    
}

.active{
    border-left:1rem solid rgb(37, 63, 142);
    padding-left: 1rem;
}

/*======FOOTER=====*/
footer{
    background-color:rgb(37, 63, 142);
    margin-top: 1rem;
    padding-top:2rem;
    padding-bottom:2rem;
    text-align: center;
    font-size: 1.8rem;
    color: #fff;
}

.secondary-navigation a{
    display: inline-block;
    padding: 1rem;
    
    
}

.secondary-navigation a:link,
.secondary-navigation a:visited{
    color:#fff;
}

.secondary-navigation a:hover,
.secondary-navigation a:active {
    text-decoration: underline;
}

/*=====Accessibility skip to content button========*/

.skip-nav-link{
    background:white;
    padding:5px;
    position:absolute;
    transform:translateY(-120%);
    -webkit-transform:translateY(-120%);
    -moz-transform:translateY(-120%);
    -ms-transform:translateY(-120%);
    -o-transform:translateY(-120%);
    transition:transform 300ms ease-in;
    -webkit-transition:transform 300ms ease-in;
    -moz-transition:transform 300ms ease-in;
    -ms-transition:transform 300ms ease-in;
    -o-transition:transform 300ms ease-in;
}
.skip-nav-link:focus{
    transform:translateY(0);
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
}

.site-map--list{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap:3rem;
}
.site-map--stories{
    list-style-type: none;
}

.site-map--stories li{
    padding:1rem;
}

.terms-conditions{
    list-style-type: initial;
}

.terms-conditions li{
    margin-bottom:1rem;
}