/*==================================================
Spy Video Car Policy
==================================================*/

.spyx-policy-page{

    background:#050505;

    color:#ffffff;

    overflow:hidden;

    padding:0 0 140px;

}

.spyx-policy-page .spyx-container{

    width:100%;

    max-width:1320px;

    margin:0 auto;

    padding:0 24px;

}

/*==================================================
Hero
==================================================*/

.spyx-policy-hero{

    position:relative;

    display:flex;

    align-items:center;

        padding-top: 130px;
    padding-bottom: 130px;


    overflow:hidden;

    background-repeat:no-repeat;

    background-size:cover;

    background-position:center right;

}

.spyx-policy-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(            90deg,            rgba(0,0,0,.45) 0%,            rgba(0,0,0,.15) 40%,            rgba(0,0,0,.15) 60%,            rgba(0,0,0,.45) 100%        );

    z-index:1;

}

.spyx-policy-hero .spyx-container{

    position:relative;

    z-index:2;

}

.spyx-policy-hero-content {
    width: 100%;
    max-width: 800px;
    padding-top: 18px;
    margin: auto;
    text-align: center;
}

.spyx-policy-hero h1 {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 70px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
}

.spyx-policy-hero-divider {
    width: 200px;
    height: 4px;
    margin: 32px auto;
    background: #E31B23;
    border-radius: 100px;
}

.spyx-policy-hero p{

    margin:0 auto;

    max-width:500px;

    color:#d8d8d8;

    font-size:19px;

    font-weight:400;

    line-height:1.95;

}

/*==================================================
Section Wrapper
==================================================*/

.spyx-policy-page section{

    position:relative;

}

/*==================================================
Policy Cards
==================================================*/

.spyx-policy-card{

    position:relative;

    margin-top:56px;

    padding:20px;

    background:#111111;

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    overflow:hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.spyx-policy-card:hover{

    transform:translateY(-8px);

    border-color:#E31B23;

    box-shadow:
        0 28px 70px rgba(0,0,0,.50);

}


/*==================================================
Section Layout
==================================================*/

.spyx-policy-grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:42px;

    margin-top:56px;

}

.spyx-policy-grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:42px;

    margin-top:56px;

}

/*==================================================
Titles
==================================================*/

.spyx-policy-title{

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:38px;

}

.spyx-policy-icon{

    width:62px;

    height:62px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    border:2px solid #E31B23;

    border-radius:50%;

    color:#E31B23;

    background:transparent;

    font-size:28px;

    transition:.35s ease;

}

.spyx-policy-card:hover .spyx-policy-icon{

    background:#E31B23;

    color:#fff;

}

/*==================================================
Heading Typography
==================================================*/

.spyx-policy-card h2{

    margin:0;

    color:#fff;

    font-family:'Oswald',sans-serif;

    font-size:28px;

    font-weight:500;

    line-height:1.05;

    letter-spacing:.4px;

    text-transform:uppercase;

}

.spyx-policy-card h3{

    margin:0;

    color:#fff;

    font-family:'Oswald',sans-serif;

    font-size:24px;

    font-weight:500;

    line-height:1.15;

    letter-spacing:.3px;

    text-transform:uppercase;

}

/*==================================================
Body Typography
==================================================*/

.spyx-policy-content{

    color:#D4D4D4;

    font-size:18px;

        line-height: 1.50;


}

.spyx-policy-content p{

    margin:0 0 26px;

}

.spyx-policy-content p:last-child{

    margin-bottom:0;

}

.spyx-policy-card strong{

    color:#fff;

    font-weight:600;

}

.spyx-policy-card a{

    color:#ffffff;

    text-decoration:none;

    transition:.3s;

}

.spyx-policy-card a:hover{

    color:#E31B23;

}

/*==================================================
Lists
==================================================*/

.spyx-policy-card ul,
.spyx-policy-card ol{

    margin:0;

    padding:0;

}

/*------------------------------------
Bullet Lists
------------------------------------*/

.spyx-policy-card ul li{

    position:relative;

    list-style:none;

    margin-bottom:22px;

    padding-left:38px;

    color:#D8D8D8;

    font-size:18px;

    line-height:1.9;

}

.spyx-policy-card ul li:last-child{

    margin-bottom:0;

}

.spyx-policy-card ul li::before{

    content:"";

    position:absolute;

    left:0;

    top:12px;

    width:10px;

    height:10px;

    background:#E31B23;

    border-radius:50%;

}

/*------------------------------------
Number Lists
------------------------------------*/

.spyx-policy-card ol{

    counter-reset:policy;

}

.spyx-policy-card ol li{

    position:relative;

    list-style:none;

    counter-increment:policy;

    margin-bottom:26px;

    padding-left:52px;

    color:#D8D8D8;

    font-size:18px;

    line-height:1.60;

}

.spyx-policy-card ol li:last-child{

    margin-bottom:0;

}

.spyx-policy-card ol li::before{

    content:counter(policy);

    position:absolute;

    left:0;

    top:2px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    

    border-radius:50%;

        color: #E31B23;


    font-size:18px;

    font-weight:700;

}

/*------------------------------------
Strong Text
------------------------------------*/

.spyx-policy-card strong{

    color:#ffffff;

    font-weight:600;

}

/*==================================================
Contact Information
==================================================*/

.spyx-policy-contact{

    display:flex;

    flex-direction:column;

    gap:34px;

}

.spyx-contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

}

.spyx-contact-item i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #E31B23;

    border-radius:50%;

    color:#E31B23;

    background:transparent;

    font-size:22px;

    flex-shrink:0;

    transition:.35s ease;

}

.spyx-contact-item:hover i{

    background:#E31B23;

    color:#fff;

}

.spyx-contact-content{

    flex:1;

}

.spyx-contact-content span{

    display:block;

    margin-bottom:10px;

    color:#8A8A8A;

    font-size:12px;

    font-weight:600;

    letter-spacing:1.4px;

    text-transform:uppercase;

}

.spyx-contact-content a{

    color:#ffffff;

    font-size:19px;

    font-weight:500;

    text-decoration:none;

    transition:.3s;

}

.spyx-contact-content a:hover{

    color:#E31B23;

}

.spyx-contact-content p{

    margin:0;

    color:#ffffff;

    font-size:18px;

    line-height:1.9;

}

/*==================================================
Links
==================================================*/

.spyx-policy-card a{

    color:#ffffff;

    text-decoration:none;

    transition:.3s ease;

}

.spyx-policy-card a:hover{

    color:#E31B23;

}

/*==================================================
Product Support
==================================================*/

.spyx-policy-support-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    margin-top:12px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    overflow:hidden;

    background:#161616;

}

.spyx-policy-support-grid > div{

    position:relative;

    padding:42px 24px 34px;

    text-align:center;

    transition:.35s ease;

}

.spyx-policy-support-grid > div:hover{

    background:#1B1B1B;

}

.spyx-policy-support-grid > div:not(:last-child){

    border-right:1px solid rgba(255,255,255,.08);

}

/*==================================================
Support Icons
==================================================*/

.spyx-policy-support-grid > div::before{

    display:flex;

    justify-content:center;

    align-items:center;

    width:64px;

    height:64px;

    margin:0 auto 24px;

    border:2px solid #E31B23;

    border-radius:50%;

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    color:#E31B23;

    font-size:24px;

    transition:.35s ease;

}

.spyx-policy-support-grid > div:hover::before{

    background:#E31B23;

    color:#fff;

}

/* Product */

.spyx-policy-support-grid > div:nth-child(1)::before{

    content:"\f1b2";

}

/* Model */

.spyx-policy-support-grid > div:nth-child(2)::before{

    content:"\23";

}

/* Release */

.spyx-policy-support-grid > div:nth-child(3)::before{

    content:"\f073";

}

/* Firmware */

.spyx-policy-support-grid > div:nth-child(4)::before{

    content:"\f7c2";

}

/* Support */

.spyx-policy-support-grid > div:nth-child(5)::before{

    content:"\f058";

}

/*==================================================
Support Labels
==================================================*/

.spyx-policy-support-grid span{

    display:block;

    margin-bottom:14px;

    color:#909090;

    font-size:12px;

    font-weight:600;

    letter-spacing:1.2px;

    text-transform:uppercase;

}

/*==================================================
Support Values
==================================================*/

.spyx-policy-support-grid strong {
    display: block;
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 500 !important;
    line-height: 1.45;
}

/*==================================================
Hover
==================================================*/

.spyx-policy-support-grid > div:hover strong{

    color:#fff;

}

.spyx-policy-support-grid > div:hover span{

    color:#d2d2d2;

}

/*==================================================
Large Desktop
==================================================*/

@media (min-width:1600px){

    .spyx-policy-page .spyx-container{

        max-width:1440px;

    }

    .spyx-policy-hero{

        min-height:680px;

    }

    .spyx-policy-hero h1{

        font-size:82px;

    }

}

/*==================================================
Laptop
==================================================*/

@media (max-width:1200px){

    .spyx-policy-card{
        padding:54px;
    }

    .spyx-policy-grid-2{
        gap:34px;
    }

    .spyx-policy-grid-3{
        gap:34px;
        grid-template-columns:repeat(2,1fr);
    }

    .spyx-policy-support-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .spyx-policy-support-grid > div:nth-child(3){
        border-right:none;
    }

}

/*==================================================
Tablet
==================================================*/

@media (max-width:991px){

    .spyx-policy-page{
        padding-bottom:90px;
    }

    /* Updated Hero */

    .spyx-policy-hero{
        min-height:auto;
        padding:80px 0 65px;
        justify-content:center;
        background-position:center;
    }

    .spyx-policy-hero-content{
        width:100%;
        max-width:560px;
        margin:0 auto;
        padding:0 30px;
        text-align:center;
    }

    .spyx-policy-hero-divider{
        width:200px;
        margin:22px auto;
    }

    .spyx-policy-hero h1{
        font-size: 48px;
        line-height: 1.2;

    }

    .spyx-policy-hero p{
        max-width:430px;
        margin:22px auto 0;
        font-size:18px;
        line-height:1.6;
    }

    /* Original Layout */

    .spyx-policy-grid-2{
        grid-template-columns:1fr;
        gap:28px;
    }

    .spyx-policy-grid-3{
        grid-template-columns:1fr;
        gap:28px;
    }

    .spyx-policy-card{
        margin-top:38px;
        padding:42px;
    }

    .spyx-policy-title{
        gap:18px;
        margin-bottom:28px;
    }

    .spyx-policy-icon{
        width:64px;
        height:64px;
        font-size:24px;
    }

    .spyx-policy-card h2{
                font-size: 23px;
        line-height: normal;

    }

    .spyx-policy-card h3{
        font-size:30px;
    }

    .spyx-policy-content{
        font-size:17px;
    }

    /* LEFT EXACTLY AS YOUR ORIGINAL */

    .spyx-policy-support-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .spyx-policy-support-grid > div{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

}

/*==================================================
Mobile
==================================================*/

@media (max-width:767px){

    .spyx-policy-page{
        padding-bottom:70px;
    }

    .spyx-policy-page .spyx-container{
        padding:0 18px;
    }

    /* Updated Hero */

    .spyx-policy-hero{
        min-height:auto;
        padding:125px 0 45px;
        justify-content:center;
        background-position:center;
            background-size: contain;

    }

    .spyx-policy-hero-content{
        width:100%;
        max-width:340px;
        margin:0 auto;
        padding:0 20px;
        text-align:center;
    }

    .spyx-policy-hero h1{
          font-size: 48px;
        line-height: 1.2;

    }

    .spyx-policy-hero-divider{
        width:70%;
        margin:18px auto;
    }

    .spyx-policy-hero p{
        max-width:310px;
        margin:18px auto 0;
        font-size:15px;
        line-height:1.6;
    }

    /* Original Layout */

    .spyx-policy-card{
        margin-top:30px;
        padding:28px;
        border-radius:18px;
    }

    .spyx-policy-title{
                align-items: center;

        gap:18px;
    }

    .spyx-policy-icon{
        width:56px;
        height:56px;
        font-size:20px;
    }

    .spyx-policy-card h2{
                font-size: 23px;
        line-height: normal;

    }

    .spyx-policy-card h3{
        font-size:26px;
    }

    .spyx-policy-content{
        font-size:16px;
        line-height:1.8;
    }

    .spyx-policy-card ul li,
    .spyx-policy-card ol li{
        font-size:16px;
    }

    .spyx-contact-item{
        gap:16px;
    }

    .spyx-contact-item i{
        width:50px;
        height:50px;
        font-size:18px;
    }

    .spyx-contact-content a{
        font-size:17px;
    }

    .spyx-contact-content p{
        font-size:16px;
    }

    /* LEFT EXACTLY AS YOUR ORIGINAL */

    .spyx-policy-support-grid{
        grid-template-columns:1fr;
    }

    .spyx-policy-support-grid > div{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
        padding:30px 20px;
    }

    .spyx-policy-support-grid > div:last-child{
        border-bottom:none;
    }

    .spyx-policy-support-grid strong{
        font-size:20px;
    }

}