@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
      font-family:'Montserrat', sans-serif;

}

html{
    scroll-behavior:smooth;
}

/*
body{
    overflow-x:hidden;
    background:#000;
}*/

/* ================= LOGO TEXT STYLE ================= */

.logo-text h2,
.logo-text span,
.slider-content h1,
.about-content h2,
.category-title h2,
.product-title h2,
.footer-box h3{
    font-family:'Montserrat', sans-serif;
    letter-spacing:1px;
}

/* ================= NAV MENU FONT ================= */

.nav-menu li a{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
}

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

button,
.btn1,
.btn2,
.header-btn,
.about-btn{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
}

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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:0px 7%;

    /* WHITE HEADER */
    /*background:rgba(255,255,255,0.95);

    backdrop-filter:blur(10px);

    box-shadow:0 4px 20px rgba(0,0,0,0.08);*/

    transition:.4s;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
	padding:10px;
}

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

.brand-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

.logo-accent { color: #f59e0b; font-weight: 900; }


.logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:#111;
    text-decoration:none;
}

.logo img{
    width:70px;
    height:auto;
    border-radius:10px;
}

.logo-text h2{
    font-size:26px;
    font-weight:bold;
    color:#0a1f44;
    letter-spacing:1px;
}

.logo-text span{
    font-size:13px;
    color:#666;
    letter-spacing:3px;
}

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

.nav-menu{
    display:flex;
    list-style:none;
    gap:35px;
}

.nav-menu li a{
    color:#FFF;
    text-decoration:none;
    font-size:17px;
    font-weight:600;
    transition:.4s;
    position:relative;
}

.nav-menu li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:0%;
    height:2px;
    background:#0077ff;
    transition:.4s;
}

.nav-menu li a:hover::after{
    width:100%;
}

.nav-menu li a:hover{
    color:#0077ff;
}

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

.header-btn{
    padding:12px 28px;
    background:linear-gradient(45deg,#0047ff,#00bfff);
    border:none;
    border-radius:50px;
    color:#fff;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
    transition:.4s;

    box-shadow:0 8px 20px rgba(0,119,255,0.25);
}

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

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

.menu-toggle{
    display:none;
    font-size:28px;
    color:#111;
    cursor:pointer;
}

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

.hero-slider{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* ================= SLIDES ================= */

.slide{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    opacity:0;
    transition:1.2s ease-in-out;
}

.slide.active{
    opacity:1;
    z-index:1;
}

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

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:zoom 8s linear infinite;
}

@keyframes zoom{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.12);
    }
}

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

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.7)
    );
}

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

.slider-content{
    position:absolute;
    top:30%;
    left:1%;
    transform:translateY(-50%);
    color:#fff;
    z-index:5;
   /* max-width:700px;*/
}

.slider-content h1{
    font-size:35px;
    margin-bottom:20px;
    line-height:1.1;
    animation:fadeUp 1s ease;
}

.slider-content p{
    font-size:20px;
    line-height:1.8;
    margin-bottom:35px;
    color:#eee;
    animation:fadeUp 1.5s ease;
}

.slider-btns{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn1,
.btn2{
    padding:15px 35px;
    border:none;
    border-radius:50px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.4s;
}

.btn1{
    background:linear-gradient(45deg,#0047ff,#00bfff);
    color:#fff;
}

.btn2{
    background:transparent;
    border:2px solid #fff;
    color:#fff;
}

.btn1:hover,
.btn2:hover{
    transform:translateY(-5px);
}

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

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

/* ================= DOTS ================= */

.dots{
    position:absolute;
    bottom:35px;
    width:100%;
    display:flex;
    justify-content:center;
    gap:12px;
    z-index:10;
}

.dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    opacity:.5;
    cursor:pointer;
    transition:.4s;
}

.dot.active{
    width:40px;
    border-radius:20px;
    opacity:1;
    background:#00bfff;
}

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

@media(max-width:992px){

    .slider-content h1{
        font-size:55px;
    }

    .nav-menu{
        gap:20px;
    }

}

@media(max-width:768px){

    header{
        padding:15px 5%;
    }

    .menu-toggle{
        display:block;
    }

    .nav-menu{
        position:absolute;
        top:100%;
        left:-100%;
        width:100%;
        background:#fff;
        flex-direction:column;
        text-align:center;
        padding:30px 0;
        transition:.5s;

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

    .nav-menu.active{
        left:0;
    }

    .nav-menu li a{
        color:#111;
    }

    .header-btn{
        display:none;
    }

    .slider-content{
        left:1% !important;
        right:5% !important;
    }
   
   .slide img{
	   height:auto !important;
   }
    .slider-content h1{
        font-size:22px;
    }

    .slider-content p{
        font-size:16px;
        line-height:1.6;
		 margin-bottom:0px;
    }

    .logo img{
        width:180px;
    }

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

}

@media(max-width:480px){

    .hero-slider{
        height:90vh;
    }
 .slide img{
	   height:auto !important;
   }
    .slider-content h1{
        font-size:32px;
    }

    .slider-content p{
        font-size:14px;
    }

    .btn1,
    .btn2{
        width:100%;
    }

}
/* ================= ABOUT SECTION ================= */

.about-section{
    width:100%;
    padding:110px 7%;
    background:#f8fbff;
    overflow:hidden;
}

.about-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
    flex-wrap:wrap;
}

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

.about-image{
    flex:1 1 450px;
    position:relative;
    animation:leftMove 1.2s ease;
}

.about-img-box{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
}

.about-img-box img{
    width:100%;
    display:block;
    border-radius:30px;
    transition:1s;
}

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

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

.about-content{
    flex:1 1 500px;
    animation:rightMove 1.2s ease;
}

.about-tag{
    display:inline-block;
    padding:10px 22px;
    background:linear-gradient(45deg,#0047ff,#00bfff);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:25px;
    font-weight:bold;
}

.about-content h2{
    font-size:52px;
    line-height:1.2;
    color:#0a1f44;
    margin-bottom:25px;
}

.about-content p{
    font-size:17px;
    color:#555;
    line-height:1.9;
    margin-bottom:20px;
}

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

.about-features{
    margin-top:35px;
}

.feature-box{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:25px;
    padding:20px;
    background:#fff;
    border-radius:20px;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.feature-box:hover{
    transform:translateY(-8px);
}

.feature-box i{
    width:65px;
    height:65px;
    line-height:65px;
    text-align:center;
    border-radius:50%;
    background:linear-gradient(45deg,#0047ff,#00bfff);
    color:#fff;
    font-size:24px;
    flex-shrink:0;
}

.feature-box h4{
    font-size:22px;
    color:#0a1f44;
    margin-bottom:8px;
}

.feature-box p{
    margin:0;
    font-size:15px;
    color:#666;
    line-height:1.7;
}

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

.about-btn{
    margin-top:20px;
    padding:16px 40px;
    border:none;
    border-radius:50px;
    background:linear-gradient(45deg,#0047ff,#00bfff);
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.4s;
    box-shadow:0 12px 25px rgba(0,119,255,0.25);
}

.about-btn:hover{
    transform:translateY(-5px);
}

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

@keyframes leftMove{

    from{
        opacity:0;
        transform:translateX(-100px);
    }

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

}

@keyframes rightMove{

    from{
        opacity:0;
        transform:translateX(100px);
    }

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

}

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

@media(max-width:992px){

    .about-content h2{
        font-size:40px;
    }

}

@media(max-width:768px){

    .about-section{
        padding:80px 5%;
    }

    .about-container{
        gap:50px;
    }

    .about-content h2{
        font-size:32px;
    }

    .about-content p{
        font-size:15px;
    }

    .feature-box{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

}

@media(max-width:480px){

    .about-content h2{
        font-size:26px;
    }

    .about-tag{
        font-size:12px;
    }

    .feature-box h4{
        font-size:20px;
    }

    .about-btn{
        width:100%;
    }

}

/* ================= SHOP CATEGORY ================= */
/*====================
SHOP CATEGORY SECTION
====================*/
.shop-category{
    width:100%;
    padding:80px 5%;
    background:linear-gradient(135deg,#0f172a,#1e293b,#334155);
    position:relative;
    overflow:hidden;
}

/* Background Glow Effect */
.shop-category::before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,0.06);
    border-radius:50%;
    top:-120px;
    left:-120px;
    filter:blur(10px);
}

.shop-category::after{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(255,255,255,0.05);
    border-radius:50%;
    bottom:-100px;
    right:-100px;
    filter:blur(10px);
}

/* TITLE */
.category-title{
    text-align:center;
    margin-bottom:50px;
    position:relative;
    z-index:2;
}

.category-title h2{
    font-size:42px;
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    position:relative;
    display:inline-block;
}

.category-title h2::after{
    content:'';
    width:80px;
    height:4px;
    background:#00d4ff;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-12px;
    border-radius:10px;
}

/* SLIDER */
.category-slider{
    width:100%;
    overflow:hidden;
    position:relative;
    z-index:2;
}

.category-track{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    justify-content:center;
}

/* CATEGORY ITEM */
.category-item{
    width:220px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
    border-radius:25px;
    padding:25px 20px;
    text-align:center;
    transition:0.4s ease;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}

.category-item::before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );
    transition:0.6s;
}

.category-item:hover::before{
    left:100%;
}

.category-item:hover{
    transform:translateY(-12px) scale(1.03);
    box-shadow:0 15px 35px rgba(0,0,0,0.35);
    border-color:#00d4ff;
}

/* IMAGE */
.category-img{
    width:140px;
    height:140px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;
    border:4px solid rgba(255,255,255,0.15);
    transition:0.4s;
}

.category-item:hover .category-img{
    border-color:#00d4ff;
    transform:rotate(3deg) scale(1.05);
}

.category-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s;
}

.category-item:hover img{
    transform:scale(1.1);
}

/* TEXT */
.category-item h3{
    margin-top:18px;
    color:#fff;
    font-size:15px;
    font-weight:600;
    letter-spacing:0.5px;
}

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

    .shop-category{
        padding:60px 20px;
    }

    .category-title h2{
        font-size:30px;
    }

    .category-track{
        gap:20px;
    }

    .category-item{
        width:160px;
        padding:20px 15px;
    }

    .category-img{
        width:100px;
        height:100px;
    }

    .category-item h3{
        font-size:16px;
    }

}
/* ================= PRODUCT SECTION ================= */

.product-section{
    width:100%;
    padding:110px 6%;
    background:#ffffff;
    overflow:hidden;
}

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

.product-title{
    text-align:center;
    margin-bottom:70px;
}

.product-title span{
    display:inline-block;
    padding:10px 24px;
    background:linear-gradient(45deg,#0047ff,#00bfff);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:22px;
}

.product-title h2{
    font-size:15px;
    color:#0a1f44;
    margin-bottom:20px;
}

.product-title p{
    max-width:750px;
    margin:auto;
    color:#666;
    font-size:18px;
    line-height:1.8;
}

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

.product-slider{
    width:100%;
    overflow:hidden;
}

.product-track{
    display:flex;
    gap:30px;
    width:max-content;

    animation:productSlide 450s linear infinite;
}

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

.product-card{
    width:340px;
    background:#fff;

    border-radius:30px;

    overflow:hidden;

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

    transition:0.5s;

    position:relative;
}

.product-card:hover{
    transform:translateY(-15px);
}

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

.product-img{
    width:100%;
    height:auto;
    overflow:hidden;
    position:relative;
}

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

    transition:1s;
}

.product-card:hover img{
    transform:scale(1.12);
}

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

.product-badge{
    position:absolute;
    top:18px;
    left:18px;

    background:linear-gradient(45deg,#0047ff,#00bfff);

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;
    font-weight:bold;
}

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

.product-content{
    padding:18px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,0.95),
        rgba(240,248,255,0.92)
    );
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,0.4);
}

/* Glow Effect */
.product-content::before{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(0,217,255,0.10);
    border-radius:50%;
    top:-80px;
    right:-80px;
    transition:0.5s;
}

/* Hover Animation */
.product-card:hover .product-content::before{
    transform:scale(1.3);
    opacity:0.8;
}

/* Bottom Animated Line */
.product-content::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        #00d9ff,
        #2563eb,
        #8b5cf6
    );
    background-size:300%;
    animation:borderMove 4s linear infinite;
}

@keyframes borderMove{
    0%{
        background-position:0%;
    }
    100%{
        background-position:300%;
    }
}

/* TEXT */
.product-content h3{
    font-size:16px;
    color:#0a1f44;
    margin-bottom:6px;
    position:relative;
    z-index:2;
    font-weight:700;
}

.product-content p{
    color:#555;
    font-size:15px;
    line-height:1.8;
    margin-bottom:0;
    position:relative;
    z-index:2;
}
/* ================= BOTTOM ================= */

.product-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.product-bottom h4{
    font-size:28px;
    color:#0077ff;
}

.product-bottom button{
    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:linear-gradient(45deg,#0047ff,#00bfff);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    transition:.4s;
}

.product-bottom button:hover{
    transform:rotate(360deg);
}

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

@keyframes productSlide{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

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

@media(max-width:992px){

    .product-title h2{
        font-size:42px;
    }

    .product-card{
        width:300px;
    }

}

@media(max-width:768px){

    .product-section{
        padding:80px 5%;
    }

    .product-title h2{
        font-size:34px;
    }

    .product-title p{
        font-size:15px;
    }

    .product-track{
        gap:20px;
    }

    .product-card{
        width:260px;
    }

    .product-img{
        height:220px;
    }

    .product-content{
        padding:22px;
    }

    .product-content h3{
        font-size:24px;
    }

}

@media(max-width:480px){

    .product-title h2{
        font-size:28px;
    }

    .product-card{
        width:230px;
    }

    .product-img{
        height:200px;
    }

    .product-content h3{
        font-size:20px;
    }

    .product-content p{
        font-size:14px;
    }

}

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

.footer-section{
    width:100%;
    background:#06142e;
    color:#fff;
    padding-top:90px;
    position:relative;
    overflow:hidden;
}

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

.footer-container{
    width:100%;
    padding:0 7% 60px;

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

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

.footer-box{
    animation:fadeUp 1s ease;
}

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

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

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

.footer-box p{
    font-size:15px;
    color:#c9d4e5;
    line-height:1.9;
    margin-bottom:15px;
}

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

.footer-box h3{
    font-size:24px;
    margin-bottom:28px;
    position:relative;
}

.footer-box h3::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-10px;

    width:60px;
    height:3px;

    background:linear-gradient(45deg,#00bfff,#0047ff);

    border-radius:10px;
}

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

.footer-box ul{
    list-style:none;
}

.footer-box ul li{
    margin-bottom:16px;
}

.footer-box ul li a{
    text-decoration:none;
    color:#c9d4e5;
    transition:.4s;
    font-size:15px;
}

.footer-box ul li a:hover{
    color:#00bfff;
    padding-left:8px;
}

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

.footer-box p i{
    color:#00bfff;
    margin-right:10px;
}

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

.footer-social{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.footer-social a{
    width:45px;
    height:45px;

    border-radius:50%;

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

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

    color:#fff;

    font-size:18px;

    transition:.4s;
}

.footer-social a:hover{
    background:linear-gradient(45deg,#0047ff,#00bfff);

    transform:translateY(-8px);
}

/* ================= COPYRIGHT ================= */

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);

    text-align:center;

    padding:22px 10px;

    background:#041022;
}

.footer-bottom p{
    color:#c9d4e5;
    font-size:15px;
}

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

@media(max-width:1100px){

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

}

@media(max-width:768px){

    .footer-section{
        padding-top:70px;
    }

    .footer-container{
        padding:0 5% 50px;

        grid-template-columns:1fr;

        gap:40px;
    }

    .footer-logo{
        width:150px;
    }

    .footer-box h3{
        font-size:22px;
    }

}

@media(max-width:480px){

    .footer-box h3{
        font-size:20px;
    }

    .footer-box p,
    .footer-box ul li a{
        font-size:14px;
    }

    .footer-social a{
        width:40px;
        height:40px;
        font-size:16px;
    }

    .footer-bottom p{
        font-size:13px;
    }

}

/* ================= PREMIUM GLOBAL ANIMATION ================= */

.product-card,
.category-item,
.feature-box,
.footer-box,
.about-img-box,
.header-btn,
.btn1,
.btn2,
.about-btn{
    transition:all .5s ease;
}

/* ================= FLOATING EFFECT ================= */

@keyframes floating{

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

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

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

}

.category-img{
    animation:floating 4s ease-in-out infinite;
}

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

.product-card:hover,
.feature-box:hover{

    box-shadow:0 20px 60px rgba(0,119,255,0.25);

}

/* ================= BUTTON SHINE EFFECT ================= */

.btn1,
.btn2,
.header-btn,
.about-btn{

    position:relative;
    overflow:hidden;

}

.btn1::before,
.btn2::before,
.header-btn::before,
.about-btn::before{

    content:'';
    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.btn1:hover::before,
.btn2:hover::before,
.header-btn:hover::before,
.about-btn:hover::before{

    left:120%;

}

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

header{
    animation:slideDown 1s ease;
}

@keyframes slideDown{

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

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

}

/* ================= IMAGE PARALLAX ZOOM ================= */

.about-img-box img,
.product-img img{

    transition:1s ease;

}

.about-img-box:hover img,
.product-card:hover img{

    transform:scale(1.12);

}

/* ================= SOCIAL ICON EFFECT ================= */

.footer-social a:hover{

    transform:translateY(-8px) rotate(360deg);

}

/* ================= NAVBAR LINK EFFECT ================= */

.nav-menu li a{

    overflow:hidden;

}

.nav-menu li a::before{

    content:'';
    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:-100%;

   

    transition:.5s;
    z-index:-1;

}

.nav-menu li a:hover::before{

    left:0;

}

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

html{
    scroll-behavior:smooth;
}

/* ================= HERO TEXT ANIMATION ================= */

.slider-content h1{

    animation:textGlow 3s infinite alternate;

}

@keyframes textGlow{

    from{
        text-shadow:0 0 10px rgba(255,255,255,0.2);
    }

    to{
        text-shadow:0 0 25px rgba(0,191,255,0.7);
    }

}

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

.footer-section::before{

    content:'';

    position:absolute;

    top:-200px;
    left:-200px;

    width:400px;
    height:400px;

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

    border-radius:50%;

    filter:blur(100px);

}

/* ================= PRODUCT BADGE PULSE ================= */

.product-badge{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
    }

}

.about-section{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#f5fbff,#eef7ff);
}

/* Background Effects Container */

.about-bg-effects{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
}

/* Rings */

.ring{
    position:absolute;
    border-radius:50%;
    border:2px dashed rgba(0,191,255,.20);
}

/* Ring Positions */

.ring1{
    width:500px;
    height:500px;
    top:-150px;
    left:-150px;
    animation:rotateClock 30s linear infinite;
}

.ring2{
    width:350px;
    height:350px;
    top:40%;
    left:15%;
    animation:rotateAnti 20s linear infinite;
}

.ring3{
    width:600px;
    height:600px;
    bottom:-250px;
    right:-150px;
    animation:rotateClock 40s linear infinite;
}

.ring4{
    width:250px;
    height:250px;
    top:20%;
    right:10%;
    animation:rotateAnti 15s linear infinite;
}

/* Glow Balls */

.ring::before{
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    background:#00bfff;
    border-radius:50%;
    box-shadow:0 0 20px #00bfff;
    top:-8px;
    left:50%;
}

/* Rotation */

@keyframes rotateClock{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes rotateAnti{
    from{
        transform:rotate(360deg);
    }
    to{
        transform:rotate(0deg);
    }
}

/* Content Above Effects */

.about-container{
    position:relative;
    z-index:10;
}

.about-section::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(0,191,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,191,255,.05) 1px, transparent 1px);

    background-size:50px 50px;
    animation:gridRotate 20s linear infinite;
}

@keyframes gridRotate{
    from{
        transform:rotate(0deg) scale(1.2);
    }
    to{
        transform:rotate(360deg) scale(1.2);
    }
}

/* Floating Bubbles */

.bubble{
    position:absolute;
    border-radius:50%;
    background:rgba(0,191,255,0.12);
    border:1px solid rgba(255,255,255,0.3);
    backdrop-filter:blur(5px);
    box-shadow:
    0 0 15px rgba(0,191,255,.3);
}

/* Bubble Positions */

.b1{
    width:40px;
    height:40px;
    left:10%;
    top:20%;
    animation:float1 12s ease-in-out infinite;
}

.b2{
    width:25px;
    height:25px;
    left:30%;
    top:70%;
    animation:float2 10s ease-in-out infinite;
}

.b3{
    width:60px;
    height:60px;
    right:15%;
    top:25%;
    animation:float3 14s ease-in-out infinite;
}

.b4{
    width:35px;
    height:35px;
    right:30%;
    bottom:15%;
    animation:float1 11s ease-in-out infinite;
}

.b5{
    width:20px;
    height:20px;
    left:55%;
    top:40%;
    animation:float2 9s ease-in-out infinite;
}

/* Floating Motion */

@keyframes float1{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-30px);
    }
}

@keyframes float2{
    0%,100%{
        transform:translateY(0) translateX(0);
    }
    50%{
        transform:translateY(-25px) translateX(15px);
    }
}

@keyframes float3{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(35px);
    }
}

.bubble::before{
    content:'';
    position:absolute;
    inset:-10px;
    border-radius:50%;
    background:rgba(0,191,255,.15);
    filter:blur(15px);
}

.shop-category{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#071428,#102445,#1b355f);
}

/* Content upar rahe */
.category-title,
.category-slider{
    position:relative;
    z-index:10;
}

/* Moving Orbs */

.bg-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.5;
}

.orb1{
    width:350px;
    height:350px;
    background:#00bfff;
    top:-100px;
    left:-100px;
    animation:orbMove1 12s infinite alternate ease-in-out;
}

.orb2{
    width:300px;
    height:300px;
    background:#3b82f6;
    right:-100px;
    top:30%;
    animation:orbMove2 15s infinite alternate ease-in-out;
}

.orb3{
    width:400px;
    height:400px;
    background:#06b6d4;
    bottom:-150px;
    left:40%;
    animation:orbMove3 18s infinite alternate ease-in-out;
}

@keyframes orbMove1{
    to{
        transform:translate(250px,150px);
    }
}

@keyframes orbMove2{
    to{
        transform:translate(-200px,100px);
    }
}

@keyframes orbMove3{
    to{
        transform:translate(150px,-120px);
    }
}

/* Animated Grid */

.grid-overlay{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:60px 60px;
    animation:gridMove 12s linear infinite;
    z-index:1;
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }
    to{
        background-position:60px 60px;
    }
}

/* Cards Premium */

.category-item{
    position:relative;
    z-index:5;
    backdrop-filter:blur(10px);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
}

.category-item:hover{
    transform:translateY(-10px);
    box-shadow:
        0 0 25px rgba(0,191,255,.5),
        0 0 50px rgba(0,191,255,.25);
}

.product-section{
    position:relative;
    overflow:hidden;
    background:#f8fafc;
}

/* Content */

.product-title,
.product-slider{
    position:relative;
    z-index:10;
}

/* Blob Background */

.blob-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(50px);
    opacity:.35;
}

/* Blob 1 */

.blob1{
    width:450px;
    height:450px;
    background:linear-gradient(45deg,#00bfff,#2563eb);
    top:-150px;
    left:-150px;
    animation:blobMove1 18s infinite alternate ease-in-out;
}

/* Blob 2 */

.blob2{
    width:400px;
    height:400px;
    background:linear-gradient(45deg,#06b6d4,#3b82f6);
    right:-100px;
    top:20%;
    animation:blobMove2 20s infinite alternate ease-in-out;
}

/* Blob 3 */

.blob3{
    width:500px;
    height:500px;
    background:linear-gradient(45deg,#38bdf8,#0ea5e9);
    bottom:-200px;
    left:35%;
    animation:blobMove3 25s infinite alternate ease-in-out;
}

@keyframes blobMove1{
    0%{
        border-radius:40% 60% 70% 30%;
        transform:translate(0,0);
    }
    100%{
        border-radius:70% 30% 40% 60%;
        transform:translate(200px,120px);
    }
}

@keyframes blobMove2{
    0%{
        border-radius:60% 40% 30% 70%;
        transform:translate(0,0);
    }
    100%{
        border-radius:30% 70% 60% 40%;
        transform:translate(-180px,100px);
    }
}

@keyframes blobMove3{
    0%{
        border-radius:50% 50% 60% 40%;
        transform:translate(0,0);
    }
    100%{
        border-radius:40% 60% 30% 70%;
        transform:translate(150px,-100px);
    }
}

.product-section{
    position:relative;
    overflow:hidden;
    background:#f8fbff;
}

.product-title,
.product-slider{
    position:relative;
    z-index:10;
}

/* DOTS BACKGROUND */

.dots-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:1;
}

.dots-bg span{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#00bfff;
    opacity:.4;
    box-shadow:0 0 10px rgba(0,191,255,.8);
    animation:floatDots 15s linear infinite;
}

/* Random Positions */

.dots-bg span:nth-child(1){left:5%;top:10%;}
.dots-bg span:nth-child(2){left:15%;top:30%;}
.dots-bg span:nth-child(3){left:25%;top:70%;}
.dots-bg span:nth-child(4){left:35%;top:20%;}
.dots-bg span:nth-child(5){left:45%;top:80%;}
.dots-bg span:nth-child(6){left:55%;top:40%;}
.dots-bg span:nth-child(7){left:65%;top:60%;}
.dots-bg span:nth-child(8){left:75%;top:15%;}
.dots-bg span:nth-child(9){left:85%;top:50%;}
.dots-bg span:nth-child(10){left:95%;top:25%;}

/* Repeat Pattern */

.dots-bg span:nth-child(n){
    animation-delay:calc(var(--i) * .2s);
}

@keyframes floatDots{
    0%{
        transform:translateY(0px);
        opacity:.2;
    }

    50%{
        transform:translateY(-30px);
        opacity:1;
    }

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

.product-section::before{
    content:'';
    position:absolute;
    inset:0;

    background-image:
    radial-gradient(circle,#00bfff 1px,transparent 1px);

    background-size:40px 40px;
    opacity:.15;

    animation:dotsMove 20s linear infinite;
}

@keyframes dotsMove{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(40px);
    }
}



/* ==========================
   BACK TO TOP BUTTON
========================== */

.back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;

    width:55px;
    height:55px;

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

    background:linear-gradient(
        135deg,
        #00bfff,
        #2563eb
    );

    color:#fff;
    font-size:22px;
    text-decoration:none;

    border-radius:50%;

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:.4s;

    box-shadow:
    0 10px 25px rgba(0,191,255,.4);
}

/* Glow Ring */

.back-to-top::before{
    content:'';
    position:absolute;
    inset:-8px;

    border-radius:50%;
    border:2px solid rgba(0,191,255,.4);

    animation:pulseRing 2s infinite;
}

@keyframes pulseRing{
    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(1.5);
        opacity:0;
    }
}

.back-to-top:hover{
    transform:translateY(-8px);
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
}

/* Arrow Animation */

.back-to-top i{
    animation:arrowMove 1s infinite alternate;
}

@keyframes arrowMove{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-4px);
    }
}


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


header{
    position:relative;
    z-index:9999;
}
.top-header{
    position:relati
	z-index:99999;ve;
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 7%;

    color:#fff;

    background:linear-gradient(
        270deg,
        #0d1128,
        #102445,
        #00bfff,
        #102445
    );

    background-size:400% 400%;

    animation:topGradient 12s ease infinite;

    overflow:hidden;
}

/* Animated Background Glow */

.top-header::before{
    content:'';
    position:absolute;
    width:300px;
    height:300px;

    background:rgba(255,255,255,.15);
    border-radius:50%;

    filter:blur(80px);

    left:-100px;
    top:-150px;

    animation:moveGlow 10s infinite alternate;
}

@keyframes moveGlow{
    to{
        transform:translateX(300px);
    }
}

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

.top-left,
.top-right{
    position:relative;
    z-index:2;
}

.top-left{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.top-left span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}

.top-left i{
    color:#00e5ff;
}

.top-right{
    display:flex;
    gap:15px;
}

.top-right a{
    color:#fff;
    transition:.3s;
}

.top-right a:hover{
    color:#00e5ff;
    transform:translateY(-3px);
}

/* Mobile */

@media(max-width:768px){

    .top-header{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .top-left{
        justify-content:center;
        gap:12px;
    }

    .top-left span{
        font-size:12px;
    }
}
/*=========================================
CHEMICAL PARTICLES
=========================================*/

#particles{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;

z-index:3;

}

.particle{

position:absolute;

border-radius:50%;

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

backdrop-filter:blur(8px);

animation:particleMove linear infinite;

}

/* Different Sizes */

.p1{
width:10px;
height:10px;
left:5%;
top:110%;
animation-duration:15s;
}

.p2{
width:18px;
height:18px;
left:15%;
top:120%;
animation-duration:18s;
}

.p3{
width:12px;
height:12px;
left:30%;
top:115%;
animation-duration:14s;
}

.p4{
width:25px;
height:25px;
left:42%;
top:120%;
animation-duration:22s;
}

.p5{
width:15px;
height:15px;
left:58%;
top:118%;
animation-duration:16s;
}

.p6{
width:30px;
height:30px;
left:70%;
top:120%;
animation-duration:24s;
}

.p7{
width:20px;
height:20px;
left:80%;
top:115%;
animation-duration:20s;
}

.p8{
width:12px;
height:12px;
left:90%;
top:118%;
animation-duration:17s;
}

.p9{
width:26px;
height:26px;
left:50%;
top:122%;
animation-duration:19s;
}

.p10{
width:14px;
height:14px;
left:65%;
top:120%;
animation-duration:13s;
}

/* Floating */

@keyframes particleMove{

0%{

transform:

translateY(0)

translateX(0)

rotate(0deg);

opacity:0;

}

10%{

opacity:1;

}

50%{

transform:

translateY(-500px)

translateX(40px)

rotate(180deg);

}

100%{

transform:

translateY(-1200px)

translateX(-50px)

rotate(360deg);

opacity:0;

}

}

/* Glow */

.particle::before{

content:"";

position:absolute;

width:100%;

height:100%;

border-radius:50%;

background:#00d9ff;

filter:blur(12px);

opacity:.35;

}

.light-sweep{
    position:absolute;
    inset:0;
    background:linear-gradient(
        110deg,
        transparent 20%,
        rgba(255,255,255,.18) 45%,
        transparent 70%
    );
    animation:sweep 7s linear infinite;
    pointer-events:none;
}

@keyframes sweep{

0%{
transform:translateX(-140%);
}

100%{
transform:translateX(140%);
}

}

/* Chemical SVG */

.chem-lines{

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

pointer-events:none;

z-index:2;

}

.chem-lines line{

stroke:rgba(255,255,255,.25);
stroke-width:2;

stroke-dasharray:10;

animation:dash 6s linear infinite;

}

.chem-lines circle{

fill:#00d4ff;

filter:drop-shadow(0 0 8px #00d4ff);

animation:pulse 2s infinite;

}

@keyframes dash{

to{
stroke-dashoffset:-80;
}

}

@keyframes pulse{

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

50%{
transform:scale(1.35);
}

}

/* Text animation */

.content h4,
.content h1,
.content p,
.buttons{

opacity:0;

transform:translateY(40px);

animation:reveal .8s forwards;

}

.content h4{animation-delay:.2s;}
.content h1{animation-delay:.5s;}
.content p{animation-delay:.8s;}
.buttons{animation-delay:1.1s;}

@keyframes reveal{

to{

opacity:1;

transform:translateY(0);

}

}

/* ================= PRODUCT SECTION ================= */
.product-section {
    width: 100%;
    padding: 80px 6%;
    background: #f8fafc; /* Premium off-white background */
    overflow: hidden;
}

/* ================= GRID LAYOUT (No Slider) ================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ================= CARD WITH 3D & GLOW EFFECT ================= */
.product-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.5s cubic-bezier(0.15, 0.85, 0.45, 1), 
                box-shadow 0.5s cubic-bezier(0.15, 0.85, 0.45, 1);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hover Effect: Card lifts up and casts a soft deep shadow */
.product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 71, 255, 0.12);
}

/* ================= IMAGE & SHINE EFFECT ================= */
.product-img {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.15, 0.85, 0.45, 1);
}

/* Hover Effect: Smooth Zoom */
.product-card:hover .product-img img {
    transform: scale(1.08);
}

/* Premium Shiny/Glared Overlay Effect on Image */
.product-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    transition: 0.75s;
}

.product-card:hover .product-img::after {
    left: 150%;
}

/* ================= BADGE ================= */
.product-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: linear-gradient(45deg, #0047ff, #00bfff);
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 71, 255, 0.3);
    z-index: 3;
}

/* ================= CONTENT & BLUR OVERLAY ================= */
.product-content {
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

/* Glow Circle behind text */
.product-content::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    background: rgba(0, 191, 255, 0.08);
    border-radius: 50%;
    top: -50px;
    right: -50px;
    transition: transform 0.6s ease;
}

.product-card:hover .product-content::before {
    transform: scale(1.5);
}

/* Bottom Animated Magic Line */
.product-content::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0047ff, #00bfff, #8b5cf6, #0047ff);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-card:hover .product-content::after {
    opacity: 1;
    animation: borderMove 2s linear infinite;
}

@keyframes borderMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

/* TEXT STYLING */
.product-content h3 {
    font-size: 14px;
    color: #0047ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 700;
}

.product-content p {
    color: #1e293b;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
}

/* ================= RESPONSIVE ADJUSTMENTS ================= */
@media(max-width: 768px) {
    .product-section {
        padding: 50px 4%;
    }
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
    .product-img {
        height: 230px;
    }
}

/* ================= PRODUCT SECTION ================= */
.product-section {
    width: 100%;
    padding: 100px 6%;
    background: #0f172a; /* Premium Dark Background taaki glow effects mast dikhein */
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

/* ================= GRID LAYOUT ================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ================= MODERN SHINY CARD ================= */
.product-card {
    background: rgba(30, 41, 59, 0.7); /* Glassmorphism base */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover Effect: Intense Neon Glow & Lift */
.product-card:hover {
    transform: translateY(-15px);
    border-color: rgba(0, 191, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 71, 255, 0.25), 
                0 0 30px rgba(0, 191, 255, 0.15);
}

/* ================= IMAGE & GLASS SHEEN ================= */
.product-img {
    width: 100%;
    height: 290px;
    overflow: hidden;
    position: relative;
    background: rgba(15, 23, 42, 0.6);
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover: Zoom + Slight tilt feeling */
.product-card:hover .product-img img {
    transform: scale(1.1) translateY(-10px);
}

/* Diagonal Light Flash/Shine Effect */
.product-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.25) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-30deg);
    transition: 0.8s ease;
    z-index: 2;
}

.product-card:hover .product-img::before {
    left: 150%;
}

/* ================= GLOWING BADGE ================= */
.product-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: linear-gradient(45deg, #0047ff, #00bfff);
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.4);
    z-index: 3;
}

/* ================= CONTENT & CONTENT SLIDE ================= */
.product-content {
    padding: 24px;
    position: relative;
    background: rgba(30, 41, 59, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 3;
}

.category-tag {
    font-size: 12px;
    color: #00bfff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.product-content h3 {
    color: #f8fafc;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    transition: color 0.3s ease;
    /* Text truncate agar naam bada ho to auto ... ho jaye */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card:hover .product-content h3 {
    color: #00bfff;
}

/* ================= SLIDE-UP CONTENT (Price & Button) ================= */
.product-bottom-slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover karte hi price aur button smooth slide karke upar aayenge */
.product-card:hover .product-bottom-slide {
    margin-top: 18px;
    height: 46px;
    opacity: 1;
    visibility: visible;
}

.price-tag {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.cart-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0047ff, #00bfff);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 71, 255, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-btn:hover {
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 6px 20px rgba(0, 191, 255, 0.5);
}

/* ================= RESPONSIVE ================= */
@media(max-width: 768px) {
    .product-section {
        padding: 60px 4%;
    }
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
    .product-img {
        height: 240px;
    }
    /* Mobile standard par slide features hamesha dikhte hain safe user experience ke liye */
    .product-bottom-slide {
        margin-top: 14px;
        height: auto;
        opacity: 1;
        visibility: visible;
    }
}



/* ================= PRODUCT SECTION ================= */
.product-section {
    width: 100%;
    padding: 80px 6%;
    position: relative;
    /* Soft Light Sky Background */
    background: linear-gradient(135deg, #f3f8ff 0%, #e6f0fa 50%, #f9fbff 100%);
    background-size: 400% 400%;
    animation: meshGradient 15s ease infinite;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

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

/* ================= MASONRY GRID LAYOUT ================= */
.product-masonry-grid {
    column-count: 4; /* Desktop par 4 columns jaisa aapke screenshot me hai */
    column-gap: 24px; /* Columns ke beech ka space */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* ================= MASONRY PRODUCT CARD ================= */
.product-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 71, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 71, 255, 0.02);
    
    display: inline-block; /* CRITICAL: Isse cards toot kar doosre column me nahi bante */
    width: 100%;
    margin-bottom: 24px; /* Bottom spacing for masonry items */
    
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s ease;
}

/* --- MOUSE TRACKING GLOW --- */
.product-card::before {
    content: '';
    position: absolute;
    top: var(--y, 0);
    left: var(--x, 0);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 191, 255, 0.25) 0%, rgba(0, 71, 255, 0) 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1;
}

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

.product-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(0, 149, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 71, 255, 0.08), 
                0 0 20px rgba(0, 191, 255, 0.1);
}

/* ================= IMAGE AREA (Auto Height Responsive) ================= */
.product-img {
    width: 100%;
    height: auto; /* Fixed height hata di taaki vertical images lambi dikhein portrait style me */
    max-height: 500px; /* safety limit */
    overflow: hidden;
    position: relative;
    background: #f4f8ff;
    z-index: 2;
}

.product-img img {
    width: 100%;
    height: auto; /* Image ki actual height maintain rahegi automatic */
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* Laser Shine Effect */
.product-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-30deg);
    transition: 0.7s ease-in-out;
}
.product-card:hover .product-img::after { left: 150%; }

/* ================= BADGE ================= */
.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(45deg, #0047ff, #00bfff);
    color: #fff;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 3;
}

/* ================= CONTENT & INTERACTIVE SLIDE ================= */
.product-content {
    padding: 20px;
    position: relative;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(0, 71, 255, 0.03);
    z-index: 2;
}

.category-tag {
    font-size: 10px;
    color: #0077ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.product-content h3 {
    color: #0f172a;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}
.product-card:hover .product-content h3 { color: #0055ff; }

/* Slide Section */
.product-bottom-slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-card:hover .product-bottom-slide {
    margin-top: 14px;
    height: 40px;
    opacity: 1;
    visibility: visible;
}

.price-tag { font-size: 18px; font-weight: 700; color: #0f172a; }

.cart-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0047ff, #00bfff);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.cart-btn:hover { transform: scale(1.1) rotate(15deg); }

/* ================= RESPONSIVE MASONRY ================= */
@media(max-width: 1200px){
    .product-masonry-grid { column-count: 3; } /* Tablets/Medium Screens */
}

@media(max-width: 768px){
    .product-section { padding: 50px 4%; }
    .product-masonry-grid { column-count: 2; column-gap: 16px; } /* Mobile Dual Column */
    .product-card { margin-bottom: 16px; }
    .product-bottom-slide { margin-top: 12px; height: auto; opacity: 1; visibility: visible; }
    .product-card::before { display: none; }
}

@media(max-width: 480px){
    .product-masonry-grid { column-count: 1; } /* Chote phones par single stack */
}

/* ================= PRODUCT GALLERY SECTION ================= */
.product-section {
    width: 100%;
    padding: 30px 2%;
   /* background: #ffffff;*/ /* Bilkul clean white look background */
    font-family: 'Poppins', sans-serif;
}

/* ================= EXACT 4-COLUMN SYMMETRIC GRID ================= */
.product-fluid-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 even columns structure */
   /* grid-auto-rows: 240px; *//* Rows spacing structure */
    gap: 12px; /* Screenshot jaisa halka spacing images ke beech me */
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* Hardcoded Asymmetric Blocks exactly mapping your screenshot */
.gallery-item-1 { grid-column: span 1; grid-row: span 1; }
.gallery-item-2 { grid-column: span 1; grid-row: span 1; }
.gallery-item-3 { grid-column: span 1; grid-row: span 1; }
.gallery-item-4 { grid-column: span 1; grid-row: span 1; }

.gallery-item-5 { grid-column: span 1; grid-row: span 1; }
.gallery-item-6 { grid-column: span 1; grid-row: span 1; }
.gallery-item-7 { grid-column: span 1; grid-row: span 1; }
.gallery-item-8 { grid-column: span 1; grid-row: span 1; }

/* Custom adjust agar aapko koi photo vertical lambi ya wide dikhani ho */
/* Example: .gallery-item-6 { grid-column: span 2; } */

/* ================= PLAIN IMAGE CARD HOLDER ================= */
.product-gallery-card {
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
    border-radius: 4px; /* Screenshot jaisa crisp minimal corner radius */
    height: 100%;
    width: 100%;
}

/* Full Bleed Grid Images */
.product-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Images stretch nahi hongi perfectly fit rahengi */
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Smooth zoom on image hover */
.product-gallery-card:hover img {
    transform: scale(1.08);
}

/* ================= MODERN OVERLAY REVEAL EFFECT ================= */
.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    
    /* Initially Hidden Elements */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 2;
}

/* Hover karte hi automatic overlay details activation */
.product-gallery-card:hover .gallery-hover-overlay {
    opacity: 1;
    visibility: visible;
}

/* Overlay elements fade-in entry setup */
.overlay-details {
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.product-gallery-card:hover .overlay-details {
    transform: translateY(0);
}

/* ================= OVERLAY INNER CONTENT TYPOGRAPHY ================= */
.badge-tag {
    align-self: flex-start;
    background: #00bfff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cat-text {
    font-size: 11px;
    color: #00bfff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    display: block;
}

.overlay-details h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    margin: 4px 0 12px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 10px;
}

.price {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.add-to-cart-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    background: #00bfff;
    color: #ffffff;
    transform: scale(1.1);
}

/* ================= RESPONSIVE ADJUSTMENTS ================= */
@media(max-width: 1024px) {
    .product-fluid-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for tablet screens */
    }
}

@media(max-width: 768px) {
    .product-fluid-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns layout on mobile */
        grid-auto-rows: 200px;
        gap: 6px;
    }
    .gallery-hover-overlay {
        opacity: 1;
        visibility: visible;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    }
    .overlay-details { transform: translateY(0); }
    .add-to-cart-btn { background: #00bfff; color: #fff; }
}/* ================= PLAIN IMAGE CARD HOLDER ================= */
.product-gallery-card {
    position: relative;
    overflow: hidden;
    background: #0b0f19; /* Dark background transitions ko solid look deta hai */
    border-radius: 12px; /* Clean rounded corners */
    height: 100%;
    width: 100%;
    cursor: pointer;
    
    /* Pehle card standard depth par rahega */
    z-index: 1; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    
    /* 3D bounce back look ke liye humne yahan elastic cubic-bezier timing set ki hai */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.6s ease,
                z-index 0s linear; /* Out hone par z-index instant change hoga */
}

/* ================= CENTRALIZED MAXIMUM ZOOM EFFECT ================= */
/* Jab image par hover hoga, toh pura card aas-paas ki images ke upar pop-out karega */
.product-gallery-card:hover {
    transform: scale(1.08) translateY(-5px); /* Pura card frame thoda bada hokar upar uthega */
    
    /* CRITICAL FIX: Hover hote hi ye card sabse upar aa jayega, baaki images ke piche nahi dabega */
    z-index: 99; 
    
    /* Heavy cinematic glow drop shadow */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 
                0 0 40px rgba(0, 191, 255, 0.2);
}

/* Image default style inside the card */
.product-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(1);
    
    /* Slow motion ease-out animation image zoom ke liye */
    transition: transform 1.2s cubic-bezier(0.15, 0.85, 0.45, 1), 
                filter 0.6s ease;
}

/* Inner Image Deep Zoom on Hover */
.product-gallery-card:hover img {
    transform: scale(1.22); /* Image ke andar ka content deep zoom hoga */
    filter: brightness(0.7); /* Content readable rakhne ke liye mild brightness drop */
}

/* ================= THE CINEMATIC GLASS OVERLAY ================= */
.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Luxury linear dark gradient backdrop sheet */
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.5) 40%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    box-sizing: border-box;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
}

/* Hover active hote hi overlay active hoga */
.product-gallery-card:hover .gallery-hover-overlay {
    opacity: 1;
    visibility: visible;
}

/* ================= DYNAMIC TEXT CASCADE EFFECT ================= */

/* Content elements container */
.overlay-details {
    display: flex;
    flex-direction: column;
}

/* 1. Category Tag (Smooth Slide Up + Delay 1) */
.cat-text {
    font-size: 11px;
    color: #00bfff !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: block;
    
    /* Starting state hidden below */
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.product-gallery-card:hover .cat-text {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Product Name H3 (Smooth Slide Up + Delay 2) */
.overlay-details h3 {
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 600;
    margin: 6px 0 16px 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    
    /* Starting state hidden below */
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    transition-delay: 0.08s; 
}

.product-gallery-card:hover .overlay-details h3 {
    opacity: 1;
    transform: translateY(0);
}

/* ================= BOTTOM SHELF (Price & Cart Button) ================= */
.overlay-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px;
    
    /* Starting state hidden below */
    opacity: 0;
    transform: translateY(35px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    transition-delay: 0.15s;
}

.product-gallery-card:hover .overlay-bottom {
    opacity: 1;
    transform: translateY(0);
}

.price {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
}

/* Glowing Neon Cart Button */
.add-to-cart-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0047ff, #00bfff);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.3);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.add-to-cart-btn:hover {
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.6);
}

/* New Badge Tag */
.badge-tag {
    align-self: flex-start;
    background: linear-gradient(45deg, #0047ff, #00bfff);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 71, 255, 0.3);
    
    /* Smooth Pop in */
    opacity: 0;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}
.product-gallery-card:hover .badge-tag {
    opacity: 1;
    transform: scale(1);
}
/* ================= ULTIMATE ANIMATED 4-GRID ================= */

/* Section Subtitle */
.title-subtext {
    display: block;
    font-size: 0.95rem;
    color: #FFF;
    font-weight: 500;
    margin-top: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Container Grid */
.pro-solution-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 1 Line 4 Columns */
    gap: 22px;
    width: 100%;
    max-width: 1450px;
    margin: 45px auto 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

/* Card Main Base */
.pro-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 245, 0.85));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(3, 43, 33, 0.12);
    border-radius: 24px;
    padding: 24px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

/* Card Hover Animation */
.pro-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 22px 45px rgba(3, 43, 33, 0.18);
    border-color: rgba(3, 43, 33, 0.4);
}

/* Glowing Top Badge */
.card-glow-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(3, 43, 33, 0.08);
    color: #032b21;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    z-index: 2;
    transition: all 0.3s ease;
}

.pro-card:hover .card-glow-badge {
    background: #032b21;
    color: #ffffff;
}

/* Image Wrapper with Scanner Animation */
.pro-img-wrapper {
    width: 100%;
    height: 250px; /* Badi Image */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.02);
}

.pro-img-wrapper img {
    width: 95%;
    height: 95%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pro-card:hover .pro-img-wrapper img {
    transform: scale(1.12);
}

/* Laser Scanner Beam Line Effect */
.img-scan-line {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 15px;
    background: linear-gradient(180deg, rgba(3, 43, 33, 0) 0%, rgba(3, 43, 33, 0.25) 100%);
    border-bottom: 2px solid #032b21;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pro-card:hover .img-scan-line {
    opacity: 1;
    animation: scanAnimation 2s infinite ease-in-out;
}

@keyframes scanAnimation {
    0% { top: -10%; }
    50% { top: 100%; }
    100% { top: -10%; }
}

/* Content Typography */
.pro-card-body h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: #032b21;
    margin-bottom: 10px;
    line-height: 1.35;
    transition: color 0.3s ease;
}

.pro-card:hover .pro-card-body h3 {
    color: #007a5e;
}

.pro-card-body p {
    font-size: 0.86rem;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Bottom Action Bar */
.card-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed rgba(3, 43, 33, 0.15);
    font-size: 0.82rem;
    font-weight: 700;
    color: #032b21;
}

.card-bottom-bar i {
    transition: transform 0.3s ease;
}

.pro-card:hover .card-bottom-bar i {
    transform: translateX(6px);
}

/* Sweeping Light Border Effect */
.light-sweep-border {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 45%,
        rgba(3, 43, 33, 0.08) 50%,
        transparent 55%
    );
    transform: rotate(30deg);
    transition: all 0.7s ease;
    pointer-events: none;
    opacity: 0;
}

.pro-card:hover .light-sweep-border {
    opacity: 1;
    top: 100%;
    left: 100%;
}

/* Responsive Scaling */
@media (max-width: 1100px) {
    .pro-solution-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .pro-solution-grid {
        grid-template-columns: 1fr;
    }
    .pro-img-wrapper {
        height: 210px;
    }
}