.animationdev-container{

max-width:1320px;

margin:auto;

padding:0 20px;

}

/* Hero */

.animationdev-hero{

background:#111827;

padding:120px 0;

text-align:center;

color:#fff;

}

.animationdev-hero h1{

font-size:54px;

font-weight:700;

margin-bottom:25px;

}

.animationdev-hero p{

font-size:20px;

max-width:750px;

margin:auto;

opacity:.85;

margin-bottom:40px;

}

.hero-button{

display:inline-block;

padding:18px 40px;

background:#ff6b00;

color:#fff;

text-decoration:none;

font-size:18px;

border-radius:8px;

transition:.3s;

}

.hero-button:hover{

background:#ff8d2b;

color:#fff;

}

/* Product Section */

.animationdev-home-products{

padding:80px 0;

}

.animationdev-home-products h2{

font-size:34px;

margin-bottom:40px;

text-align:center;

}


/* Categories */

.animationdev-categories{

padding:80px 0;

background:#f7f8fa;

}

.animationdev-categories h2{

text-align:center;

font-size:36px;

margin-bottom:40px;

}

.animationdev-category-grid{

display:grid;

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

gap:30px;

}

.category-card{

display:block;

background:#fff;

border-radius:14px;

overflow:hidden;

text-decoration:none;

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

transition:.3s;

}

.category-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.category-card img{

width:100%;

height:220px;

object-fit:cover;

}

.category-card h3{

padding:20px;

font-size:22px;

text-align:center;

color:#222;

}


/* Hero Search */

.animationdev-search{

max-width:700px;

margin:45px auto 0;

display:flex;

background:#fff;

border-radius:60px;

overflow:hidden;

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

}

.animationdev-search input{

flex:1;

border:0;

padding:20px 28px;

font-size:18px;

outline:none;

}

.animationdev-search button{

width:180px;

border:0;

background:#ff6b00;

color:#fff;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.animationdev-search button:hover{

background:#ff8533;

}

.animationdev-featured{

padding:80px 0;

}

.animationdev-featured h2{

font-size:36px;

margin-bottom:40px;

text-align:center;

}

.featuredSwiper{

padding-bottom:20px;

}

.featuredSwiper .swiper-slide{

height:auto;

}

.animationdev-product-grid{

    display:grid;

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

    gap:30px;

}

@media (max-width:1024px){

    .animationdev-product-grid{

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

    }

}

@media (max-width:768px){

    .animationdev-product-grid{

        grid-template-columns:1fr;

    }

}