55ok
Mini
<?php
include("admin/connection.php");
include('include/header.php');
$query = "SELECT * FROM `slider` ORDER BY id DESC";
$sql = mysqli_query($con, $query);
?>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<?php
$i = 0; // counter banaya
while ($row = mysqli_fetch_assoc($sql)) {
$active = ($i == 0) ? 'active' : ''; // sirf first slide active
?>
<div class="carousel-item <?php echo $active; ?>">
<img class="d-block w-100" src="<?php echo path(); ?>/admin/assets/images/slider/<?php echo $row['Image']; ?>" alt="Slide <?php echo $i + 1; ?>">
</div>
<?php
$i++;
}
?>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<style>
.head {
text-align: center;
padding: 40px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.head h1 {
font-size: 22px;
font-weight: lighter;
font-style: normal;
text-transform: capitalize;
line-height: 1.5;
color: #333;
display: block;
letter-spacing: 2px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: .75em;
}
.head hr {
width: 900px;
/* hr ko aur bada kiya */
margin-bottom: 15px;
}
.head h3 {
font-size: 1.6rem;
max-width: 800px;
color: #333;
line-height: 1.5;
}
/* Responsive */
@media (max-width: 992px) {
.head h1 {
font-size: 2.2rem;
}
.head h3 {
font-size: 1.1rem;
}
.head hr {
width: 150px;
border-width: 3px;
}
}
@media (max-width: 576px) {
.head {
padding: 60px 15px;
}
.head h1 {
font-size: 1.3rem;
}
.head h3 {
font-size: 1rem;
}
.head hr {
width: 120px;
border-width: 3px;
}
}
</style>
<div class="head">
<h1>WELCOME TO INDIA’S FAVORITE FANCY DRESS COSTUME STORE</h1>
<hr>
<h3>Buy or Rent a wide variety and top quality kids and adults costumes. Worldwide deliveries available. For bulk orders for your school or shop, fill this form here.</h3>
</div>
<style>
.cloth-section {
text-align: center;
padding: 50px 15px;
max-width: 1300px;
margin: 0 auto;
background-color: #f9f9f9;
}
.head h3 {
font-size: 18px;
font-weight: 500;
font-family: Open Sans, sans-serif;
color: #333 !important;
opacity: 1;
}
.cloth-section h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 35px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.cloth-section h1 hr {
flex: 1;
border: 1.5px solid #222;
margin: 0;
max-width: 80px;
}
.image-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.product {
background: #fff;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
width: 260px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
position: relative;
text-decoration: none;
color: inherit;
}
.product:hover {
transform: translateY(-6px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.product img {
width: 100%;
height: 280px;
object-fit: contain;
background-color: #fff;
padding: 5px;
transition: transform 0.4s ease;
}
.product:hover img {
transform: scale(1.05);
}
.product .title {
font-size: 0.95rem;
font-weight: 600;
color: #333;
text-align: center;
padding: 10px 8px 0;
line-height: 1.3em;
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.product .price-box {
display: flex;
justify-content: space-around;
padding: 10px 0;
border-top: 1px solid #eee;
}
.price-box span {
font-size: 1rem;
font-weight: 700;
color: #222;
}
.product .cta-btn {
background: #ff6600;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
padding: 10px 0;
text-align: center;
border-top: 1px solid #eee;
transition: background 0.3s ease;
}
.product .cta-btn:hover {
background: #e05500;
}
/* Responsive */
@media (max-width: 992px) {
.product {
width: 45%;
}
.product img {
height: 240px;
}
}
@media (max-width: 576px) {
.product {
width: 48%;
}
.product img {
height: 180px;
}
.cloth-section h1 {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.image-row {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.product {
width: 100%;
/* Full width card */
max-width: 350px;
/* Optional max width */
margin: 0 auto;
}
.product img {
width: 100%;
height: auto;
/* maintain aspect ratio */
}
.product .title {
font-size: 1rem;
height: auto;
line-height: 1.4em;
padding: 10px;
}
.product .price-box {
flex-direction: column;
gap: 5px;
padding: 10px;
}
.product .price-box span {
font-size: 1.1rem;
}
.product .cta-btn {
width: 100%;
font-size: 1rem;
padding: 12px 0;
margin-top: 5px;
}
.cloth-section h1 {
font-size: 1.5rem;
flex-direction: column;
}
.cloth-section h1 hr {
max-width: 60px;
margin: 10px 0 0 0;
}
}
</style>
<div class="cloth-section">
<h1>
<hr>Top Picks For You
<hr>
</h1>
<div class="image-row">
<!-- ✅ Product 1 -->
<a href="product.php?slug=super-heroes" class="product">
<img src="https://www.bookmycostume.com/cdn/shop/files/2912358_2_5e92cad9-e06f-4dff-bad1-74dfcaebfd0a_348x.progressive.jpg?v=1722571614" alt="Cloth 1">
<div class="title">Subhash Chandra Bose Freedom Fighter Kids Fancy Dress</div>
<div class="cta-btn">View products</div>
</a>
<!-- ✅ Product 2 -->
<a href="product.php?slug=super-heroes" class="product">
<img src="https://www.bookmycostume.com/cdn/shop/products/2911787_348x.jpg" alt="Cloth 2">
<div class="title">Rani Laxmi Bai Jhansi ki Rani Saree Kids Fancy Dress Costume</div>
<div class="cta-btn">View products</div>
</a>
<!-- ✅ Product 3 -->
<a href="product.php?slug=super-heroes" class="product">
<img src="https://www.bookmycostume.com/cdn/shop/files/3227507_2abebdcd-bc19-4cdc-a219-d302695bf0ff_348x.jpg" alt="Cloth 3">
<div class="title">Cartoon Character Costume</div>
<div class="cta-btn">View products</div>
</a>
<!-- ✅ Product 4 -->
<a href="product.php?slug=super-heroes" class="product">
<img src="https://www.bookmycostume.com/cdn/shop/files/2838038_6b96f40b-e59e-4ba9-b89e-f551300c54a4_348x.jpg" alt="Cloth 4">
<div class="title">Animal Costume</div>
<div class="cta-btn">View products</div>
</a>
</div>
</div>
<div class="our-section">
<h1>Our Favourites</h1>
<div class="picks-container">
<!-- Card 1 -->
<a href="https://costumeonrent.in//product.php?slug=animals" class="pick-card-link">
<div class="pick-card">
<img src="https://www.bookmycostume.com/cdn/shop/files/imgpsh_fullsize_anim_5.jpg?v=1686037742" alt="Animals & Birds">
<div class="pick-label label-purple">Animals & Birds</div>
</div>
</a>
<!-- Card 2 -->
<a href="https://costumeonrent.in//product.php?slug=states-dances" class="pick-card-link">
<div class="pick-card stagger-down">
<img src="https://www.bookmycostume.com/cdn/shop/files/imgpsh_fullsize_anim_6.jpg?v=1686037742" alt="States & Dances">
<div class="pick-label label-pink">States & Dances</div>
</div>
</a>
<!-- Card 3 -->
<a href="https://costumeonrent.in//product.php?slug=gods-mythology" class="pick-card-link">
<div class="pick-card">
<img src="https://www.bookmycostume.com/cdn/shop/files/imgpsh_fullsize_anim_3.jpg?v=1686037742" alt="Gods Mythology">
<div class="pick-label label-yellow">Gods Mythology</div>
</div>
</a>
<!-- Card 4 -->
<a href="https://costumeonrent.in//product.php?slug=super-heroes" class="pick-card-link">
<div class="pick-card stagger-down">
<img src="https://www.bookmycostume.com/cdn/shop/files/imgpsh_fullsize_anim_4.jpg?v=1686037742" alt="Superhero">
<div class="pick-label label-blue">Superhero</div>
</div>
</a>
</div>
</div>
<style>
/* Section Title */
.our-section {
text-align: center;
margin: 40px 0;
}
.our-section h1 {
font-size: 32px;
font-weight: bold;
color: #222;
position: relative;
display: inline-block;
}
.our-section h1::before,
.our-section h1::after {
content: '';
display: inline-block;
width: 60px;
height: 2px;
background-color: #000;
vertical-align: middle;
margin: 0 15px;
}
/* Picks Container */
.picks-container {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 30px;
padding: 20px;
}
/* Links wrapper */
.pick-card-link {
text-decoration: none;
/* remove underline */
display: inline-block;
}
/* Card Style */
.pick-card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 260px;
position: relative;
transition: transform 0.3s ease;
}
.pick-card.stagger-down {
margin-top: 70px;
}
.pick-card:hover {
transform: translateY(-5px);
}
.pick-card img {
width: 100%;
height: 340px;
object-fit: cover;
display: block;
}
.pick-label {
text-align: center;
padding: 12px;
font-weight: bold;
font-size: 14px;
color: white;
}
.label-purple {
background-color: #a020f0;
}
.label-pink {
background-color: #f48fb1;
}
.label-yellow {
background-color: #ffa000;
color: #000;
}
.label-blue {
background-color: #1e88e5;
}
/* Responsive */
@media (max-width: 992px) {
.pick-card.stagger-down {
margin-top: 50px;
}
.our-section h1 {
font-size: 20px;
font-weight: bold;
color: #222;
position: relative;
display: inline-block;
}
}
@media (max-width: 576px) {
.picks-container {
flex-direction: column;
align-items: center;
gap: 20px;
/* Mobile ke liye gap thoda kam */
}
.pick-card-link {
width: 100%;
/* Full width */
margin-bottom: 0;
}
.pick-card {
width: 100%;
/* Card bhi full width */
margin-top: 0 !important;
/* stagger hata de */
}
.pick-card img {
width: 100%;
height: auto;
/* auto height for full width responsive */
}
}
</style>
<div id="app">
<section class="feed">
<div class="feed-title">
<hr>
<h1>#costumeonrent Instagram Feed</h1>
<hr>
</div>
<div class="grid">
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/351740794_963305148155174_8007371924808616050_n.jpg?v=1686025293" alt="Costume 1">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/351164192_647491310085264_779718721971509158_n.jpg?v=1686025293" alt="Costume 2">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/350118984_1225900048286473_1922481809932895678_n.jpg?v=1686025293" alt="Costume 3">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/350369205_3446562692284518_1399926421148823853_n.jpg?v=1686025292" alt="Costume 4">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/349081910_6242743492474875_4153469073977835159_n.jpg?v=1686025292" alt="Costume 5">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/348624526_767058805067401_4436030086274302679_n.jpg?v=1686025292" alt="Costume 6">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/348467077_966233418048044_2616434757935990793_n.jpg?v=1686025293" alt="Costume 7">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
<a href="https://www.instagram.com/destination_g5?igsh=MTA2dmkydzl0bTN4aA%3D%3D" target="_blank">
<div class="card">
<img src="https://www.bookmycostume.com/cdn/shop/files/348224873_3437664943165617_5664808225925030669_n.jpg?v=1686025293" alt="Costume 8">
<div class="overlay">
<img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram">
</div>
</div>
</a>
</section>
</div>
<!-- ✅ Include Slick CSS and JS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- ✅ Blog Section -->
<div class="blog-section">
<h2 class="blog-title">
<span></span> Blog Posts <span></span>
</h2>
<div class="blog-cards-container">
<?php
$blogs = mysqli_query($con, "SELECT * FROM `blog` ORDER BY id DESC LIMIT 3");
while ($row = mysqli_fetch_array($blogs)) {
$title = $row['title'];
$description = $row['description'];
$slug = $row['slug'];
$Image = $row['Image'];
?>
<!-- Blog Card 1 -->
<div class="blog-card">
<img src="<?php path(); ?>/admin/assets/images/blog/<?php echo htmlspecialchars($Image); ?>" alt="Blog 1">
<h3><?php echo htmlspecialchars($title); ?></h3>
<a href="<?php path(); ?>/blog-details.php?slug=<?php echo $slug; ?>" class="read-more">Read More</a>
</div>
<?php } ?>
</div>
</div>
<style>
.blog-section {
padding: 40px 40px;
font-family: sans-serif;
}
.blog-title {
text-align: center;
font-size: 26px;
font-weight: bold;
margin-bottom: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.blog-title span {
display: inline-block;
width: 60px;
height: 2px;
background-color: #000;
}
/* ✅ Blog Cards */
.blog-card {
width: 360px;
text-align: left;
box-sizing: border-box;
}
.blog-card img {
width: 100%;
height: 292px;
object-fit: cover;
border-radius: 8px;
}
.blog-card h3 {
font-size: 20px;
font-weight: 600;
margin: 20px 15px 10px 15px;
line-height: 1.4;
}
.read-more {
display: inline-block;
margin: 15px;
padding: 10px 20px;
border: 2px solid #000;
color: #000;
text-decoration: none;
font-weight: bold;
border-radius: 6px;
transition: all 0.3s ease;
}
.read-more:hover {
background-color: #000;
color: #fff;
}
/* ✅ Slick Overrides for Gap */
.blog-cards-container .slick-slide {
padding: 0 15px;
/* 👈 Card ke beech gap */
box-sizing: border-box;
}
.blog-cards-container .slick-list {
margin: 0 -15px;
/* 👈 Left/Right edge balance */
}
.slick-slide {
outline: none;
}
.slick-track {
display: flex;
align-items: stretch;
}
.slick-slide>div {
display: flex;
justify-content: center;
}
@media screen and (max-width: 992px) {
.blog-card {
width: 80%;
}
}
@media screen and (max-width: 576px) {
.blog-card {
width: 95%;
}
}
</style>
<script>
$(document).ready(function() {
$('.blog-cards-container').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
dots: false,
infinite: true,
centerMode: false,
variableWidth: false,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1
}
}
]
});
});
</script>
<?php
// Fetch testimonials
$query = "SELECT * FROM `testimonial` ORDER BY id DESC";
$sql = mysqli_query($con, $query);
?>
<div class="our-section">
<h1 class="testimonial-heading">
<span></span> What the #CostumeOnrent are saying? <span></span>
</h1>
<div class="testimonial-slider">
<?php
$i = 0;
while ($row = mysqli_fetch_assoc($sql)) {
$Image = htmlspecialchars($row['Image']); // ensure field name matches DB
$cus_name = htmlspecialchars($row['cus_name']);
$para = htmlspecialchars($row['para']);
$date = htmlspecialchars($row['date'] ?? '');
$source = htmlspecialchars($row['source'] ?? 'Google');
?>
<div class="testimonial-card <?php echo $i === 0 ? 'active' : ''; ?>">
<div class="profile-img">
<img src="<?php echo path(); ?>/admin/assets/images/testimonial/<?php echo $Image; ?>" alt="<?php echo $name; ?>">
</div>
<h2 class="testimonial-name"><?php echo $row['cus_name']; ?></h2>
<p class="testimonial-text"><?php echo $row['para']; ?></p>
<?php if (!empty($date)) { ?>
<p class="testimonial-date"><?php echo $date; ?></p>
<?php } ?>
<p class="testimonial-source"><strong>(Source: <?php echo $source; ?>)</strong></p>
</div>
<?php
$i++;
}
?>
</div>
<!-- Dots for navigation -->
<div class="dots">
<?php for ($j = 0; $j < $i; $j++) { ?>
<span onclick="showSlide(<?php echo $j; ?>)" class="<?php echo $j === 0 ? 'active-dot' : ''; ?>"></span>
<?php } ?>
</div>
</div>
<style>
.our-section {
text-align: center;
padding: 40px 10px;
background: #fff;
font-family: Arial, sans-serif;
}
.testimonial-text {
color: #fff;
}
.testimonial-heading {
font-size: 24px;
font-weight: bold;
color: #111;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.testimonial-heading span {
flex: 1;
height: 2px;
background: #111;
max-width: 50px;
}
.testimonial-slider {
position: relative;
max-width: 95%;
margin: 0 auto;
}
.testimonial-card {
background-color: #5d2d5d;
color: #fff;
border-radius: 15px;
padding: 30px 20px;
display: none;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.testimonial-card.active {
display: flex;
}
.profile-img {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 15px;
border: 4px solid white;
}
.profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-name {
font-size: 20px;
margin-bottom: 15px;
}
.testimonial-text {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
max-width: 850px;
padding: 0 10px;
}
.testimonial-date {
font-size: 14px;
margin-bottom: 4px;
}
.testimonial-source {
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.dots span {
width: 10px;
height: 10px;
background: #c7a9c7;
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: 0.3s;
}
.dots .active-dot {
background: white;
}
</style>
<script>
function showSlide(index) {
const slides = document.querySelectorAll('.testimonial-card');
const dots = document.querySelectorAll('.dots span');
slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active-dot'));
slides[index].classList.add('active');
dots[index].classList.add('active-dot');
}
</script>
<!-- ✅ New Benefits Section -->
<div class="custom-benefits-section">
<div class="custom-container">
<div class="custom-row">
<!-- ✅ Card 1 -->
<div class="custom-col">
<div class="custom-benefit-card">
<div class="custom-benefit-icon">
<img src="//www.bookmycostume.com/cdn/shop/files/imgpsh_fullsize_anim_2_6ae9c2c4-ae11-4b99-904a-17543804c7bb.png?v=1684146882" alt="Free Delivery">
</div>
<div class="custom-benefit-content">
<h4>Free Worldwide Delivery</h4>
<p>We ship throughout the week, except Sunday & Public holidays and Festivals. Delivery availability can be checked by entering address pin code on the product page.</p>
</div>
</div>
</div>
<!-- ✅ Card 2 -->
<div class="custom-col">
<div class="custom-benefit-card">
<div class="custom-benefit-icon">
<img src="//www.bookmycostume.com/cdn/shop/files/imgpsh_fullsize_anim_55af9df9-0044-4ee1-8dbf-6af875480b5f.png?v=1684146882" alt="Easy Return">
</div>
<div class="custom-benefit-content">
<h4>Easy Return & Exchange</h4>
<p>We will personally ensure that a brand new replacement is issued to you with no additional cost. Please make sure that the original product tag and packing is intact.</p>
</div>
</div>
</div>
<!-- ✅ Card 3 -->
<div class="custom-col">
<div class="custom-benefit-card">
<div class="custom-benefit-icon">
<img src="//www.bookmycostume.com/cdn/shop/files/imgpsh_fullsize_anim_1_e1cfff02-33b9-4474-9fa0-bbe7d977bd98.png?v=1684146882" alt="24x7 Support">
</div>
<div class="custom-benefit-content">
<h4>24x7 Support Assistance</h4>
<p>Our company provides round-the-clock, 24x7 support assistance to ensure that our customers receive prompt help and solutions at any time of the day or night.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* ✅ Background Section */
.custom-benefits-section {
background: linear-gradient(135deg, #e6f0f0 0%, #edf4f4 100%);
padding: 60px 20px;
}
/* ✅ Grid */
.custom-container {
max-width: 1200px;
margin: 0 auto;
}
.custom-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.custom-col {
flex: 1 1 30%;
max-width: 360px;
}
/* ✅ Card Style */
.custom-benefit-card {
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
padding: 25px 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
/* ✅ Icon */
.custom-benefit-icon img {
width: 70px;
height: 70px;
object-fit: contain;
display: block;
margin: 0 auto;
}
/* ✅ Content */
.custom-benefit-content h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.custom-benefit-content p {
font-size: 14px;
color: #555;
margin: 0;
text-align: center;
}
/* ✅ Mobile Responsive */
@media (max-width: 576px) {
.custom-row {
flex-direction: column;
gap: 20px;
align-items: center;
}
.custom-col {
flex: 1 1 100%;
max-width: 100%;
}
.custom-benefit-card {
padding: 20px;
}
.custom-benefit-icon img {
width: 60px;
height: 60px;
}
.custom-benefit-content h4 {
font-size: 16px;
}
.custom-benefit-content p {
font-size: 14px;
}
}
</style>
<?php
include('include/footer.php');
?>
Zerion Mini 1.0