@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mr+Dafoe&family=Oxanium:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

/* Wallet Styles */
.container{
    width:1650px;
    height:1165px;
    display:flex;
    margin-bottom:20px;
}

.wallet{
    width:1618px;
    height:1128px;
    align-self:center;
    margin-left:auto;
    margin-right:auto;
    background-size:cover;
    position:relative;
    z-index: 100;
}

.card{
    height:898px;
    width:568px;
    border-radius:50px;
    position: absolute;
    top: 116px;
    left: 69px;
}

.bcso{
    background-color: #080B07;
    background-image: url('/public/images/BCSONorth/Background.svg');
    color:#CE9F1B;
}

.bcso h3{
    font-family: 'Crimson Text', serif;
    font-size: 50px;
    text-align: center;
    margin-top: 40px;
    font-style:italic;    
}

.bcso h1{
    font-family: 'Source Serif 4', serif;
    font-size: 13rem;
    text-align: center;
}

.bcso h2{
    font-family: 'Source Serif 4', serif;
    font-size: 2.25rem;
    text-align: center;
}

.bcso h4{
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    text-align: center;
}


.lspd h3{
    font-family: 'Crimson Text', serif;
    font-size: 50px;
    text-align: center;
    margin-top: 40px;
    font-style:italic;    
}

.lspd h1{
    font-family: 'Oxanium', sans-serif;
    font-size: 13rem;
    text-align: center;
}

.lspd h2{
    font-family: 'Oxanium', sans-serif;
    font-size: 2.25rem;
    text-align: center;
}

.lspd h4{
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    text-align: center;
}

.lspd{
    background-color: #0D213F;
    background-image: url('/public/images/LSPD/Background.svg');
    color:white;
}

.sib{
    background-color: #E6DAF2;
    color:black;
}

.sapr{
    background-color: #184C25;
    background-image: url('/public/images/SAPR/Background.svg');
    color:white;
}

.sapr h3{
    font-family: 'Crimson Text', serif;
    font-size: 50px;
    text-align: center;
    margin-top: 40px;
    font-style:italic;    
}

.sapr h1{
    font-family: 'Rubik', sans-serif;
    font-size: 11rem;
    text-align: center;
    font-weight:900;
}

.sapr h2{
    font-family: 'Rubik', sans-serif;
    font-size: 2.3rem;
    text-align: center;
}

.sapr h4{
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    text-align: center;
}

.doj{
    background-color: #DDDD;
    background-image: url('/public/images/DOJ/Background.svg');
    color:black;
}

.doj h3{
    font-family: 'Source Serif 4', serif;
    font-size: 50px;
    text-align: center;
    line-height: 1;
}


.doj h2{
    font-family: 'Rubik', sans-serif;
    font-size: 2.3rem;
    text-align: center;
}

.doj h4{
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    text-align: center;
}

.doc {
    background-color: #050505;
    background-image: url('/public/images/DOC/Background.svg');
    color:black;
}

.sib {
    background-color: #002768;
    background-image: url('/public/images/SIB/Background.svg');
    color:white;
}

.card-content{
    text-align:center;
    height:100%;
    width:100%;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "cardc1" 
    "cardc2"
    "cardc3"
    "cardc4"
    "cardc5"
    "cardc6"
    "cardc7";
    line-height:1;
}

.cardc1 {
    margin-top:20px;
    grid-area: cardc1;
    margin-bottom:-60px;
 }

.cardc2 { 
    grid-area: cardc2; 
    padding:20px;
}

.cardc2-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-template-areas:
    "cardc2-g1 cardc2-g2";
}

.cardc2-grid img{
    width: 100%;
    height: 100%;
}

.cardc2-grid .picture{
    width:241;
    height:308px;
}

.cardc2-grid1{
    grid-area: cardc2-g1; 
    
}
.cardc2-grid2{
    grid-area: cardc2-g2; 
}


.cardc3 { 
    margin-top:-60px;
    grid-area: cardc3; 

}
.cardc4 { 
    grid-area: cardc4; 
    line-height:0;
    margin-top:-100px;
}
.cardc5 { 
    grid-area: cardc5; 
    margin-top:-100px;
 }
.cardc6 { 
    grid-area: cardc6; 
    margin-top:-100px;

}
.cardc7 {
    grid-area: cardc7; 
    margin-top:-100px;
}

.dojCard{
        text-align:center;
    height:100%;
    width:100%;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "cardc1" 
    "cardc2"
    "cardc3"
    "cardc4"
    "cardc5"
    "cardc6"
    "cardc7";
}

.dojCard .cardc1 {
    grid-area: cardc1;
    margin-top:0px;
 }
 .dojCard .cardc2 { 
    grid-area: cardc2; 
    margin-top:-50px;
 }

.dojCard .cardc3 { 
    grid-area: cardc3; 
    padding:20px;
    margin-top:-40px;
}

.dojCard h1{
    font-family: 'Roboto', serif;
    font-size: 2.5rem;
    margin-top:90px;
    font-weight: 900;
    
 }

 .dojCard h3{
    font-family: 'Source Serif 4', serif;
    font-size: 46px;
    line-height:0.5;
 }

 .dojCard h4{
    font-family: 'Roboto', sans-serif;
    font-size: 2.74rem;
    font-weight:900;
    margin-top:90px;


 }

  .dojCard h5{
    font-family: 'Roboto', sans-serif;
    font-size:2.25rem;
    margin-top:90px;

 }

.daCard{
        text-align:center;
    height:100%;
    width:100%;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "cardc1" 
    "cardc2"
    "cardc3"
    "cardc4"
    "cardc5"
    "cardc6"
    "cardc7";
}

.daCard .cardc1 {
    grid-area: cardc1;
    margin-top:0px;
 }
 .daCard .cardc2 { 
    grid-area: cardc2; 
    margin-top:-50px;
 }

.daCard .cardc3 { 
    grid-area: cardc3; 
    padding:20px;
    margin-top:-40px;
}

.daCard h1{
    font-family: 'Roboto', serif;
    font-size: 2.5rem;
    margin-top:90px;
    font-weight: 900;

 }

 .daCard h3{
    font-family: 'Source Serif 4', serif;
    font-size: 53.8px;
    line-height:0.5;
 }

 .daCard h4{
    font-family: 'Roboto', sans-serif;
    font-size: 2.74rem;
    font-weight:900;
    margin-top:90px;


 }

  .daCard h5{
    font-family: 'Roboto', sans-serif;
    font-size:2.25rem;
    margin-top:90px;

 }


.docCard{
        text-align:center;
    height:100%;
    width:100%;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "cardc1" 
    "cardc2"
    "cardc3"
    "cardc4"
    "cardc5"
    "cardc6"
    "cardc7";
}


.docCard .cardc1 {
    grid-area: cardc1;
    margin-top:50px;
 }
 .docCard .cardc2 { 
    grid-area: cardc2; 
    margin-top:25px;
 }

 .docCard .cardc2-grid2{
    margin-top:-70px;
 }

.docCard .cardc3 { 
    grid-area: cardc3; 
    margin-top:-50px;
}


.docCard h1{
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    margin-top:90px;
    font-weight: 500;

 }

 .docCard h2{
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight:600;
    
 }

 .docCard h3{
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    margin-top:0px;
    line-height:1;
    color:white;
    font-weight:800;
 }

 .docCard h4{
    font-family: 'Roboto', sans-serif;
    font-size: 2.74rem;
    font-weight:900;
    margin-top:90px;


 }

  .docCard h5{
    font-family: 'Roboto', sans-serif;
    font-size:1.5rem;
    margin-top:-4px;

 }

 
.sibCard{
    text-align:center;
    height:100%;
    width:100%;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "cardc1" 
    "cardc2"
    "cardc3"
    "cardc4"
    "cardc5"
    "cardc6"
    "cardc7";
}


.sibCard .cardc1 {
    grid-area: cardc1;
    margin-top:50px;
 }
 .sibCard .cardc2 { 
    grid-area: cardc2; 
    margin-top:0px;
 }

 .sibCard .cardc2-grid .picture{
    width:230px;
    height:260px;
}

 .sibCard .cardc2-grid2{
    margin-top:0px;
 }

.sibCard .cardc3 { 
    grid-area: cardc3; 
    margin-top:-30px;
}

.sibCard .cardc7 { 
    grid-area: cardc7; 
    text-align:center;
    display:flex;
    justify-content: center;
}

.sibCard h1{
    font-family: 'Mr Dafoe', cursive;
    font-size: 4rem;
    margin-top:190px;
    font-weight: 400;
    color:black
 }

 .sibCard h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight:900;
    color:black;
 }

 .sibCard h3{
    font-family: 'Source Serif 4', serif;
    font-size: 4rem;
    margin-top:0px;
    line-height:1;
    color:white;
    font-weight:800;
 }

 .sibCard h4{
    font-family: 'Roboto', sans-serif;
    font-size: 2.74rem;
    font-weight:500;
    margin-top:70px;
    color:black;

 }

  .sibCard h5{
    font-family: 'Roboto', sans-serif;
    font-size:1rem;
    color:black;
    width:350px;
    align-self:center;
    vertical-align:middle;
 }