@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');



:root {

    --maxwidth: 1200px;
     --grey25: #FCFCFD;
    --grey50: #F9FAFB;
    --grey100: #F2F4F7;
    --grey200: #EAECF0;
    --grey300: #D0D5DD;
    --grey400: #98A2B3;
    --grey500: #667085;
    --grey600: #475467;
    --grey700: #344054;
    --grey800: #1D2939;
    --grey900: #101828;

    --background_color: var(--grey200);
    --h1: 4.209rem;
    --h2: 3.157rem;
    --h3: 2.369rem;
    --h4: 1.777rem;
    --h5: 1.5rem;
    --h6: 1.3rem;
    --base: 1rem;

    --gap_tiny: 0.25rem;
    --gap_xs: 0.5rem;
    --gap__s: 1rem;
    --gap__m: 2rem;
    --gap__l: 4rem;
    --gap_xl: 8rem;
    --gap_xxl: 16rem;
    --gap_xxxl: 32rem;
    --g8: 64rem;
    --g9: 128rem;
    --g10: 256rem;

    --gap-section: var(--gap_xl);


    --primary-text: #4263EB;

}

@font-face {
    font-family: 'clash-grotesk';
    src: url('/fonts/clash-grotesk.ttf') format('truetype');
}

.max-width {
    max-width: 1000px;
    margin: auto;
    padding-left: var(--gap__l);
    padding-right: var(--gap__l);

}

.max-width-wider {
    max-width: 1366px;
    margin: auto;

}

.max-width-wider-without-textalign {
    max-width: 1366px;
    margin: auto;

}

.max-width-centered {
    max-width: 1200px;
    margin: auto;
    padding-left: var(--gap__l);
    padding-right: var(--gap__l);
    text-align: center;

}

.max-width90 {
    max-width: 1200px;
    margin: auto;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

body {
    background-color :white;
    color: var(--text-color);
    overflow-x: hidden;
}


.fullwidth_img {

    max-width: 80%;
    padding: 5rem 0rem 5rem 0rem;

    /* Set the width to 100% of the viewport width */
    display: block;
    margin: auto;
    border-radius: 1rem;
}



.cover_img_container {
    width: 98%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    margin: auto;
    border-radius: 1rem;

}

.cover_img {
    width: 100%;
    aspect-ratio: 1 / 5;
    border-radius: 1rem;
    stroke: 3px solid greenyellow;
    min-height: 90vh;
}

.col2grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 4.8rem;

}





.feature {
    max-width: 90vw;
    height: calc(90vw * 9 / 18);
    margin: auto;
    background-color: #1a1818;
    border-radius: 0.7rem;

}

.feature2 {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    max-width: 90vw;
    margin: auto;
}

.feature-list {
    display: grid;

}

.img {
    max-width: 100vw;
    height: calc((100vw * 9) / 15);
    background-color: #222121;
    border-radius: 0.7rem;

}

.gap_div_xs {
    min-height: 0.5rem;

}

.gap_div_m {
    min-height: 2rem;

}

.gap_div {
    height: 4rem;

}

.s-gap_div {
    height: 1rem;

}

.feature_section {
    background-color: var(--background_color2);
    color: var(--secondary)
}

.feature_box {
    display: flex;
    flex-direction: row;
    gap: 1em;
    border-radius: 0.5rem;
    padding: 1.5em 1.5em 1.5em 0;
}

.feature_box:hover {

    background-color: #111D33;
    border-radius: 0.5rem;
}

.yellow_line {
    border-color: #FBB536;
    height: auto;
}

.image2grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ga);



}

.image2grid img {
    max-width: 100%;
    /* Set maximum width to 100% of the grid cell */
    height: auto;
    /* Maintain aspect ratio */
}

.newpaper_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;

}

.left_right_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3em;
}

/* Table */

table {
    margin-top: 0.5rem;
    font-family: 'Tofino-300';
    font-size: 1.4rem;
    line-height: 1.5;
    border-collapse: collapse;
    width: 100%;
}



.text {
    font-family: 'Array-Wide';

}

.gap_tiny {
    height: var(--gap_tiny);
}

.gap_xs {
    height: var(--gap_xs);
}

.gap_s {
    height: var(--gap__s);
}

.gap_m {
    height: var(--gap__m);
}

.gap_l {
    height: var(--gap__l);
}

.gap_xl {
    height: var(--gap_xl);
}

.gap_xxl {
    height: var(--gap_xxl);
}

.gap_xxxl {
    height: var(--gap_xxxl);
}




.two_img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap__s);
    min-height: 100px;
}


.section_headin_img {
    max-width: 1300px;
    background-color: #1b0346;
    height: 300px;
    margin: auto;
    border-radius: 1rem;
}




.img_grid-container {
    width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns with equal width */

    gap: 10px;
}

.img_full-width {
    width: 100%;
    border-radius: 1rem;
    grid-column: span 2;
    background-color: var(--grey300);

}

.img_middle {
    max-width: 100%;
    height: auto;
    margin: auto;

    display: flex;
    justify-content: center;
    align-items: center;


}

.img_half-width {
    background-color: var(--grey300);
    width: 100%;
    border-radius: 1rem;
    height: auto;
    object-fit: cover;
    /* Optional: Maintain the aspect ratio and cover the entire container */
}

/* Maintain aspect ratio using padding-bottom trick */
.img_half-width::before {
    content: "";
    display: block;
    padding-bottom: 75%;
    /* 4:3 aspect ratio (for example) */
}

/* Customize the aspect ratio by adjusting the padding-bottom value */
.img_full-width::before {
    content: "";
    display: block;
    padding-bottom: 30%;
    /* Adjust this value to your desired aspect ratio */
}


.img_full-width_normal {
    width: 100vw;
    height: 0;
    background-color: #e0e0e0;
    padding-bottom: 40%;
}

section {
    margin-bottom: var(--gap-section);
    border: 0px solid grey
}




.max-width-wider p {
    max-width: 800px;
    margin: auto;
}

.blue-box {
    max-width: 1366px;
    background: radial-gradient(100.67% 58.24% at 21.28% 80.65%, rgba(10, 148, 255, 0.61) 0%, rgba(10, 148, 255, 0.00) 100%), #B8DEFD;

}


.con {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "A A"
        "B C";
}

.A {
    grid-area: A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(155, 110, 199);
    border-radius: 1rem;
    background: radial-gradient(100.67% 58.24% at 21.28% 80.65%, rgba(10, 148, 255, 0.61) 0%, rgba(10, 148, 255, 0.00) 100%), #B8DEFD;
}

.B {
    grid-area: B;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    padding: 6%;
    background: radial-gradient(102.13% 102.9% at 0% 100%, rgba(137, 91, 241, 0.60) 0%, rgba(137, 91, 241, 0.00) 100%), #DCCFFB;
}

.C {
    grid-area: C;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    align-items: center;
    border-radius: 1rem;
    padding-top: 6%;
    padding-left: 6%;
    padding-right: 6%;

    background: linear-gradient(180deg, rgba(255, 181, 54, 0.40) 0%, #FFB536 100%);
}


.img02 {
    max-width: 89%;
    height: auto;
}

.grey-box {
    height: auto;
    width: 1366px;
    border-radius: 0.625rem;
    background: var(--grey300);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
}

.reddit-grid-container {
    max-width: 1000px;
    display: grid;
    grid-template-columns: auto auto;

    margin: auto;
    gap: 2rem;
}


.visualdesign-bg {
    background-color: var(--grey600);
}


.police-banner-text {
    white-space: nowrap;
    color: var(--grey200);
    font-family: 'clash-grotesk',sans-serif;
    font-weight: 500;
    font-size: 3.2rem;
    white-space: nowrap;
}

.police-banner-bg{
   
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: #E7FF56 !important;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    overflow: hidden;
    transform: rotate(-1deg);
}

.con2 {
    max-width: 1366px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "D D"
        "E F"
        "G G"
        "G G";
}

.D{

    grid-area: D;
    border-radius: 1rem;

}

.E{

    grid-area: E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(73.37% 61.73% at 25.12% 34.7%, rgba(155, 111, 255, 0.20) 0%, rgba(120, 120, 255, 0.19) 41%, rgba(10, 148, 255, 0.16) 68.5%, rgba(255, 255, 255, 0.16) 100%), var(--color-grey-grey100, #F2F4F7);
    border-radius: 0.75rem;

}

.F{

    grid-area: F;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--grey25);
    border-radius: 1rem;

}

.G{

    grid-area: G;
    max-width: 100%;
    margin: auto;
    border-radius: 1rem;

}


.lighter-text-on-dark{
    color: var(--grey25);
}

.usability-box{
    max-width: 1050px;
    background-color: var(--grey100);
    padding: 2rem;
    border-radius: 0.5rem;
    margin: auto;
    margin-bottom: 1rem;
}


footer {
   
    background: linear-gradient(180deg,#FFFFFF,#F2F4F7);
    padding-top: var(--gap_l);
    padding-bottom: var(--gap_l);
}

.footer-container {

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-width: 1100px;
    margin: auto;


}
.police-banner-bg-footer{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: var(--grey200);
    display: flex;
    flex-direction: row;
    gap: 2rem;
    overflow: hidden;
    transform: rotate(-1deg);
}




  .police-banner-text-footer{
    font-family: 'clash-grotesk',sans-serif;
    white-space: nowrap;
    color: var(--grey400);
    font-size: 3.2rem;
    font-weight: 500;
    
  
  }

  .sitemap_img{
    max-width: 80%;
    border-radius: 0.75rem;
  }
  
  
  /*--------------------------------------------------------------------------------- */