@media(max-width:768px){
.gallery{
grid-template-columns: repeat(2,1fr);
}
}

.title{
text-align:center;
padding:80px 20px;
}

.title h1{
font-size:48px;
letter-spacing:4px;
}

.title p{
font-size:18px;
color:#888;
}

.album-grid img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
} .album-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}/* ================= REELS SECTION ================= */

.reels-section {
  padding: 60px 20px;
  text-align: center;
  background: #f8f6f4;
}

.reels-title {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 30px;
  font-family: serif;
}

.featured-reel {
  max-width: 420px;
  margin: auto;
  margin-bottom: 20px;
}

.featured-reel video {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Horizontal reels wrapper */
.reels-wrapper {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}

.reels-wrapper::-webkit-scrollbar {
  display: none;
}

.reel {
  flex: 0 0 auto;
  width: 180px;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, #e8c9b7, #d9a98c) border-box;
  border: 2px solid transparent;
}

.reel video {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 15px;
}

.reel:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* Thumbnails */
.reels-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  overflow-x: auto;
  justify-content: center;
  padding-bottom: 10px;
}

.reels-thumbnails video {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.reels-thumbnails video:hover {
  transform: scale(1.05);
}

/* Video modal */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.video-modal video {
  width: 90%;
  max-width: 500px;
  border-radius: 15px;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

/* ================= MOBILE MEDIA QUERY ================= */

@media(max-width:768px) {
  .featured-reel video {
    height: 200px;
  }

  .reel video {
    height: 220px;
  }

  .reel {
    width: 150px;
  }

  .reels-thumbnails video {
    width: 70px;
    height: 50px;
  }

  .reels-title {
    font-size: 24px;
  }
}/* ===== REELS SECTION ===== */
.reels-album-section {
  padding: 60px 20px;
  background: #f0f2f5;
  text-align: center;
}

.reels-title {
  font-size: 28px;
  font-family: 'Poppins', serif;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

/* Featured Main Reel */
.featured-reel video {
  width: 100%;
  max-width: 420px;
  border-radius: 25px;
  margin: 20px auto;
  display: block;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.15),
              -5px -5px 15px rgba(255,255,255,0.8);
}

/* Horizontal Reel Album */
.reels-album {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 15px 0;
  scroll-behavior: smooth;
}

.reels-album::-webkit-scrollbar {
  display: none;
}

/* Claymorphic Reel Card */
.reel-card {
  flex: 0 0 auto;
  width: 150px;
  height: 250px;
  border-radius: 25px;
  overflow: hidden;
  cursor: pointer;
  background: #e0e5ec;
  box-shadow: 8px 8px 15px rgba(0,0,0,0.15),
              -8px -8px 15px rgba(255,255,255,0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reel-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
}

/* Hover effect */
.reel-card:hover {
  transform: translateY(-5px);
  box-shadow: 12px 12px 25px rgba(0,0,0,0.2),
              -12px -12px 25px rgba(255,255,255,0.8);
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .reel-card {
    width: 120px;
    height: 200px;
  }

  .featured-reel video {
    width: 100%;
    height: auto;
  }

  .reels-title {
    font-size: 24px;
  }
}/* ===== REELS SECTION ===== */
.reels-album-section {
  padding: 60px 20px;
  background: #f0f2f5;
  text-align: center;
}

.reels-title {
  font-size: 28px;
  font-family: 'Poppins', serif;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

/* Featured Main Reel */
.featured-reel video {
  width: 100%;
  max-width: 420px;
  border-radius: 30px;
  margin: 20px auto;
  display: block;
  box-shadow: 12px 12px 20px rgba(0,0,0,0.15),
              -10px -10px 20px rgba(255,255,255,0.7),
              inset 2px 2px 5px rgba(255,255,255,0.5),
              inset -2px -2px 5px rgba(0,0,0,0.05);
}

/* Horizontal Reel Album */
.reels-album {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 15px 0;
  scroll-behavior: smooth;
}

.reels-album::-webkit-scrollbar {
  display: none; /* hide scrollbar */
}

/* Claymorphic Reel Card */
.reel-card {
  flex: 0 0 auto;
  width: 150px;
  height: 250px;
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, #e0e5ec, #f9f9f9);
  box-shadow: 8px 8px 20px rgba(0,0,0,0.15),
              -8px -8px 20px rgba(255,255,255,0.7),
              inset 1px 1px 3px rgba(255,255,255,0.5),
              inset -1px -1px 3px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reel-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

/* Hover / Tap Effect */
.reel-card:hover {
  transform: translateY(-6px);
  box-shadow: 12px 12px 30px rgba(0,0,0,0.2),
              -12px -12px 30px rgba(255,255,255,0.8),
              inset 2px 2px 5px rgba(255,255,255,0.4),
              inset -2px -2px 5px rgba(0,0,0,0.05);
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .reel-card {
    width: 120px;
    height: 200px;
  }

  .featured-reel video {
    width: 100%;
    height: auto;
  }

  .reels-title {
    font-size: 24px;
  }
}.reels-album{
display:flex;
gap:20px;
overflow-x:auto;
padding:20px;
}

.reel-card{
min-width:160px;
height:280px;
border-radius:20px;
overflow:hidden;
cursor:pointer;

/* Claymorphism */
background:#e0e5ec;
box-shadow:8px 8px 20px #c5c9d1,-8px -8px 20px #ffffff;
}

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

.featured-reel video{
width:100%;
max-width:500px;
border-radius:20px;
box-shadow:10px 10px 25px rgba(0,0,0,0.2);
}.reels-wrapper{
position:relative;
display:flex;
align-items:center;
}

.reels-album{
display:flex;
gap:20px;
overflow-x:auto;
padding:20px;
scroll-behavior:smooth;
}

.reels-album::-webkit-scrollbar{
display:none;
}

.reel-card{
min-width:160px;
height:280px;
border-radius:15px;
overflow:hidden;
cursor:pointer;
}

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

/* Scroll buttons */

.scroll-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:45px;
height:45px;
border:none;
border-radius:50%;
font-size:22px;
cursor:pointer;
background:#e0e5ec;
box-shadow:6px 6px 12px #c5c9d1,-6px -6px 12px #ffffff;
}

.scroll-btn.left{
left:-10px;
}

.scroll-btn.right{
right:-10px;
}.logo-bar{
  width:100%;
  overflow:hidden;
  background:#4a463d; /* dark aesthetic background */
  padding:10px 0;
}

.logo-track{
  white-space:nowrap;
  color:white;
  font-size:14px;
  letter-spacing:2px;
  display:inline-block;
  animation: scrollText 20s linear infinite;
}

@keyframes scrollText{
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100%);
  }
}.instagram-float{
position:fixed;
bottom:90px;
right:25px;
background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);
color:white;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
box-shadow:0 8px 20px rgba(0,0,0,0.3);
z-index:999;
transition:0.3s;
}

.instagram-float:hover{
transform:scale(1.1);
}.reel-card{
border-radius:12px;
overflow:hidden;
transition:0.4s;
}

.reel-card:hover{
transform:translateY(-6px) scale(1.03);
box-shadow:0 15px 40px rgba(245,199,169,0.4);
}body{
background: radial-gradient(circle at top,#2b2b2b,#121212);
}.contact-section{
display:flex;
flex-direction:column;
gap:15px;
margin-top:20px;
}

.contact-item{
display:flex;
align-items:center;
gap:12px;
font-size:16px;
}

.contact-item i{
font-size:18px;
color:#f3c4a3;
}

.contact-item a{
color:white;
text-decoration:none;
transition:0.3s;
}

.contact-item a:hover{
color:#f3c4a3;
}.floating-social{
position:fixed;
top:50%;
right:20px;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:15px;
z-index:999;
}

.floating-social a{
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:20px;
text-decoration:none;
box-shadow:0 6px 15px rgba(0,0,0,0.3);
transition:0.3s;
}

.floating-social a:hover{
transform:scale(1.15);
}

/* Platform Colors */

.facebook{
background:#1877f2;
}

.instagram{
background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);
}

.email{
background:#ff6b6b;
}

.phone{
background:#27ae60;
}

.location{
background:#f39c12;
}/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400&display=swap');

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

/* Services Section */
.services {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  background: url('bb.JPG') no-repeat center center/cover; /* Replace with your JPG path */
}

.services .overlay {
  background-color: rgba(0,0,0,0.5); /* Dark overlay for readability */
  padding: 50px 20px;
}

.services h2 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.services .intro {
  font-size: 18px;
  margin-bottom: 40px;
  line-height: 1.6;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  text-align: left;
}

.services-grid ul {
  list-style: none;
  padding: 0;
}

.services-grid li {
  margin-bottom: 12px;
  font-size: 16px;
}

.services-grid li strong {
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
  color: #ffd700; /* Accent color for headings */
}/* Handwritten Font */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
.font-handwritten {
  font-family: 'Great Vibes', cursive;
}

/* Initials Animation */
@keyframes floatFade {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
  50% { opacity: 0.6; transform: translateY(-5px) scale(1.05); }
  100% { opacity: 0.3; transform: translateY(0px) scale(1); }
}

.initials.animate {
  opacity: 1;
  animation: floatFade 6s ease-in-out infinite;
  transition: opacity 0.8s ease-in-out;
}/* Handwritten Font */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
.font-handwritten { font-family: 'Great Vibes', cursive; }

/* Initials Floating Animation (for subtle motion) */
@keyframes floatFade {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
  50% { opacity: 0.6; transform: translateY(-5px) scale(1.05); }
  100% { opacity: 0.3; transform: translateY(0px) scale(1); }
}

.initials.animate {
  opacity: 1;
  animation: floatFade 6s ease-in-out infinite;
  transition: opacity 0.8s ease-in-out;
}

/* Optional: smoother parallax transform */
.services {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  background: url('bb.JPG') no-repeat center center/cover; /* Your background image */

  /* Rounded top corners only */
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  overflow: hidden; /* ensures child content doesn't spill outside rounded corners */
}