/* =========================================================
   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;
}

/* ================= WRAPPER ================= */
.am-bg-images{
    position: absolute;
    inset: 0;
}

/* ================= IMAGE BASE ================= */
.am-bg{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    /* 🔥 IMPORTANT FIX */
    transform-origin: center center;

    /* stable base zoom */
    transform: scale(1.2);

    will-change: transform, opacity;

    transition: opacity 2.5s ease;

    /* 🔥 SAME animation for ALL images (no jump) */
    animation: kenburns 20s ease-in-out infinite;
}

/* ================= SMOOTH CENTERED KEN BURNS ================= */
@keyframes kenburns {
    0% {
        transform: scale(1.25) translate(0%, 0%);
    }

    25% {
        transform: scale(1.4) translate(-1%, -1%);
    }

    50% {
        transform: scale(1.55) translate(1%, 0%);
    }

    75% {
        transform: scale(1.4) translate(0%, 1%);
    }

    100% {
        transform: scale(1.25) translate(0%, 0%);
    }
}

/* ================= ACTIVE IMAGE ONLY OPACITY ================= */
.am-bg.active{
    opacity: 1;
    z-index: 2;
}

/* ================= OVERLAY ================= */
.am-bg-images::after{
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.55);
    z-index: 3;
}



/* ================= OPTIONAL CENTER CONTROL (YOU CAN TUNE THIS) ================= */
.am-bg.center-top{
    object-position: center top;
}

.am-bg.center-bottom{
    object-position: center bottom;
}

.am-bg.center-left{
    object-position: left center;
}

.am-bg.center-right{
    object-position: right center;
}



/* ==============================   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:28px;

  
    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(--slider-button-color);
    color: #fff;

    font-size: 18px;   /* 👈 text size */
    font-weight: 700;
    letter-spacing: 0.3px;

    transition: 0.4s;

    box-shadow: 0 0 25px rgba(255,136,0,0.55);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);

    position: relative;
    isolation: isolate;
}

.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: 100%;
    max-width: 544px;
    aspect-ratio: 544 / 307;
    height: auto;
    display: block;
    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);
    }

}



/* ======================================================
  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;

    background:linear-gradient(
        90deg,
        #ff8c00 0%,
        #ffb347 35%,
        #fff8e7 50%,
        #ffb347 65%,
        #ff8c00 100%
    );

    background-size:200% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:shine 3s linear infinite;
}

@keyframes shine{
    to{
        background-position:200% center;
    }
}


.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:clamp(1.1rem, 1.4vw, 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
====================================================== */

/* RESET */

/* BODY */
.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;
}

@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;
}

/* SECTION */
.port-products{
    padding:120px 0;
}

/* HEADER */
.port-header{
    text-align:center;
    margin-bottom:80px;
}

.port-header-title{
    font-size:clamp(2.0rem,4vw,4rem);
    margin-bottom:25px;
    font-weight:800;
}

.port-header-title span{
    display:inline-block;
    animation:waveColor 2.8s infinite ease-in-out;
}

/* delay per letter (wave effect) */
.port-header-title span:nth-child(1){animation-delay:0s;}
.port-header-title span:nth-child(2){animation-delay:.05s;}
.port-header-title span:nth-child(3){animation-delay:.1s;}
.port-header-title span:nth-child(4){animation-delay:.15s;}
.port-header-title span:nth-child(5){animation-delay:.2s;}
.port-header-title span:nth-child(6){animation-delay:.25s;}
.port-header-title span:nth-child(7){animation-delay:.3s;}
.port-header-title span:nth-child(8){animation-delay:.35s;}
.port-header-title span:nth-child(9){animation-delay:.4s;}
.port-header-title span:nth-child(10){animation-delay:.45s;}
.port-header-title span:nth-child(11){animation-delay:.5s;}

@keyframes waveColor{
    0%,100%{
        color:#ff7b00; /* orange */
        text-shadow:0 0 10px rgba(255,123,0,.35);
    }

    50%{
        color:#00ff88; /* green */
        text-shadow:0 0 15px rgba(0,255,136,.45);
    }
}

.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));
    column-gap: 40px;
    row-gap: 80px;
}

/* CARD BASE */
.port-card{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    padding:35px;

    background:linear-gradient(135deg,rgba(120,200,255,.24),rgba(255,255,255,.05),rgba(0,140,255,.10));
    backdrop-filter:blur(10px);

    will-change: transform, opacity;

    /* IMPORTANT START STATE */
    opacity:0;
    transform: translate3d(0, 80px, 0);

    transition: transform 1.2s cubic-bezier(.16,1,.3,1),
                opacity 1s ease;
}

.port-card.active{
    opacity:1;
    transform: translate3d(0, 0, 0);
}

/* HOVER */
.port-card.active:hover{
    transform: translate3d(0, -50px, 0) scale(1.04);
    border: 3px solid red;
}



/* COLORS */
.port-card:nth-child(2){background:linear-gradient(135deg,rgba(255,220,140,.24),rgba(255,255,255,.05),rgba(255,170,0,.10));}
.port-card:nth-child(3){background:linear-gradient(135deg,rgba(160,255,210,.22),rgba(255,255,255,.05),rgba(0,140,255,.10));}
.port-card:nth-child(4){background:linear-gradient(135deg,rgba(200,170,255,.24),rgba(255,255,255,.05),rgba(120,80,255,.10));}
.port-card:nth-child(5){background:linear-gradient(135deg,rgba(255,180,200,.20),rgba(255,255,255,.05),rgba(255,120,120,.09));}
.port-card:nth-child(6){background:linear-gradient(135deg,rgba(180,220,255,.22),rgba(255,255,255,.05),rgba(0,140,255,.09));}
.port-card:nth-child(7){background:linear-gradient(135deg,rgba(255,235,160,.24),rgba(255,255,255,.05),rgba(255,180,0,.10));}
.port-card:nth-child(8){background:linear-gradient(135deg,rgba(180,255,240,.22),rgba(255,255,255,.05),rgba(0,200,160,.10));}



/* ICON */
.port-icon{
    width:100px;
    height:100px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}
.port-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

/* TITLE */
.port-card h2{
    margin-bottom:22px;
   font-size:clamp(1.2rem, 1.5vw, 1.8rem);
}

.port-card h2 a{
    position:relative;
    display:inline-block;
    text-decoration:none;
    color:#fff;
    padding:6px 10px;
    overflow:hidden;
    z-index:1;
    text-shadow:0 0 10px rgba(255,255,255,.35);
}

.port-card h2 a::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:100%;
    background:#ff8c00;
    z-index:-1;
    transition:width .35s ease;
}

.port-card h2 a:hover::before{
    width:100%;
}

.port-card h2 a:hover{
    color:#fff;
    text-shadow:0 0 14px rgba(255,255,255,.8);
}

/* LIST */
.port-card ul{
    list-style:none;
}

.port-card ul li{
    position:relative;
    padding-left:20px;
    margin-bottom:16px;
    color:#d5d5d5;
    line-height:1.7;
    transition:transform .25s ease;
}

.port-card ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00aaff;
}

.port-card ul li:hover{
    transform:translateX(8px);
    color:#fff;
}

/* FOOTNOTE */
.port-footnote{
    text-align:center;
    margin-top:70px;
    font-size:0.95rem;
    color:#bdbdbd;
}



/* ======================================================
   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.0rem,5vw,5rem);
    margin-bottom:25px;
    font-weight:800;

    background:linear-gradient(
        90deg,
        #ff0000,
        #ff4500,
        #ff8c00,
        #ffd700,
        #ff8c00,
        #ff4500,
        #ff0000
    );

    background-size:300% 100%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    animation:fireMove 5s linear infinite;

    text-shadow:
        0 0 10px rgba(255,69,0,.4),
        0 0 20px rgba(255,140,0,.3),
        0 0 35px rgba(255,215,0,.2);
}

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


.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;
    aspect-ratio: 380 / 280;
    overflow:hidden;
}

.products-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: center top;
    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: clamp(1.3rem, 2vw, 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 
====================================================== */
/* ================= BODY ================= */
.products-video-body{
  
    font-family: Arial, sans-serif;
    color:#fff;
    min-height:100vh;
    transition:background 0.8s ease;
}

/* ================= HEADER ================= */
.products-video-header{
    position:relative;
    padding-top:100px;   /* TOP GAP FOR HEADLINE */
    padding-bottom:0px;
    text-align:center;
}

/* PERFECT CENTER HEADLINE */
.products-video-headline{
    font-size: clamp(28px, 4vw, 62px);
    font-weight: 800;
    letter-spacing: 0.5px;
    color:#fff;
    margin: 0;
}

/* ================= SEE MORE ================= */
.products-video-see-more{
    position:absolute;
   right: clamp(60px, 6vw, 100px);
    top:140px;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;
    border-radius:999px;

    background:rgba(255,140,0,0.18);
    border:1px solid rgba(255,140,0,0.35);

    color:#fff;
    font-weight:500;
    text-decoration:none;

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

    box-shadow:0 0 18px rgba(255,140,0,0.15);

    transition:0.3s ease;
}

.products-video-see-more::before{
    content:"▶";
    font-size:12px;
    opacity:0.9;
}

.products-video-see-more::after{
    content:"→";
    margin-left:6px;
    transition:0.3s ease;
    opacity:0.85;
}

.products-video-see-more:hover{
    transform:translateY(-2px) scale(1.03);
    background:linear-gradient(135deg,#ff8c00,#ff6a00);
    border:1px solid rgba(255,140,0,0.8);
    box-shadow:0 10px 30px rgba(0,0,0,0.3), 0 0 25px rgba(255,140,0,0.4);
}

/* ================= SUBTITLE ================= */
.products-video-subtitle{
    font-size:18px;
    color:#cfd6ff;
    line-height:1.6;
   padding-bottom:40px;
    max-width:1200px;
    margin:40px auto;   /* 40px TOP & BOTTOM GAP */
}

/* ================= GRID WRAPPER ================= */
.products-video-grid-wrapper{
    padding-top:20px;   /* GAP BETWEEN HEADER AND GRID */
    padding-left:40px;
    padding-right:40px;
    padding-bottom:60px;
}

/* ================= GRID ================= */
.products-video-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
}

/* ================= CARD ================= */
.products-video-card{
    border-radius:14px;
    overflow:hidden;
    background:rgba(26,26,26,0.75);
    cursor:pointer;
    transition:0.3s ease;
}

.products-video-card:hover{
    transform:translateY(-8px);
}

/* ================= THUMBNAIL ================= */
.products-video-thumb-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
}

.products-video-thumb-wrapper img,
.products-video-thumb-wrapper video{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0;
    left:0;
}

.products-video-thumb-wrapper video{
    opacity:0;
    transition:0.3s ease;
}

/* play icon */
.products-video-play-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:50px;
    color:#fff;
    opacity:0.7;
}

/* ================= TITLE ================= */
.products-video-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
}

.products-video-title{
    font-size:14px;
    color:#ddd;
}

/* mini button */
.products-video-mini-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:6px 10px;
    font-size:12px;

    border-radius:999px;
    background:#f5f5f5;
    border:1px solid #e0e0e0;

    color:#000;
    text-decoration:none;
    transition:0.25s ease;
}

.products-video-mini-btn::after{
    content:"→";
    margin-left:6px;
}

.products-video-mini-btn:hover{
    background:#ff8c00;
    border-color:#ff8c00;
    color:#fff;
    transform:translateY(-2px);
}

/* ================= FOOTER ================= */
.products-video-footer{
    text-align:center;
    padding:30px;
    font-size:14px;
    color:#aaa;
    border-top:1px solid #222;
}

/* ================= 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;
    min-height:100svh; /* 🔥 fixes iPhone viewport bug */
    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 
====================================================== */

/* =========================================================
   INDEX SLIDER START RESPONSIVE
========================================================= */
@media(max-width:991px){

    .am-slide{

        flex-direction:column;

        justify-content:center;

        text-align:center;

        gap:40px;

    }

    .am-content,
    .am-image{

        width:100%;

    }

    .am-title{

        font-size:52px;

    }

}

@media(max-width:768px){

    .am-title{
        margin-bottom:30px;
        font-size:38px;
    }

    .am-subtitle{
        margin-top:30px;
        font-size:18px;
    }

    .am-indicators{
        bottom:20px;
        gap:10px;
    }

    .am-bg {
        animation-name: kenburns-mobile;
        animation-duration: 30s;
        animation-timing-function: ease-in-out;
    }
}

@keyframes kenburns-mobile {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@media (max-width:430px){

    .am-slider{
        height:100vh; /* IMPORTANT for mobile */
        overflow:hidden;
    }

    .am-slide{
        flex-direction:column;
        justify-content:center;
        align-items:center;
        padding:0 20px;
         padding-bottom:60px;
        transform:translateX(80px);
    }

     .am-title{
        font-size:28px;
        margin-bottom:40px;
        line-height:1.1;
    }

    .am-subtitle{
        font-size:16px;
        margin-top:40px;
        margin-bottom:20px;
        line-height:1.2;
        letter-spacing:2px;
    }

   .am-text{
    line-height:1.4;
    margin-bottom:20px;
}
.am-bg {
        animation-duration: 35s;
        animation-timing-function: ease-in-out;
    }


    .am-indicators{
        bottom:25px; /* FIX: was 90px */
        gap:10px;
    }
}

/* =========================================================
   END HERE SLIDER START RESPONSIVE
========================================================= */

/* =========================================================================
  START HERE REGULAR PRODUCTS/AFTER SLIDER  RESPONSIVE MOBILE START HERE
========================================================================= */

@media(max-width:768px){
    .regular-advanced-products{
        padding:90px 0;
    }

    .regular-product-image img{
        height:220px;
    }
}
/* =========================================================================
   END HERE REGULAR PRODUCTS/AFTER SLIDER  RESPONSIVE MOBILE START HERE
========================================================================= */

/* ======================================================
   PORT FOLIO RESPONSIVE BODY START HERE
====================================================== */
@media(max-width:768px){

    .port-products{
        padding:90px 0;
    }

    /* ===== Upgrade ===== */

    .port-grid{

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

        column-gap:24px;

        row-gap:50px;
    }

    .port-card{

        padding:28px;
    }

}

@media(max-width:576px){

    .port-grid{

        grid-template-columns:1fr;

        row-gap:40px;
    }

}

/* ======================================================
   END HERE PORT FOLIO RESPONSIVE BODY 
====================================================== */

/* ======================================================
  ADVANCED  PRODUCTS RESPONSIVE MOBILE START HERE
====================================================== */

@media (max-width:768px){

    .products-advanced-section{
        padding:100px 0;
    }

    .products-header{
        margin-bottom:65px;
    }
}

/* ======================================================
 END HERE ADVANCED PRODUCTS RESPONSIVE MOBILE 
====================================================== */


/* ======================================================
  3  PRODUCTS VIDEO RESPONSIVE START HERE 
====================================================== */
/* ================= RESPONSIVE ================= */
@media (max-width: 1000px){
    
    .products-video-see-more{
        right: clamp(20px, 8vw, 100px);
        top: 40px;
    }
}

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

/* ======================================================
  OVERLY VIDEO  START HERE 
====================================================== */
/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

    .vd-title{
        font-size:62px;
    }

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

}

@media(max-width:768px){

    .vd-title{
        font-size:32px;
    }

    .vd-description{
        font-size:16px;
    }

    .vd-counter-grid{
        grid-template-columns:1fr;
    }

    .vd-tag{
        width:100%;
    }

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

}
@media(max-width:430px){
    .vd-number{
        font-size:25px;
    }
}


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