.top-bar img {
  height: 24px;          /* adjust to taste */
  vertical-align: middle;
}

.top-bar i {
  margin-right: 4px;
}

/* Top bar base */
.top-bar {
  background: linear-gradient(145deg, #1a1a1a, #111); /* light black gradient */
  padding: 6px 0;
  font-size: 14px;
}

/* 3D shadow effect */
.shadow-3d {
  box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(255,255,255,0.1);
}

/* Phone link style */
.top-link {
  color: #fff; /* always white */
  font-weight: 700; /* bold */
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.top-link i {
  margin-right: 6px;
  color: #000; /* black icon */
  text-shadow: none;
}

.top-link:hover {
  color: #fff; /* stay white on hover */
  transform: translateY(-2px);
  text-shadow: 0 0 8px rgba(255,255,255,0.6); /* subtle white glow */
}

/* WhatsApp icon stylish */
.whatsapp-icon {
  height: 24px;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.6));
  transition: all 0.3s ease;
}
.whatsapp-link:hover .whatsapp-icon {
  transform: scale(1.15) rotate(-5deg);
  filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.9));
}


.logo {
  width: 200px;
  height: auto;
  display: block;
}
:root{
  --maroon:#8B1538;
  --charcoal:#222;
  --light:#f7f7f7;
}

.social-btn,
.social-btn-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 6px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
}
.social-3d{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:8px;
  color:#fff;
  font-size:20px;
  box-shadow:0 4px 8px rgba(0,0,0,.25);
  transition:.2s;
}
.social-3d:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 12px rgba(0,0,0,.35);
}
.social-3d.facebook{background:#1877f2;}
.social-3d.tiktok{background:#000;}
.social-3d.youtube{background:#ff0000;}
.social-3d.whatsapp{background:#25d366;}

.social-3d{
  text-decoration:none;   /* removes underline */
}

/* === Pricing Section Starts Here === */
.shape-card {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.shape-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.shape-card img.card-img-top {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 4px solid #f4f4f4;
}

.shape-card h3 {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.shape-card p {
  padding: 0 1rem;
  font-size: 0.95rem;
  color: #555;
  min-height: 60px;
}

.shape-card .price {
  margin: 1rem 0;
  font-size: 1.3rem;
  font-weight: bold;
  color: #b30000;
}

.shape-card .features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.shape-card .features li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

.shape-card .btn-choose {
  margin-bottom: 1.5rem;
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #b30000, #ff4d4d);
  color: #fff;
  font-weight: 600;
  transition: background 0.3s ease;
}

.shape-card .btn-choose:hover {
  background: linear-gradient(135deg, #900000, #e60000);
}

/* === Badge for Freezone === */
.badge-popular {
  position: absolute;
  top: 15px;
  right: -35px;
  transform: rotate(45deg);
  background: #ff4d4d;
  color: #fff;
  padding: 5px 40px;
  font-size: 0.75rem;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ===== PRICING CARDS ===== */
.price-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Image section */
.price-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 4px solid #007bff;
}

/* Body */
.price-body {
  padding: 20px;
}
.price-body h3 {
  color: #333;
}
.price {
  font-size: 1.6rem;
  font-weight: 700;
  color: #007bff;
  text-align: center;
  margin: 15px 0;
}
.price-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.price-body ul li {
  padding: 5px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 0.95rem;
}

/* Toggle buttons */
.toggle-group {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.toggle-btn {
  border: 1px solid #007bff;
  background: #fff;
  color: #007bff;
  padding: 6px 14px;
  border-radius: 25px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.toggle-btn.active,
.toggle-btn:hover {
  background: #007bff;
  color: #fff;
}

/* Hide/show content */
.toggle-content.hidden {
  display: none;
}

/* CTA */
.price-card .btn {
  border-radius: 30px;
  padding: 10px 25px;
}

/* Price Section Ends Here */

<!-- === CSS helpers (add once) === -->
<style>
.divider{
  border:none;
  height:1px;
  background:rgba(0,0,0,.12);
  margin:18px 0 16px;
}
.toggle-buttons{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}
.toggle-btn{
  flex:1;
  padding:8px 0;
  border:none;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  background:#fff;
  color:var(--maroon);
  cursor:pointer;
  transition:.3s;
}
.toggle-btn.active{
  background:var(--maroon);
  color:#fff;
}
.price-small{font-size:.75rem;margin-bottom:8px;}
.price-lg{font-size:1.6rem;font-weight:800;}

.offers{list-style:none;padding:0;margin:0 0 20px;font-size:.9rem;line-height:1.5;}
.offers li{position:relative;padding-left:18px;margin-bottom:4px;}
.offers li::before{content:'✓';position:absolute;left:0;top:0;color:var(--maroon);}

.btn-cta{
  display:block;
  text-align:center;
  padding:12px 0;
  border-radius:50px;
  background:var(--maroon);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}
.btn-cta:hover{background:#6d0f2a;color:#fff;}
</style>

/* --- Full-height pricing section --- */
#pricing{
  padding:120px 0 140px;
}

/* --- Tall, equal-height cards --- */
.shape-card{
  min-height:600px;
}

/* --- internal padding --- */
.shape-front{
  padding:45px 35px;
}

/* --- button at the bottom --- */
.btn-cta{
  margin-top:auto;  /* keeps button flush to bottom */
  margin-bottom:0;
}

/* --- mobile tweak --- */
@media(max-width:576px){
  #pricing{ padding:80px 0 100px; }
  .shape-card{ min-height:680px; }
  .shape-front{ padding:40px 25px; }
}

.card-title{ margin-top:25px; }
.divider{ border:none; height:1px; background:rgba(0,0,0,.15); margin:18px 0 16px; }
.toggle-content.hidden{ display:none; }

.btn-cta{
  position:relative;
  display:block;
  width:100%;
  padding:12px 0;
  border:none;
  border-radius:50px;
  font-size:.9rem;
  font-weight:600;
  color:#fff;
  background:linear-gradient(145deg, var(--maroon), #6d0f2a);
  box-shadow:0 4px 8px rgba(0,0,0,.25);
  transition:transform .3s, box-shadow .3s, background .3s;
  overflow:hidden;
}

.btn-cta::before{
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:rotate(30deg) translateX(-100%);
  transition:transform .6s;
}

.btn-cta:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  background:linear-gradient(145deg, #9c1a3f, var(--maroon));
}

.btn-cta:hover::before{
  transform:rotate(30deg) translateX(100%);
}

.toggle-btn{
  position:relative;
  flex:1;
  padding:8px 0;
  border:none;
  border-radius:50px;
  font-size:.8rem;
  font-weight:600;
  color:var(--maroon);
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  transition:transform .25s, box-shadow .25s, background .25s;
  overflow:hidden;
}

.toggle-btn::before{
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:rotate(30deg) translateX(-100%);
  transition:transform .5s;
}

.toggle-btn.active{
  background:var(--maroon);
  color:#fff;
  box-shadow:0 4px 10px rgba(139,21,56,.4);
}

.toggle-btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 5px 12px rgba(139,21,56,.35);
}

.toggle-btn:hover::before{
  transform:rotate(30deg) translateX(100%);
}

/* force backface & GPU layer */
.shape-card .shape-front{
  backface-visibility:hidden;
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.25,.8,.25,1);
}

.shape-card:hover .shape-front{
  transform:translateZ(20px) rotateX(0) rotateY(0);
}

/* === ABOUT SECTION === */
#about h2 {
  font-size: 2.2rem;
  color: #2c3e50;
}

.timeline li {
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 1.5rem;
}

.timeline li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff;
  font-weight: bold;
}

.timeline h5 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.timeline p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
}

/* Team gallery */
.team-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.team-gallery .main-photo img {
  border-radius: 15px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.team-gallery .main-photo img:hover {
  transform: scale(1.03);
  box-shadow: 0px 10px 25px rgba(0,0,0,0.2);
}

.team-gallery .sub-photos {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.team-gallery .sub-photos img {
  width: 30%;
  border-radius: 10px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.team-gallery .sub-photos img:hover {
  transform: scale(1.08);
  box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
}

/* About us text */
.about-text {
  max-width: 850px;
  margin: 0 auto;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
}

/* ===== ABOUT SECTION ===== */
#about h2 {
  color: #222;
}

#about .timeline li {
  font-size: 1.05rem;
  line-height: 1.6;
}

#about .team-photo img {
  border-radius: 1rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#about .team-photo img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* ===== ABOUT SECTION BACKGROUND ===== */
#about {
  background: #f9f9f9;
}

#about .about-bg {
  position: absolute;
  top: -120px;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e6f7ff 100%);
  clip-path: ellipse(150% 100% at 50% 0%);
  z-index: 0;
}

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

/* === ABOUT SECTION END HERE === */

body{font-family:'Segoe UI',sans-serif;color:var(--charcoal);scroll-behavior:smooth}
a{color:var(--maroon)}
.top-bar{background:var(--maroon);padding:8px 0;color:#fff;font-size:14px}
.logo{height:45px}
.navbar{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.navbar-dark .navbar-nav .nav-link{color:var(--charcoal)!important;font-weight:600}
.navbar-dark .navbar-nav .nav-link:hover{color:var(--maroon)!important}
.hero{position:relative;height:100vh;background:url('../images/hero.jpg') center/cover fixed}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero-content{position:relative;z-index:2}
.btn-primary{background:var(--maroon);border:none;border-radius:30px}
.btn-primary:hover{background:#6d0f2a}
.btn-outline-maroon{border:2px solid var(--maroon);color:var(--maroon)}
.btn-outline-maroon:hover{background:var(--maroon);color:#fff}
.service-card{background:#fff;border-radius:12px;padding:30px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.05);transition:.3s}
.service-card:hover{transform:translateY(-8px)}
.icon-float{width:70px;height:70px;line-height:70px;background:var(--maroon);color:#fff;border-radius:50%;margin:0 auto 15px;font-size:28px}
.timeline{list-style:none;padding-left:0}
.timeline li{position:relative;padding-left:30px;margin-bottom:15px}
.timeline li::before{content:'✔';position:absolute;left:0;color:var(--maroon);font-weight:bold}
footer{background:var(--charcoal)}

:root {
  --brand: #a01a3c;
  --ink: #111;
}

.logo-3d img {
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.4));
}
.logo-3d:hover img {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(4px 8px 6px rgba(0,0,0,0.5));
}

/* Button-style nav links */
.btn-nav {
  position: relative;
  margin: 0 8px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  color: var(--ink) !important;
}

/* Glow & pop on hover */
.btn-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(45deg, rgba(160,26,60,0.6), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-nav:hover::after {
  opacity: 1;
}
.btn-nav:hover {
  color: #fff !important;
  background-color: var(--brand);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 15px rgba(160,26,60,0.4);
}

/* Active/current link styling (optional) */
.btn-nav.active {
  background: var(--brand);
  color: #fff !important;
}

/* Focus for accessibility */
.btn-nav:focus {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

/* Testimonials Styling Section / Reviews */
.testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Blog Section Enhancements */
#blog .card {
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#blog .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.1);
}
#blog .card-img-top {
  height: 200px;
  object-fit: cover;
  border-top-left-radius: .375rem;
  border-top-right-radius: .375rem;
}