body{
    color:white;
    font-family:'Poppins', sans-serif;

    background:

    linear-gradient(120deg,
    #000000 0%,
    #000000 25%,
    #000000 50%,
    #121212 75%,
    #000000 100%);

    background-attachment:fixed;
}

.navbar{
    background-color:#000;
}

.cyber-btn{
    background:orange;
    border:none;
    color:black;
}

.tech-glow{
    box-shadow:0 0 15px orange;
}

.section{
    padding:100px 0;
}


/* =========================
   CYBER HERO NAVBAR
========================= */

.hero-navbar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:35px 60px;
    z-index:1000;
}

/* LOGO */

.logo-container img{
    height:50px;
    filter:drop-shadow(0 0 10px rgba(12, 12, 12, 0.6));
    transition:0.4s ease;
}

.logo-container img:hover{
    transform:scale(1.05);
}

/* MENU BUTTON */

.menu-toggle{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    font-weight:600;
    letter-spacing:2px;
    color:white;
    position:relative;
    padding:10px 18px;
    border:1px solid rgba(255,140,0,0.3);
    transition:0.4s ease;
}

.menu-toggle::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,140,0,0.08);
    opacity:0;
    transition:0.3s ease;
}

.menu-toggle:hover{
    border-color:orange;
    box-shadow:0 0 15px rgba(255,140,0,0.5);
}

.menu-toggle:hover::before{
    opacity:1;
}

#menuBackdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    transition:0.4s ease;
    z-index:900;
    pointer-events:none;
}

#menuBackdrop.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
#sideMenu{
    position:fixed;
    top:0;
    right:0;
    width:360px;
    height:100%;
    background:rgba(10,10,10,0.9);
    backdrop-filter:blur(20px);
    transform:translateX(100%);
    transition:0.4s ease;
    z-index:9999;
    padding:100px 40px;
}

#sideMenu.open{
    transform:translateX(0);
}
.menu-item{
    display:block;
    margin:25px 0;
    font-size:20px;
    text-decoration:none;
    color:white;
    position:relative;
    transition:0.4s ease;
}

.menu-item::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:2px;
    background:orange;
    transition:0.3s ease;
}

.menu-item:hover{
    color:orange;
    transform:translateX(10px);
    text-shadow:0 0 8px rgba(255,140,0,0.7);
}

.menu-item:hover::after{
    width:40%;
}

/* BACK BUTTON */

.back-btn{
    margin-bottom:40px;
    color:orange;
    font-weight:600;
    cursor:pointer;
}

.menu-item,
.back-btn{
    position:relative;
    z-index:10000;
    cursor:pointer;
}

.submenu-arrow{
    float:right;
    font-size:16px;
    opacity:0.6;
}
.menu-close{
    position:absolute;
    top:25px;
    right:25px;
    font-size:22px;
    color:white;
    cursor:pointer;
    transition:0.3s;
}

.menu-close:hover{
    color:orange;
    transform:rotate(90deg);
}

#pageContent{
    transition:0.4s ease;
}

#pageContent.blur{
    filter:blur(6px);
    transform:scale(1.01);
    pointer-events:none;
}


@media(max-width:768px){

.hero-navbar{
    padding:25px 25px;
}

.logo-container img{
    height:45px;
}

#sideMenu{
    width:280px;
    padding:80px 30px;
}

.menu-item{
    font-size:18px;
}

}

/* ===============================
   CYBER FOOTER
=============================== */

.cyber-footer{
    position:relative;
    background:#000;
    padding:60px 0 30px;
    overflow:hidden;
    border-top:1px solid rgba(255,140,0,0.2);
}

/* ORANGE AMBIENT GLOW */

.cyber-footer::before{
    content:"";
    position:absolute;
    bottom:-120px;
    left:-120px;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(255,140,0,0.25), transparent 70%);
    z-index:0;
}

.cyber-footer::after{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(255,140,0,0.15), transparent 70%);
    z-index:0;
}

/* KEEP CONTENT ABOVE GLOW */

.cyber-footer .container{
    position:relative;
    z-index:2;
}

/* LOGO */

.footer-logo{
    width:180px;
    margin-bottom:12px;
}

/* DESCRIPTION */

.footer-desc{
    color:#fff;
    font-size:13px;
    line-height:1.6;
}

/* TITLES */

.footer-title{
    color:white;
    margin-bottom:15px;
    font-size:17px;
}

/* LINKS */

.footer-links{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:6px;
}

.footer-links a,
.footer-contact a{
    color:#ccc;
    text-decoration:none;
    transition:0.3s ease;
}

/* HOVER GLOW */

.footer-links a:hover,
.footer-contact a:hover{
    color:orange;
    padding-left:6px;
    text-shadow:0 0 6px orange;
}

/* CONTACT TEXT */

.footer-contact{
    color:#aaa;
    font-size:13px;
    line-height:1.6;
}

/* CYBER DIVIDER */

.footer-divider{
    border:none;
    height:1px;
    background:linear-gradient(to right, transparent, orange, transparent);
    margin:30px 0;
}

/* COPYRIGHT */

.footer-bottom{
    color:#888;
    font-size:13px;
}

.footer-bottom a{
    color:orange;
    text-decoration:none;
}

.footer-bottom a:hover{
    text-shadow:0 0 8px orange;
}

/* FORCE UPPERCASE TITLES */
.footer-title{
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:15px;
}

/* SOCIAL ICONS */
.footer-social{
    display:flex;
    gap:20px;
    margin-top:15px;
}

.footer-social a{
    font-size:28px;
    color:white;
    transition:0.3s ease;
}

.footer-social a:hover{
    color:orange;
    transform:translateY(-4px);
    text-shadow:0 0 8px orange;
}
/* ===============================
   MOBILE 2x2
=============================== */

@media(max-width:768px){

.footer-logo{
    width:120px;
}

.footer-title{
    font-size:15px;
}

.footer-desc,
.footer-contact{
    font-size:12px;
}

.footer-links li{
    margin-bottom:5px;
}

}

/* ===============================
   HERO SECTION
=============================== */

/* ===============================
   HERO SECTION (VIDEO BACKGROUND)
=============================== */

.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

/* VIDEO */

.hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

/* DARK OVERLAY */

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.55)
    );
    z-index:1;
}

/* CONTENT ABOVE VIDEO */

.hero-section .container{
    position:relative;
    z-index:2;
}


/* TITLE */

.hero-title{
    font-size:64px;
    font-weight:600;
    letter-spacing:-1px;
    color:white;
    line-height:1.15;
}

.hero-title span{
    color:orange;
    text-shadow:0 0 12px rgba(255,140,0,0.7);
}


/* TEXT */

.hero-text{
    color:#fff;
    margin:20px 0 30px;
    max-width:520px;
    font-size:17px;
    line-height:1.6;
}


/* CTA BUTTON */

.hero-btn{
    padding:12px 32px;
    border:1px solid rgba(255,140,0,0.7);
    color:white;
    text-decoration:none;
    transition:0.3s ease;
    position:relative;
}

.hero-btn:hover{
    background:orange;
    color:black;
    box-shadow:0 0 15px rgba(255,140,0,0.8);
}



/* MOBILE */

@media(max-width:768px){

.hero-title{
    font-size:40px;
}

.hero-text{
    font-size:15px;
}

.hero-glow{
    width:300px;
    height:300px;
    right:-80px;
}

}

/* ===============================
   WHY CHOOSE US SECTION
=============================== */

.choose-section{
    padding:80px 0;
    position:relative;
    overflow:hidden;
    background:transparent;
}

.choose-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to left,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.25)
    );
    z-index:0;
}

.choose-section .container{
    position:relative;
    z-index:2;
}


/* IMAGE BOX */
.choose-img-box{
    position:relative;
    overflow:hidden;
}

/* HOVER BLUR LAYER */

.choose-img-box::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:0.5s ease;
    z-index:1;
}

.choose-img-box:hover::after{
    opacity:1;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,0.45) 20%,
        rgba(0,0,0,0.25) 40%,
        rgba(0,0,0,0.1) 60%,
        transparent 85%
    );
}

.choose-img-box img{
    width:100%;
    transition:0.5s ease;
}

/* HOVER ZOOM */

.choose-img-box:hover img{
    transform:scale(1.08);
}

/* HIDE OVERLAY INITIALLY */
.img-overlay{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;

    display:flex;
    align-items:flex-end;
    padding:25px;

    opacity:0;
    transition:0.5s ease;
    z-index:2;
}

/* NATURAL BLUR + DARK FADE ON HOVER */

.choose-img-box:hover .img-overlay{
    opacity:1;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.45) 20%,
        rgba(0,0,0,0.25) 40%,
        rgba(0,0,0,0.1) 60%,
        transparent 85%
    );
}
/* BLACK SHADOW BEHIND TEXT */

.img-overlay h3{
    color:white;
    font-size:26px;
    line-height:1.3;
    max-width:70%;
}

/* RIGHT SIDE */

.choose-title{
    color:white;
    margin-bottom:30px;
}


/* ITEMS */

.choose-item:nth-child(2){animation-delay:0.2s;}
.choose-item:nth-child(3){animation-delay:0.4s;}
.choose-item:nth-child(4){animation-delay:0.6s;}


/* ICON */

.choose-icon{
    font-size:26px;
    color:orange;
}


/* TEXT */

.choose-item h5{
    color:white;
}

.choose-item p{
    color:#bbb;
    font-size:14px;
}


/* ANIMATION */

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* MOBILE */

@media(max-width:768px){

.img-overlay h3{
    font-size:20px;
}

.choose-item{
    flex-direction:column;
}

}

/* ===============================
   PLATFORM SECTION
=============================== */

.platform-section{
    padding:100px 0 0;
}

/* BIG TITLE */

.platform-main-title{
    text-align:left;
    font-size:44px;
    margin-bottom:15px;
}

/* FULL WIDTH WHITE LINE */

.platform-line{
    width:100%;
    height:1px;
    background:white;
    margin-bottom:60px;
}


/* IMAGE */

.platform-image-box{
    position:relative;
}

.platform-image-box img{
    width:100%;
    height:420px;
    object-fit:cover;
}

.animate{
    opacity:1;
    transform:translateY(0);
}
/* ALWAYS VISIBLE OVERLAY */

.platform-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.4),
        transparent
    );

    padding-bottom:40px;
}


/* SMALL TITLE */

.platform-small-title{
    color:orange;
    font-size:35px;
    margin-bottom:10px;
}


/* TEXT */

.platform-text{
    color:#ddd;
    max-width:650px;
    font-size:18px;
    line-height:1.6;
}


/* READ MORE */

.read-more{
    display:inline-block;
    margin-top:10px;
    color:white;
    text-decoration:none;
    border-bottom:1px solid orange;
    transition:0.3s;
}

.read-more:hover{
    color:orange;
    padding-left:5px;
}

.platform-title-wrap{
    width:100%;
    padding-left:40px;
    margin-bottom:60px;
}

.platform-main-title{
    font-size:44px;
    text-align:left;
    margin-bottom:15px;
}

.platform-line{
    width:90%;
    height:3px;
    background:white;
}

/* ===============================
   WHAT WE OFFER SECTION
=============================== */

.offer-section{
    padding:100px 0;
}


/* IMAGE */

.offer-image-box{
    position:relative;
}

.offer-image-box img{
    width:100%;
    margin-bottom:20px;
}

.offer-list{
    margin-top:60px;
}

@media(max-width:768px){
    .offer-list{
        margin-top:20px;
    }
}

/* TITLE */

.offer-title{
    font-size:38px;
    position:relative;
    display:inline-block;
    margin-bottom:25px;
    z-index:5;
}
.offer-title::after{ 
    content:"";
    position:absolute; 
    left:0; 
    bottom:-8px; 
    width:100%; 
    height:4px; 
    background:orange; 
}

.offer-item::after{
    content:"";
    position:absolute;
    bottom:-12px;
    left:0;
    width:100%;
    height:1px;
    background:#fff;
    transform:scaleX(1);
}

.offer-item{
    position:relative;
    z-index:1;
}

.offer-left{
    position:relative;
    z-index:10;
}

.offer-item{
    position:relative;
    backface-visibility:hidden;
    will-change:transform;
}
/* SERVICE LIST */
.offer-item,
.choose-item{
    opacity:0;
    transform:translateY(40px);
}

.offer-item.animate,
.choose-item.animate{
    animation:fadeUp 0.6s ease forwards;
}

.offer-item:nth-child(1){animation-delay:0.1s;}
.offer-item:nth-child(2){animation-delay:0.2s;}
.offer-item:nth-child(3){animation-delay:0.3s;}
.offer-item:nth-child(4){animation-delay:0.4s;}
.offer-item:nth-child(5){animation-delay:0.5s;}
.offer-item:nth-child(6){animation-delay:0.6s;}
.offer-item:nth-child(7){animation-delay:0.7s;}
.offer-item:last-child::after{display:none;}

.offer-item h5{
    margin-bottom:2px;
    font-size:20px;
}

.offer-item p{
    color:#bbb;
    font-size:16px;
    margin-bottom:3px;
}

.offer-item a{
    text-decoration:none;
    color:white;
    transition:0.3s;
}

.offer-item a:hover{
    color:orange;
    padding-left:5px;
}


/* SLIDE ANIMATION */

@keyframes slideIn{
    to{
        transform:translateX(0);
        opacity:1;
    }
}

.offer-left{
    padding-left:0;
}

.offer-title{
    font-size:38px;
    position:relative;
    display:inline-block;
    margin-bottom:25px;
}

.offer-image-box img{
    width:100%;
    height:520px;
    object-fit:cover;
}

.offer-item{
    position:relative;
    backface-visibility:hidden;
    will-change:transform;

    padding-top:8px;
    padding-bottom:5px;

    margin-top:8px;
    margin-bottom:5px;
}


.offer-list{
    max-height:520px;
    overflow-y:auto;
    padding-right:10px;
}

.offer-list::-webkit-scrollbar{
    width:6px;
}

.offer-list::-webkit-scrollbar-track{
    background:transparent;
}

.offer-list::-webkit-scrollbar-thumb{
    background:orange;
    border-radius:10px;
}


/* =========== Stats Section ==============*/

.stats-section{
    position:relative;
    padding:90px 0;
    background:url("../images/stat.jpg") center/cover no-repeat;
    overflow:hidden;
}

/* OVERLAY */
.stats-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.60);
    z-index:1;
}

/* CONTENT ABOVE OVERLAY */
.stats-content{
    position:relative;
    z-index:2;
}

/* TITLE */
.stats-title{
    font-size:44px;
    color:white;
    letter-spacing:1px;
    text-shadow:0 0 12px rgba(255,140,0,0.6);
}

/* NUMBERS */
.stat-number{
    font-size:56px;
    color:orange;
    text-shadow:0 0 10px rgba(255,140,0,0.7);
    margin-bottom:10px;
}

/* LABEL */
.stat-item p{
    color:#fff;
    font-size:16px;
}

.stat-item{
    padding:15px 0;
}

/* =========== blogs Section ==============*/

.blog-section{
    padding:100px 0;
}

.blog-main-title{
    font-size:42px;
    color:white;
}

.blog-card{
    position:relative;
    display:block;
    height:520px;
    overflow:hidden;
    text-decoration:none;
}

/* IMAGE */

.blog-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.6s ease;
}

/* OVERLAY */
.blog-overlay{
    position:absolute;
    inset:0;
    padding:25px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.45),
        transparent
    );
    z-index:2;
}

/* READ BLOG anchored at bottom */

.read-blog{
    position:absolute;
    bottom:25px;
    left:25px;
    color:orange;
    font-size:14px;
}

/* TITLE sits directly above READ */

.blog-title{
    position:absolute;
    bottom:50px;
    left:25px;
    right:25px;
    color:white;
    margin:0;
    transition:0.4s ease;
}

/* DESCRIPTION hidden initially */

.blog-desc{
    position:absolute;
    bottom:80px;
    left:25px;
    right:25px;
    color:#ccc;
    font-size:14px;
    opacity:0;
    transform:translateY(20px);
    transition:0.4s ease;
}

/* HOVER EFFECT */

.blog-card:hover .blog-image img{
    transform:scale(1.08);
}

.blog-card:hover .blog-title{
    transform:translateY(-130px);
}

.blog-card:hover .blog-desc{
    opacity:1;
    transform:translateY(0);
}

.blog-image{
    position:absolute;
    inset:0;
}

.blog-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.6s ease;
    display:block;
}

/* ===============================
   CLIENT SECTION
=============================== */

.client-section{
    padding:50px 0 100px; /* reduced top space */
    position:relative;
    overflow:visible;
}

.client-left{
    position:relative;
    top:100px;   /* adjust amount here */
}

/* TITLE */

.client-title{
    font-size:36px;
    color:white;
    line-height:1.3;
    margin-bottom:40px;
}

/* LOGO GRID - 3 PER ROW */

.client-logos{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px 20px;
}

.client-logos img{
    max-width:200px;  /* bigger */
    width:100%;
    height:auto;
    transition:0.3s ease;
}

/* subtle hover scale only */

.client-logos img:hover{
    transform:scale(1.05);
}

/* RIGHT IMAGE */

.client-right{
    position:relative;
}

.client-image-wrapper{
    position:relative;
    bottom:-60px; /* quarter drop effect */
}

.client-image-wrapper img{
    width:100%;
    height:520px;
    object-fit:cover;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
}

/* RESPONSIVE */

@media(max-width:992px){

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

.client-image-wrapper{
    bottom:0;
    margin-top:50px;
}

}

@media(max-width:768px){

.client-title{
    font-size:28px;
}

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

}

@media(max-width:992px){
    .client-left{
        top:0;
    }
}

/* ===============================
   NEWS HERO
=============================== */

.news-hero{
    position:relative;
    height:60vh;
    background:url("../images/cta.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.news-hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.7);
}

.news-hero-content{
    position:relative;
    z-index:2;
    color:white;
}

.news-hero h1{
    font-size:52px;
    margin-bottom:15px;
}

.news-hero p{
    font-size:18px;
    color:#ccc;
}


/* ===============================
   NEWS SECTION
=============================== */

.news-section{
    padding:100px 0;
}

/* LEFT SIDE */

.news-section-title{
    font-size:32px;
    margin-bottom:30px;
}

.featured-news img{
    width:100%;
    height:360px;
    object-fit:cover;
    margin-bottom:20px;
}

.featured-headline a{
    color:white;
    text-decoration:none;
    font-size:24px;
    transition:0.3s ease;
}

.featured-headline a:hover{
    text-decoration:underline;
    color: orange;
}

.featured-brief{
    font-size:16px;
    color:#bbb;
}


/* RIGHT SIDE */

.side-title{
    margin-bottom:20px;
}

.news-headlines{
    list-style:none;
    padding:0;
}

.news-headlines li{
    margin-bottom:20px;
}

.news-headlines a{
    color:white;
    text-decoration:none;
    font-size:16px;
    transition:0.3s ease;
}

.news-headlines a:hover{
    text-decoration:underline;
    color:orange;
}

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

.news-item{
    padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,0.15);
}

.news-item:last-child{
    border-bottom:none;
}

.news-item a{
    text-decoration:none;
    color:white;
}

.news-item-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.news-item h6{
    font-size:25px;
    margin:0;
    transition:0.3s ease;
}

.news-item img{
    width:160px;
    height:60px;
    object-fit:cover;
    border-radius:4px;
}

.news-item:hover h6{
    color:orange;
    text-decoration:underline;
}

/* ===============================
   BLOG SECTION DIVIDERS
=============================== */

.blog-section{
    position:relative;
    padding:100px 0;
}

/* TOP LINE */

.blog-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        rgba(255,140,0,0.6),
        transparent
    );
}

/* BOTTOM LINE */

.blog-section::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        rgba(255,140,0,0.6),
        transparent
    );
}

/* ===============================
   MEDIA SECTION
=============================== */

.media-section{
    padding:120px 0;
}

/* VIDEO */

.video-wrapper{
    position:relative;
    width:100%;
    padding-bottom:90%;   /* was 56.25% */
    height:0;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,0.6);
}

.video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* RIGHT SIDE */

.media-main-title{
    font-size:28px;
    line-height:1.4;
    margin-bottom:20px;
}

.media-description{
    font-size:14px;
    color:#bbb;
    margin-bottom:30px;
}

/* LINKS */

.media-links{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.media-link{
    text-decoration:none;
    color:white;
    font-size:15px;
    position:relative;
    padding-bottom:5px;
    transition:0.3s ease;
}

/* UNDERLINE EFFECT */

.media-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:rgba(255,255,255,0.3);
    transition:0.3s ease;
}

.media-link:hover{
    color:orange;
}

.media-link:hover::after{
    background:orange;
    height:2px;
}

/* ===============================
   RELATED VIDEOS TITLE
=============================== */

.media-related-title{
    font-size:18px;
    margin-top:30px;
    margin-bottom:20px;
    color:white;
    letter-spacing:1px;
    position:relative;
}

/* subtle divider under it */

.media-related-title::after{
    content:"";
    display:block;
    width:60px;
    height:2px;
    background:orange;
    margin-top:8px;
}

/* CONTACT HERO */
.contact-hero{
    position:relative;
    height:60vh;
    background:url("../images/contact.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.contact-hero .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}

.about-hero-title{
    position:relative;
    z-index:2;
    color:white;
    font-size:48px;
}

/* CONTACT CARD */

.contact-card{
    background:#111;
    padding:40px;
    border:1px solid rgba(255,140,0,0.4);
    color:white;
}

.contact-title{
    margin-bottom:20px;
}

.contact-link{
    color:orange;
    text-decoration:none;
}

.contact-link:hover{
    text-decoration:underline;
}

.contact-map-btn{
    display:inline-block;
    padding:10px 20px;
    border:1px solid orange;
    color:white;
    text-decoration:none;
    transition:0.3s;
}

.contact-map-btn:hover{
    background:orange;
    color:black;
}

.contact-divider{
    border-top:1px solid rgba(255,255,255,0.2);
    margin:25px 0;
}

/* MAP */

.map-box{
    height:100%;
    min-height:500px;
    overflow:hidden;
}

.map-box iframe{
    width:100%;
    height:100%;
}

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

.products-hero{
    position:relative;
    height:60vh;
    background:url("../images/products1.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
}

.products-hero .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.products-hero .hero-content{
    position:relative;
    z-index:2;
    color:white;
}


/* ===============================
   FRAMEWORK CARDS
=============================== */

.framework-section{
    padding:120px 0;
}

.framework-main-title{
    font-size:46px;
    margin-bottom:15px;
}

.framework-subtitle{
    color:#bbb;
    max-width:700px;
    margin:0 auto 60px;
}

/* CARD */

.framework-card{
    position:relative;
    background:#111;
    padding:40px;
    border:1px solid rgba(255,140,0,0.3);
    height:100%;
    transition:0.4s ease;
}

.framework-card:hover{
    border-color:orange;
    box-shadow:0 0 25px rgba(255,140,0,0.2);
    transform:translateY(-6px);
}

/* BIG NUMBER */

.card-number{
    position:absolute;
    top:20px;
    right:25px;
    font-size:70px;
    font-weight:700;
    color:rgba(255,140,0,0.08);
}

/* CONTENT */

.framework-card h3{
    font-size:18px;
    margin-bottom:20px;
    letter-spacing:1px;
}

.framework-card p{
    color:#bbb;
    font-size:14px;
    margin-bottom:20px;
}

.framework-card ul{
    list-style:none;
    padding:0;
}

.framework-card li{
    margin-bottom:8px;
    position:relative;
    padding-left:18px;
}

.framework-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    width:6px;
    height:6px;
    background:orange;
    border-radius:50%;
}

/* ===============================
   EXECUTIVE POSITIONING SECTION
=============================== */

.executive-section{
    position:relative;
    padding:90px 0;   /* not too tall */
    background:url("../images/executive1.jpg") center/cover no-repeat;
    overflow:hidden;
}

/* DARK OVERLAY */

.executive-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.75);
    z-index:1;
}

/* CONTENT ABOVE OVERLAY */

.executive-content{
    position:relative;
    z-index:2;
    max-width:900px;
}

.executive-title{
    font-size:36px;
    margin-bottom:25px;
    line-height:1.3;
    color:orange;
}

.executive-text{
    font-size:18px;
    color:#fff;
    line-height:1.7;
}

/* SUBTLE GOLD LINES */

.executive-section::before,
.executive-section::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    height:1px;
    background:linear-gradient(to right, transparent, orange, transparent);
}

.executive-section::before{
    top:0;
}

.executive-section::after{
    bottom:0;
}

/* ================= PRODUCTS ================= */

.product-section{
    padding:120px 0;
}

.dark-product{
    background:#0f0f0f;
}

.product-img{
    width:100%;
    height:420px;
    object-fit:cover;
}

.product-text h2{
    margin-bottom:20px;
}

.product-text p{
    color:#bbb;
}

.product-text ul{
    margin-top:15px;
}

.product-text li{
    margin-bottom:8px;
}

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

.product-btn{
    display:inline-block;
    margin-top:25px;
    padding:10px 28px;
    border:1px solid rgba(255,140,0,0.7);
    color:white;
    text-decoration:none;
    transition:0.3s ease;
    font-size:14px;
    letter-spacing:1px;
}

.product-btn:hover{
    background:orange;
    color:black;
    box-shadow:0 0 15px rgba(255,140,0,0.6);
}

/* ===============================
   CTA SECTION
=============================== */

/* ===============================
   CTA SECTION (BRAND BACKGROUND)
=============================== */

.cta-section{
    position:relative;
    padding:110px 0;
    background:
        radial-gradient(circle at 20% 50%,
        rgba(255,140,0,0.08),
        transparent 40%),
        linear-gradient(
        120deg,
        #000000 0%,
        #0a0a0a 40%,
        #121212 70%,
        #000000 100%);
}

/* Optional subtle separator lines */

.cta-section::before,
.cta-section::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    height:1px;
    background:linear-gradient(to right, transparent, orange, transparent);
}

/* ===============================
   CTA FRAME BORDER
=============================== */

.cta-frame{
    position:relative;
    padding:60px;
    border:1px solid rgba(255,140,0,0.4);
    background:rgba(10,10,10,0.6);
}

/* subtle glow on hover (optional premium touch) */

.cta-frame:hover{
    border-color:orange;
    box-shadow:0 0 30px rgba(255,140,0,0.15);
}

/* IMAGE */

.cta-image-box img{
    width:100%;
    height:420px;
    object-fit:cover;
    border:1px solid rgba(255,140,0,0.4);
}

/* CONTENT */

.cta-title{
    font-size:32px;
    margin-bottom:25px;
}

.cta-list{
    list-style:none;
    padding:0;
    margin-bottom:30px;
}

.cta-list li{
    margin-bottom:12px;
    position:relative;
    padding-left:20px;
    color:#ccc;
}

.cta-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:6px;
    height:6px;
    background:orange;
    border-radius:50%;
}

/* BUTTON */

.cta-btn{
    display:inline-block;
    padding:12px 32px;
    border:1px solid rgba(255,140,0,0.8);
    color:white;
    text-decoration:none;
    transition:0.3s ease;
    letter-spacing:1px;
}

.cta-btn:hover{
    background:orange;
    color:black;
    box-shadow:0 0 20px rgba(255,140,0,0.6);
}

/* ===============================
   ABOUT HERO WITH IMAGE
=============================== */

.about-hero{
    position:relative;
    height:65vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    background:
    linear-gradient(
        120deg,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.65)
    ),
    url("../images/about.jpg") center/cover no-repeat;

    overflow:hidden;
}

/* SUBTLE ORANGE GLOW */

.about-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at 75% 50%,
        rgba(255,140,0,0.15),
        transparent 40%
    );
}

/* CONTENT ABOVE OVERLAY */

.about-hero-content{
    position:relative;
    z-index:2;
}

.about-hero-title{
    font-size:54px;
    margin-bottom:15px;
}

.about-hero-subtitle{
    color:#ccc;
    font-size:18px;
}

/* ===============================
   INTRO SECTION
=============================== */

.about-intro{
    padding:100px 0 60px;
}

.about-main-title{
    font-size:40px;
    margin-bottom:25px;
}

.about-main-text{
    max-width:800px;
    margin:0 auto;
    color:#bbb;
    line-height:1.7;
}


/* ===============================
   ABOUT CARDS
=============================== */

.about-cards{
    padding:60px 0 120px;
}

.about-card{
    background:#111;
    padding:50px 35px;
    border:1px solid rgba(255,140,0,0.3);
    transition:0.4s ease;
    height:100%;
}

.about-card:hover{
    border-color:orange;
    transform:translateY(-6px);
    box-shadow:0 0 25px rgba(255,140,0,0.15);
}

.about-icon{
    font-size:36px;
    color:orange;
    margin-bottom:20px;
}

.about-card h3{
    letter-spacing:1px;
    margin-bottom:20px;
}

.about-card p{
    color:#bbb;
    font-size:14px;
    line-height:1.6;
}

/* ===============================
   SPLIT ABOUT SECTIONS
=============================== */

.about-split-section{
    padding:40px 0;
}

.dark-split{
    background:#0f0f0f;
}

.split-title{
    font-size:36px;
    margin-bottom:25px;
}

.about-split-section p{
    color:#bbb;
    line-height:1.7;
    margin-bottom:20px;
}

/* IMAGE */

.about-image-box img{
    width:100%;
    height:420px;
    object-fit:cover;
    border:1px solid rgba(255,140,0,0.3);
    transition:0.4s ease;
}

.about-image-box img:hover{
    border-color:orange;
    box-shadow:0 0 25px rgba(255,140,0,0.15);
}

/* ===============================
   WHY SECTION
=============================== */

.why-section{
    padding:120px 0 80px;
}

.why-title{
    font-size:44px;
    line-height:1.2;
}

.why-text{
    color:#bbb;
    line-height:1.7;
    margin-bottom:20px;
}

/* THICK DIVIDER */

.why-divider{
    margin-top:60px;
    height:3px;
    width:100%;
    background:linear-gradient(to right, transparent, orange, transparent);
}

/* ===============================
   WHY CARDS
=============================== */

.why-cards-section{
    padding:0px 0 120px;
}

.why-card{
    background:#111;
    padding:40px;
    border:1px solid rgba(255,140,0,0.3);
    height:100%;
    transition:0.4s ease;
}

.why-card:hover{
    border-color:orange;
    transform:translateY(-6px);
    box-shadow:0 0 25px rgba(255,140,0,0.15);
}

.why-card h4{
    margin-bottom:15px;
}

.why-card p{
    color:#bbb;
    font-size:14px;
    line-height:1.6;
}

/* ===============================
   WHY CARDS HEADER
=============================== */

.why-cards-header{
    margin-bottom:60px;
}

.why-cards-title{
    font-size:40px;
    margin-bottom:15px;
}

.why-cards-subtitle{
    max-width:750px;
    margin:0 auto;
    color:#bbb;
    line-height:1.6;
}

/* ===============================
   TEAM HERO
=============================== */

.team-hero{
    position:relative;
    height:65vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    background:
    linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.75)
    ),
    url("../images/team.jpg") center/cover no-repeat;
}

.team-hero-content{
    position:relative;
    z-index:2;
}

.team-hero-title{
    font-size:52px;
    margin-bottom:15px;
}

.team-hero-subtitle{
    color:#ccc;
}

/* ===============================
   INTRO
=============================== */

.team-intro{
    padding:100px 0 60px;
}

.team-main-title{
    font-size:40px;
    margin-bottom:25px;
}

.team-main-text{
    max-width:800px;
    margin:0 auto;
    color:#bbb;
    line-height:1.7;
}


/* ===============================
   TEAM SECTIONS
=============================== */

.team-section{
    padding:100px 0;
}

.dark-team{
    background:#0f0f0f;
}

.team-name{
    font-size:30px;
    margin-bottom:5px;
}

.team-position{
    color:orange;
    margin-bottom:25px;
    font-weight:500;
}

.team-section p{
    color:#bbb;
    line-height:1.7;
    margin-bottom:20px;
}

/* PHOTO */

.team-photo-box img{
    width:100%;
    max-width:300px;
    height:auto;
    border:1px solid rgba(255,140,0,0.3);
}

.team-photo-box{
    text-align:center;
}

/* ===============================
   PARTNERS SECTION
=============================== */

.partners-section{
    padding:120px 0;
    background:linear-gradient(
        120deg,
        #000000 0%,
        #111111 50%,
        #000000 100%);
}

.partners-header{
    margin-bottom:70px;
}

.partners-title{
    font-size:40px;
    margin-bottom:20px;
}

.partners-subtitle{
    max-width:750px;
    margin:0 auto;
    color:#bbb;
    line-height:1.6;
}

/* LOGO GRID */

.partners-logos{
    text-align:center;
}

.partners-row{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:40px;
    flex-wrap:wrap;
}

.second-row{
    gap:20px;
}

/* LOGOS */

.partners-row img{
    max-height:120px;
    opacity:0.8;
    transition:0.4s ease;
}

.partners-row img:hover{
    opacity:1;
    transform:scale(1.05);
    filter:drop-shadow(0 0 12px rgba(255,140,0,0.4));
}

/* ===============================
   SERVICE HERO
=============================== */

.service-hero{
    position:relative;
    height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
    url("../images/services1.jpg") center/cover no-repeat;
}

.service-hero-title{
    font-size:48px;
    margin-bottom:15px;
}

.service-hero-subtitle{
    font-size:22px;
    color:#ccc;
}

/* ===============================
   SERVICE SECTIONS
=============================== */

.service-section{
    padding:110px 0;
}

.dark-service{
    background:#0f0f0f;
}

.service-title{
    font-size:36px;
    margin-bottom:25px;
}

.service-text{
    color:#bbb;
    line-height:1.7;
    margin-bottom:20px;
}

/* ===============================
   SERVICE CARDS
=============================== */

.service-card{
    background:#111;
    padding:35px;
    border:1px solid rgba(255,140,0,0.3);
    transition:0.4s ease;
    height:100%;
}

.service-card:hover{
    border-color:orange;
    transform:translateY(-6px);
    box-shadow:0 0 20px rgba(255,140,0,0.15);
}

.service-card h4{
    margin-bottom:15px;
}

.service-card p{
    color:#bbb;
    font-size:14px;
}

/* ===============================
   SERVICE LIST
=============================== */

.service-list{
    list-style:none;
    padding:0;
    margin-top:30px;
}

.service-list li{
    margin-bottom:15px;
    padding-left:20px;
    position:relative;
    color:#ccc;
}

.service-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:6px;
    height:6px;
    background:orange;
    border-radius:50%;
}

/* ===============================
   CTA
=============================== */

.service-cta{
    padding:120px 0;
    background:
    radial-gradient(circle at 20% 50%, rgba(255,140,0,0.08), transparent 40%),
    linear-gradient(120deg, #000000, #121212);
    text-align:center;
}

.service-btn{
    display:inline-block;
    margin-top:30px;
    padding:12px 32px;
    border:1px solid rgba(255,140,0,0.8);
    color:white;
    text-decoration:none;
    transition:0.3s ease;
}

.service-btn:hover{
    background:orange;
    color:black;
    box-shadow:0 0 20px rgba(255,140,0,0.6);
}

/* ===============================
   SPLIT SECTIONS
=============================== */

.service-split-section{
    padding:20px 0;
}

.service-image-box img{
    width:100%;
    height:420px;
    object-fit:cover;
    border:1px solid rgba(255,140,0,0.3);
    transition:0.4s ease;
}

.service-image-box img:hover{
    border-color:orange;
    box-shadow:0 0 25px rgba(255,140,0,0.15);
}

/* ===============================
   CORE TEXT SECTION
=============================== */

.core-text-section{
    position:relative;
    padding:130px 0;
    background:
    linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.85)
    ),
    url("../images/icon.png") center/cover no-repeat;
    overflow:hidden;
}

.core-text-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at 70% 50%,
        rgba(255,140,0,0.08),
        transparent 40%
    );
}

.core-text-content{
    position:relative;
    z-index:2;
}

.core-text-title{
    font-size:40px;
    margin-bottom:20px;
}

.core-text-subtitle{
    max-width:750px;
    margin:0 auto 60px;
    color:#bbb;
    line-height:1.6;
}

.core-text-grid{
    display:flex;
    justify-content:center;
    gap:80px;
    flex-wrap:wrap;
    text-align:center;
}

.core-text-grid h4{
    margin-bottom:10px;
}

.core-text-grid p{
    max-width:300px;
    color:#ccc;
    font-size:14px;
}

/* ===============================
   SERVICE COLUMNS (NO CARDS)
=============================== */

.service-columns{
    display:flex;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}

.service-columns ul{
    list-style:none;
    padding:0;
    max-width:320px;
}

.service-columns li{
    margin-bottom:15px;
    padding-left:20px;
    position:relative;
    color:#ccc;
}

.service-columns li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:6px;
    height:6px;
    background:orange;
    border-radius:50%;
}


/* ===============================
   EXTENDED SECURITY SECTION
=============================== */

.extended-security-section{
    position:relative;
    padding:130px 0;
    background:
    linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.85)),
    url("../images/icon.png") center/cover no-repeat;
}

.extended-content{
    position:relative;
    z-index:2;
}

.extended-title{
    font-size:40px;
    margin-bottom:20px;
}

.extended-subtitle{
    max-width:750px;
    margin:0 auto 60px;
    color:#bbb;
}

.extended-grid{
    display:flex;
    justify-content:center;
    gap:80px;
    flex-wrap:wrap;
}

.extended-grid div{
    max-width:260px;
}

.extended-grid h4{
    margin-bottom:10px;
}

.extended-grid p{
    color:#ccc;
    font-size:14px;
}

/* ===============================
   GOVERNANCE HIGHLIGHT SECTION
=============================== */

.governance-highlight-section{
    position:relative;
    padding:120px 0;
    background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.85)),
    url("../images/icon.png") center/cover no-repeat;
}

.highlight-content{
    position:relative;
    z-index:2;
}

.highlight-content h2{
    font-size:38px;
    margin-bottom:20px;
}

.highlight-content p{
    max-width:750px;
    margin:0 auto;
    color:#bbb;
}

/* ===============================
   DPIA CENTERED SECTION
=============================== */

.dpia-section{
    padding:120px 0;
}

.dpia-intro{
    max-width:750px;
    margin:0 auto 60px;
    color:#bbb;
}

.dpia-grid{
    display:flex;
    justify-content:center;
    gap:100px;
    flex-wrap:wrap;
    text-align:left;
}

.dpia-grid ul{
    list-style:none;
    padding:0;
    max-width:320px;
}

.dpia-grid li{
    margin-bottom:15px;
    padding-left:20px;
    position:relative;
    color:#ccc;
}

.dpia-grid li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:6px;
    height:6px;
    background:orange;
    border-radius:50%;
}

/* ===============================
   CLOUD ASSESSMENT GRID (WITH IMAGE)
=============================== */

.cloud-assessment-section{
    position:relative;
    padding:130px 0;
    background:
    linear-gradient(
        rgba(0,0,0,0.80),
        rgba(0,0,0,0.85)
    ),
    url("../images/icon.png") center/cover no-repeat;
    overflow:hidden;
}

/* Optional subtle ambient glow */
.cloud-assessment-section::before{
    content:"";
    position:absolute;
    top:-150px;
    right:-150px;
    width:500px;
    height:500px;
    background:radial-gradient(
        circle,
        rgba(255,140,0,0.08),
        transparent 70%
    );
    z-index:0;
}

.cloud-grid{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:80px;
    flex-wrap:wrap;
    text-align:center;
}

.cloud-grid div{
    max-width:280px;
}

.cloud-grid h4{
    margin-bottom:10px;
}

.cloud-grid p{
    color:#ccc;
    font-size:14px;
}

/* ===============================
   CLOUD CONTROL CARDS
=============================== */

.cloud-controls-section{
    padding:130px 0;
    background:#0f0f0f;
}

.cloud-control-card{
    background:rgba(20,20,20,0.85);
    border:1px solid rgba(255,140,0,0.15);
    padding:45px 35px;
    text-align:center;
    height:100%;
    position:relative;
    transition:0.4s ease;
    backdrop-filter:blur(6px);
}

.cloud-control-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:orange;
    transform:scaleX(0);
    transform-origin:left;
    transition:0.4s ease;
}

.cloud-control-card:hover{
    transform:translateY(-10px);
    border-color:orange;
}

.cloud-control-card:hover::before{
    transform:scaleX(1);
}

.control-icon{
    font-size:36px;
    color:orange;
    margin-bottom:20px;
}

.cloud-control-card h4{
    margin-bottom:15px;
}

.cloud-control-card p{
    color:#bbb;
    font-size:14px;
}

/* ===============================
   TPRM LIFECYCLE SECTION
=============================== */

.tprm-lifecycle-section{
    padding:130px 0;
    background:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.9)),
    url("../images/icon.png") center/cover no-repeat;
}

.lifecycle-grid{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
    text-align:center;
}

.lifecycle-step{
    max-width:220px;
    position:relative;
}

.lifecycle-step h4{
    margin-bottom:10px;
}

.lifecycle-step p{
    color:#bbb;
    font-size:14px;
}

/* ===============================
   LIFECYCLE WITH ARROWS
=============================== */

.lifecycle-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    text-align:center;
}

.lifecycle-step{
    max-width:200px;
}

.lifecycle-arrow{
    font-size:28px;
    color:orange;
    display:flex;
    align-items:center;
}

/* Mobile adjustment */
@media(max-width:992px){
    .lifecycle-grid{
        flex-direction:column;
    }

    .lifecycle-arrow{
        transform:rotate(90deg);
    }
}

/* ===============================
   TPRM CARDS
=============================== */

.tprm-packages-section{
    padding:130px 0;
    background:#111;
}

.tprm-card{
    background:#151515;
    border:1px solid rgba(255,140,0,0.15);
    padding:40px;
    text-align:center;
    transition:0.4s ease;
    height:100%;
}

.tprm-card:hover{
    border-color:orange;
    transform:translateY(-8px);
}

.tprm-card h4{
    margin-bottom:15px;
}

.tprm-card p{
    color:#bbb;
    font-size:14px;
}

/* ===============================
   CENTERED TPRM CAPABILITIES
=============================== */

.tprm-capabilities-grid{
    display:flex;
    justify-content:center;
    gap:100px;
    flex-wrap:wrap;
    text-align:left;
}

.tprm-capabilities-grid ul{
    list-style:none;
    padding:0;
    max-width:320px;
}

.tprm-capabilities-grid li{
    margin-bottom:15px;
    padding-left:20px;
    position:relative;
    color:#ccc;
}

.tprm-capabilities-grid li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:6px;
    height:6px;
    background:orange;
    border-radius:50%;
}

/* ===============================
   PHYSICAL CAPABILITIES SECTION
=============================== */

.physical-capabilities-section{
    padding:130px 0;
    background:#111;
}

.physical-card{
    background:#151515;
    border:1px solid rgba(255,140,0,0.15);
    padding:40px;
    text-align:center;
    height:100%;
    transition:0.4s ease;
}

.physical-card:hover{
    border-color:orange;
    transform:translateY(-8px);
}

.physical-card h4{
    margin-bottom:15px;
}

.physical-card p{
    color:#bbb;
    font-size:14px;
}


/* ===============================
   GOVERNANCE ALIGNMENT SECTION
=============================== */

.physical-governance-section{
    position:relative;
    padding:130px 0;
    background:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.9)),
    url("../images/icon.png") center/cover no-repeat;
}

.governance-content{
    position:relative;
    z-index:2;
}

.governance-content h2{
    font-size:38px;
    margin-bottom:20px;
}

.governance-content p{
    max-width:800px;
    margin:0 auto;
    color:#bbb;
}

/* ===============================
   SECURITY LIFECYCLE SECTION
=============================== */

.security-lifecycle-section{
    padding:130px 0;
    background:#111;
}

.security-lifecycle-grid{
    display:flex;
    justify-content:center;
    gap:50px;
    flex-wrap:wrap;
    text-align:center;
}

.lifecycle-box{
    background:#151515;
    border:1px solid rgba(255,140,0,0.15);
    padding:30px 25px;
    max-width:180px;
    transition:0.4s ease;
}

.lifecycle-box:hover{
    border-color:orange;
    transform:translateY(-6px);
}

.lifecycle-box h4{
    margin-bottom:10px;
}

.lifecycle-box p{
    font-size:13px;
    color:#bbb;
}



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

.program-grid{
    display:flex;
    justify-content:center;
    gap:80px;
    flex-wrap:wrap;
    text-align:left;
}

.program-grid ul{
    list-style:none;
    padding:0;
    max-width:320px;
}

.program-grid li{
    margin-bottom:15px;
    padding-left:20px;
    position:relative;
    color:#ccc;
}

.program-grid li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:6px;
    height:6px;
    background:orange;
    border-radius:50%;
}



/* ===============================
   GOVERNANCE HIGHLIGHT
=============================== */

.program-governance-section{
    position:relative;
    padding:130px 0;
    background:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.9)),
    url("../images/icon.png") center/cover no-repeat;
}

.program-content{
    position:relative;
    z-index:2;
}

.program-content h2{
    font-size:38px;
    margin-bottom:20px;
}

.program-content p{
    max-width:800px;
    margin:0 auto;
    color:#bbb;
}

/* ===============================
   SECURITY LIFECYCLE WITH ARROWS
=============================== */

.security-lifecycle-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    text-align:center;
}

.lifecycle-box{
    background:#151515;
    border:1px solid rgba(255,140,0,0.15);
    padding:30px 25px;
    max-width:170px;
    transition:0.4s ease;
}

.lifecycle-box:hover{
    border-color:orange;
    transform:translateY(-6px);
}

.lifecycle-box h4{
    margin-bottom:10px;
}

.lifecycle-box p{
    font-size:13px;
    color:#bbb;
}

.lifecycle-arrow{
    font-size:26px;
    color:orange;
    display:flex;
    align-items:center;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-text {
        font-size: 14px;
    }
}


/* Mobile behavior */
@media(max-width:992px){

    .security-lifecycle-grid{
        flex-direction:column;
    }

    .lifecycle-arrow{
        transform:rotate(90deg);
        margin:10px 0;
    }

}

@media (max-width: 768px) {

    .about-hero h1 {
        font-size: 30px;
        line-height: 1.3;
    }

    .about-hero p {
        font-size: 15px;
        padding: 0 15px;
    }

}

@media (max-width: 768px) {

    .cta-frame {
        background: none;
        padding: 0;
        box-shadow: none;
        border: none;
    }

    .cta-image-box img {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .cta-content {
        padding: 20px;
    }

}

@media (max-width: 768px) {

    .service-hero h1 {
        font-size: 30px;
        line-height: 1.3;
        padding: 0 15px;
    }

    .service-hero p {
        font-size: 15px;
        padding: 0 20px;
    }

}

@media (max-width: 768px) {

    .news-hero h1 {
        font-size: 28px;
        line-height: 1.3;
        padding: 0 15px;
    }

    .news-hero p {
        font-size: 15px;
        padding: 0 20px;
    }

}


@media (max-width: 768px) {

    [class$="-hero"] h1 {
        font-size: 28px;
        line-height: 1.3;
        padding: 0 15px;
    }

    [class$="-hero"] p {
        font-size: 15px;
        padding: 0 20px;
    }

}

@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 32px;
    }
}

/* ===== PLATFORM SECTION MOBILE TYPOGRAPHY ===== */

@media (max-width: 768px) {


    .platform-small-title {
        font-size: 20px;
    }

    .platform-text {
        font-size: 16px;
        line-height: 1.6;
    }

}