/* ===== RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

/* ===== BODY ===== */
body{
    background: linear-gradient(135deg,#f2fbf8,#ffffff);
    overflow-x:hidden;
}

/* ===== HEADER ===== */
.am-header{
    position:fixed;
    width:100%;
    top:0;
    z-index:999;

    backdrop-filter: blur(14px);
    background: white;

    border-bottom:1px solid rgba(0,0,0,0.05);
    box-shadow:0 4px 20px rgba(0,0,0,0.08);

    transition:0.3s;
}

/* REMOVE GLOW LINE */
.am-header::after{
    display:none;
}

/* SCROLL */
.am-header.scrolled{
    background: rgba(255,255,255,0.9);
    box-shadow:0 8px 25px rgba(0,0,0,0.12);
}

/* ===== CONTAINER ===== */
.am-container{
    max-width:1200px;
    margin:auto;
    padding:12px 20px;

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

/* ===== LOGO ===== */
.am-logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.am-logo{
    width:200px;
}

/* ===== NAV ===== */
.am-navbar{
    display:flex;
}

.am-nav-list{
    display:flex;
    gap:30px;
    list-style:none;
}

.am-nav-list li{
    position:relative;
}

/* ===== NAV LINKS ===== */
.am-nav-list a{
    text-decoration:none;
    color:#000;
    font-weight:500;
    position:relative;
    padding:8px 2px;
    transition:0.3s;
}

/* HOVER COLOR */
.am-nav-list a:hover{
    color:#0bbf72;
}

/* UNDERLINE */
.am-nav-list a::after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:0;
    width:0%;
    height:2px;

    background: linear-gradient(270deg,#0bbf72,#00bfa6,#00f5d4,#0bbf72);
    background-size:300%;

    border-radius:5px;
    box-shadow:0 0 10px rgba(0,245,212,0.6);

    transition:width 0.4s ease;
}

/* HOVER LINE */
.am-nav-list a:hover::after{
    width:100%;
    animation: glowLine 3s linear infinite;
}

/* ACTIVE */
.am-active{
    color:#0bbf72;
}

.am-active::after{
    width:100%;
    animation: glowLine 3s linear infinite;
}

/* ===== MEGA DROPDOWN ===== */
.mega-parent{
    position:relative;
}

/* DROPDOWN BOX (COMPACT WIDTH) */
.am-mega-dropdown{
    position:absolute;
    top:50px;

    left:50%;
    transform:translateX(-50%) translateY(10px);

    width:420px;         /* REDUCED WIDTH */
    max-width:90vw;

    padding:15px;

    display:flex;
    flex-direction:column;   /* SINGLE COLUMN */
    gap:10px;

    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(14px);

    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.12);

    opacity:0;
    visibility:hidden;

    transition:0.3s ease;
    z-index:1000;
}
/* REMOVE LINE FROM DROPDOWN ITEMS */
.am-mega-item::after{
    display:none !important;
}
/* SHOW */
.mega-parent:hover .am-mega-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

/* CARD ITEM */
.am-mega-item{
    display:flex;
    align-items:center;
    gap:10px;

    width:100%;     /* FULL WIDTH */
    padding:10px 14px;

    background:#f4faf7;
    border-radius:10px;

    text-decoration:none;
    color:#000;

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

    transition:0.3s;
}

/* DOT */
.am-mega-item .dot{
    width:10px;
    height:10px;
    border-radius:50%;

    background: linear-gradient(45deg,#0bbf72,#00f5d4);
    box-shadow:0 0 10px rgba(0,245,212,0.8);
}

/* HOVER */
.am-mega-item:hover{
    transform:translateY(-3px);
    background:#ffffff;

    box-shadow:0 10px 20px rgba(0,245,212,0.2);
    color:#0bbf72;
}

/* ===== HAMBURGER ===== */
.am-hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.am-hamburger span{
    width:26px;
    height:3px;
    background:#000;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){

    .am-navbar{
        position:absolute;
        top:70px;
        left:0;
        width:100%;

        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);

        display:none;
    }

    .am-navbar.active{
        display:block;
    }

    .am-nav-list{
        flex-direction:column;
        padding:20px;
    }

    .am-hamburger{
        display:flex;
    }

    .am-mega-dropdown{
    position:static;           /* important */
    transform:none !important; /* remove center */

    width:100%;
    max-width:100%;

    display:none;
    flex-direction:column;
    gap:8px;

    padding:10px 0;

    background:transparent;
    box-shadow:none;
}

    .am-mega-dropdown.show-mega{
        display:flex;
    }

    .am-mega-item{
        width:100%;
    }
}

/* ===== ANIMATION ===== */
@keyframes glowLine{
    0%{ background-position:0% 50%; }
    100%{ background-position:200% 50%; }
}
/* ===== ACTIVE LINK (STRONG HIGHLIGHT) ===== */
.am-nav-list a.am-active{
    color:#0bbf72;
    font-weight:600;

    background:rgba(11,191,114,0.1);
    padding:6px 10px;
    border-radius:6px;
}

/* UNDERLINE */
.am-nav-list a.am-active::after{
    width:100%;
    height:3px;

    background:linear-gradient(90deg,#0bbf72,#00f5d4);
}


                                                                     /* ===== FOOTER ===== */
.ad-footer{
    background:#0f172a; /* dark navy */
    color:#fff;
    padding:10px 10px;
    text-align:center;
    font-size:14px;
}

/* CONTAINER */
.ad-footer-container{
    max-width:1200px;
    margin:auto;
}

/* TEXT LINE */
.ad-footer-line{
    margin:6px 0;
    line-height:1.6;
}

/* LINKS */
.ad-footer a{
    color:#0bbf72;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

.ad-footer a:hover{
    color:#1ed89a;
    text-decoration:underline;
}

/* DIVIDER */
.ad-divider{
    margin:0 8px;
    color:#fff;
}

/* LAST UPDATE */
.ad-last-update{
    color:#fff;
    font-size:13px;
}

/* FOOTER BORDER LINE */
.ad-footer{
    border-top:2px solid #0bbf72;
}

/* HOVER EFFECT */
.ad-footer:hover{
    background:#111827;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){

    .ad-footer{
        font-size:13px;
        padding:20px 10px;
    }

    .ad-footer-line{
        display:block;
    }

    .ad-divider{
        display:none;
    }

    .ad-last-update{
        display:block;
        margin-top:5px;
    }
}

                                                     /*index*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial;
}

/* ================= HERO ================= */
.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.hero-video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#3f51b5cc,#673ab7cc);
}

.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
}

.hero-title{
    font-size:46px;
    animation:fadeUp 1s ease;
}

.hero-text{
    margin:20px 0;
    font-size:18px;
    animation:fadeUp 1.3s ease;
}

.hero-btn{
    padding:12px 30px;
    background:#fff;
    color:#000;
    border-radius:30px;
    text-decoration:none;
    display:inline-block;
    animation:fadeUp 1.6s ease;
}


.about{
    padding:80px 20px;
    background:#f5f6f8;
}

.about-container{
    max-width:1200px;
    margin:auto;

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

    gap:30px; /* reduced gap */
}

/* LEFT TEXT */
.about-left{
    flex:1;
}

.about-left h2{
    font-size:30px;
    font-weight:700;
    margin-bottom:20px;
}

.about-left p{
    line-height:1.8;
    color:#555;
    font-size:15px;
    margin-right:0; /* removed big margin */
}

/* RIGHT */
.about-right{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* EXPERIENCE BOX */
.exp-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;

    transition:all 0.35s ease; /* smooth animation */
    cursor:pointer;            /* hand cursor */
}

/* HOVER EFFECT */
.exp-box:hover{
    transform:translateY(-6px) scale(1.02);  /* lift + slight zoom */
}

/* CIRCLE */
.exp-circle{
    position:absolute;
    width:260px;
    height:260px;
    background:linear-gradient(135deg,#bfe5d9,#dfeee8);
    border-radius:50%;
    left:-60px;
    z-index:0;

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

/* CONTENT */
.exp-content{
    display:flex;
    align-items:center;
    gap:20px;
    position:relative;
    z-index:1;
}

/* BIG NUMBER */
.exp-content h1{
    font-size:110px;
    font-weight:800;
    margin:0;
    color:#57c11a;
}

/* TEXT */
.exp-text span{
    display:block;
    font-size:20px;
    letter-spacing:2px;
    color:#777;
}

.exp-text b{
    font-size:30px;
    color:#111;
}


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

/* BASE */
.about-anim{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.9s ease;
}

/* LEFT TEXT */
.about-left.about-anim{
    transform:translateX(-80px);
}

/* RIGHT SIDE */
.about-right.about-anim{
    transform:translateX(80px) scale(0.9);
}

/* SHOW */
.about-anim.show{
    opacity:1;
    transform:translateX(0) scale(1);
}

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

@media(max-width:1024px){

    .about-container{
        gap:20px;
    }

    .exp-content h1{
        font-size:90px;
    }

}

/* TABLET */
@media(max-width:900px){

    .about-container{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .about-right{
        justify-content:center;
    }

    .exp-circle{
        left:0;
    }

}

/* MOBILE */
@media(max-width:600px){

    .about{
        padding:60px 15px;
    }

    .about-left h2{
        font-size:24px;
    }

    .about-left p{
        font-size:14px;
    }

    .exp-content{
        flex-direction:column;
        gap:10px;
    }

    .exp-content h1{
        font-size:70px;
    }

    .exp-text span{
        font-size:16px;
    }

    .exp-text b{
        font-size:22px;
    }

    .exp-circle{
        width:180px;
        height:180px;
        left:0;
    }

}

/* ======================
   SECTION
====================== */
.solutions{
    padding:80px 20px;
    background:#f4f4f4;
}

.sol-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    gap:60px;
    align-items:center;
}

/* ======================
   LEFT SLIDER
====================== */
.sol-left{
    flex:1;
    position:relative;
}

.sol-slider{
    position:relative;
    height:420px;
    overflow:hidden;
	position:relative;
height:420px;
overflow:hidden;
}

/* SLIDE */
.sol-slide{
    position:absolute;
    width:100%;
    height:100%;

    opacity:0;
    transform:scale(0.9);
    transition:0.5s;

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

}

.sol-slide.active{
    opacity:1;
    transform:scale(1);
	
}

/* IMAGE */
.sol-slide img{
    width:100%;
    max-height:420px;
    height:auto;
    object-fit:cover;
    border-radius:12px;
    display:block;
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
}


/* BOTTOM TEXT */
.sol-slide-bottom{
    position:relative;
    bottom:40px;
    left:20px;

    display:flex;
    align-items:center;
    gap:15px;

    background:#fff;
    padding:15px 20px;
    border-radius:8px;

    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* NUMBER */
.sol-slide-bottom .num{
    font-size:28px;
    font-weight:700;
}

/* LINE */
.sol-slide-bottom .line{
    width:2px;
    height:40px;
    background:#0bbf72;
}

/* TEXT */
.sol-slide-bottom h3{
    font-size:15px;
}

.sol-slide-bottom p{
    font-size:15px;
    color:#666;
}


/* ======================
   BUTTONS
====================== */
.sol-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:none;

    width:40px;
    height:40px;

    border-radius:50%;
    background:#fff;

    cursor:pointer;
    font-size:18px;

    z-index:10;

    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    transition:0.3s;
}

.sol-btn.prev{ left:10px; }
.sol-btn.next{ right:10px; }

.sol-btn:hover{
    background:#0bbf72;
    color:#fff;
    transform:translateY(-50%) scale(1.2);
}


/* ======================
   RIGHT CONTENT
====================== */
.sol-right{
    flex:1;
}

.sol-right h2{
    font-size:32px;
    margin-bottom:30px;
}

/* ITEMS */
.sol-item{
    display:flex;
    gap:15px;
    margin-bottom:25px;

    opacity:0;
    transform:translateX(50px);
    transition:0.6s;
}

.sol-item.show{
    opacity:1;
    transform:translateX(0);
}

/* ICON */
.icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:20px;

    background:#0bbf72;
    color:#fff;

    border-radius:50%;
    font-size:14px;
    margin-right:12px;

    box-shadow:0 0 10px rgba(11,191,114,0.6);
    transition:0.3s;
}

.sol-right li:hover .icon{
    transform:scale(1.2);
    box-shadow:0 0 20px rgba(11,191,114,0.9);
}

/* TEXT */
.sol-item h4{
    margin-bottom:5px;
}

.sol-item p{
    color:#555;
    font-size:15px;
}

@media(max-width:768px){

/* stack layout */
.sol-container{
flex-direction:column;
}

/* slider container */
.sol-slider{
height:auto;
overflow:visible;
}

/* show all slides */
.sol-slide{
position:relative;
opacity:1;              /* IMPORTANT FIX */
transform:none;
margin-bottom:25px;
display:block;
}

/* image */
.sol-slide img{
width:100%;
height:auto;
max-height:260px;
object-fit:contain;
}

/* text box under image */
.sol-slide-bottom{
position:relative;
bottom:auto;
left:auto;
margin-top:10px;
}

/* hide slider arrows */
.sol-btn{
display:none;
}

}

/* ================= CLIENT ================= */
.clients{
    text-align:center;
    padding:80px;
}
.clients h2{
	font-size:32px;
}
.client-track{
    overflow:hidden;
	padding-top:50px;
}

.client-slide{
    display:flex;
    gap:50px;
    animation:scroll 13s linear infinite;
}

.client-slide img{
    width:220px;
}

/* ================= STATS ================= */
.stats{
    text-align:center;
    padding:50px 10%;
}

.stats h2{
    font-size:33px;
    line-height:1.4;
}

/* HIGHLIGHT WORDS */
.stats h2 span{
    color:#0bbf72;
    font-weight:600;
    font-size:inherit;   /* inherit parent size */
}
.stats-row{
    display:flex;
    justify-content:space-around;
    margin-top:50px;
}
.stats-row h1{
	color:#0bbf72;
}
/* ===== CTA SECTION ===== */
.cta{
    position:relative;
    height:400px;
    overflow:hidden;
}

/* IMAGE */
.cta-bg{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
}

.cta-bg img{
    width:100%;
    height:180%;
    object-fit:cover;

    /* PARALLAX EFFECT */
    transform:scale(1.1);
    transition:transform 0.5s ease;
}

/* SCROLL PARALLAX */
.cta:hover .cta-bg img{
    transform:scale(1.2);
}

/* OVERLAY */
.cta-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;

    /* LIGHT + DARK GRADIENT EFFECT */
    background:linear-gradient(
        to right,
        rgba(0,0,0,0.75) 10%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.2) 80%,
        rgba(0,0,0,0.05) 100%
    );
}

/* CONTENT */
.cta-content{
    position:relative;
    z-index:3;
    height:100%;

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

    padding:0 8%;
}

/* TEXT */
.cta-content h2{
    color:#fff;
    font-size:42px;
    max-width:600px;
    line-height:1.3;

    animation:fadeLeft 1s ease;
}

/* BUTTON */
.cta-btn{
    background:rgba(255,255,255,0.15);
    color:#fff;
    padding:14px 35px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.3);

    backdrop-filter:blur(10px);
    text-decoration:none;

    transition:0.3s;
}

.cta-btn:hover{
    background:#0bbf72;
    border-color:#0bbf72;
    transform:translateY(-3px);
}

/* ANIMATION */
@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* ================= ANIMATION ================= */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
}

@keyframes leftIn{
    from{opacity:0;transform:translateX(-50px);}
    to{opacity:1;transform:translateX(0);}
}

@keyframes scroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

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

.about, .solutions{
    flex-direction:column;
}

.stats-row{
    flex-direction:column;
    gap:30px;
}

.cta-content{
    flex-direction:column;
    gap:20px;
    text-align:center;
}

}


                                                             /*contact*/



body{
    background: linear-gradient(135deg,#f2fbf8,#ffffff);
}

/* ===== HERO ===== */
.cu-hero{
    padding:100px 20px 40px;
    text-align:center;

    background: linear-gradient(135deg,#0bbf72,#00f5d4);
    color:#fff;

    box-shadow:0 10px 25px rgba(0,245,212,0.3);
}

.cu-hero h1{
    font-size:34px;
    font-weight:600;
}

/* ===== WRAPPER (FIX ALIGNMENT) ===== */
.cu-wrapper{
    max-width:1200px;
    margin:40px auto;
    padding:20px;

    display:grid;                      /* better than flex */
    grid-template-columns:1fr 1fr;
    gap:40px;

    align-items:start;                /* SAME LEVEL */
}

/* LEFT & RIGHT */
.cu-left,
.cu-right{
    display:flex;
    flex-direction:column;
}

/* ===== HEADINGS ===== */
.cu-left h2,
.cu-right h2{
    margin-bottom:20px;
    font-size:20px;
    color:#000;
    min-height:40px;                 /* align both sides */
}

/* ===== CONTACT ITEM ===== */
.cu-item{
    display:flex;
    align-items:flex-start;
    gap:8px;

    padding:6px 8px;
    margin-bottom:8px;
}

/* ICON BASE */
.cu-item i{
    font-size:15px;
    min-width:22px;
    text-align:center;
    margin-top:3px;
}

/* TEXT */
.cu-item p{
    margin:0;
    font-size:15px;
    line-height:1.4;
    color:#333;
}

/* ===== ICON COLORS ===== */
.cu-icon-location{
    color:#000;
}

.cu-icon-phone{
    color:red;
}

.cu-icon-mail{
    color:#000;
}

/* REMOVE TOOLTIP */
.cu-item::after{
    display:none !important;
}

/* ===== LOCATION ===== */
.cu-left h3{
    margin-top:10px;
    margin-bottom:6px;
    font-size:20px;
}

/* ===== MAP ===== */
.cu-map{
    margin-top:4px;
    border-radius:8px;
    overflow:hidden;

    box-shadow:0 6px 15px rgba(0,0,0,0.08);
}

.cu-map iframe{
    width:100%;
    height:240px;
    border:none;
}

/* ===== FORM ===== */
.cu-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* INPUT */
.cu-form input,
.cu-form textarea{
    width:100%;
    padding:14px;

    border:1px solid #ddd;
    border-radius:8px;

    outline:none;
    font-size:15px;

    transition:0.3s ease;
}

/* PLACEHOLDER SIZE */
.cu-form input::placeholder,
.cu-form textarea::placeholder{
    font-size:16px;
    color:#888;
}

/* FOCUS */
.cu-form input:focus,
.cu-form textarea:focus{
    border-color:#00f5d4;

    box-shadow:0 0 8px rgba(0,245,212,0.5),
               0 0 15px rgba(11,191,114,0.3);

    background:#fff;
}

/* PLACEHOLDER GLOW */
.cu-form input:focus::placeholder,
.cu-form textarea:focus::placeholder{
    color:black;
    
}

/* TEXTAREA */
.cu-form textarea{
    height:140px;
    resize:none;
}

/* BUTTON */
.cu-form button{
    padding:14px;

    border:none;
    border-radius:8px;

    background: linear-gradient(135deg,#0bbf72,#00f5d4);
    color:#fff;

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

    cursor:pointer;

    transition:0.3s;
}

/* BUTTON HOVER */
.cu-form button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,245,212,0.4);
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){

    .cu-wrapper{
        grid-template-columns:1fr;  /* stack */
        gap:30px;
    }

    .cu-hero{
        padding:70px 20px 30px;
    }

    .cu-hero h1{
        font-size:28px;
    }

    .cu-left h2,
    .cu-right h2{
        font-size:22px;
    }

    .cu-map iframe{
        height:220px;
    }
}
                                                                  /*applications*/


body{
    background:#fff;
}


/* ===== WRAPPER ===== */
.ap-wrapper{
    max-width:1200px;
    margin:60px auto;
    padding:20px;

    display:flex;
    flex-direction:column;
    gap:80px;
}

/* ===== ROW ===== */
.ap-row{
    display:flex;
    align-items:center;
    gap:50px;
}

/* LEFT / RIGHT */
.ap-left{
    flex-direction:row;
}

.ap-right{
    flex-direction:row-reverse;
}

/* ===== IMAGE ===== */
.ap-img{
    flex:1;
    overflow:hidden;
    border-radius:15px;
	
}

.ap-img img{
    width:100%;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transition:0.4s;
}

.ap-img img:hover{
    transform:scale(1.05);
    box-shadow:0 15px 40px rgba(0,245,212,0.4);
}

/* ===== TEXT ===== */
.ap-text{
    flex:1;
}

.ap-text h2{
    font-size:30px;
    margin-bottom:15px;
    color:#000;
}

.ap-text p{
    font-size:15px;
    line-height:1.7;
    color:#555;
}

/* ===== ANIMATION BASE ===== */
.ap-animate{
    opacity:0;
    transition:0.8s ease;
}

/* IMAGE ANIMATION */
.ap-img-anim{
    transform:translateX(-80px);
}

/* TEXT ANIMATION */
.ap-text-anim{
    transform:translateX(80px);
}

/* SHOW */
.ap-img-anim.show{
    opacity:1;
    transform:translateX(0);
}

.ap-text-anim.show{
    opacity:1;
    transform:translateX(0);
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){

    .ap-row{
        flex-direction:column;
        text-align:center;
    }

    .ap-right{
        flex-direction:column;
    }

    .ap-img-anim,
    .ap-text-anim{
        transform:translateY(40px);
    }

    .ap-text h2{
        font-size:20px;
    }
}
                                                         /*servicesupport*/


body{
    background:#fff;
}

/* ===== HERO ===== */
.ssn-hero{
    text-align:center;
    padding:80px 20px;
}

.ssn-hero img{
   width:50%;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transition:0.4s;
}
.ssn-hero img:hover{
    transform:scale(1.05);
    box-shadow:0 15px 40px rgba(0,245,212,0.4);
}

/* ===== TITLE ===== */
.ssn-title{
    text-align:center;
    margin-top:10px;
}

.ssn-title h2{
    font-size:20px;
    font-weight:500;
}

/* ===== HEADING ===== */
.ssn-heading{
    font-size:30px;
    margin:40px auto;
    max-width:1000px;
}

/* ===== INSTRUCTIONS ===== */
.ssn-instructions{
    max-width:1100px;
    margin:auto;
    padding:20px;
}

.ssn-list{
    margin-top:20px;
    padding-left:20px;
}

.ssn-item{
    font-size:15px;
    line-height:1.8;
    margin-bottom:20px;
}

/* ===== DIAGRAM ===== */
.ssn-diagram{
    text-align:center;
    margin:60px 0;
}

.ssn-diagram img{
    
    margin-bottom:20px;
	 width:50%;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transition:0.4s;
}
.ssn-diagram img:hover{
    transform:scale(1.05);
    box-shadow:0 15px 40px rgba(0,245,212,0.4);
}

.ssn-diagram h2{
    font-size:20px;
}

/* ===== NOTE ===== */
.ssn-note{
    max-width:1100px;
    margin:auto;
    padding:20px;
}

.ssn-note h3{
    font-size:20px;
    margin-bottom:20px;
}

.ssn-contact{
    margin-top:20px;
    font-weight:600;
}



/* SHOW */
.ssn-animate.show{
    opacity:1;
    transform:translateY(0);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){

    .ssn-heading{
        font-size:26px;
    }

    .ssn-item{
        font-size:15px;
    }

    .ssn-title h2{
        font-size:20px;
    }
}														 
                                                                /*aquacloud*/




/* ===== SECTION ===== */
.aqc-sec{
    padding:80px 20px;
}

/* ===== CONTAINER ===== */
.aqc-wrap{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

/* ===== REVERSE FIX (TEXT LEFT, IMAGE RIGHT) ===== */
.aqc-wrap.reverse{
    flex-direction:row;
}

/* ===== IMAGE ===== */
.aqc-img{
    flex:1;
    opacity:0;
    transform:translateX(80px);
    transition:0.8s ease;
}

.aqc-img img{
    width:100%;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transition:0.4s;
}

/* IMAGE HOVER */
.aqc-img img:hover{
    transform:scale(1.05);
    box-shadow:0 15px 40px rgba(0,245,212,0.4);
}

/* ===== TEXT ===== */
.aqc-text{
    flex:1;
    opacity:0;
    transform:translateX(-80px);
    transition:0.8s ease;
}

.aqc-text h2{
    font-size:30px;
    margin-bottom:20px;
    color:#222;
}

.aqc-text p{
    line-height:1.8;
    color:#555;
	font-size:15px;
}

/* ===== SHOW ANIMATION ===== */
.aqc-show{
    opacity:1 !important;
    transform:translateX(0) !important;
}


/* ===== FEATURE SECTION ===== */
.aqc-features{
    padding:70px 20px;
    text-align:center;
}
.aqc-features h2{
    margin-bottom:20px;
   font-size:30px; 
}


/* GRID */
.aqc-feature-grid{
    max-width:1100px;
    margin:auto;
 margin-top:20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:25px;
}

/* ===== SQUARE CARD ===== */
.aqc-card{
    position:relative;

    width:100%;
    aspect-ratio:1/1; /* PERFECT SQUARE */

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

    padding:20px;

    background:#fff;
    border-radius:14px;

    box-shadow:0 5px 15px rgba(0,0,0,0.08);

    transition:0.3s ease;

    overflow:hidden;
}

/* IMAGE */
.aqc-card img{
    width:80px;
    margin-bottom:12px;
    transition:0.3s;
}



/* ===== HOVER EFFECT ===== */
.aqc-card:hover{
    transform:translateY(-8px) scale(1.03);

    box-shadow:
        0 10px 25px rgba(0,245,212,0.3),
        0 0 15px rgba(11,191,114,0.2);
}

/* IMAGE ZOOM */
.aqc-card:hover img{
    transform:scale(1.1);
}

/* ===== GLOW BORDER ===== */
.aqc-card::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:14px;
    padding:1px;

    background:linear-gradient(135deg,#0bbf72,#00f5d4);

    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;

    opacity:0;
    transition:0.3s;
}

.aqc-card:hover::before{
    opacity:1;
}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){

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

}

/* ===== TABS ===== */
.aqc-tabs{
    padding:70px 20px;
}

/* TAB HEAD */
.aqc-tab-head{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin-bottom:40px;

}

/* TAB BUTTON */
.aqc-tab{
    background:none;
    border:none;
    font-size:20px;
    cursor:pointer;
    padding:10px;
    position:relative;


}

/* UNDERLINE */
.aqc-tab::after{
    content:"";
    position:absolute;
    bottom:-5px;
    left:0;
    width:0%;
    height:2px;
    background:#0bbf72;
    transition:0.3s;

}

/* ACTIVE */
.aqc-tab.active{
    color:#0bbf72;

}

.aqc-tab.active::after{
    width:100%;
}

/* TAB CONTENT */
.aqc-tab-body{
    display:none;
    max-width:900px;
    margin:auto;
    animation:fadeUp 0.6s ease;
}

.aqc-tab-body.active{
    display:block;
}

.aqc-tab-body h2{
    font-size:30px;
    margin-bottom:15px;
}

.aqc-tab-body h3{
    color:#0bbf72;
    margin-top:20px;
}

.aqc-tab-body p{
    color:#555;
    line-height:1.7;
	font-size:15px;
}

/* ===== SCROLL BUTTON ===== */
.aqc-top{
    position:fixed;
    bottom:25px;
    right:25px;

    width:55px;
    height:55px;

    border-radius:50%;
    border:none;

    font-size:20px;
    font-weight:bold;

    color:#fff;
    background:linear-gradient(135deg,#0bbf72,#00f5d4);

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

    cursor:pointer;

    box-shadow:0 6px 20px rgba(0,245,212,0.4);

    transition:0.3s;
    display:none;
}

/* HOVER */
.aqc-top:hover{
    transform:translateY(-5px) scale(1.1);

    box-shadow:
        0 0 10px rgba(0,245,212,0.8),
        0 0 20px rgba(11,191,114,0.6),
        0 0 30px rgba(0,245,212,0.5);
}

/* ===== ANIMATION ===== */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){

    .aqc-wrap{
        flex-direction:column !important;
        text-align:center;
    }

    .aqc-img,
    .aqc-text{
        opacity:1 !important;
        transform:none !important;
    }

    .aqc-text h2{
        font-size:20px;
    }

}
/* HIDDEN */
.aqc-more-text{
    display:none;
    margin-top:10px;

    line-height:1.8;
    color:#555;
}

/* SHOW */
.aqc-more-text.active{
    display:block;
}

/* ===== READ MORE BUTTON ===== */
.aqc-read-more{
    display:inline-block;
    margin-top:12px;

    font-weight:600;
    color:#000;

    cursor:pointer;
    position:relative;

    transition:0.3s;
}

/* ===== UNDERLINE ===== */
.aqc-read-more::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;

    width:100%;
    height:2px;

    background:#000;

    transition:0.3s;
}

/* ===== HOVER EFFECT ===== */
.aqc-read-more:hover{
    color:#0bbf72;
}

.aqc-read-more:hover::after{
    background:#0bbf72;
}

/* ===== ACTIVE (READ LESS) ===== */
.aqc-read-more.active{
    color:#0bbf72;
}

.aqc-read-more.active::after{
    background:#0bbf72;
}

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

.aqc-img-responsive{
    width:100%;            /* full width */
    max-width:100%;
    height:auto;           /* maintain ratio */

    display:block;
    margin:30px auto;

    border-radius:12px;

    object-fit:contain;    /* no crop */

    box-shadow:0 10px 25px rgba(0,0,0,0.12);

    transition:0.3s ease;
}

/* HOVER EFFECT */
.aqc-img-responsive:hover{
    transform:scale(1.02);
    box-shadow:0 15px 35px rgba(0,245,212,0.3);
}

                                                      /*services*/


/* ===== SECTION ===== */
.srvpro-sec{
    padding:60px 20px;
}

.srvpro-container{
    max-width:1200px;
    margin:auto;
}

.srvpro-wrap{
    display:flex;
    gap:50px;
    align-items:center;
}

/* IMAGE */
.srvpro-img{
    flex:1;
}

.srvpro-img img{
    width:100%;
    height:350px;             /* FIX HEIGHT */
    object-fit:cover;         /* IMPORTANT */
    border-radius:10px;
    transition:0.4s;
}

/* HOVER */
.srvpro-img img:hover{
    transform:scale(1.05);
    box-shadow:0 15px 30px rgba(0,245,212,0.4);
}

/* TEXT */
.srvpro-text{
    flex:1;
}

.srvpro-text h2{
    font-size:30px;
    margin-bottom:20px;
}


/* ===== INFO ROW ===== */
.srvpro-info{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-top:20px;
}

/* ===== LIST ===== */
.srvpro-list{
    list-style:none;
    flex:1;
}

.srvpro-list li{
    margin-bottom:15px;
    padding-left:30px;
    position:relative;
    font-size:15px;
}

/* ICON */
.srvpro-list li::before{
    content:"➜";
    position:absolute;
    left:0;
    color:#0bbf72;
    font-weight:bold;
}

/* ===== BADGE ===== */
.srvpro-badge{
    text-align:center;
    flex:1;
}

.srvpro-badge img{
    width:220px;
    max-width:100%;
}

.srvpro-badge p{
    margin-top:10px;
    font-size:15px;
}

/* DESC */
.srvpro-desc{
    margin-top:40px;
}

.srvpro-desc p{
    margin-bottom:20px;
    line-height:1.8;
    font-size:15px;
    margin-left:170px;
    margin-right:170px;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

.srvpro-desc p{
    margin-left:20px;
    margin-right:20px;
    font-size:14px;
}

}

/* ===== ANIMATION ===== */
.srvpro-anim{
    opacity:0;
    transition:0.8s;
}

.srvpro-left{
    transform:translateX(-80px);
}

.srvpro-right{
    transform:translateX(80px);
}

.srvpro-show{
    opacity:1;
    transform:translateX(0);
}

/* =========================
   SLIDER SECTION (CENTER FIX)
========================= */

.srvpro-slider{
    padding:100px 20px;     /* INCREASE BG SPACE */
    background:#1f2530;

    position:relative;
    min-height:500px;       /* BIG BLACK BG */

    display:flex;
    justify-content:center; /* CENTER HORIZONTALLY */
    align-items:center;     /* CENTER VERTICALLY */

    overflow:hidden;
}

/* ===== SLIDE ===== */
.srvpro-slide{
    position:absolute;

    width:100%;
    max-width:1100px;      /* CONTROL WIDTH */

    left:50%;              /* CENTER */
    top:50%;               /* CENTER */

    transform:translate(-50%, -50%) translateX(100%); /* START RIGHT */

    display:flex;
    gap:40px;
    align-items:center;

    background:#fff;
    padding:30px;
    border-radius:12px;

    height:348px;          /* FIX HEIGHT */

    opacity:0;
    transition:0.6s ease;

    box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

/* ACTIVE */
.srvpro-slide.active{
    opacity:1;
    transform:translate(-50%, -50%) translateX(0);
	
}

/* OTHER SLIDES */
.srvpro-slide:not(.active){
    transform:translate(-50%, -50%) translateX(-100%);
}

/* IMAGE */
.srvpro-slide-img{
    flex:1;
    height:110%;
}

.srvpro-slide-img img{
    width:100%;
    height:100%;
    object-fit:cover;      /* SAME SIZE IMAGE */
    border-radius:10px;
    transition:0.4s;
}

.srvpro-slide-img img:hover{
    transform:scale(1.05);
    box-shadow:0 10px 25px rgba(0,245,212,0.4);
}

/* TEXT */
.srvpro-slide-text{
    flex:1;
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.srvpro-slide-text h3{
    margin-bottom:20px;
}

/* LIMIT TEXT HEIGHT */
.srvpro-slide-text ul{
    max-height:300px;
    overflow:hidden;
}

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

.srvpro-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;

    background:#fff;
    color:#000;
    font-size:22px;
    cursor:pointer;

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

    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    z-index:10;

    transition:0.3s;
}

/* LEFT */
.srvpro-btn.prev{
    left:10px;
}

/* RIGHT */
.srvpro-btn.next{
    right:10px;
}

/* HOVER */
.srvpro-btn:hover{
    background:#0bbf72;
    color:#fff;
    transform:translateY(-50%) scale(1.2);
    box-shadow:0 0 15px rgba(0,245,212,0.6);
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){

    .srvpro-wrap{
        flex-direction:column;
    }

    .srvpro-text h2{
        font-size:20px;
    }

    /* SLIDER MOBILE */
    .srvpro-slider{
        height:auto;
    }

    .srvpro-slide{
        position:relative;
        flex-direction:column;
        text-align:center;
        height:auto;
    }

    .srvpro-slide-img{
        height:200px;
    }

    .srvpro-slide-text ul{
        max-height:none;
    }
}
/* =========================
   FINAL MOBILE SLIDER FIX
========================= */

@media(max-width:768px){

    /* REMOVE SIDE SHIFT */
    .srvpro-slide{
        left:0 !important;
        top:0 !important;
        transform:none !important;

        position:relative !important;

        width:95% !important;
        max-width:95%;

        margin:0 auto !important;

        height:auto !important;

        display:none;
        flex-direction:column;
        align-items:center;

        padding:20px;
    }

    .srvpro-slide.active{
        display:flex;
    }

    /* FIX OVERFLOW */
    .srvpro-slider{
        overflow:hidden;
        padding:40px 10px;
    }

    /* IMAGE CENTER */
    .srvpro-slide-img{
        width:100%;
        text-align:center;
    }

    .srvpro-slide-img img{
        width:100%;
        max-height:180px;
        object-fit:contain;
    }

    /* TEXT */
    .srvpro-slide-text{
        width:100%;
        text-align:center;
        margin-top:15px;
    }

    .srvpro-list li{
        text-align:left;
        font-size:14px;
        padding-left:20px;
    }

    /* BUTTON FIX */
    .srvpro-btn{
        top:50%;
        transform:translateY(-50%);
        z-index:20;
    }

    .srvpro-btn.prev{
        left:5px;
    }

    .srvpro-btn.next{
        right:5px;
    }
}
@media(min-width:769px){
    .srvpro-slide{
        left:50%;
        top:50%;
        transform:translate(-50%, -50%) translateX(100%);
    }

    .srvpro-slide.active{
        transform:translate(-50%, -50%) translateX(0);
    }
}
                                                                /*about*/

.ab-hero{
    position:relative;
    height:500px;
    overflow:hidden;
}

.ab-video{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* GLASS SHADOW OVER VIDEO */
.ab-hero-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.6)
    );
}

.ab-hero-content{
    position:relative;
    z-index:2;
    height:100%;

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

.ab-hero-content h1{
    color:#fff;
    font-size:30px;
}

.ab-hero{
    position:relative;
    height:450px;
    overflow:hidden;
}

/* VIDEO */
.ab-video{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ===== OVERLAY (PURPLE WATER EFFECT) ===== */
.ab-hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;

    /* MAIN COLOR OVERLAY */
    background:linear-gradient(
        to bottom,
        rgba(60, 70, 180, 0.75),
        rgba(80, 90, 200, 0.7),
        rgba(60, 70, 180, 0.85)
    );

    /* GLASS BLUR EFFECT */
    backdrop-filter: blur(3px);

    /* SOFT SHADOW FROM EDGES */
    box-shadow: inset 0 0 120px rgba(0,0,0,0.4);
}

/* CONTENT */
.ab-hero-content{
    position:relative;
    z-index:3;
    height:100%;

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

.ab-hero-content h1{
    color:#fff;
    font-size:48px;
    text-align:center;
    letter-spacing:1px;
}

/* ================= SECTION ================= */
.ab-about{
    padding:80px 20px;
    background:#f9fafc;
}

.ab-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:60px;
}

/* ================= LEFT SIDE ================= */
.ab-left-wrap{
    position:relative;
    flex:1;
}

/* MAIN IMAGE */
.ab-left img{
    width:100%;
    border-radius:15px;

    box-shadow:0 20px 50px rgba(0,0,0,0.2);

    transition:0.5s;
}

/* GLOW EFFECT */
.ab-left img:hover{
    transform:scale(1.05);
    box-shadow:0 0 40px rgba(11,191,114,0.5),
               0 20px 50px rgba(0,0,0,0.3);
}

/* OVER CARD */
.ab-card{
    position:absolute;
    bottom:-40px;
    right:-30px;

    width:220px;
    background:#fff;

    padding:20px;
    border-radius:12px;

    box-shadow:0 20px 50px rgba(0,0,0,0.15);

    transition:0.5s;
}

/* CARD IMAGE */
.ab-card img{
    width:100%;
}

/* CARD HOVER */
.ab-card:hover{
    transform:translateY(-10px) scale(1.05);
    box-shadow:0 0 30px rgba(92,92,224,0.5);
}



/* ================= RIGHT ================= */
.ab-right{
    flex:1;
}

.ab-right h2{
    font-size:30px;
    margin-bottom:20px;
    color:#222;
}

.ab-right p{
    font-size:15px;
    color:#555;
    line-height:1.7;
    margin-bottom:15px;
}

/* ================= ANIMATION ================= */
.ab-anim{
    opacity:0;
    transform:translateY(40px);
    transition:0.8s ease;
}

/* LEFT IMAGE */
.ab-anim.left{
    transform:translateX(-80px);
}

/* RIGHT TEXT */
.ab-anim.right{
    transform:translateX(80px);
}

/* ZOOM CARD */
.ab-anim.zoom{
    transform:scale(0.8);
}

/* SHOW */
.ab-anim.show{
    opacity:1;
    transform:translateX(0) scale(1);
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

    .ab-container{
        flex-direction:column;
        text-align:center;
    }

    .ab-card{
        position:relative;
        bottom:auto;
        right:auto;
        margin-top:20px;
    }

    .ab-right h2{
        font-size:28px;
    }
}

.core-values{
    padding:80px 20px;
    background:#f5f5f5;
    text-align:center;
}

/* TITLE */
.cv-title{
    font-size:30px;
    font-weight:700;
    margin-bottom:60px;
    color:#222;
}

/* CONTAINER */
.cv-container{
    display:flex;
    justify-content:space-between;
    gap:30px;
    max-width:1200px;
    margin:auto;
 

}

/* =========================
   ITEM
========================= */
.cv-item{
    flex:1;
    padding:40px 25px;

    border-radius:12px;
    background:#fff;

    /* LIGHT GREEN BORDER */
    border:2px solid rgba(11, 191, 114, 0.5);

    transition:0.4s;

    /* ANIMATION */
    opacity:0;
    transform:translateY(40px);

    /* SOFT GLOW */
    box-shadow:0 5px 20px rgba(11,191,114,0.1);
}

/* SHOW */
.cv-item.show{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   HOVER EFFECT
========================= */
.cv-item:hover{
    transform:translateY(-10px);

    /* STRONG BORDER */
    border-color:#0bbf72;

    /* GLOW EFFECT */
    box-shadow:0 15px 40px rgba(11,191,114,0.4);
}

/* =========================
   ICON
========================= */
.cv-icon{
    width:100px;
    height:100px;
    margin:0 auto 25px;

    border-radius:50%;

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

    font-size:30px;

    background:#eee;
   
color:#0bbf72;

    transition:0.4s;
}

/* HOVER ICON */
.cv-item:hover .cv-icon{
    background:linear-gradient(135deg,#0bbf72);
    color:#fff;

    box-shadow:0 15px 40px rgba(0,245,212,0.4);
}

/* ACTIVE ICON (3rd) */
.cv-icon.active{
    background:linear-gradient(135deg,#5c5ce0,#7c7cf0);
    color:#fff;

    box-shadow:0 15px 40px rgba(0,245,212,0.4);
}

/* =========================
   TEXT
========================= */
.cv-item h3{
    font-size:20px;
    margin-bottom:15px;
    color:#333;
}

.cv-item p{
    font-size:15px;
    color:#555;
    line-height:1.8;
    text-align:center;
    max-width:280px;
    margin:auto;
text-align:justify;
    
}
/* =========================
   ANIMATION DELAY
========================= */
.cv-item:nth-child(1){
    transition-delay:0.2s;
}
.cv-item:nth-child(2){
    transition-delay:0.4s;
}
.cv-item:nth-child(3){
    transition-delay:0.6s;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){

    .cv-container{
        flex-direction:column;
    }

    .cv-item{
        margin-bottom:30px;
    }

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

    .cv-icon{
        width:80px;
        height:80px;
        font-size:28px;
    }
}

/* ================= SKILLS ================= */

.skills{
    padding:80px 20px;
    background:#f5f5f5;
}

/* TITLE */
.skills-title{
    text-align:center;
    font-size:30px;
    font-weight:700;
    margin-bottom:60px;
    color:#222;
}

/* GRID */
.skills-container{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* ======================
   CARD
====================== */
.skill-card{
    display:flex;
    align-items:flex-start;
    gap:20px;

    background:#fff;
    padding:30px;
    border-radius:12px;

    position:relative;

    transition:0.4s ease;

    border:1px solid rgba(0,0,0,0.05);

    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* HOVER EFFECT (THEME GREEN) */
.skill-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(11,191,114,0.25),
        0 0 15px rgba(11,191,114,0.2);
}

/* LEFT GLOW BORDER ANIMATION */
.skill-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:0;
    width:4px;
    background:#0bbf72;
    border-radius:10px;

    transition:0.4s;
}

.skill-card:hover::before{
    height:100%;
}

/* ======================
   ICON
====================== */
.skill-icon{
    min-width:60px;
    height:60px;

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

    border-radius:50%;
    background:#f1f1f1;

    font-size:20px;
    color:#0bbf72;

    transition:0.4s;
}



/* ======================
   TEXT
====================== */
.skill-text h3{
    font-size:20px;
    margin-bottom:10px;
    color:#222;
}

.skill-text p{
    font-size:15px;
    color:#555;
    line-height:1.7;
    text-align:left;
}

/* ======================
   ANIMATION
====================== */
.skill-card{
    opacity:0;
    transform:translateY(40px);
}

/* ACTIVE */
.skill-card.show{
    opacity:1;
    transform:translateY(0);
    transition:0.6s ease;
}

/* ======================
   RESPONSIVE
====================== */
@media(max-width:900px){

    .skills-container{
        grid-template-columns:1fr;
    }

    .skill-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .skill-icon{
        margin-bottom:10px;
    }
}
                                                                    /*solutions*/

}

/* ================= CONTENT ================= */
.wm-content{
    padding:80px 20px;
    background:#fff;
}

/* CENTER CONTAINER */
.wm-container{
    max-width:1000px;
    margin:0 auto;           /* center horizontally */
    text-align:left;         /* align text properly */
	margin-top:30px;
}

/* HEADING */
.wm-content h2{
    font-size:30px;
    font-weight:700;
    margin-bottom:25px;
    line-height:1.3;
    color:#222;
	text-align:center;
}

/* PARAGRAPH */
.wm-content p{
    font-size:15px;
    color:#555;
    line-height:1.9;
    text-align:justify;      /* clean paragraph alignment */
	margin-right:100px;
	margin-left:100px;
	
}

/* ================= PRODUCTS ================= */
.wm-products{
    padding:80px 5%;
    background:#f5f6fa;
}

.wm-title{
    text-align:center;
    font-size:30px;
    margin-bottom:50px;
}

/* GRID */
.wm-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* CARD */
/* GRID */
.wm-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px; /* slightly smaller gap */
}

/* CARD */
.wm-card{
    background:#fff;
    padding:6px;              /* reduced padding */
    border-radius:10px;
    text-align:center;
    transition:all 0.35s ease;
    position:relative;
    border:2px solid rgba(11, 191, 114, 0.5);
}

/* IMAGE */
.wm-card img{
    width:100%;
    height:180px;             /* reduced from 220px */
    object-fit:contain;
    transition:0.4s;
	
}
/* CLICKABLE IMAGE */
.wm-img-open{
    cursor:pointer;          /* shows hand cursor */
}

/* OPTIONAL HOVER EFFECT */
.wm-img-open:hover{
    transform:scale(1.05);
}
/* TITLE */
.wm-card h4{
    margin:5px 0;             /* reduced spacing */
    font-size:14px;           /* slightly smaller */
    line-height:1.3;
}

/* BUTTON */
.wm-btn{
    background:#4b4bbd;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:5px;
    cursor:pointer;
    margin:5px;
    transition:all 0.3s ease;
}

/* SPEC BUTTON */
.wm-btn.spec{
    background:#0bbf72;
}

.wm-btn:hover{
    background:#b8b8ff; /* lighter purple */
    box-shadow:0 5px 12px rgba(75,75,189,0.25); /* softer shadow */
}

.wm-btn.spec:hover{
    background:#6df2b4;
    box-shadow:0 5px 15px rgba(11,191,114,0.5);
}

/* HOVER */
.wm-card:hover{
    transform:translateY(-10px);

    /* DARK & HIGHLIGHT SHADOW */
    box-shadow:
        0 20px 45px rgba(0,0,0,0.25),
        0 0 20px rgba(11,191,114,0.6);

    border-color:#0bbf72;
}


/* ================= MODAL ================= */



/* SPEC TABLE */
.wm-spec{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}

.wm-spec tr{
    border-bottom:1px solid #ddd;
}

.wm-spec td{
    padding:12px;
    font-size:14px;
}

.wm-spec td:first-child{
    font-weight:bold;
    width:35%;
}

.wm-spec tr:nth-child(even){
    background:#f2f2f2;
}

/* RESPONSIVE */
@media(max-width:1024px){
    .wm-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .wm-grid{
        grid-template-columns:1fr;
    }
}
.wm-hidden{
    display:none;
}

/* MODAL */
.wm-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:none;
    justify-content:center;
    align-items:center;
}

.wm-modal-content{
    background:#fff;
    padding:30px;
    border-radius:10px;
    width:600px;
    max-height:80vh;
    overflow:auto;
    position:relative;
}

.wm-close{
    float:right;
    font-size:25px;
    cursor:pointer;
	position:absolute;
    right:15px;
    top:10px;
    
    cursor:pointer;
}

/* TABLE */
.wm-spec{
    width:100%;
    border-collapse:collapse;
}

.wm-spec td{
    padding:10px;
    border-bottom:1px solid #ddd;
}

.wm-spec td:first-child{
    font-weight:bold;
    width:30%;
}
/* ================= IMAGE VIEWER ================= */

.wm-img-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

/* IMAGE */
.wm-img-modal img{
    max-width:90%;
    max-height:85vh;
    object-fit:contain;
}

/* CLOSE */
.wm-img-close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:35px;
    color:#fff;
    cursor:pointer;
}

/* BUTTONS */
.wm-img-prev,
.wm-img-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(255,255,255,0.2);
    border:none;
    color:#fff;
    font-size:30px;
    width:50px;
    height:50px;
    border-radius:50%;
    cursor:pointer;
}

.wm-img-prev{ left:30px; }
.wm-img-next{ right:30px; }

.wm-img-prev:hover,
.wm-img-next:hover{
    background:#0bbf72;
}
/* ================= SCROLL ANIMATION ================= */

/* default hidden */
.wm-content h2,
.wm-content p,
.wm-title,
.wm-card{
    opacity:0;
    transform:translateY(40px);
    transition:0.8s ease;
}

/* show */
.wm-show{
    opacity:1 !important;
    transform:translateY(0) !important;
}

/* delay for cards */
.wm-card:nth-child(1){ transition-delay:0.1s; }
.wm-card:nth-child(2){ transition-delay:0.2s; }
.wm-card:nth-child(3){ transition-delay:0.3s; }
.wm-card:nth-child(4){ transition-delay:0.4s; }
.wm-card:nth-child(5){ transition-delay:0.5s; }
.wm-card:nth-child(6){ transition-delay:0.6s; }
.wm-card:nth-child(7){ transition-delay:0.7s; }
.wm-card:nth-child(8){ transition-delay:0.8s; }
                                                                /*downloads*/



/* ===== SECTION ===== */
.dl-section{
    padding:70px 6%;
}

.dl-section.alt{
    background:#f0f2f7;
}

/* ===== MAIN TITLE ===== */
.dl-title{
    text-align:center;
    font-size:30px;
    margin-bottom:40px;
}

/* ===== SUBTITLE ===== */
.dl-subtitle{
    font-size:20px;
    margin:30px 0 20px 0;
    padding-left:10px;
    color:#222;
}

/* ===== GRID ===== */
.dl-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

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

/* ===== CARD ===== */
.dl-card{
    background:#fff;
    padding:20px;
    border-radius:15px;
    text-align:center;
    transition:0.4s;
    border:2px solid rgba(11,191,114,0.2);
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    opacity:0;
    transform:translateY(60px);
}

/* SHOW ANIMATION */
.dl-card.show{
    opacity:1;
    transform:translateY(0);
}

/* HOVER */
.dl-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(11,191,114,0.35);
    border-color:#0bbf72;
}

/* ===== CERT IMAGE ===== */
.dl-img{
    height:260px;
    overflow:hidden;
    border-radius:10px;
    margin-bottom:15px;
}

.dl-img img{
    width:100%;
    height:100%;
    object-fit:contain;   /* IMPORTANT FIX */
    transition:0.4s;
}

.dl-card:hover img{
    transform:scale(1.05);
}

/* ===== TITLE ===== */
.dl-card h3{
    font-size:15px;
    margin:15px 0;
    line-height:1.4;
}

/* ===== BUTTON ===== */
.dl-btn{
    display:inline-block;
    background:linear-gradient(135deg,#4b4bbd,#0bbf72);
    color:#fff;
    padding:10px 20px;
    border-radius:6px;
    text-decoration:none;
    transition:0.3s;
    font-size:14px;
}

.dl-btn:hover{
    transform:scale(1.05);
    box-shadow:0 5px 20px rgba(11,191,114,0.5);
}

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


@media(max-width:1024px){

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

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

    .dl-title{
        font-size:34px;
    }

}

/* ===== TABLET ===== */
@media(max-width:768px){

    .dl-section{
        padding:60px 20px;
    }

    .dl-grid,
    .dl2-grid{
        grid-template-columns:1fr;
    }

    .dl-img{
        height:220px;
    }

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

    .dl-card{
        padding:18px;
    }

    .dl-btn{
        width:100%;
        padding:12px;
    }

}

/* ===== SMALL MOBILE ===== */
@media(max-width:480px){

    .dl-title{
        font-size:24px;
    }

    .dl-card h3{
        font-size:14px;
    }

    .dl-img{
        height:180px;
    }

}