/* ================= GLOBAL ============== ================= */

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

/* SMOOTH SCROLL (ONLY ON HTML) */
html {
    scroll-behavior: smooth;
}

/* BODY */
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(180deg, #050816, #0b1430);
}

/* =================   ROOT VARIABLES ========================================= */
:root{

   /* FOR NAVBAR LOGO*/
    --logo-glow1:#00ffff;
    --logo-glow2:#00bfff;
    --logo-glow3:#0066ff;
    --logo-glow4:#7a5cff;

    --logo-glow-strength:1px;

/*SLIDER PART */

    /* TEXT SIZE */
    --am-h1-size:72px;
    --am-h3-size:30px;
    --am-text-size:18px;
    /* TEXT WEIGHT */
      --am-h1-weight: 900;
    --am-h3-weight: 500;

    /* IMAGE SIZE */
    --am-image-width:540px;

    /* GLOW */
    --am-glow:45px;

    /* FLOAT */
    --am-float:18px;

    /* BUTTON */
    --am-btn-color:#ff8800;

 /* GLOW VOLUME */
     --glow-strength:10px;

}

/* GLOBAL WEBSITE FONT */

/* SPECIAL TITLES */

.pg-section-title{
    font-family:'Oswald',sans-serif;
}

/* ================= GLOBAL ADDITONAL lazy image load   ================= */

img{
  loading:lazy;
  decoding:async;
}

.regular-product-card,
.port-card,
.products-card,
.product-video-card{
    will-change:transform;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}
.lazy-item{
    opacity:0;
    transform:translateY(30px);
    transition:0.5s ease;
}

.lazy-item.show{
    opacity:1;
    transform:translateY(0);
}
/* ================= SCROLLING BOTTOM TO TOP BUTTON ====
===================================================== */
#myBtn{

    position:fixed;
    right:25px;
    bottom:25px;

    width:60px;
    height:60px;

    border:none;
    border-radius:50%;

    background:#18b85d;
    color:#fff;

    font-size:26px;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

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

    box-shadow:
    0 0 12px rgba(24,184,93,0.4),
    0 0 30px rgba(24,184,93,0.25);
    z-index:99999;
    pointer-events:auto;
}

/* SHOW BUTTON */

#myBtn.show{
    opacity:1;
    visibility:visible;
}

/* HOVER */

#myBtn:hover{
    background:#ff7a00;
    transform:scale(1.1);
}

/* JUMP EFFECT */

#myBtn.jump{
    transform:translateY(-18px);
}
/* ================= SCROLL BOTTOM TOP BUTTON END HERE ================= */


/* ================= NAVBAR SRTART HERE =========================
===============BODY AND ROOT VARIABLE AS GLOBAL SO REPLACE FROM HERE TO TOP===================================== */



/* ================= ANIMATED NAVBAR ================= */

.sticky-header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:99999;

    /* animated navy gradient */

    background:linear-gradient(
        120deg,
        #050816,
        #0a1a3a,
        #1a4cff,
        #00c6ff,
        #0a1a3a,
        #050816
    );

    background-size:300% 300%;

    animation:
    gradientFlow 8s ease infinite;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    transition:
    transform 0.1s ease,
    opacity 0.1s ease;

    opacity:1;
}

/* navbar hide */

.sticky-header.hide{

    transform:translateY(-100%);
    opacity:0;
}

/* animated gradient */

@keyframes gradientFlow{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

/* ================= NAV CONTAINER ================= */

.nav-container{

    width:96%;
    margin:auto;

    display:grid;

    grid-template-columns:
    auto
    1fr
    auto;

    align-items:center;

    padding:0 10px;
}

/* ================= LOGO ================= */

.logo-area{

    display:flex;
    align-items:center;
    width:262px;
    position:relative;   /* ADD THIS */
}

.logo-area img{

    height:45px;
    width:auto;
}

/* =====================================  RANDOM LOGO GLOW SYSTEM ============================== */

.random-logo-glow{

    position:relative;

    display:inline-block;

    animation:
    amLogoFloat 5s ease-in-out infinite;

    transition:
    filter 2s ease-in-out;

    filter:

    drop-shadow(
    0 0 calc(var(--logo-glow-strength) * 0.1)
    var(--logo-glow1))

    drop-shadow(
    0 0 calc(var(--logo-glow-strength) * 0.3)
    var(--logo-glow2))

    drop-shadow(
    0 0 calc(var(--logo-glow-strength) * 0.6)
    var(--logo-glow3))

    drop-shadow(
    0 0 var(--logo-glow-strength)
    var(--logo-glow4));

}

/* ======================  LOGO FLOAT============================================ */

@keyframes amLogoFloat{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(-6px);
    }

    100%{
        transform:
        translateY(0px);
    }

}

/* ===========================   SLOGAN ================================ */

.logo-slogan{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    font-size:10px;

    font-weight:500;

    letter-spacing:2px;

    bottom:-5px !important;
    white-space:nowrap;

    color:#fbef55;

    opacity:0;

    pointer-events:none;

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


/* =================================   SMOOTH APPEAR / DISAPPEAR ========================= */

@keyframes precisionText{

    0%{
        opacity:0;
        transform:translateX(-50%) translateY(4px);
        filter:blur(4px);
    }

    20%{
        opacity:1;
        transform:translateX(-50%) translateY(0);
        filter:blur(0);
    }

    80%{
        opacity:1;
        transform:translateX(-50%) translateY(0);
        filter:blur(0);
    }

    100%{
        opacity:0;
        transform:translateX(-50%) translateY(-4px);
        filter:blur(4px);
    }
}

/* ================= CENTER FLAG ================= */

.flag-center{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.flag-center img{
    border-radius:4px;
    box-shadow:0 0 20px rgba(255,255,255,.18);
    display:block;
    object-fit:contain;
}
.flag-center .flag{
    width:66px;
    height:42px;
}

.flag-center .welcome{
    width:100px;
    height:38px;
}

/* ================= MENU ================= */

.navigation{

    list-style:none;

    display:flex;
    align-items:stretch;

    height:60px;
}

.navigation li{

    position:relative;
}

/* main menu */

.navigation > li > a{

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

    height:60px;

    padding:0 22px;

    color:#fff;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:.3s;

    position:relative;
}

/* hover */

.navigation > li:hover > a{

    background:#fbef55;
    color:#192d66;
}

/* active */

.navigation > li.active > a{

    background:#fbef55;
    color:#192d66;
}

/* underline */

.navigation > li > a::after{

    content:'';

    position:absolute;

    left:50%;
    bottom:10px;

    width:0;
    height:3px;

    background:orange;

    transform:translateX(-50%);

    transition:.35s;
}

.navigation > li:hover > a::after,
.navigation > li.active > a::after{

    width:70%;
}

/* ================= DROPDOWN ================= */

.navigation li ul{

    position:absolute;

    top:100%;
    left:0;

    min-width:240px;

    background:#1f3779;

    list-style:none;

    padding:0;
    margin:0;

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;
}

.navigation li:hover > ul{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* dropdown links */

.navigation li ul li a{

    display:block;

    padding:15px 18px;

    color:#fff;

    text-decoration:none;

    font-weight:bold;

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

    transition:.35s;
}

/* dropdown hover */

.navigation li ul li a:hover{

    background:orange;

    color:#fff;

    padding-left:28px;
}

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

.mobile-toggle{

    display:none;

    font-size:30px;

    color:#fff;

    cursor:pointer;

    width:50px;

    justify-content:flex-end;
}

/* =========================================================
   CARUSOL SLIDER  CSS SHART FROM HERE 
========================================================= */

.am-slider-body *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.am-slider-body{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#050505;

    font-family:Arial, Helvetica, sans-serif;

    color:#fff;

}

/* ========================   ROOT VARIABLES WAS IN HERE FOR SLIDER BUT DECLEAR AS GLOBAL NOW REPLACE IN TOP ================================== */



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

.am-hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

/* =================================   BACKGROUND SYSTEM=================================================== */

.am-bg-images{

    position:absolute;

    inset:0;

    z-index:0;

}

/* ==============================   BACKGROUND IMAGE transitiom indicate fade speed control=============== */

.am-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transition:
    opacity 2.5s ease;

    animation:
   amBgMove 18s ease-in-out infinite;

}

/* ACTIVE BACKGROUND */

.am-bg.active{

    opacity:1;

}

/* DARK OVERLAY */

.am-bg-images::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    rgba(0,0,0,0.58);

}

/* ==============================   SLIDER============================================= */

.am-slider{

    position:relative;

    width:100%;
    height:100%;

    z-index:5;

}

/* ==================================   SLIDE and speed control by  transition value =========================== */

.am-slide{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:0 7%;

    opacity:0;

    visibility:hidden;

    transform:
    translateX(180px);

    transition:
    opacity 1s ease,
    transform 1s ease,
    visibility 1s ease;

}

/* ACTIVE SLIDE */

.am-slide.active{

    opacity:1;

    visibility:visible;

    transform:
    translateX(0px);

}

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

.am-content{

    width:48%;

}

/* =================================== SLIDER   H3 ==================================== */

.am-subtitle{
    font-size:var(--am-h3-size);
    font-weight:var(--am-h3-weight);
    margin-bottom:18px;
    color:#ff8800;
    letter-spacing:3px;
    animation: amFloatText 5s ease-in-out infinite;
}
/* ======================================= SLIDER H1============================================== */

.am-title{
    font-size:var(--am-h1-size);
    font-weight:var(--am-h1-weight);
    line-height:1.05;
    margin-bottom:33px;
    animation: amFloatText 5s ease-in-out infinite;
}

/* ========================================   SMOOTH RANDOM TITLE GLOW============================ */

.change-random-glow-title{

    animation:
    amFloatText 5s ease-in-out infinite;

    transition:filter 1s ease;

    text-shadow:

    0 0 calc(var(--glow-strength) * 0.1) var(--glow1),
    0 0 calc(var(--glow-strength) * 0.3) var(--glow2),
    0 0 calc(var(--glow-strength) * 0.6) var(--glow3),
    0 0 var(--glow-strength) var(--glow4);

}

/* ========================================  SLIDER SOFT RANDOM IMAGE GLOW========================= */

.change-random-glow-img{

    animation:
    amFloatImage 5s ease-in-out infinite;

    transition:
    filter 1s ease;

    filter:

    drop-shadow(
    0 0 calc(var(--glow-strength) * 0.1)
    var(--glow1))

    drop-shadow(
    0 0 calc(var(--glow-strength) * 0.3)
    var(--glow2))

    drop-shadow(
    0 0 calc(var(--glow-strength) * 0.6)
    var(--glow3))

    drop-shadow(
    0 0 var(--glow-strength)
    var(--glow4));

}


/* =========================================== SLIDER  GLOW COLORS og text change here chaning 00bfff========================= */

.am-blue{
    text-shadow:
    0 0 var(--am-glow) #00bfff,
    0 0 90px rgba(0,191,255,0.8);
}

.am-cyan{
    text-shadow:
    0 0 var(--am-glow) #00ffff,
    0 0 90px rgba(0,255,255,0.8);
}

.am-gold{
    text-shadow:
    0 0 var(--am-glow) #ffd700,
    0 0 90px rgba(255,215,0,0.8);
}

.am-purple{
    text-shadow:
    0 0 var(--am-glow) #8a2be2,
    0 0 90px rgba(138,43,226,0.8);
}

/* ============================= SLIDER  TEXT ===================================== */

.am-text{

    font-size:var(--am-text-size);

    line-height:1.9;

    margin-bottom:35px;

    color:#f2f2f2;

    max-width:650px;

}

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

.am-btn{

    display:inline-flex;

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

    padding:17px 42px;

    border-radius:50px;

    text-decoration:none;

    background:var(--am-btn-color);

    color:#fff;

    font-weight:bold;

    transition:0.4s;

    box-shadow:
    0 0 30px rgba(255,136,0,0.7);

}

.am-btn:hover{

    background:#ffffff;

    color:#000;

    transform:
    translateY(-5px);

    box-shadow:
    0 0 45px rgba(255,255,255,0.9);

}

/* ====================================  SLIDER IMAGE================================ */

.am-image{

    width:48%;

    display:flex;

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

}

.am-image img{

    width:var(--am-image-width);

    max-width:100%;

    animation:
    amFloatImage 5s ease-in-out infinite;

}

/* ================================= SLIDER  IMAGE GLOW====================================================== */

.am-img-blue{
    filter:
    drop-shadow(0 0 45px #00bfff);
}

.am-img-cyan{
    filter:
    drop-shadow(0 0 45px #00ffff);
}

.am-img-gold{
    filter:
    drop-shadow(0 0 45px #ffd700);
}

.am-img-purple{
    filter:
    drop-shadow(0 0 45px #8a2be2);
}

/* ================================= SLIDER   INDICATORS=========================================== */

.am-indicators{

    position:absolute;

    left:50%;

    bottom:90px;

    transform:
    translateX(-50%);

    display:flex;

    gap:14px;

    z-index:100;

}

.am-indicators li{

    list-style:none;

    width:16px;
    height:16px;

    border-radius:50%;

    background:
    rgba(255,255,255,0.35);

    cursor:pointer;

    transition:0.4s;

}

/* ACTIVE DOT */

.am-indicators li.active{

    background:#ffffff;

    transform:
    scale(1.2);

    box-shadow:
    0 0 18px #ffffff;

}

/* =========================  SLIDER  ANIMATION====================================== */

@keyframes amFloatImage{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(calc(var(--am-float) * -1));
    }

    100%{
        transform:
        translateY(0px);
    }

}

@keyframes amFloatText{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(var(--am-float));
    }

    100%{
        transform:
        translateY(0px);
    }

}

@keyframes amBgMove{

    0%{
        transform:
        scale(1)
        translateX(0px)
        translateY(0px);
    }

    25%{
        transform:
        scale(1.06)
        translateX(-8px)
        translateY(-4px);
    }

    50%{
        transform:
        scale(1.12)
        translateX(-15px)
        translateY(-8px);
    }

    75%{
        transform:
        scale(1.08)
        translateX(8px)
        translateY(4px);
    }

    100%{
        transform:
        scale(1)
        translateX(0px)
        translateY(0px);
    }

}

/* ======================================================
  REGULAR PRODUCTS BODY /AFTER SLIDER START HERE
====================================================== */


.regular-body{

    font-family:Arial,sans-serif;
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;

    background:
    linear-gradient(
    -45deg,
    #020617,
    #031b34,
    #0b1120,
    #041c32,
    #1a103d,
    #06243f,
    #10243a,
    #020617);

    background-size:600% 600%;
    animation: regularGradientFlow 20s ease infinite;
}

/* ================= ANIMATION ================= */

@keyframes regularGradientFlow{
    0%{background-position:0% 50%;}
    25%{background-position:50% 100%;}
    50%{background-position:100% 50%;}
    75%{background-position:50% 0%;}
    100%{background-position:0% 50%;}
}

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

.regular-advanced-products{
    padding:120px 0;
}

/* ================= CONTAINER ================= */

.regular-container{
    width:90%;
    max-width:1450px;
    margin:auto;
}

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

.regular-products-header{
    text-align:center;
    margin-bottom:70px;
}

.regular-products-header h2{
    font-size:clamp(2.5rem,5vw,4rem);
    margin-bottom:20px;
    text-shadow:
    0 0 10px rgba(255,255,255,.25),
    0 0 20px rgba(0,140,255,.35),
    0 0 30px rgba(255,170,0,.2);
}

.regular-products-header p{
    max-width:900px;
    margin:auto;
    color:#cfcfcf;
    line-height:1.8;
}

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

.regular-products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

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

.regular-product-card{

    position:relative;

    border-radius:22px;
    overflow:hidden;

    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);

    cursor:pointer;

    /* ⭐ IMPORTANT: smooth slow lift */
    transition:
    transform 0.9s cubic-bezier(0.25, 1, 0.30, 1),
    box-shadow 0.9s ease,
    border-color 0.9s ease;

    will-change:transform;
 z-index:1;
}

/* ================= HOVER (SLOW FLOAT EFFECT) ================= */

.regular-product-card:hover{

    transform:
    translateY(-40px)
    scale(1.04);

    border-color: rgba(255,255,255,0.2);

    box-shadow:
    0 35px 60px rgba(0,0,0,.55),
    0 0 30px rgba(0,140,255,.25),
    0 0 60px rgba(255,170,0,.12),
    inset 0 0 25px rgba(255,255,255,.05);

    z-index:999;
}

.regular-product-card:hover::before{
    opacity:1;
}

/* ================= CARD  TO GLOW ================= */
.regular-product-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;

    background:linear-gradient(90deg,#00aaff,#ffffff,#ffb400);

    opacity:0;
    transition:0.4s ease;

    z-index: 5;   /* ✅ ADD THIS */
}

.regular-product-card:hover::before{
    opacity:1;
}
/* ================= TOP BAR ================= */



/* ================= IMAGE ================= */

.regular-product-image{
    position:relative;
    overflow:hidden;
background-color: white;
}

.regular-product-image img{
    width:100%;
    height:auto;
    object-fit:cover;
    transition:1s ease;
}

/* ================= IMAGE HOVER ================= */

.regular-product-card:hover .regular-product-image img{
    transform:scale(1.08);
    filter:brightness(1.08) saturate(1.15);
}
.regular-product-card:hover .regular-product-image::after{
    opacity:1;
}
/* ================= TOP IMAGE HOVER ================= */
.regular-product-image::after{

    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(0,170,255,0.25),
        rgba(255,255,255,0.08),
        transparent 70%
    );

    opacity:0;
    transition:0.5s ease;

    pointer-events:none;
}
/* ================= CONTENT ================= */

.regular-product-content{
    padding:25px;
}

.regular-product-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.regular-product-meta span{
    padding:6px 12px;
    border-radius:50px;
    font-size:12px;
    background:rgba(0,140,255,.12);
    border:1px solid rgba(0,140,255,.2);
    color:#d7ecff;
}

.regular-product-content h3{
    margin-bottom:12px;
    font-size:1.6rem;
}

.regular-product-content p{
    color:#ccc;
    line-height:1.7;
    margin-bottom:22px;
}

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

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

.regular-product-btn{
    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    background:
    linear-gradient(90deg,
    #0077ff,
    #00aaff);

    transition:.4s ease;

    box-shadow:
    0 0 15px rgba(0,140,255,.2);
}

/* milky hover */

.regular-product-btn:hover{
    background:
    linear-gradient(90deg,
    #ffffff,
    #dfe9f3);

    color:#000;

    box-shadow:
    0 0 20px rgba(255,255,255,.35);
}

/* ======================================================
   END HERE REGULAR PRODUCTS BODY/AFTER SLIDER PART
====================================================== */

/* ======================================================
   PORT FOLIO BODY START HERE
====================================================== */

.port-body{

    position:relative;

    width:100%;

    overflow-x:hidden;

    color:#fff;

    font-family:Arial,sans-serif;

    background:
    linear-gradient(
    -45deg,
    #020617,
    #031b34,
    #0b1120,
    #041c32,
    #1a103d,
    #06243f,
    #10243a,
    #020617);

    background-size:600% 600%;

    animation:
    portGradientFlow 20s ease infinite;
}

/* =====================================   GRADIENT ANIMATION============================== */

@keyframes portGradientFlow{

    0%{
        background-position:0% 50%;
    }

    25%{
        background-position:50% 100%;
    }

    50%{
        background-position:100% 50%;
    }

    75%{
        background-position:50% 0%;
    }

    100%{
        background-position:0% 50%;
    }

}

/* ===============================   CONTAINER============================= */

.port-container{

    width:92%;
    max-width:1500px;

    margin:auto;
}

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

.port-products{

    padding:120px 0;
}

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

.port-header{

    text-align:center;

    margin-bottom:80px;
}

.port-header h1{

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

    margin-bottom:25px;

    text-shadow:

    0 0 12px rgba(255,255,255,.15),

    0 0 22px rgba(0,140,255,.35),

    0 0 40px rgba(255,170,0,.12);
}

.port-header p{

    max-width:1100px;

    margin:auto;

    line-height:1.9;

    color:#d0d0d0;

    font-size:1.05rem;
}

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

.port-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;
}

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

.port-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    padding:35px;

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

    background:
    linear-gradient(
    135deg,
    rgba(0,140,255,.08),
    rgba(255,255,255,.03),
    rgba(255,170,0,.06));

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

    backdrop-filter:blur(10px);
}

/* ====================================   RANDOM CARD COLORS========================== */
/* BLUE */
.port-card.card-blue{
    background:linear-gradient(135deg,
        rgba(0,140,255,.12),
        rgba(255,255,255,.03));
}

/* ORANGE */
.port-card.card-orange{
    background:linear-gradient(135deg,
        rgba(255,170,0,.12),
        rgba(255,255,255,.03));
}

/* GREEN */
.port-card.card-green{
    background:linear-gradient(135deg,
        rgba(0,255,180,.10),
        rgba(255,255,255,.03));
}

/* PURPLE */
.port-card.card-purple{
    background:linear-gradient(135deg,
        rgba(180,0,255,.12),
        rgba(255,255,255,.03));
}
/* ====================================   HOVER=================================== */

.port-card:hover{

    transform:
    translateY(-16px)
    scale(1.03);

    border-color:
    rgba(255,255,255,.16);

    box-shadow:

    0 25px 40px rgba(0,0,0,.45),

    0 0 25px rgba(0,140,255,.18),

    0 0 45px rgba(255,170,0,.10),

    inset 0 0 25px rgba(255,255,255,.04);
}

/* ===================================   TOP GLOW====================================== */

.port-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
    90deg,
    #00aaff,
    #ffffff,
    #ffb400);

    opacity:0;

    transition:.5s;
}

.port-card:hover::before{

    opacity:1;
}

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

.port-icon{

    width:70px;
    height:70px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;
    
    margin-bottom:25px;

    font-size:2rem;

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

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

    box-shadow:
    inset 0 0 15px rgba(255,255,255,.03);
}

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

.port-card h2{

    margin-bottom:22px;

    font-size:1.7rem;

    text-shadow:
    0 0 10px rgba(0,140,255,.2);
}
.port-title{
    margin-bottom:22px;
    font-size:1.7rem;
    text-shadow:0 0 10px rgba(0,140,255,.2);
}

/* link inside title */
.port-title a{
    text-decoration:none;
    color:#ffffff;
    transition:0.3s ease;
    position:relative;
}

/* hover effect */
.port-title a:hover{
    color:#00bfff;
    text-shadow:0 0 12px rgba(0,140,255,.4);
}

/* animated underline */
.port-title a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:2px;
    background:#FFAE42;
    transition:0.3s ease;
}

.port-title a:hover::after{
    width:100%;
}

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

.port-card ul{

    list-style:none;
}

/* ================================   ITEM================================ */

.port-card ul li{

    position:relative;

    padding-left:20px;

    margin-bottom:16px;

    color:#d5d5d5;

    line-height:1.7;

    transition:.3s ease;
}

/* ============================   DOT================================== */

.port-card ul li::before{

    content:"";

    position:absolute;

    left:0;
    top:11px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#00aaff;

    box-shadow:
    0 0 10px #00aaff;
}

/* ========================   ITEM HOVER======================================== */

.port-card ul li:hover{

    color:#fff;

    transform:translateX(6px);

    text-shadow:
    0 0 10px rgba(255,255,255,.15);
}
/* ======================================================
   END HERE PORT FOLIO CSSS
====================================================== */


/* ======================================================
   START PRODUCTS BODY Advanced Systems
====================================================== */

.products-body{

    position:relative;

    width:100%;

    overflow-x:hidden;

    color:#fff;

    font-family:Arial,sans-serif;

    background:#050505;
}


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

.products-advanced-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:

    radial-gradient(
    circle at top left,
    rgba(0,140,255,0.14),
    transparent 35%),

    radial-gradient(
    circle at bottom right,
    rgba(255,170,0,0.12),
    transparent 35%),

    linear-gradient(
    180deg,
    #030303 0%,
    #08111d 35%,
    #111827 65%,
    #140f08 100%);
}

/* ===============================   ANIMATED LIGHT================================================== */

.products-advanced-section::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    top:-250px;
    left:-250px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(0,140,255,0.12),
    transparent 70%);

    animation:
    productsLightMove 10s infinite alternate;
}

.products-advanced-section::after{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    bottom:-250px;
    right:-250px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,170,0,0.10),
    transparent 70%);

    animation:
    productsLightMove2 12s infinite alternate;
}

/* ==================================   KEYFRAMES================================================== */

@keyframes productsLightMove{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(80px,40px);
    }
}

@keyframes productsLightMove2{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(-70px,-40px);
    }
}

/* ==================================   CONTAINER==================================== */

.products-container{

    width:92%;
    max-width:1500px;

    margin:auto;

    position:relative;
    z-index:2;
}

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

.products-header{

    text-align:center;

    margin-bottom:90px;
}

.products-header h2{

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

    margin-bottom:25px;

    font-weight:800;

    animation:
    productsTitleGlow 5s infinite alternate;
}

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

@keyframes productsTitleGlow{

    0%{

        text-shadow:
        0 0 12px rgba(255,255,255,0.6),
        0 0 30px rgba(0,140,255,0.5);
    }

    100%{

        text-shadow:
        0 0 12px rgba(255,255,255,0.6),
        0 0 35px rgba(255,170,0,0.45);
    }
}

.products-header p{

    max-width:850px;

    margin:auto;

    line-height:1.9;

    color:#d3d3d3;
}

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

.products-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

    gap:40px;
}

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

.products-card{

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(16px);

    transition:
    transform .6s ease,
    box-shadow .6s ease;

    opacity:0;

    transform:
    translateY(100px)
    scale(.92);
}

/* ================================   REVEAL================================================== */

.products-card.products-active{

    opacity:1;

    transform:
    translateY(0)
    scale(1);

    transition:1s ease;
}

/* ================================   HOVER===================================== */

.products-card:hover{

    transform:
    translateY(-18px)
    scale(1.02);

    box-shadow:
    0 0 20px rgba(255,255,255,0.08),
    0 0 45px rgba(0,140,255,0.22),
    0 0 75px rgba(255,170,0,0.16);
}

/* ==================================   TOP LINE========================================= */

.products-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
    90deg,
    #00aaff,
    #ffffff,
    #ffb400);

    z-index:2;
}

/* ===============================   IMAGE=============================================== */

.products-image{

    position:relative;

    overflow:hidden;
}

.products-image img{

  width:100%;
    height:auto;

    object-fit:cover;

    display:block;

    transition:
    transform 1s ease,
    filter 1s ease;
}

/* ================================   IMAGE OVERLAY======================================= */

.products-image::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.7),
    transparent 60%);
}

/* =================================   IMAGE HOVER==================================== */

.products-card:hover .products-image img{

    transform:scale(1.08);

    filter:
    brightness(1.12)
    saturate(1.15);
}

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

.products-content{

    padding:35px;
}

.products-content h3{

    font-size:1.8rem;

    margin-bottom:18px;

    text-shadow:
    0 0 15px rgba(0,140,255,0.35);
}

.products-content p{

    color:#d5d5d5;

    line-height:1.8;

    margin-bottom:30px;
}

/* ================================   META======================================= */

.products-meta{

    display:flex;

    gap:14px;

    margin-bottom:28px;

    flex-wrap:wrap;
}

.products-meta span{

    padding:8px 16px;

    border-radius:50px;

    font-size:.85rem;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);
}

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

.products-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.14);

    transition:.35s;
}

.products-btn:hover{

    background:#fff;

    color:#000;

    transform:translateY(-3px);
}

/* ======================================================
  END HERE  PRODUCTS CSS Advanced Systems
====================================================== */

/* ======================================================
  3  PRODUCTS VIDEO CSS START HERE 
====================================================== */

.product-video-body{

    margin:0;

    font-family:Arial,sans-serif;

    overflow-x:hidden;

    color:#fff;

    min-height:100vh;

    background:
    linear-gradient(
    -45deg,
    #020617,
    #041c32,
    #0b1120,
    #1a103d,
    #06243f,
    #10243a,
    #031b34,
    #020617);

    background-size:600% 600%;

    animation:
    productVideoGradient 18s ease infinite;
}

/* ================= GRADIENT ================= */

@keyframes productVideoGradient{

    0%{background-position:0% 50%;}
    25%{background-position:50% 100%;}
    50%{background-position:100% 50%;}
    75%{background-position:50% 0%;}
    100%{background-position:0% 50%;}

}

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

.product-video-section{

    padding:120px 0;

    overflow:hidden;
}

/* ================= CONTAINER ================= */

.product-video-container{

    width:92%;
    max-width:1450px;

    margin:auto;
}

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

.product-video-header{

    text-align:center;

    margin-bottom:80px;
}

.product-video-header h2{

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

    margin-bottom:22px;

    text-shadow:
    0 0 15px rgba(255,255,255,.2),
    0 0 30px rgba(0,140,255,.3),
    0 0 50px rgba(255,170,0,.15);
}

.product-video-header p{

    max-width:900px;

    margin:auto;

    line-height:1.9;

    color:#d4d4d4;
}

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

.product-video-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;
}

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

.product-video-card{

    position:relative;

    aspect-ratio:1/1;

    border-radius:28px;

    overflow:hidden;

    cursor:pointer;

    background:#000;

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

    transition:
    transform .7s cubic-bezier(0.22,1,0.36,1),
    box-shadow .7s ease,
    border-color .6s ease;
}

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

.product-video-card:hover{

    transform:
    translateY(-45px)
    scale(1.03);

    border-color:
    rgba(255,255,255,.18);

    box-shadow:
    0 40px 80px rgba(0,0,0,.55),
    0 0 30px rgba(0,140,255,.18),
    0 0 60px rgba(255,170,0,.12);
}

/* ================= TOP GLOW ================= */

.product-video-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
    90deg,
    #00aaff,
    #ffffff,
    #ffb400);

    opacity:0;

    transition:.5s;

    z-index:6;
}

.product-video-card:hover::before{
    opacity:1;
}

/* ================= VIDEO ================= */

.product-video-card video{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
    transform 1s ease,
    filter 1s ease;
}

/* ================= VIDEO HOVER ================= */

.product-video-card:hover video{

    transform:scale(1.08);

    filter:
    brightness(1.1)
    saturate(1.2);
}

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

.product-video-play{

    position:absolute;

    top:50%;
    left:50%;

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

    width:95px;
    height:95px;

    border-radius:50%;

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

    backdrop-filter:blur(8px);

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

    display:flex;

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

    z-index:5;

    transition:.5s ease;
}

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

.product-video-play::before{

    content:"";

    border-left:28px solid #fff;

    border-top:16px solid transparent;

    border-bottom:16px solid transparent;

    margin-left:6px;
}

/* ================= PLAY HOVER ================= */

.product-video-card:hover .product-video-play{

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

    background:
    rgba(0,140,255,.22);

    box-shadow:
    0 0 25px rgba(0,140,255,.35);
}

/* ================= OVERLAY ================= */

.product-video-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.2),
    transparent);

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    z-index:2;
}

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

.product-video-overlay h3{

    font-size:2rem;

    margin-bottom:14px;

    text-shadow:
    0 0 12px rgba(0,140,255,.35);
}

/* ================= TEXT ================= */

.product-video-overlay p{

    line-height:1.8;

    color:#d8d8d8;

    margin-bottom:24px;
}

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

.product-video-btn{

    display:inline-block;

    width:max-content;

    padding:13px 28px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

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

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

    transition:.45s ease;
}

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

.product-video-btn:hover{

    background:#fff;

    color:#000;

    box-shadow:
    0 0 22px rgba(255,255,255,.28);
}


/* ======================================================
  END HERE  3  PRODUCTS VIDEO CSS START HERE 
====================================================== */

/* ======================================================
  OVERLY VIDEO  START HERE 
====================================================== */
/* ================= VIDEO SECTION ================= */

.vd-section{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 0;
}

/* ================= VIDEO ================= */

.vd-video{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:translate(-50%,-50%);
    z-index:1;
}

/* ================= OVERLAY ================= */

.vd-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,0.88),
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.88)
    );

    z-index:2;
}

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

.vd-content{
    position:relative;
    z-index:5;
    width:90%;
    max-width:1450px;
    text-align:center;
    color:#fff;
}

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

.vd-subtitle{
    display:inline-block;

    padding:14px 28px;

    border:
    1px solid rgba(255,123,0,0.5);

    border-radius:50px;

    background:
    rgba(255,123,0,0.08);

    backdrop-filter:blur(6px);

    color:#ff9a00;

    letter-spacing:2px;

    font-size:14px;

    margin-bottom:30px;
}

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

.vd-title{
    font-size:84px;
    font-weight:900;
    line-height:1.1;
    margin-bottom:38px;
    text-transform:uppercase;

    text-shadow:
    0 10px 25px rgba(0,0,0,0.55);
}

.vd-title span{
    color:#ff7b00;
}

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

.vd-description{
    width:90%;
    max-width:980px;

    margin:auto;

    color:#d2d2d2;

    font-size:18px;

    line-height:1.9;

    margin-bottom:70px;
}

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

.vd-tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
    margin-bottom:85px;
}

.vd-tag{
    padding:18px 32px;

    border-radius:60px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,123,0,0.4);

    backdrop-filter:blur(10px);

    font-size:16px;
    font-weight:700;

    transition:0.35s;
}

.vd-tag:hover{
    background:#ff7b00;
    transform:translateY(-5px);
}

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

.vd-counter-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

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

.vd-card{
    position:relative;

    padding:50px 25px;

    border-radius:24px;

    overflow:hidden;

    background:
    rgba(255,255,255,0.05);

    backdrop-filter:blur(10px);

    border:
    1px solid rgba(255,123,0,0.3);

    transition:0.4s;
}

.vd-card:hover{
    transform:translateY(-10px);

    border-color:#ff7b00;

    box-shadow:
    0 20px 45px rgba(255,123,0,0.22);
}

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

.vd-icon{
    width:85px;
    height:85px;

    margin:auto auto 28px;

    border-radius:50%;

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

    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a00
    );
}

/* ================= CUSTOM SVG ICON ================= */

.vd-icon svg{
    width:38px;
    height:38px;
    fill:#fff;
}

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

.vd-number{
    font-size:64px;
    font-weight:900;
    margin-bottom:14px;
}

/* ================= TEXT ================= */

.vd-text{
    color:#d8d8d8;
    font-size:18px;
    letter-spacing:1px;
}


/* ======================================================
  END HERE OVERLY VIDEO 
====================================================== */

/* ======================================================
  FOOTER CSS START HERE 
====================================================== */
/* ================= FOOTER ================= */

.ft-main-footer{
    position:relative;

    background:
    linear-gradient(
        to bottom,
        #0c1422,
        #050910
    );

    padding-top:180px;

    overflow:hidden;
}

/* ================= FEATURE MENU WRAPPER ================= */

.ft-feature-wrapper{
    position:absolute;

    top:-110px;
    left:50%;

    transform:translateX(-50%);

    width:90%;

    z-index:20;
}

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

.ft-feature-title{
    text-align:center;
    margin-bottom:35px;
}

.ft-feature-title h2{
    font-size:48px;
    font-weight:900;
    color:#fff;
    letter-spacing:2px;
}

.ft-feature-title span{
    color:#ff7b00;
}

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

.ft-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

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

.ft-fold-card{
    perspective:1200px;
}

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

.ft-card-head{
    position:relative;

    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a00
    );

    border-radius:22px 22px 0 0;

    padding:35px 20px;

    text-align:center;

    transform-origin:top;

    transition:0.45s;

    z-index:5;

    box-shadow:
    0 15px 35px rgba(255,123,0,0.28);
}

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

.ft-head-icon{
    width:82px;
    height:82px;

    margin:auto auto 18px;

    border-radius:50%;

    background:
    rgba(255,255,255,0.15);

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

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

.ft-head-icon svg{
    width:38px;
    height:38px;
    fill:#fff;
}

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

.ft-card-head h3{
    font-size:30px;
    font-weight:800;
    color:#fff;
}

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

.ft-card-body{
    background:#121c2b;

    border:
    2px solid rgba(255,123,0,0.5);

    border-top:none;

    border-radius:0 0 22px 22px;

    transform:
    rotateX(-90deg);

    transform-origin:top;

    opacity:0;

    height:0;

    overflow:hidden;

    transition:0.55s;

    padding:0 30px;
}

/* ================= HOVER ================= */

.ft-fold-card:hover .ft-card-body{

    transform:
    rotateX(0deg);

    opacity:1;

    height:260px;

    padding:30px;
}

.ft-fold-card:hover .ft-card-head{
    transform:translateY(-4px);
}

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

.ft-card-body p{
    color:#d2d2d2;
    line-height:1.9;
    margin-bottom:20px;
    font-size:15px;
}

.ft-card-body a{
    display:block;

    color:#ff9a00;

    text-decoration:none;

    margin-bottom:12px;

    transition:0.3s;

    font-weight:600;
}

.ft-card-body a:hover{
    color:#fff;
    transform:translateX(6px);
}

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

.ft-footer-container{
    width:90%;

    margin:auto;

    display:grid;

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

    gap:40px;

    padding:
    140px 0 40px;
}

/* ================= FOOTER COLUMN ================= */

.ft-column h3{
    position:relative;

    color:#fff;

    font-size:26px;

    margin-bottom:30px;

    padding-bottom:14px;
}

.ft-column h3::after{
    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:70px;
    height:2px;

    background:#ff7b00;
}

/* ================= ADDRESS ITEM ================= */

.ft-address-item{
    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:24px;
}

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

.ft-address-icon{
    width:48px;
    height:48px;

    min-width:48px;

    border-radius:14px;

    background:
    rgba(255,123,0,0.12);

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

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

.ft-address-icon svg{
    width:22px;
    height:22px;
    fill:#ff7b00;
}

/* ================= ADDRESS TEXT ================= */

.ft-address-text{
    color:#d7d7d7;
    line-height:1.8;
    font-size:15px;
}

.ft-address-text a{
    color:#d7d7d7;
    text-decoration:none;
    transition:0.3s;
}

.ft-address-text a:hover{
    color:#ff9a00;
}

/* ================= FOOTER LINKS ================= */

.ft-links{
    list-style:none;
}

.ft-links li{
    margin-bottom:18px;
}

.ft-links a{
    position:relative;

    color:#d5d5d5;

    text-decoration:none;

    padding-left:18px;

    transition:0.3s;
}

.ft-links a::before{
    content:'›';

    position:absolute;

    left:0;

    color:#ff7b00;

    font-size:20px;
}

.ft-links a:hover{
    color:#ff9a00;
    padding-left:24px;
}

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

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

.ft-social-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

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

.ft-social-btn{
    height:62px;
    border-radius:18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,123,0,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.35s;
    cursor:pointer;
}

/* ICON */
.ft-social-btn svg{
    width:26px;
    height:26px;
    fill: currentColor;
}

/* ================= BASE COLOR ================= */
.ft-social-btn{
    color:#fff;
}

/* ================= REMOVE OLD ORANGE HOVER (IMPORTANT FIX) ================= */
.ft-social-btn:hover{
    transform:translateY(-6px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,123,0,0.25);
    box-shadow:none;
}

/* ================= BRAND HOVER COLORS ================= */

/* WhatsApp */
.ft-social-btn[href*="wa.me"]:hover{
    color:#ffffff;
    background:#25D366;
}

/* Facebook */
.ft-social-btn[href*="facebook"]:hover{
    color:#ffffff;
    background:#1877F2;
}

/* YouTube */
.ft-social-btn[href*="youtube"]:hover{
    color:#ffffff;
    background:#FF0000;
}

/* Instagram */
.ft-social-btn[href*="instagram"]:hover{
    color:#ffffff;
    background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}

/* LinkedIn */
.ft-social-btn[href*="linkedin"]:hover{
    color:#ffffff;
    background:#0A66C2;
}

/* X (Twitter) */
.ft-social-btn[href*="x.com"]:hover,
.ft-social-btn[href*="twitter"]:hover{
    color:#ffffff;
    background:#000000;
}

/* ================= NEWSLETTER ================= */

.ft-news-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ================= INPUT ================= */

.ft-news-input{
    width:100%;
    height:56px;

    border:none;
    outline:none;

    border-radius:16px;

    padding:0 20px;

    background:#172233;

    color:#fff;

    border:
    2px solid transparent;

    transition:0.35s;
}

.ft-news-input:focus{
    border-color:#ff7b00;
}

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

.ft-news-btn{
    height:56px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a00
    );

    color:#fff;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:0.35s;
}

.ft-news-btn:hover{
    transform:translateY(-4px);
}

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

.ft-login-btn{
    width:100%;
    height:56px;

    margin-top:18px;

    border-radius:16px;

    background:transparent;

    border:2px solid #ff7b00;

    color:#fff;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:0.35s;

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

    text-decoration:none;

    box-sizing:border-box;
}

.ft-login-btn:hover{
    background:#ff7b00;
}

/* ================= FOOT NOTE ================= */

.ft-footer-bottom{
    border-top:
    2px solid #ff7b00;

    background:#04070c;

    text-align:center;

    padding:28px 15px;
}

.ft-footer-bottom p{
    color:#bdbdbd;

    letter-spacing:1px;

    font-size:15px;
}


/* ======================================================
  END HERE FOOTER CSS AND INDEX PAGE END HERE
====================================================== */

/* ======================================================
  BASE PRODUCTS PAGE START HERE 
====================================================== */

/* ================= BODY ================= */

.product-base-page-body{
     padding-bottom:120px;
    background:
    linear-gradient(90deg,
    #ffecd2 0%,
    #ffdde1 20%,
    #c2e9fb 40%,
    #a1c4fd 60%,
    #d4fc79 80%,
    #cfd9df 100%);

    background-size:300% 300%;
    animation:bgMove 14s ease infinite;

    font-family:'Inter',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
}

@keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}


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

.product-base-page-top{
    text-align:center;
    margin-bottom:60px;
 padding-top:120px;
}

.product-base-page-badge{
    display:inline-block;
    padding:10px 22px;
    border-radius:100px;
    background:rgba(255,255,255,0.55);
    color:#0b2a4a;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:25px;
}

.product-base-page-title{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(2.8rem,6vw,5rem);
    color:#08203a;
    margin-bottom:18px;
}

.product-base-page-desc{
    max-width:800px;
    margin:auto;
    color:#2a4b6e;
    font-size:16px;
    line-height:1.7;
}

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

.product-base-page-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
    gap:50px;
margin-bottom:120px;
 margin-left:10px;
    margin-right:10px;
    overflow:visible;
}

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

.product-base-page-card{
    position:relative;
    overflow:visible;
    border-radius:34px;
    background:linear-gradient(135deg,#0e2d55 0%,#123b70 35%,#0b2344 100%);
    padding:35px 30px 120px;
    box-shadow:0 25px 60px rgba(0,0,0,0.25);
    transition:all 0.8s ease;
     opacity:0;
    transform:translateY(80px);
}
/* when visible */
.product-base-page-card.show{
    opacity:1;
    transform:translateY(0);
}

/* ================= HOVER ================= */

.product-base-page-card:hover{
    transform:translateY(-35px);
    box-shadow:0 50px 100px rgba(0,0,0,0.45), 0 0 40px rgba(0,170,255,0.30);
}

/* ================= TOP GLOW ================= */

.product-base-page-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,#ff7300,#ffb347,#ff7300);
    opacity:0;
    transition:0.4s;
}

.product-base-page-card:hover::before{
    opacity:1;
}

/* ================= INNER GLOW ================= */

.product-base-page-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:34px;
    background:radial-gradient(circle at center, rgba(0,170,255,0.22), transparent 70%);
    opacity:0;
    transition:0.4s;
}

.product-base-page-card:hover::after{
    opacity:1;
}
/* ================= ANIMATION SCROLLING ================= */
.product-base-page-anim-card{
    opacity:0;
    transform:translateY(80px);
    transition:all 0.8s ease;
}

.product-base-page-anim-card.product-base-page-anim-show{
    opacity:1;
    transform:translateY(0);
}
/* ================= CATEGORY ================= */

.product-base-page-cat{
    position:relative;
    z-index:2;
    margin-bottom:30px;
}

.product-base-page-cat h2{
    font-family:'Orbitron',sans-serif;
    font-size:32px;
    color:#fff;
    margin-bottom:8px;
}

.product-base-page-cat span{
    color:#9fd1ff;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
}

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

.product-base-page-products{
    display:flex;
    flex-direction:column;
    gap:22px;
    position:relative;
    z-index:2;
}

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

.product-base-page-product{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    text-decoration:none;
    padding:18px;
    border-radius:26px;
    background:linear-gradient(135deg,#0f3b73 0%,#1257a8 35%,#0e4c9a 70%,#0b2f5c 100%);
    border:1px solid rgba(255,255,255,0.15);
    overflow:hidden;
    transition:0.4s ease;
}

/* hover slide */
.product-base-page-product::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,#ff7300,#ffb347);
    transition:0.4s ease;
}

.product-base-page-product:hover::before{
    left:0;
}

.product-base-page-product:hover{
    transform:translateY(-10px);
}

/* ================= IMAGE ================= */

.product-base-page-imgBox{
    width:200px;
    height:200px;
    min-width:200px;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.2);
    position:relative;
    z-index:2;
}

.product-base-page-imgBox img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ================= INFO ================= */

.product-base-page-info{
    flex:1;
    position:relative;
    z-index:2;
}

.product-base-page-info h3{
    font-size:24px;
    color:#fff;
    margin-bottom:8px;
}

.product-base-page-info p{
    font-size:15px;
    color:#cfe8ff;
    line-height:1.6;
}

/* ================= ARROW ================= */

.product-base-page-arrow{
    width:50px;
    height:50px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:22px;
    z-index:2;
}

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

.product-base-page-explore{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:90px;
    border:none;
    cursor:pointer;
    background:transparent;
    overflow:hidden;
 text-decoration: none;
}

.product-base-page-explore::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,#ff7300,#ffb347);
    transition:0.4s;
}

.product-base-page-explore:hover::before{
    left:0;
}

.product-base-page-explore span{
    position:relative;
    z-index:2;
    color:#fff;
    font-weight:700;
    letter-spacing:2px;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
}

.card-lesslethal{
    background: linear-gradient(135deg,#0f3b73,#1257a8);
    box-shadow: 0 0 25px rgba(0,120,255,0.25);
    border: 1px solid rgba(0,140,255,0.3);
}

.card-grenade{
    background: linear-gradient(135deg,#5a0f0f,#b31217);
    box-shadow: 0 0 25px rgba(255,0,0,0.25);
    border: 1px solid rgba(255,80,80,0.3);
}

.card-smoke{
    background: linear-gradient(135deg,#0f3d2e,#1db954);
    box-shadow: 0 0 25px rgba(0,255,120,0.2);
    border: 1px solid rgba(0,255,120,0.25);
}

.card-launcher{
    background: linear-gradient(135deg,#2a0f3d,#7a2cff);
    box-shadow: 0 0 25px rgba(140,0,255,0.25);
    border: 1px solid rgba(180,100,255,0.3);
}

/* ======================================================
  END HERE BASE PRODUCTS PAGE 
====================================================== */

/* ================= CATAGORIES PAGE START HERE ================= */
/* ================= RESET ================= */

/* ================= PAGE ================= */

.cata-base-page{
    
    background:
    linear-gradient(90deg,
    #061423 0%,
    #0b2a4a 40%,
    #102f55 70%,
    #07101c 100%);

    background-size:300% 300%;

    animation:cataBaseBgMove 12s ease infinite;

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

    min-height:100vh;

    overflow-x:hidden;

    color:#fff;

    padding:80px 5%;
}

/* ================= BACKGROUND ANIMATION ================= */

@keyframes cataBaseBgMove{

    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* ================= TOP ================= */

.cata-base-top{
    margin-top:80px;
    margin-bottom:160px;
}
.cata-base-badge{

    display:inline-block;
    padding:10px 22px;
    border-radius:100px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    color:#9fd1ff;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.cata-base-title{

    font-family:'Orbitron',sans-serif;
    font-size:clamp(2.8rem,6vw,5rem);
    margin-bottom:18px;
    line-height:1.1;
}

.cata-base-desc{
    max-width:900px;
    color:#c8def5;
    line-height:1.8;
    font-size:16px;
}

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

.cata-base-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:40px;
}

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

.cata-base-product{

    position:relative;
    overflow:hidden;
    border-radius:34px;

    background:linear-gradient(135deg,
    #0f3b73 0%,
    #1257a8 35%,
    #0e4c9a 70%,
    #0b2f5c 100%);

    padding:28px;

    border:1px solid rgba(255,255,255,0.12);

    transition:0.6s ease;

    opacity:0;
    transform:translateY(80px);
}

.cata-base-product::before{

    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(90deg,#ff7300,#ffb347,#ff7300);

    opacity:0;

    transition:0.4s;

}
.cata-base-product:hover::before{
    opacity:1;
}

/* scroll reveal active */
.cata-base-product.cata-show{
    opacity:1;
    transform:translateY(0);
}

/* hover effect */
.cata-base-product:hover{
    transform:translateY(-28px);
}

/* ================= IMAGE ================= */

.cata-base-imgBox{
    width:100%;
    aspect-ratio: 4 / 3.5;
    overflow:hidden;
    border-radius:24px;
}

.cata-base-imgBox img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cata-base-product:hover .cata-base-imgBox img{
    transform:scale(1.08);
}

/* ================= TEXT ================= */

.cata-base-name{
    font-family:'Orbitron',sans-serif;
    font-size:28px;
    margin-bottom:12px;
}

.cata-base-info{
    color:#d7e9ff;
    line-height:1.7;
    font-size:15px;
    margin-bottom:28px;
}

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

.cata-base-btn{

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

    height:62px;

    border-radius:18px;

    text-decoration:none;

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.12);

    color:#fff;

    font-weight:700;

    letter-spacing:2px;

    position:relative;

    overflow:hidden;
}

.cata-base-btn::before{

    content:"";

    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;

    background:linear-gradient(90deg,#ff7300,#ffb347);

    transition:0.4s;
}

.cata-base-btn:hover::before{
    left:0;
}

.cata-base-btn span{
    position:relative;
    z-index:2;
}

/* ======================================================
  END HERE CATAGORIES PAGE 
====================================================== */

/* ==================DISPLAY PAGE START HERE ================================ */
/* ================= RESET ================= */

/* ================= BODY ================= */

.display-board-body{
    background:#050b14;
    font-family:'Inter',sans-serif;
    color:#fff;
    overflow-x:hidden;
    animation: pageFade 0.6s ease-in-out;
}

@keyframes pageFade{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
}

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

.display-board-body .bg{
    position:fixed;
    inset:0;
    z-index:-2;
    opacity:0.30;
}

.display-board-body .glow{
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    filter:blur(70px);
    animation:move 6s infinite alternate ease-in-out;
}

.display-board-body .glow:nth-child(1){background:#00e5ff;}
.display-board-body .glow:nth-child(2){background:#ff3df2;}
.display-board-body .glow:nth-child(3){background:#ffb300;}
.display-board-body .glow:nth-child(4){background:#3dff8b;}

@keyframes move{
    0%{transform:translate(0,0);}
    50%{transform:translate(160px,90px);}
    100%{transform:translate(-140px,-80px);}
}

/* ================= NAV SPACE ================= */

.display-board-body .nav-space{
    height:200px;
}

/* ================= WRAPPER (WIDER) ================= */

.display-board-body .wrapper{
    max-width:1550px;
    margin:auto;
    padding:0 4% 40px;
}

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

.display-board-body .header{
    font-size:42px;
    font-family:'Orbitron';
    margin-bottom:40px;
}

/* ================= GRID (WIDER BALANCE) ================= */

.display-board-body .grid{
    display:grid;
    grid-template-columns: 2.6fr 1.2fr;
    gap:35px;
}

/* ================= LEFT ================= */

.display-board-body .left{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    padding:25px;
    backdrop-filter:blur(10px);
}

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

.display-board-body .title-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.display-board-body .title{
    font-size:30px;
    font-weight:600;
}

/* CATEGORY */
.display-board-body .category{
    padding:8px 14px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    background:linear-gradient(90deg,#ff7300,#ffb347);
    box-shadow:0 10px 20px rgba(255,120,0,0.25);
}

/* LESS BUTTON */
.display-board-body .less-btn{
    margin-left:auto;
    padding:12px 22px;
    border-radius:14px;

    background:linear-gradient(90deg,#ff6a00,#ffb347);
    color:#fff;
    text-decoration:none;

    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    min-width:220px;
    text-align:center;

    box-shadow:0 10px 25px rgba(255,120,0,0.25);
    transition:0.3s;
}

.display-board-body .less-btn:hover{
    transform:translateY(-2px);
}

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

.display-board-body .desc-box{
    margin-top:15px;
    background:rgba(0,255,255,0.05);
    border-left:4px solid #00e5ff;
    padding:18px;
    border-radius:10px;
    font-size:18px;
    line-height:1.6;
    color:#cfefff;
}

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

.display-board-body .image-grid{
    display:grid;
    grid-template-columns: 500px 300px;
    gap:20px;
    margin-top:20px;
}

/* IMAGE */
.display-board-body .img{
    border-radius:16px;
    overflow:hidden;
    transition:0.4s;
    border:1px solid rgba(255,255,255,0.15);
    background:linear-gradient(135deg,#ffffff10,#00e5ff10);
   /* background:#fff; */
 aspect-ratio: 4 / 3;
}

.display-board-body .img img{
    width:100%;
    height:100%;
     object-fit:contain;
    transition:0.5s;
}

.display-board-body .main-img{height:400px;}
.display-board-body .side-img{height:300px; aspect-ratio: 1 / 1;}

.display-board-body .img:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 18px 35px rgba(0,0,0,0.45);
}

/* ================= TECH PANEL ================= */

.display-board-body .tech-panel{
    margin-top:25px;
    padding:20px;
    border-radius:16px;

    background:linear-gradient(135deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.02));

    border:1px solid rgba(255,255,255,0.12);

    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.display-board-body .tech-title{
    font-family:'Orbitron';
    font-size:18px;
    margin-bottom:15px;
    color:#00e5ff;
}

/* TABLE */
.display-board-body table{
    width:100%;
    border-collapse:collapse;
}

.display-board-body td{
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.display-board-body td:first-child{
    color:#00e5ff;
    width:40%;
}
.product-spec-table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}

.product-spec-table td{
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,0.12);
}

.spec-key{
    color:#9fd1ff;
    width:40%;
    font-weight:600;
}

.spec-value{
    color:#fff;
}

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

.display-board-body .right{
    display:flex;
    flex-direction:column;
}

/* NAV BOX */
.display-board-body .nav-box{
    background:rgba(255,255,255,0.04);
    border-radius:18px;
    padding:20px;
    border:1px solid rgba(255,255,255,0.1);
    min-width:320px;
}

/* ================= SIMILAR ITEMS ================= */

.display-board-body .similar a{
    display:block;
    margin-bottom:10px;
    padding:14px 16px;
    border-radius:12px;

    text-decoration:none;
    color:#fff;

    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.03);

    position:relative;
    transition:0.3s;
    overflow:hidden;
}

/* YELLOW BAR */
.display-board-body .similar a::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:#ffcc00;
}

.display-board-body .similar a:hover{
    transform:translateX(10px);
    border-color:#ffcc00;
    background:rgba(255,204,0,0.08);
}



/* ======================================================
  END HERE DISPLAY PAGE 
====================================================== */

/* ================= 	START CONTACT PAGE RESPONSIVE ================= */
/* ================= CONTACT PAGE ================= */

.am-contact-page{
    margin:0;
    padding:0;
    font-family:Arial,Helvetica,sans-serif;
    background:
    linear-gradient(135deg,#08111d,#101b2c,#16263f);
    color:#fff;
}

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

.am-contact-hero{
    padding:100px 20px;
    text-align:center;
    background:
    radial-gradient(circle at top,
    rgba(255,255,255,0.08),
    transparent 60%);
}

.am-contact-title{
    font-size:56px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
}

.am-contact-subtitle{
    max-width:850px;
    margin:20px auto;
    color:#c7d2e0;
    line-height:1.8;
    font-size:18px;
}

/* ================= CONTAINER ================= */

.am-contact-container{
    width:95%;
    max-width:1400px;
    margin:auto;
    padding:60px 0;
}

/* ================= INFO CARDS ================= */

.am-contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.am-contact-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    padding:35px;
    backdrop-filter:blur(15px);
    transition:.4s;
}

.am-contact-card:hover{
    transform:translateY(-8px);
    border-color:#c0c0c0;
    box-shadow:0 0 35px rgba(255,255,255,0.15);
}

.am-contact-icon{
    font-size:45px;
    margin-bottom:15px;
}

.am-contact-card h3{
    margin-bottom:12px;
    color:#ffffff;
}

.am-contact-card p{
    color:#c5cfda;
    line-height:1.8;
}

/* email link */

.am-contact-card p a{
    color:#ffffff;
    text-decoration:none;
    transition:0.3s ease;
}

.am-contact-card p a:hover{
    color:#ff7300;
    text-decoration:none;
}

/* ================= FORM + QR ================= */

.am-contact-flex{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:35px;
    margin-top:60px;
}

@media(max-width:900px){
.am-contact-flex{
grid-template-columns:1fr;
}
}

.am-contact-form-box,
.am-contact-qr-box{
    background:rgba(255,255,255,0.05);
    border-radius:20px;
    padding:40px;
    border:1px solid rgba(255,255,255,0.1);
}

/* ================= FORM ================= */

.am-contact-form{
    display:grid;
    gap:20px;
}

.am-contact-form input,
.am-contact-form textarea{
    width:100%;
    padding:16px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,0.08);
    color:white;
    font-size:15px;
}

.am-contact-form textarea{
    height:180px;
    resize:none;
}

.am-contact-btn{
    background:linear-gradient(135deg,#b6b6b6,#ffffff);
    color:#111;
    border:none;
    padding:16px 35px;
    border-radius:50px;
    cursor:pointer;
    font-weight:bold;
    transition:.4s;
}

.am-contact-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 25px rgba(255,255,255,0.3);
}

/* ================= QR ================= */

.am-contact-qr-box{
    text-align:center;
}

.am-contact-qr{
    width:220px;
    height:220px;
    margin:25px auto;
    background:#fff;
    padding:12px;
    border-radius:15px;
}

.am-contact-qr img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.am-contact-qr-text{
    color:#c8d2de;
    line-height:1.8;
}

/* ================= MAP SECTION ================= */

.am-contact-map{
    margin-top:60px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);
}

.am-contact-map iframe{
    width:100%;
    height:450px;
    border:none;
}

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

.am-contact-cta{
    text-align:center;
    padding:80px 20px;
}

.am-contact-cta h2{
    font-size:40px;
    margin-bottom:15px;
}

.am-contact-cta p{
    color:#c5cfda;
    max-width:800px;
    margin:auto;
    line-height:1.8;
}


/* ======================================================
  END HERE DISPLAY  PAGE 
====================================================== */

/* ================= LEGAL PAGES START HERE, ABOUT, TERMS,PRIVECY AND TERMS ================= */

/* ================= BODY ================= */

.amx-story-body{
    margin:0;
    padding-top:90px;
    font-family:Arial, sans-serif;
    color:#fff;

 background:
  linear-gradient(180deg, rgba(5,8,22,0.88), rgba(11,20,48,0.92)),
  url("../images/banners/world-map.webp") center/cover no-repeat;
}

/* ================= WRAPPER ================= */

.amx-story-wrapper{
    display:flex;
    min-height:100vh;
}

/* ================= SIDE MENU ================= */

.amx-story-side{
    width:260px;

    margin-left:40px;
    margin-top:90px;

    padding:25px;

    background:rgba(0,0,0,0.45);
    border:1px solid rgba(0,229,255,0.2);
    border-radius:16px;

    position:sticky;
    top:90px;

    height:fit-content;
}

/* SIDE TITLE */

.amx-story-side-title{
    font-size:20px;
    font-weight:bold;
    color:#00e5ff;
    margin-bottom:20px;
    letter-spacing:2px;
}

/* SIDE LINKS */

.stody-hyper{
    display:block;
    padding:12px 14px;
    margin-bottom:10px;

    text-decoration:none;
    color:#d6d6d6;

    background:rgba(255,255,255,0.04);
    border-radius:10px;
    border:1px solid transparent;

    transition:0.3s;
}

.stody-hyper:hover{
    transform:translateX(6px);
    border-color:#00e5ff;
    color:#00e5ff;
}

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

.amx-story-content{
    flex:1;

    padding:60px 40px;
    margin-left:120px;
}

/* HERO TITLE */

.amx-story-hero{
    font-size:58px;
    font-weight:900;
    letter-spacing:4px;

    margin-bottom:50px;

    color:#00e5ff;
    text-shadow:0 0 25px rgba(0,229,255,0.35);
}

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

.amx-story-section{
    margin-bottom:70px;
}

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

.amx-story-card{
    padding:35px 30px;

    border-radius:18px;

    background:
    radial-gradient(circle at top left, rgba(0,229,255,0.15), transparent 60%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.08), transparent 55%),
    rgba(0,0,0,0.35);

    border:1px solid rgba(255,255,255,0.10);

    transition:0.35s ease;
}

.amx-story-card:hover{
    transform:translateY(-10px);
    border-color:#00e5ff;
    box-shadow:0 25px 60px rgba(0,0,0,0.6);
}

/* TITLES */

.amx-story-card-title{
    font-size:28px;
    font-weight:bold;
    margin-bottom:15px;
    color:#ff9800;
}

/* TEXT */

.amx-story-card-text{
    font-size:18px;
    line-height:1.9;
    color:#d6d6d6;
}

/* ================= MAIN FOOTER (FIXED LOCATION) ================= */

.amx-story-footer{
    margin-top:80px;
    padding:20px;

    text-align:center;
    font-size:13px;
    color:#9aa4b2;

    border-top:1px solid rgba(255,255,255,0.08);
}


/* ======================================================
  END HERE LEGAL PAGES   PAGE 
====================================================== */

/* ================= GALLWRY BODY START HERE ================= */




/* ================= BODY ================= */
.ams-gallery-page-body{
    margin:0;
    padding-top:var(--navbar-height);
    font-family:system-ui, Arial;
    overflow-x:hidden;
    color:#fff;
}
}
/* ================= FAST CHANGING BACKGROUND ================= */
.ams-gallery-page-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    transition:0.8s ease; /* FAST CHANGE */
}


/* ================= WRAPPER (FIXED 60px GAP FROM NAVBAR) ================= */
.ams-gallery-page-wrap{
    max-width:1500px;
    margin:auto;
    padding:40px 6% 80px;
}

/* ================= HEADER ================= */
.ams-gallery-page-header{
    text-align:center;
    margin-bottom:30px;
    position:relative;
    z-index:2;
}

/* MAIN TITLE (FIXED VISIBILITY ISSUE) */
.ams-gallery-page-title{
    font-size:42px;
    font-weight:800;
    color:#ffffff !important;
    margin-bottom:10px;

    display:block; /* FIX: prevents disappearing */
    position:relative;
    z-index:2;
}

/* SUBTITLE */
.ams-gallery-page-sub{
    font-size:14px;
    opacity:0.6;
}

/* ================= CATEGORY ================= */
.ams-gallery-page-category{
    display:block;
    text-align:center;
    margin:55px 0 15px;

    font-size:22px;
    font-weight:600;

    color:#fff;
    text-decoration:none;
}

.ams-gallery-page-category:hover{
    color:#ff8800;
}

/* ================= SLIDER CENTER ================= */
.ams-gallery-page-slider{
    overflow:hidden;
    display:flex;
    justify-content:center;
    padding:20px 0;
}

/* ================= TRACK ================= */
.ams-gallery-page-track{
    display:flex;
    gap:18px;
    width:max-content;
    animation: scrollLoop 35s linear infinite; /* slightly faster feel */
}

.ams-gallery-page-track:hover{
    animation-play-state:paused;
}

/* ================= CARD ================= */
.ams-gallery-page-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;

    width:220px;
    flex-shrink:0;

    box-shadow:0 4px 12px rgba(0,0,0,0.08);

    transition:0.25s ease;
}

.ams-gallery-page-card:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 18px 30px rgba(0,0,0,0.18);
}

/* ================= IMAGE ================= */
.ams-gallery-page-imgbox{
    background:#f7f7f7;
    padding:12px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.ams-gallery-page-img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
    transition:0.3s ease;
}

.ams-gallery-page-card:hover .ams-gallery-page-img{
    transform:scale(1.08);
}

/* ================= TEXT ================= */
.ams-gallery-page-box{
    padding:12px;
    text-align:center;
}

.ams-gallery-page-name{
    color:#ff8800;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    display:block;
}

.ams-gallery-page-name:hover{
    color:#111;
}

/* ================= FOOTER ================= */
.ams-gallery-page-footer{
    text-align:center;
    padding:20px;
    opacity:0.6;
    font-size:13px;
}

/* ================= FAST INFINITE ANIMATION ================= */
@keyframes scrollLoop{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

/* ======================================================
  END HERE GALLERY BODY 
====================================================== */



/* ================= ADMIN LOGIN PAGE ================= */

.am-admin-body{
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;

    background:
    linear-gradient(
    135deg,
    #05070b,
    #0c1320,
    #131d31,
    #08111d);

    background-size:400% 400%;
    animation:amAdminGradient 15s ease infinite;
}

@keyframes amAdminGradient{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

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

.am-admin-bg-glow{
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.10),
    transparent 70%);
    animation:amAdminPulse 8s infinite;
}

@keyframes amAdminPulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.2);}
}

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

.am-admin-card{
    position:relative;
    width:420px;
    max-width:90%;
    z-index:10;

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

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

    backdrop-filter:blur(20px);

    border-radius:25px;

    padding:45px;

    box-shadow:
    0 0 50px rgba(0,0,0,.4);
}

/* ================= LOGO ================= */

.am-admin-logo{
    text-align:center;
    margin-bottom:10px;
}

.am-admin-logo h1{
    margin:0;
    font-size:34px;
    color:#ffffff;
    letter-spacing:3px;
}

.am-admin-logo span{
    display:block;
    margin-top:8px;
    color:#bfc8d8;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
}

/* ================= BADGE ================= */

.am-admin-badge{
    text-align:center;
    margin:25px 0;
}

.am-admin-badge span{
    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

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

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

    color:#dce5f2;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;
}

/* ================= FORM ================= */

.am-admin-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.am-admin-input{

    width:100%;

    padding:16px 18px;

    border:none;

    outline:none;

    border-radius:12px;

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

    color:#fff;

    font-size:15px;

    box-sizing:border-box;
}

.am-admin-input::placeholder{
    color:#c7d0df;
}

/* ================= REMEMBER ================= */

.am-admin-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:5px;
}

.am-admin-remember{
    color:#d2dae8;
    font-size:14px;
}

.am-admin-forgot{
    color:#d2dae8;
    text-decoration:none;
    font-size:14px;
}

.am-admin-forgot:hover{
    color:#fff;
}

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

.am-admin-btn{

    margin-top:10px;

    border:none;

    cursor:pointer;

    padding:16px;

    border-radius:50px;

    font-size:15px;

    font-weight:bold;

    letter-spacing:1px;

    color:#111;

    background:
    linear-gradient(
    135deg,
    #a8a8a8,
    #ffffff);

    transition:.4s;
}

.am-admin-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 25px
    rgba(255,255,255,.35);
}


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

.am-admin-footer{
    text-align:center;
    margin-top:25px;
    color:#b8c2d1;
    font-size:12px;
    line-height:1.7;


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

.amd-body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#0b1220;
    color:#fff;
}

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

.amd-wrapper{
    display:flex;
    min-height:calc(100vh - 120px);
    margin-top:120px;
}

/* ================= SIDEBAR ================= */

.amd-sidebar{

    width:280px;

    background:
    linear-gradient(
    180deg,
    #0f172a,
    #172338);

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

    padding:30px 0;
}

.amd-logo{
    text-align:center;
    margin-bottom:40px;
}

.amd-logo h2{
    margin:0;
    color:#fff;
    letter-spacing:3px;
}

.amd-logo span{
    color:#aab7cc;
    font-size:12px;
}

.amd-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.amd-menu li{
    margin:5px 15px;
}

.amd-menu a{

    display:block;

    padding:15px 20px;

    color:#d5deeb;

    text-decoration:none;

    border-radius:12px;

    transition:.3s;
}

.amd-menu a:hover{

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

    color:#fff;
}

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

.amd-content{
    flex:1;
    padding:30px;
}

/* ================= TOPBAR ================= */

.amd-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.amd-title{
    font-size:32px;
    font-weight:bold;
}

.amd-admin-user{

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

    padding:12px 20px;

    border-radius:50px;
}

/* ================= STATS ================= */

.amd-stats{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin-bottom:35px;
}

.amd-stat-card{

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

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

    border-radius:20px;

    padding:25px;

    transition:.3s;
}

.amd-stat-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 25px rgba(255,255,255,.08);
}

.amd-stat-number{

    font-size:38px;

    font-weight:bold;

    margin-top:10px;
}

.amd-stat-label{
    color:#b7c4d7;
}

/* ================= QUICK ACTIONS ================= */

.amd-actions{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:35px;
}

.amd-action-btn{

    background:
    linear-gradient(
    135deg,
    #c9c9c9,
    #ffffff);

    color:#111;

    text-decoration:none;

    text-align:center;

    padding:18px;

    border-radius:15px;

    font-weight:bold;

    transition:.3s;
}

.amd-action-btn:hover{
    transform:translateY(-3px);
}

/* ================= TABLE ================= */

.amd-table-box{

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

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

    border-radius:20px;

    overflow:hidden;
}

.amd-table-title{

    padding:20px;

    font-size:22px;

    font-weight:bold;
}

.amd-table{

    width:100%;

    border-collapse:collapse;
}

.amd-table th{

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

    text-align:left;

    padding:15px;
}

.amd-table td{

    padding:15px;

    border-top:
    1px solid rgba(255,255,255,.05);
}

.amd-status{

    padding:6px 12px;

    border-radius:30px;

    background:#1f7a3d;
}

}

/* =================END HERE DASHBOARD ================= */
/* ================= DASHBOARD ================= */

.amd-body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#0b1220;
    color:#fff;
}

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

.amd-wrapper{
    display:flex;
    min-height:calc(100vh - 120px);
    margin-top:120px;
}

/* ================= SIDEBAR ================= */

.amd-sidebar{

    width:280px;

    background:
    linear-gradient(
    180deg,
    #0f172a,
    #172338);

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

    padding:30px 0;
}

.amd-logo{
    text-align:center;
    margin-bottom:40px;
}

.amd-logo h2{
    margin:0;
    color:#fff;
    letter-spacing:3px;
}

.amd-logo span{
    color:#aab7cc;
    font-size:12px;
}

.amd-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.amd-menu li{
    margin:5px 15px;
}

.amd-menu a{

    display:block;

    padding:15px 20px;

    color:#d5deeb;

    text-decoration:none;

    border-radius:12px;

    transition:.3s;
}

.amd-menu a:hover{

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

    color:#fff;
}

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

.amd-content{
    flex:1;
    padding:30px;
}

/* ================= TOPBAR ================= */

.amd-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.amd-title{
    font-size:32px;
    font-weight:bold;
}

.amd-admin-user{

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

    padding:12px 20px;

    border-radius:50px;
}

/* ================= STATS ================= */

.amd-stats{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin-bottom:35px;
}

.amd-stat-card{

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

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

    border-radius:20px;

    padding:25px;

    transition:.3s;
}

.amd-stat-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 25px rgba(255,255,255,.08);
}

.amd-stat-number{

    font-size:38px;

    font-weight:bold;

    margin-top:10px;
}

.amd-stat-label{
    color:#b7c4d7;
}

/* ================= QUICK ACTIONS ================= */

.amd-actions{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:35px;
}

.amd-action-btn{

    background:
    linear-gradient(
    135deg,
    #c9c9c9,
    #ffffff);

    color:#111;

    text-decoration:none;

    text-align:center;

    padding:18px;

    border-radius:15px;

    font-weight:bold;

    transition:.3s;
}

.amd-action-btn:hover{
    transform:translateY(-3px);
}

/* ================= TABLE ================= */

.amd-table-box{

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

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

    border-radius:20px;

    overflow:hidden;
}

.amd-table-title{

    padding:20px;

    font-size:22px;

    font-weight:bold;
}

.amd-table{

    width:100%;

    border-collapse:collapse;
}

.amd-table th{

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

    text-align:left;

    padding:15px;
}

.amd-table td{

    padding:15px;

    border-top:
    1px solid rgba(255,255,255,.05);
}

.amd-status{

    padding:6px 12px;

    border-radius:30px;

    background:#1f7a3d;
}
.exp-text{
    color: red;
    font-weight: bold;
    font-size: 16px;
}