/* =====================================================
   CCTV HERO - CSS ONLY / NO BACKGROUND IMAGE
===================================================== */

.cctv-new-hero {
    position: relative;
    min-height: 650px;

    display: flex;
    align-items: center;

    padding: 20px 20px 80px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfbfb 55%,
            #f6f6f6 100%
        );

    overflow: hidden;
}

.cctv-new-hero .container {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


/* =====================================================
   TECH BACKGROUND GRID
===================================================== */

.cctv-hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(250,167,27,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(250,167,27,.035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            rgba(0,0,0,.7)
        );

    pointer-events: none;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.cctv-hero-glow {
    position: absolute;

    border-radius: 50%;

    background: rgba(250,167,27,.12);

    filter: blur(100px);

    pointer-events: none;
}

.glow-one {
    width: 430px;
    height: 430px;

    top: -200px;
    right: -100px;
}

.glow-two {
    width: 300px;
    height: 300px;

    bottom: -180px;
    left: 30%;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.cctv-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, .95fr);

    align-items: center;

    gap: 75px;
}


/* =====================================================
   HERO CONTENT
===================================================== */

.cctv-hero-content {
    position: relative;
}


/* BADGE */

.cctv-hero-badge {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    padding: 8px 13px;

    background: rgba(250,167,27,.08);

    border:
        1px solid
        rgba(250,167,27,.22);

    border-radius: 50px;

    color: #9d6500;

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: 1.3px;
}


/* PULSE */

.badge-pulse {
    width: 8px;
    height: 8px;

    background: #faa71b;

    border-radius: 50%;

    box-shadow:
        0 0 0
        rgba(250,167,27,.45);

    animation:
        securityPulse 2s infinite;
}


@keyframes securityPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(250,167,27,.45);
    }

    70% {
        box-shadow:
            0 0 0 8px
            rgba(250,167,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(250,167,27,0);
    }

}


/* =====================================================
   H1
===================================================== */

.cctv-hero-content h1 {
    max-width: 650px;

    margin: 0 0 22px;

    color: #191919;

    font-size:
        clamp(2.8rem, 5vw, 4.8rem);

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -2px;
}


.cctv-hero-content h1 span {
    display: block;

    color: #faa71b;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.cctv-hero-lead {
    max-width: 620px;

    margin: 0;

    color: #626262;

    font-size: 1rem;

    line-height: 1.75;
}


/* =====================================================
   FEATURES
===================================================== */

.cctv-hero-features {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin: 27px 0;
}


.cctv-hero-features > div {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 9px 12px;

    background: #ffffff;

    border: 1px solid #e9e9e9;
    border-radius: 9px;

    color: #3e3e3e;

    font-size: .8rem;
    font-weight: 650;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.035);
}


.cctv-hero-features i {
    color: #faa71b !important;

    font-size: 13px;
}


/* =====================================================
   BUTTONS
===================================================== */

.cctv-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


.cctv-hero-primary,
.cctv-hero-secondary {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 21px;

    border-radius: 9px;

    font-size: .88rem;
    font-weight: 750;

    text-decoration: none;

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


/* PRIMARY */

.cctv-hero-primary {
    background: #faa71b;

    border: 1px solid #faa71b;

    color: #111111;
}


.cctv-hero-primary i {
    color: #111111 !important;
}


.cctv-hero-primary:hover {
    color: #111111;

    transform: translateY(-3px);

    box-shadow:
        0 10px 28px
        rgba(250,167,27,.30);
}


/* SECONDARY */

.cctv-hero-secondary {
    background: #ffffff;

    border: 1px solid #dedede;

    color: #292929;
}


.cctv-hero-secondary i {
    color: #faa71b !important;

    transition: transform .25s ease;
}


.cctv-hero-secondary:hover {
    color: #292929;

    border-color: #faa71b;

    transform: translateY(-3px);
}


.cctv-hero-secondary:hover i {
    transform: translateX(4px);
}


/* =====================================================
   SECURITY VISUAL
===================================================== */

.security-visual {
    position: relative;

    max-width: 500px;

    width: 100%;

    margin-left: auto;
}


/* =====================================================
   DASHBOARD
===================================================== */

.security-dashboard {
    position: relative;

    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #202020,
            #111111
        );

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

    border-radius: 22px;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.20),
        0 0 40px
        rgba(250,167,27,.08);
}


/* DASHBOARD HEADER */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 3px 3px 15px;
}


.dashboard-title {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #eeeeee;

    font-size: .72rem;
    font-weight: 750;

    letter-spacing: 1px;
}


.live-dot {
    width: 7px;
    height: 7px;

    background: #faa71b;

    border-radius: 50%;

    box-shadow:
        0 0 10px #faa71b;
}


.system-online {
    padding: 5px 8px;

    background:
        rgba(250,167,27,.10);

    border:
        1px solid
        rgba(250,167,27,.18);

    border-radius: 5px;

    color: #faa71b;

    font-size: .58rem;
    font-weight: 800;

    letter-spacing: 1px;
}


/* =====================================================
   CAMERA SCREEN
===================================================== */

.camera-screen {
    position: relative;

    height: 285px;

    background:
        radial-gradient(
            circle at center,
            #292929,
            #151515
        );

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

    border-radius: 14px;

    overflow: hidden;
}


/* GRID */

.camera-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(250,167,27,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(250,167,27,.07) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}


/* CAMERA LABEL */

.camera-label {
    position: absolute;

    top: 15px;
    left: 15px;

    color: #bcbcbc;

    font-size: .65rem;
    font-weight: 700;

    letter-spacing: 1px;
}


/* RECORD */

.recording {
    position: absolute;

    top: 15px;
    right: 15px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #eeeeee;

    font-size: .6rem;
    font-weight: 700;
}


.recording span {
    width: 7px;
    height: 7px;

    background: #faa71b;

    border-radius: 50%;

    animation:
        recordBlink 1.4s infinite;
}


@keyframes recordBlink {

    50% {
        opacity: .25;
    }

}


/* =====================================================
   SCANNING LINE
===================================================== */

.security-scan {
    position: absolute;

    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #faa71b,
            transparent
        );

    box-shadow:
        0 0 14px
        rgba(250,167,27,.7);

    animation:
        securityScan 4s
        ease-in-out infinite;
}


@keyframes securityScan {

    0% {
        top: 10%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        top: 90%;
        opacity: 0;
    }

}


/* =====================================================
   SECURITY TARGET
===================================================== */

.security-target {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 115px;
    height: 115px;

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

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(250,167,27,.35);

    border-radius: 50%;
}


.security-target::before,
.security-target::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(250,167,27,.18);
}


.security-target::before {
    width: 150px;
    height: 150px;
}


.security-target::after {
    width: 190px;
    height: 190px;
}


.security-target span {
    position: absolute;

    width: 8px;
    height: 8px;

    background: #faa71b;

    border-radius: 50%;

    box-shadow:
        0 0 20px #faa71b;
}


.security-target i {
    position: relative;

    color: #faa71b !important;

    font-size: 43px;

    filter:
        drop-shadow(
            0 0 12px
            rgba(250,167,27,.35)
        );
}


/* LIVE MONITORING */

.camera-time {
    position: absolute;

    bottom: 14px;
    left: 15px;

    color: #929292;

    font-size: .58rem;
    font-weight: 650;

    letter-spacing: 1.2px;
}


/* =====================================================
   STATUS CARDS
===================================================== */

.security-status-grid {
    display: grid;

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

    gap: 9px;

    margin-top: 10px;
}


.security-status {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;

    padding: 10px;

    background:
        rgba(255,255,255,.035);

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

    border-radius: 9px;
}


.status-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

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

    background:
        rgba(250,167,27,.10);

    border-radius: 7px;
}


.status-icon i {
    color: #faa71b !important;

    font-size: 12px;
}


.security-status strong,
.security-status span {
    display: block;
}


.security-status strong {
    color: #eeeeee;

    font-size: .59rem;
    letter-spacing: .4px;
}


.security-status span {
    margin-top: 2px;

    color: #888888;

    font-size: .55rem;
}


/* =====================================================
   FLOATING SECURITY CARD
===================================================== */

.security-floating-card {
    position: absolute;

    right: -25px;
    bottom: -28px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 16px;

    background: #ffffff;

    border:
        1px solid
        rgba(250,167,27,.25);

    border-radius: 12px;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.12);
}


.security-floating-card > i {
    width: 36px;
    height: 36px;

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

    background:
        rgba(250,167,27,.12);

    border-radius: 9px;

    color: #faa71b !important;
}


.security-floating-card strong,
.security-floating-card span {
    display: block;
}


.security-floating-card strong {
    color: #252525;

    font-size: .76rem;
}


.security-floating-card span {
    margin-top: 2px;

    color: #777777;

    font-size: .65rem;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 992px) {

    .cctv-new-hero {
        min-height: auto;

        padding:
            100px
            20px
            80px;
    }

    .cctv-hero-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .cctv-hero-content {
        max-width: 750px;
    }

    .security-visual {
        max-width: 600px;

        margin:
            0
            auto;
    }

}


@media (max-width: 600px) {

    .cctv-new-hero {
        padding:
            90px
            16px
            65px;
    }

    .cctv-hero-content h1 {
        font-size:
            clamp(2.3rem, 12vw, 3.4rem);

        letter-spacing: -1px;
    }

    .cctv-hero-features {
        flex-direction: column;

        align-items: flex-start;
    }

    .cctv-hero-actions {
        flex-direction: column;
    }

    .cctv-hero-primary,
    .cctv-hero-secondary {
        width: 100%;
    }

    .camera-screen {
        height: 230px;
    }

    .security-status-grid {
        grid-template-columns: 1fr;
    }

    .security-floating-card {
        position: relative;

        right: auto;
        bottom: auto;

        width: fit-content;

        margin:
            13px
            auto
            0;
    }

}


@media (prefers-reduced-motion: reduce) {

    .badge-pulse,
    .recording span,
    .security-scan {
        animation: none;
    }

}

/*=========================================================
 SECURITY SOLUTIONS
=========================================================*/

.security-console{
    position:relative;
    padding:90px 0;
    background:
        radial-gradient(circle at top left,
        rgba(250,167,27,.08),
        transparent 30%),
        linear-gradient(180deg,#fafafa,#f5f7fb);
    overflow:hidden;
	font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}
}

.security-console .container{
    position:relative;
    z-index:2;
}


/*=========================================
SECTION HEADER
=========================================*/

.security-console .section-header{
    max-width:760px;
    margin:0 auto 60px;
}

.security-console .section-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 18px;

    border-radius:40px;

    background:#fff;

    border:1px solid rgba(250,167,27,.25);

    color:#faa71b;

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.8px;
}

.security-console .section-title{

    margin-top:18px;

    font-size:2.8rem;

    font-weight:800;

    line-height:1.2;

    color:#222;
}

.security-console .title-accent{

    color:#faa71b;

}

.security-console .section-text{

    margin-top:18px;

    font-size:1.05rem;

    color:#666;

    line-height:1.9;
}


/*=========================================
MAIN GRID
=========================================*/

.security-grid{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:24px;

    align-items:stretch;
}


/*=========================================
LEFT FEATURE CARD
=========================================*/

.security-feature{

    display:flex;

    flex-direction:column;

    background:#16181d;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 25px 55px rgba(0,0,0,.15);

    height:100%;
}

.security-feature-image{

    position:relative;

    height:300px;

    overflow:hidden;
}

.security-feature-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;
}

.security-feature:hover img{

    transform:scale(1.05);

}

.security-image-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.15),
    #16181d);
}

.security-live{

    position:absolute;

    top:20px;
    left:20px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    background:rgba(0,0,0,.55);

    color:#fff;

    backdrop-filter:blur(8px);

    font-size:.75rem;

    font-weight:700;
}

.security-live i{

    width:8px;

    height:8px;

    background:#29d344;

    border-radius:50%;

    animation:securityPulse 2s infinite;
}

@keyframes securityPulse{

0%{
transform:scale(.9);
opacity:.5;
}

50%{
transform:scale(1.3);
opacity:1;
}

100%{
transform:scale(.9);
opacity:.5;
}

}

.security-number{

    position:absolute;

    right:20px;

    top:10px;

    font-size:3.5rem;

    font-weight:900;

    color:rgba(255,255,255,.15);
}


/*=========================================
FEATURE CONTENT
=========================================*/

.security-feature-content{

    padding:34px;

    flex:1;
}

.security-feature-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#faa71b;

    margin-bottom:22px;
}

.security-feature-icon i{

    color:#16181d;

    font-size:22px;
}

.security-label{

    display:block;

    color:#faa71b;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:12px;
}

.security-feature-content h3{

    color:#fff;

    font-size:1.8rem;

    font-weight:800;

    line-height:1.35;

    margin-bottom:18px;
}

.security-feature-content p{

    color:#d4d4d4;

    line-height:1.9;

    margin-bottom:24px;
}


/*=========================================
FEATURE TAGS
=========================================*/

.security-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;
}

.security-tags span{

    padding:8px 12px;

    border-radius:30px;

    background:rgba(255,255,255,.07);

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

    color:#ddd;

    font-size:.8rem;
}

.security-tags i{

    color:#faa71b;

    margin-right:6px;
}


/*=========================================
BUTTON
=========================================*/

.security-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 24px;

    border-radius:8px;

    background:#faa71b;

    color:#16181d;

    font-weight:700;

    text-decoration:none;

    transition:.35s;
}

.security-btn:hover{

    background:#ffb62d;

    color:#16181d;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(250,167,27,.3);
}


/*=========================================
RIGHT SIDE
=========================================*/

.security-services{

    display:grid;

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

    gap:20px;
}


/*=========================================
SERVICE CARD
=========================================*/

.security-card{

    position:relative;

    background:#fff;

    border:1px solid #e9e9e9;

    border-radius:18px;

    padding:28px;

    transition:.35s;

    overflow:hidden;

    min-height:290px;
}

.security-card:hover{

    transform:translateY(-6px);

    border-color:#faa71b;

    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.card-number{

    position:absolute;

    top:12px;

    right:18px;

    font-size:3rem;

    font-weight:900;

    color:#ececec;
}

.card-icon{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(250,167,27,.12);

    color:#faa71b;

    border-radius:14px;

    margin-bottom:22px;
}

.card-icon i{

    font-size:20px;
}

.card-label{

    display:block;

    color:#c57d00;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:8px;
}

.security-card h3{

    font-size:1.3rem;

    font-weight:800;

    color:#222;

    margin-bottom:14px;
}

.security-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:22px;
}

.card-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.card-tags span{

    padding:7px 11px;

    background:#f3f3f3;

    border-radius:30px;

    font-size:.78rem;

    color:#555;
}


/*Bottom Accent*/

.security-card::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;

    height:3px;

    background:#faa71b;

    transition:.35s;
}

.security-card:hover::after{

    width:100%;
}

/*=========================================================
TABLET
=========================================================*/

@media (max-width:991px){

.security-console{

padding:75px 0;

}

.security-console .section-title{

font-size:2.3rem;

}

.security-console .section-text{

font-size:1rem;

}

.security-grid{

grid-template-columns:1fr;

gap:22px;

}

.security-feature{

display:grid;

grid-template-columns:320px 1fr;

}

.security-feature-image{

height:100%;

min-height:360px;

}

.security-feature-content{

padding:32px;

}

.security-services{

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

gap:18px;

}

.security-card{

min-height:260px;

padding:24px;

}

.security-card h3{

font-size:1.2rem;

}

.security-card p{

font-size:.92rem;

}

}


/*=========================================================
MOBILE
=========================================================*/

@media (max-width:767px){

.security-console{

padding:60px 0;

}

.security-console .section-header{

margin-bottom:35px;

}

.security-console .section-title{

font-size:2rem;

}

.security-console .section-text{

font-size:.95rem;

line-height:1.8;

}

.security-feature{

display:block;

}

.security-feature-image{

height:240px;

}

.security-feature-content{

padding:24px;

}

.security-feature-content h3{

font-size:1.45rem;

}

.security-feature-content p{

font-size:.92rem;

}

.security-tags{

gap:8px;

}

.security-tags span{

font-size:.76rem;

padding:7px 10px;

}

.security-btn{

width:100%;

justify-content:center;

}

.security-services{

grid-template-columns:1fr;

gap:14px;

}

.security-card{

min-height:auto;

padding:22px;

}

.card-number{

font-size:2.5rem;

}

.security-card h3{

font-size:1.15rem;

}

.security-card p{

font-size:.9rem;

line-height:1.7;

}

.card-tags{

gap:6px;

}

.card-tags span{

font-size:.74rem;

padding:6px 10px;

}

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:480px){

.security-console{

padding:50px 0;

}

.security-console .section-title{

font-size:1.75rem;

}

.security-console .section-text{

font-size:.9rem;

}

.security-feature-image{

height:210px;

}

.security-feature-content{

padding:20px;

}

.security-feature-icon{

width:48px;

height:48px;

margin-bottom:18px;

}

.security-feature-icon i{

font-size:18px;

}

.security-feature-content h3{

font-size:1.28rem;

line-height:1.35;

}

.security-feature-content p{

font-size:.88rem;

}

.security-tags{

gap:6px;

}

.security-tags span{

font-size:.72rem;

padding:6px 10px;

}

.security-btn{

font-size:.85rem;

padding:12px 18px;

}

.security-card{

padding:20px;

}

.card-icon{

width:46px;

height:46px;

margin-bottom:18px;

}

.card-icon i{

font-size:18px;

}

.card-label{

font-size:.72rem;

}

.security-card h3{

font-size:1.05rem;

}

.security-card p{

font-size:.86rem;

}

.card-tags span{

font-size:.72rem;

padding:6px 9px;

}

}


/*=========================================================
ANIMATIONS
=========================================================*/

.security-feature,
.security-card{

transition:all .35s ease;

}

.security-feature:hover{

transform:translateY(-5px);

box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.card-icon{

transition:all .35s ease;

}

.security-card:hover .card-icon{

transform:rotate(-8deg) scale(1.08);

background:#faa71b;

color:#fff;

}

.security-feature-icon{

transition:all .35s ease;

}

.security-feature:hover .security-feature-icon{

transform:rotate(-8deg);

}


/*=========================================================
ACCESSIBILITY
=========================================================*/

.security-btn:focus-visible{

outline:3px solid rgba(250,167,27,.35);

outline-offset:3px;

}

.security-card:focus-within{

border-color:#faa71b;

}

@media (prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}



/* =====================================================
   CCTV INDUSTRIES
===================================================== */

.cctv-industries-section {
    position: relative;

    padding: 85px 20px;

    background: #ffffff;

    overflow: hidden;
}

.cctv-industries-section .container {
    max-width: 1250px;
    margin: 0 auto;
}


/* =====================================================
   GRID
===================================================== */

.cctv-industries-grid {
    display: grid;

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

    gap: 20px;
}


/* =====================================================
   CARD
===================================================== */

.cctv-industry-card {
    position: relative;

    min-width: 0;

    padding: 30px 22px 28px;

    background: #ffffff;

    border: 1px solid #ececec;
    border-radius: 17px;

    overflow: hidden;

    text-align: left;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.045);

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


/* GOLD ACCENT */

.cctv-industry-card::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: #faa71b;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .3s ease;
}


/* GLOW */

.cctv-industry-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -75px;
    right: -75px;

    border-radius: 50%;

    background: rgba(250, 167, 27, .15);

    filter: blur(30px);

    opacity: 0;

    pointer-events: none;

    transition: opacity .3s ease;
}


/* HOVER */

.cctv-industry-card:hover {
    transform: translateY(-6px);

    border-color: rgba(250, 167, 27, .65);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .07),
        0 0 20px rgba(250, 167, 27, .12);
}

.cctv-industry-card:hover::before {
    transform: scaleX(1);
}

.cctv-industry-card:hover::after {
    opacity: 1;
}


/* =====================================================
   NUMBER
===================================================== */

.industry-number {
    position: absolute;

    top: 16px;
    right: 18px;

    color: rgba(250, 167, 27, .16);

    font-size: 1.8rem;
    font-weight: 800;

    line-height: 1;
}


/* =====================================================
   ICON
===================================================== */

.cctv-industry-icon {
    position: relative;
    z-index: 2;

    width: 60px;
    height: 60px;

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

    margin-bottom: 20px;

    background: rgba(250, 167, 27, .10);

    border: 1px solid rgba(250, 167, 27, .18);

    border-radius: 14px;

    color: #faa71b;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.cctv-industry-icon i {
    font-size: 23px;
}


.cctv-industry-card:hover .cctv-industry-icon {
    transform: scale(1.07);

    background: #faa71b;

    color: #ffffff;
}


/* =====================================================
   TITLE
===================================================== */

.cctv-industry-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    color: #222222;

    font-size: 1.03rem;
    font-weight: 700;

    line-height: 1.35;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.cctv-industry-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #686868;

    font-size: .88rem;

    line-height: 1.65;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {

    .cctv-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {

    .cctv-industries-section {
        padding: 65px 16px;
    }

    .cctv-industries-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .cctv-industry-card {
        padding: 27px 20px;
    }

}

/* =====================================================
   CCTV / ACCESS CONTROL BENEFITS
===================================================== */

.security-benefits-section {
    position: relative;
    padding: 85px 20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(250, 167, 27, .07),
            transparent 25%
        ),
        #f8f9fa;

    overflow: hidden;
}

.security-benefits-section .container {
    max-width: 1250px;
    margin: 0 auto;
}


/* =====================================================
   GRID
===================================================== */

.security-benefits-grid {
    display: grid;

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

    gap: 20px;
}


/* =====================================================
   CARD
===================================================== */

.security-benefit-card {
    position: relative;

    min-width: 0;

    padding: 28px 24px 28px 92px;

    background: #ffffff;

    border: 1px solid #ececec;
    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, .045);

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


/* LEFT ACCENT */

.security-benefit-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: #faa71b;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform .3s ease;
}


/* HOVER */

.security-benefit-card:hover {
    transform: translateY(-5px);

    border-color: rgba(250, 167, 27, .55);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .07),
        0 0 20px rgba(250, 167, 27, .11);
}

.security-benefit-card:hover::before {
    transform: scaleY(1);
}


/* =====================================================
   ICON
===================================================== */

.security-benefit-icon {
    position: absolute;

    top: 28px;
    left: 24px;

    width: 50px;
    height: 50px;

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

    background: rgba(250, 167, 27, .10);

    border: 1px solid rgba(250, 167, 27, .18);

    border-radius: 13px;

    color: #faa71b;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.security-benefit-icon i {
    font-size: 20px;
}


.security-benefit-card:hover .security-benefit-icon {
    transform: scale(1.07);

    background: #faa71b;

    color: #ffffff;
}


/* =====================================================
   NUMBER
===================================================== */

.benefit-number {
    position: absolute;

    top: 14px;
    right: 16px;

    color: rgba(250, 167, 27, .14);

    font-size: 1.65rem;
    font-weight: 800;

    line-height: 1;
}


/* =====================================================
   TITLE
===================================================== */

.security-benefit-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 9px;

    color: #222222;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.4;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.security-benefit-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #686868;

    font-size: .88rem;
    line-height: 1.65;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {

    .security-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .security-benefits-section {
        padding: 65px 16px;
    }

    .security-benefits-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .security-benefit-card {
        padding:
            82px
            20px
            24px;
    }

    .security-benefit-icon {
        top: 22px;
        left: 20px;
    }

}

/* =====================================================
   SECURITY INSTALLATION PROCESS
   SR INFOTECH
===================================================== */

.security-process-section {
    position: relative;
    padding: 80px 20px;
    background: #ffffff;
    overflow: hidden;
}

.security-process-section .container {
    position: relative;
    z-index: 2;

    max-width: 1150px;
    margin: 0 auto;
}


/* =====================================================
   PROCESS GRID
===================================================== */

.security-process-grid {
    position: relative;

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

    gap: 35px;
    align-items: start;
}


/* =====================================================
   CONNECTING LINE
===================================================== */

.security-process-grid::before {
    content: "";

    position: absolute;

    top: 51px;
    left: 16%;
    right: 16%;

    height: 2px;

    background: linear-gradient(
        90deg,
        rgba(250, 167, 27, 0.20),
        #faa71b,
        rgba(250, 167, 27, 0.20)
    );

    z-index: 0;
}


/* =====================================================
   PROCESS CARD
===================================================== */

.security-process-card {
    position: relative;
    z-index: 1;

    min-width: 0;

    padding: 0 22px 25px;

    text-align: center;
}


/* =====================================================
   PROCESS NUMBER
===================================================== */

.process-number {
    display: inline-block;

    color: #faa71b;

    font-size: 0.76rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 1.5px;
}


/* =====================================================
   PROCESS ICON CIRCLE
===================================================== */

.process-icon {
    width: 78px;
    height: 78px;

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

    margin: 12px auto 24px;

    background-color: #ffffff;

    border: 2px solid #faa71b;
    border-radius: 50%;

    color: #faa71b;

    box-shadow:
        0 0 0 8px #ffffff,
        0 8px 25px rgba(250, 167, 27, 0.16);

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =====================================================
   FONT AWESOME ICON
===================================================== */

.process-icon i {
    position: relative;
    z-index: 2;

    display: inline-block;

    color: #faa71b !important;

    font-size: 27px;
    line-height: 1;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* =====================================================
   HOVER - ICON CIRCLE
===================================================== */

.security-process-card:hover .process-icon {
    background-color: #faa71b;

    border-color: #faa71b;

    transform:
        translateY(-5px)
        scale(1.05);

    box-shadow:
        0 0 0 8px #ffffff,
        0 10px 30px rgba(250, 167, 27, 0.30);
}


/* =====================================================
   HOVER - FORCE ICON WHITE
===================================================== */

.security-process-card:hover .process-icon i {
    color: #ffffff !important;

    transform: scale(1.08);
}


/* =====================================================
   TITLE
===================================================== */

.security-process-card h3 {
    margin: 12px 0 10px;

    color: #222222;

    font-size: 1.08rem;
    font-weight: 700;

    line-height: 1.4;

    transition: color 0.3s ease;
}


/* TITLE HOVER */

.security-process-card:hover h3 {
    color: #faa71b;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.security-process-card p {
    max-width: 310px;

    margin: 0 auto;

    color: #686868;

    font-size: 0.89rem;
    font-weight: 400;

    line-height: 1.7;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {

    .security-process-grid {
        gap: 20px;
    }

    .security-process-card {
        padding-left: 15px;
        padding-right: 15px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .security-process-section {
        padding: 65px 16px;
    }


    .security-process-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* REMOVE HORIZONTAL LINE */

    .security-process-grid::before {
        display: none;
    }


    .security-process-card {
        width: 100%;
        max-width: 500px;

        margin: 0 auto;

        padding:
            10px
            20px
            30px;
    }


    .process-icon {
        margin-bottom: 20px;
    }


    .security-process-card p {
        max-width: 420px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .security-process-section {
        padding:
            60px
            15px;
    }


    .security-process-card {
        padding:
            8px
            10px
            26px;
    }


    .process-icon {
        width: 70px;
        height: 70px;

        margin:
            12px
            auto
            19px;
    }


    .process-icon i {
        font-size: 24px;
    }


    .security-process-card h3 {
        font-size: 1rem;
    }


    .security-process-card p {
        font-size: 0.86rem;

        line-height: 1.65;
    }

}


/* =====================================================
   TOUCH DEVICES
   PREVENT STUCK HOVER EFFECTS
===================================================== */

@media (hover: none) {

    .security-process-card:hover .process-icon {
        background-color: #ffffff;

        border-color: #faa71b;

        transform: none;

        box-shadow:
            0 0 0 8px #ffffff,
            0 8px 25px rgba(250, 167, 27, 0.16);
    }


    .security-process-card:hover .process-icon i {
        color: #faa71b !important;

        transform: none;
    }


    .security-process-card:hover h3 {
        color: #222222;
    }

}
/* =====================================================
   SECURITY BRANDS + SERVICE AREAS
===================================================== */

.security-coverage-section {
    position: relative;
    padding: 85px 20px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(250, 167, 27, .06),
            transparent 25%
        ),
        #f8f9fa;

    overflow: hidden;
}

.security-coverage-section .container {
    max-width: 1250px;
    margin: 0 auto;
}


/* =====================================================
   MAIN GRID
===================================================== */

.security-coverage-wrapper {
    display: grid;

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

    gap: 22px;

    align-items: stretch;
}


/* =====================================================
   BLOCK
===================================================== */

.security-coverage-block {
    position: relative;

    min-width: 0;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e9e9e9;
    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 10px 32px rgba(0, 0, 0, .05);

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


/* GOLD TOP LINE */

.security-coverage-block::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #faa71b;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .3s ease;
}


.security-coverage-block:hover {
    transform: translateY(-5px);

    border-color: rgba(250, 167, 27, .55);

    box-shadow:
        0 15px 38px rgba(0, 0, 0, .07),
        0 0 22px rgba(250, 167, 27, .10);
}


.security-coverage-block:hover::before {
    transform: scaleX(1);
}


/* =====================================================
   BLOCK HEADING
===================================================== */

.coverage-heading {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 16px;
}


.coverage-heading-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

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

    background: rgba(250, 167, 27, .10);

    border: 1px solid rgba(250, 167, 27, .20);
    border-radius: 14px;

    color: #faa71b;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.coverage-heading-icon i {
    color: inherit !important;
    font-size: 21px;
}


.security-coverage-block:hover .coverage-heading-icon {
    background: #faa71b;

    color: #ffffff;

    transform: scale(1.05);
}


.security-coverage-block:hover .coverage-heading-icon i {
    color: #ffffff !important;
}


/* SMALL LABEL */

.coverage-heading span {
    display: block;

    margin-bottom: 3px;

    color: #faa71b;

    font-size: .7rem;
    font-weight: 800;

    letter-spacing: 1.4px;
}


/* TITLE */

.coverage-heading h3 {
    margin: 0;

    color: #222222;

    font-size: 1.2rem;
    font-weight: 700;

    line-height: 1.3;
}


/* DESCRIPTION */

.coverage-description {
    margin: 0 0 24px;

    color: #686868;

    font-size: .9rem;
    line-height: 1.7;
}


/* =====================================================
   BRAND GRID
===================================================== */

.security-brand-grid {
    display: grid;

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

    gap: 12px;
}


.security-brand {
    height: 92px;

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

    padding: 15px;

    background: #fafafa;

    border: 1px solid #eeeeee;
    border-radius: 12px;

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


.security-brand:hover {
    transform: translateY(-3px);

    border-color: #faa71b;

    box-shadow:
        0 7px 18px rgba(250, 167, 27, .12);
}


.security-brand img {
    display: block;

    width: 100%;
    max-width: 115px;

    height: 52px;

    object-fit: contain;
}


/* =====================================================
   SERVICE AREAS
===================================================== */

.security-area-grid {
    display: grid;

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

    gap: 10px;
}


.security-area-grid span {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;

    padding: 11px 13px;

    background: #fafafa;

    border: 1px solid #eeeeee;
    border-radius: 10px;

    color: #444444;

    font-size: .84rem;
    font-weight: 600;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.security-area-grid span i {
    flex: 0 0 auto;

    color: #faa71b !important;

    font-size: 12px;
}


.security-area-grid span:hover {
    transform: translateX(3px);

    background: rgba(250, 167, 27, .05);

    border-color: #faa71b;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .security-coverage-wrapper {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {

    .security-coverage-section {
        padding: 65px 16px;
    }


    .security-coverage-block {
        padding: 23px 19px;
    }


    .security-brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .security-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .security-area-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   WHY CHOOSE US + QUICK FAQ
===================================================== */

.security-trust-faq {
    padding: 70px 20px;
    background: #ffffff;
}

.security-trust-faq .container {
    max-width: 1200px;
    margin: 0 auto;
}


/* TWO COLUMNS */

.trust-faq-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 55px;
    align-items: start;
}


/* SMALL LABEL */

.mini-section-label {
    display: inline-block;
    margin-bottom: 9px;

    color: #faa71b;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* MAIN TITLES */

.security-trust-side > h2,
.security-faq-side > h2 {
    margin: 0 0 13px;

    color: #222;

    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.3;
}


.trust-intro {
    max-width: 550px;

    margin: 0 0 25px;

    color: #686868;

    font-size: .9rem;
    line-height: 1.65;
}


/* =====================================================
   TRUST POINTS
===================================================== */

.trust-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
}


.trust-point {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 15px;

    background: #f9f9f9;

    border: 1px solid #eeeeee;
    border-radius: 12px;

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


.trust-point:hover {
    transform: translateY(-3px);

    border-color: #faa71b;

    box-shadow:
        0 7px 18px rgba(250,167,27,.10);
}


.trust-point > i {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

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

    background: rgba(250,167,27,.10);

    border-radius: 9px;

    color: #faa71b !important;

    font-size: 15px;
}


.trust-point h3 {
    margin: 0 0 4px;

    color: #292929;

    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
}


.trust-point p {
    margin: 0;

    color: #707070;

    font-size: .77rem;
    line-height: 1.5;
}


/* =====================================================
   FAQ
===================================================== */

.mini-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 20px;
}


.mini-faq-item {
    background: #f9f9f9;

    border: 1px solid #eeeeee;
    border-radius: 11px;

    overflow: hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.mini-faq-item:hover,
.mini-faq-item[open] {
    border-color: #faa71b;

    box-shadow:
        0 5px 16px rgba(250,167,27,.08);
}


.mini-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 15px 17px;

    list-style: none;

    cursor: pointer;

    color: #333;

    font-size: .87rem;
    font-weight: 700;
}


.mini-faq-item summary::-webkit-details-marker {
    display: none;
}


.mini-faq-item summary i {
    color: #faa71b !important;

    font-size: 12px;

    transition: transform .25s ease;
}


.mini-faq-item[open] summary i {
    transform: rotate(45deg);
}


.mini-faq-item p {
    margin: 0;

    padding: 0 17px 16px;

    color: #686868;

    font-size: .82rem;
    line-height: 1.6;
}


/* ALL FAQ LINK */

.security-all-faq {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 18px;

    color: #222;

    font-size: .83rem;
    font-weight: 700;

    text-decoration: none;
}


.security-all-faq i {
    color: #faa71b !important;

    transition: transform .25s ease;
}


.security-all-faq:hover {
    color: #faa71b;
}


.security-all-faq:hover i {
    transform: translateX(4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .trust-faq-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {

    .security-trust-faq {
        padding: 60px 16px;
    }

    .trust-points {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   FINAL CCTV / SECURITY CTA
===================================================== */

.security-final-cta {
    position: relative;

    padding: 75px 20px;

    background: #171717;

    overflow: hidden;
}

.security-final-cta .container {
    position: relative;
    z-index: 2;

    max-width: 1000px;
    margin: 0 auto;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.security-cta-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    top: -330px;
    left: 50%;

    transform: translateX(-50%);

    background: rgba(250, 167, 27, .18);

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


/* =====================================================
   CONTENT
===================================================== */

.security-cta-content {
    position: relative;
    z-index: 2;

    text-align: center;
}


/* LABEL */

.security-cta-label {
    display: inline-block;

    margin-bottom: 14px;

    color: #faa71b;

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* HEADING */

.security-cta-content h2 {
    max-width: 760px;

    margin: 0 auto 16px;

    color: #ffffff;

    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 700;

    line-height: 1.2;
}


/* DESCRIPTION */

.security-cta-content > p {
    max-width: 680px;

    margin: 0 auto;

    color: #c8c8c8;

    font-size: .96rem;

    line-height: 1.7;
}


/* =====================================================
   SERVICE POINTS
===================================================== */

.security-cta-points {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 25px;

    margin: 27px 0;
}


.security-cta-points span {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #eeeeee;

    font-size: .86rem;
    font-weight: 600;
}


.security-cta-points span i {
    color: #faa71b !important;

    font-size: 13px;
}


/* =====================================================
   BUTTONS
===================================================== */

.security-cta-buttons {
    display: flex;
    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;
}


.security-cta-primary,
.security-cta-secondary {
    min-width: 165px;

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

    gap: 9px;

    padding: 13px 23px;

    border-radius: 9px;

    font-size: .9rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


/* PRIMARY */

.security-cta-primary {
    background: #faa71b;

    border: 1px solid #faa71b;

    color: #111111;
}


.security-cta-primary i {
    color: #111111 !important;
}


.security-cta-primary:hover {
    background: #faa71b;

    color: #111111;

    transform: translateY(-3px);

    box-shadow:
        0 9px 28px rgba(250, 167, 27, .32);
}


.security-cta-primary:hover i {
    color: #111111 !important;
}


/* SECONDARY */

.security-cta-secondary {
    background: transparent;

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

    color: #ffffff;
}


.security-cta-secondary i {
    color: #faa71b !important;
}


.security-cta-secondary:hover {
    border-color: #faa71b;

    color: #faa71b;

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(250, 167, 27, .12);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {

    .security-final-cta {
        padding: 60px 16px;
    }

    .security-cta-points {
        flex-direction: column;

        gap: 10px;

        margin: 23px 0;
    }

    .security-cta-buttons {
        flex-direction: column;

        width: 100%;
    }

    .security-cta-primary,
    .security-cta-secondary {
        width: 100%;
    }

}