* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Playfair Display', serif;
      color: #d4af37;
      background-color: #000;
      overflow-x: hidden;
      padding-top: 80px; /* or whatever your header height is */

    }

    .dsflex {
      display: flex;
    }

    .spsbtw {
      justify-content: space-between;
    }

    header {
      background: rgba(0, 0, 0, 0.8);
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 10;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #d4af37;
    }

    header h1 {
      font-size: 1.5rem;
    }
    .log-service {
      font-family: inital;
      font-size: 20px;
    }

    .menubar{
      margin: 10px;
      cursor: pointer;
    }

    .menu-section a {
      text-decoration: none;
    }

     /* Menu bar styles */
    /* .menubar {
      padding: 10px 20px;
      cursor: pointer;
    } */

    .menu-toggle {
      display: none;
      cursor: pointer;
      font-size: 1.5rem;
      padding: 10px 20px;
      background-color: transparent;
      color: #d4af37;
      border: none;
    }

    .menu-section {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

/* book now animation */
.book-btn {
      cursor: pointer;
      text-decoration: none;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 28px;
      font-size: 18px;
      font-family: 'Segoe UI', sans-serif;
      font-weight: bold;
      color: white;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      background: linear-gradient(270deg, #d4af37, #ff9900, #d4af37);
      background-size: 600% 600%;
      animation: gradientMove 5s ease infinite, pulse 2s ease-in-out infinite;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }

    .book-btn .icon {
      font-size: 20px;
      animation: bounce 1.2s infinite;
      text-decoration: none;
    }

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

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
      50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.9); }
    }

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

    /*-------*/

.services a {
  text-decoration: none;
  color: inherit;
}
.services a div:hover {
  transform: scale(1.05);
}

.phone {
  transition: transform 0.3s ease, color 0.3s ease;
  position: relative;
  text-decoration: none;
}

.phone::before {
  content: '\260E';
  margin-right: 8px;
  animation: ring 2s infinite;
}

.phone:hover {
  color: #fff;
  transform: scale(1.1);
}

.phone::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #d4af37;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.phone:hover::after {
  transform: scaleX(1);
}

@keyframes ring {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-15deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  70% { transform: rotate(0deg); }
}

    .hero {
      background-image: url('./images/rollsroys.png');
      background-size: cover;
      background-position: center;
      min-height: 100vh;
      max-width:100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #d4af37;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0,0,0,0.6);
    }

    .hero-content {
      z-index: 2;
    }

    .hero h2 {
      font-size: 3rem;
      animation: fadeInDown 2s ease-in-out;
    }

    @keyframes fadeInDown {
      0% { opacity: 0; transform: translateY(-50px); }
      100% { opacity: 1; transform: translateY(0); }
    }


      /* card part */
/* Transparent override stays */
.transpar {
  background: transparent !important;
}

.service-section {
  padding: 40px 20px;
  background: #fff;
  text-align: center;
}

.service-section h2 {
  font-size: 28px;
  font-family: 'Playfair Display', serif;
}
.service-section h2 span {
  color: #d4af37;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
  padding-bottom: 121px;
}

/* CARD animation logic */
.card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  max-width: 320px;
  width: 100%;
  animation: cardEntrance 0.8s ease-in-out forwards, pulseCard 4s infinite ease-in-out;
  opacity: 0;
  transform: scale(0.95);
}
.service-cards a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Stagger effect */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }

@keyframes cardEntrance {
  to {
    transform: scale(1.03);
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
}

@keyframes pulseCard {
  0%, 100% {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 14px 35px rgba(212, 175, 55, 0.4);
  }
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card-label {
  background: #d4af37;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 0 0 12px 0;
  text-align: left;
  position: relative;
  top: -30px;
  display: inline-block;
  font-size: 16px;
}

.card p {
  padding: 15px;
  font-size: 15px;
  color: #333;
  text-align: left;
}

/* Responsive layout: 1 card per row on mobile */
@media (max-width: 768px) {
  .service-cards {
    flex-direction: column;
    align-items: center;
  }

  .menu-section {
    display: none;
    flex-direction: column;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    margin-top: 20px;
  }

  .menu-section a {
    text-decoration: none;
  }

  .menu-section.show {
    display: flex;
    background: transparent;
  }

  .menu-toggle {
    display: block;
  }
}


/* ------------------- */

    section {
      /* padding: 80px 20px; */
      /* max-width: 1000px; */
      margin: auto;
    }

    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      text-align: center;
      justify-items: center; 
    }

    .services div {
      background-color: rgba(255, 255, 255, 0.05);
      padding: 30px;
      border: 1px solid #d4af37;
      border-radius: 10px;
      transition: transform 0.3s ease;
    }

    .services div:hover {
      transform: scale(1.05);
    }

    .tagline {
      text-align: center;
      font-size: 1.5rem;
      margin-bottom: 30px;
      color: #fff;
    }

    footer {
      text-align: center;
      padding: 30px;
      background: #111;
      border-top: 1px solid #d4af37;
    }

   

    /*  animation style  codepen */

    :root {
  --light-blue: #b3e3f7;
  --coral: #ed7448;
  --green: #abe773;
  --pink: #fcbcda;

  --blue: rgb(46, 40, 91);
  --grey: rgb(103, 99, 116);
  --red: rgb(166, 37, 60);
  --red2: rgb(167, 81, 115);
  --yellow: rgb(216, 172, 44);
  --white: rgb(249, 245, 237);

  --speed: 1.2s;
  --delay: calc(var(--speed) / 2); /* should half of the speed */
  --dark: #071e41;
  --perspective-angle: -37deg;
  --ground-y-angle: -50deg;
  --scen-depth: -400px;
}

* {
  font-family: "Oxygen", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  padding: 0;
  margin: 0;
  color: white;
  scroll-behavior: smooth;
}

body {
  /* background-color: var(--dark); */
  /* display: flex;
  justify-content: center; */
}

.container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 675px;
  overflow: hidden;
}
.perspective {
  perspective-origin: 300px 420px;
  perspective: 2200px;
  width: 100%;
  height: 100%;
}

.street-scen {
  position: absolute;
  height: 78%;
  width: 100%;
  transform: rotateY(var(--perspective-angle))
    translate3d(-400px, -100px, -100px);
}

.lights {
  position: absolute;
  height: 90%;
  width: 100%;
}
.lights1 {
  animation: var(--speed) moving-light infinite linear;
}
.lights2 {
  transform: translateX(1300px);
  animation: var(--speed) moving-light infinite linear var(--delay);
}

.lights .light {
  position: absolute;
  height: 1%;
  width: 100%;
  border-radius: 25px;
}

.street-scen .curb {
  position: absolute;
  top: 95%;
  height: 5%;
  width: 200%;
  z-index: 3;
  background: var(--grey);
  filter: blur(3px);
}
.curb .drain {
  position: absolute;
  bottom: 0;
  right: 0%;
  width: 6%;
  height: 80%;
  background-color: var(--dark);
  animation: var(--speed) moving-drain infinite linear;
}

/* billboard */
.billboard {
  position: absolute;
  width: 400px;
  height: 200px;
  transform-style: preserve-3d;
  animation: var(--speed) moving-billboard infinite linear;
}
.billboard .front,
.billboard .right,
.billboard .bottom {
  position: absolute;
}
.billboard .front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--red);
  transform-style: preserve-3d;
}

.billboard .front .square {
  position: absolute;
  width: 31%;
  height: 60%;
  top: 25%;
  left: 38%;
  background: linear-gradient(
    var(--grey) 1%,
    var(--white) 6% 80%,
    var(--grey) 97%
  );
  box-shadow: inset 0px -20px 41px 0px var(--grey),
    inset -5px 1px 10px 5px var(--yellow);
}
.billboard .front .line {
  position: relative;
  width: 95%;
  height: 4%;
  margin: 1% 0;
  background: linear-gradient(
    90deg,
    var(--grey) 1%,
    var(--white) 12% 83%,
    var(--grey) 99%
  );
}
.billboard .front .line1 {
  margin: 12% 0 1% 0;
}
.billboard .front .bottom-lights {
  position: absolute;
  width: 100%;
  height: 13%;
  bottom: 0;
}
.billboard .bottom-lights {
  background: linear-gradient(
    90deg,
    var(--grey) 13%,
    var(--yellow) 15%,
    var(--white) 22% 33%,
    var(--yellow) 42%,
    var(--grey) 46% 54%,
    var(--yellow) 58%,
    var(--white) 67% 78%,
    var(--yellow) 85%,
    var(--grey) 87%
  );
}
.billboard .front .entrance {
  position: absolute;
  top: 200px;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    90deg,
    var(--blue) 8%,
    var(--red2) 28% 72%,
    var(--blue) 92%
  );
  transform: translateZ(-100px);
}

.billboard .right {
  width: 100px;
  height: 100%;
  background-color: var(--blue);
  transform: rotateY(90deg) translate3d(49px, 0px, 350px);
}

.billboard .bottom {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    90deg,
    var(--grey) 8%,
    var(--red2) 28% 72%,
    var(--grey) 92%
  );
  transform: rotateX(-90deg) translate3d(0px, 50px, 150px);
}
.billboard .bottom .bottom-lights {
  position: absolute;
  width: 100%;
  height: 40px;
}

/* Ground */
.ground {
  position: absolute;
  top: 54%;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #1f1e1e;
  transform: rotateX(70deg) rotateY(-6deg) rotateZ(19deg)
    translate3d(100px, 0px, 200px);
}

.marking-container {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: var(--speed) moving-ground infinite linear;
}
.ground .lane {
  position: absolute;
  top: 33%;
  right: 0;
  height: 2.3%;
  width: 50%;
  background-color: white;
}
.ground .marking {
  position: absolute;
  height: 1%;
  width: 50%;
}

/* foreground taxi */
.taxi {
  position: relative;  
  height: 100%;
  bottom: 550px;
  left: 550px;
  transform: translateX(-50%);
  width: 100%;           /* Use relative width for responsiveness */
       /* iPhone 14 Pro Max screen width */
  
  /* background-image: url('./images/taxi-only.png'); */
  background-image: url(./images/sub.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 99;
}


/* Utility classes */
.white {
  background: linear-gradient(90deg, white 45%, transparent 99%);
}
.bright-yellow {
  background: linear-gradient(90deg, yellow 45%, transparent 99%);
}
.yellow {
  background: linear-gradient(90deg, var(--yellow) 45%, transparent 99%);
}
.pink {
  background: linear-gradient(90deg, var(--pink) 45%, transparent 99%);
}
.coral {
  background: linear-gradient(90deg, var(--coral) 45%, transparent 99%);
}
.green {
  background: linear-gradient(90deg, var(--green) 45%, transparent 99%);
}
.light-blue {
  background: linear-gradient(90deg, var(--light-blue) 45%, transparent 99%);
}

.top10 {
  top: 10%;
}
.top20 {
  top: 20%;
}
.top30 {
  top: 30%;
}
.top40 {
  top: 40%;
}
.top50 {
  top: 50%;
}
.top60 {
  top: 60%;
}
.top70 {
  top: 70%;
}
.top80 {
  top: 80%;
}
.top90 {
  top: 90%;
}
.top100 {
  top: 100%;
}

.left50 {
  left: 50%;
}
.left70 {
  left: 70%;
}
.left90 {
  left: 90%;
}
.left130 {
  left: 130%;
}
.left150 {
  left: 150%;
}
.left190 {
  left: 190%;
}
.left230 {
  left: 230%;
}
.left260 {
  left: 260%;
}
.left290 {
  left: 290%;
}

.black {
  background-color: #000000;
}
.dark1 {
  background-color: #956427;
}
.dark2 {
  background-color: #5c2234;
}
.dark3 {
  background-color: #574006;
}
.dark4 {
  background-color: #2b2e6f;
}
.dark5 {
  background-color: #104c1c;
}

@keyframes moving-light {
  from {
    transform: rotateY(var(--perspective-angle))
      translate3d(1200px, 0px, var(--scen-depth));
  }
  to {
    transform: rotateY(var(--perspective-angle))
      translate3d(-1800px, 0px, var(--scen-depth));
  }
}

@keyframes moving-drain {
  from {
    right: 0%;
  }
  to {
    right: 100%;
  }
}

@keyframes moving-billboard {
  from {
    transform: rotateY(var(--perspective-angle))
      translate3d(800px, -50px, var(--scen-depth));
  }
  to {
    transform: rotateY(var(--perspective-angle))
      translate3d(-2200px, -50px, var(--scen-depth));
  }
}

@keyframes moving-ground {
  from {
    transform: translateX(700px);
  }
  to {
    transform: translateX(-2300px);
  }
}


.social-links a {
  text-decoration: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  transition: color 0.3s ease;
}

.social-links a i {
  font-size: 18px;
}

/* Instagram brand color */
.social-links a[href*="instagram.com"] i {
  color: #E4405F;
}

/* WhatsApp brand color */
.social-links a[href*="wa.me"] i {
  color: #25D366;
}

/* Optional: text color stays gold, icons colored separately */
.social-links a {
  color: #d4af37;
}

.social-links a:hover {
  color: #ffffff;
}


@media (max-width: 768px) {
  h1, h2 {
    font-size: 22px;
    padding: 0 10px;
  }

  .book-btn {
    font-size: 16px;
    padding: 10px 20px;
  }

  .services div {
    width: 280px;

  }
  header {
      flex-direction: column;
      text-align: center;
    }

  .hero h2 {
    font-size: 2rem;
  }
}

@media (max-width: 530px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero h2 {
    font-size: 1.8rem;
  }

  .tagline {
    font-size: 1.2rem;
  }

  .services {
    grid-template-columns: 1fr;
  }

  header h1 {
    font-size: 1.2rem;
  }

  .phone {
    font-size: 0.9rem;
  }
  .taxi {
    pointer-events: none;
    position: relative; /* instead of absolute or fixed */
    z-index: 1;
    max-width: 590px;
    bottom: 310px;
    left: 150px;
    width:250vw;
    
  }
  .ground {
    pointer-events: none;
    position: relative; /* instead of absolute or fixed */
    z-index: 1;
    top: 54%;
    z-index: -1;
    width: 111%;
    height: 100%;
    background-color: #1f1e1e;
    transform: rotateX(70deg) rotateY(-6deg) rotateZ(19deg) translate3d(100px, 0px, 200px);
}
}