* {

  margin:0;

  padding:0;

  box-sizing:border-box;

  font-family: 'Segoe UI', sans-serif;

}

body {

  color:white;

  background:#000;

}

/* VIDEO */

.video-bg {

  position: fixed;

  inset:0;

  z-index:-2;

}

video {

  width:100%;

  height:100%;

  object-fit:cover;

  filter: brightness(0.5);

}

.overlay {

  position:absolute;

  inset:0;

  background: radial-gradient(circle at center, rgba(0,150,255,0.15), black);

}

/* NAV */

.nav {

  display:flex;

  justify-content:space-between;

  padding:20px;

}

.nav a {

  margin-left:20px;

  text-decoration:none;

  color:white;

}

/* HERO */

.hero {

  text-align:center;

  padding:120px 20px;

}

.hero span {

  background: linear-gradient(90deg,#00c6ff,#0072ff);

  -webkit-background-clip:text;

  color:transparent;

}

.hero-buttons {

  margin-top:20px;

}

.btn {

  padding:12px 25px;

  border-radius:30px;

  margin:5px;

  text-decoration:none;

}

.primary {

  background:#00c6ff;

  color:black;

}

.secondary {

  border:1px solid #00c6ff;

  color:#00c6ff;

}

/* GLASS */

.glass {

  background: rgba(255,255,255,0.05);

  backdrop-filter: blur(15px);

  border-radius:20px;

  border:1px solid rgba(255,255,255,0.1);

}

/* SECTION */

.section {

  padding:60px 20px;

  text-align:center;

}

/* GRID */

.grid {

  display:grid;

  gap:20px;

  margin-top:30px;

}

.card {

  padding:20px;

  transition:0.4s;

}

.card:hover {

  transform: translateY(-10px);

  box-shadow:0 0 30px rgba(0,200,255,0.3);

}

/* CONTACT */

.contact-grid {

  display:grid;

  gap:20px;

}

.form input,

.form textarea {

  width:100%;

  padding:10px;

  margin:10px 0;

  border-radius:10px;

  border:none;

}

.form button {

  padding:10px;

  background:#00c6ff;

  border:none;

  border-radius:10px;

}

/* FOOTER */

.footer {

  text-align:center;

  padding:20px;

}

/* ANIMATION */

.fade-up {

  opacity:0;

  transform:translateY(40px);

  transition:0.8s;

}

.fade-up.active {

  opacity:1;

  transform:translateY(0);

}

/* RESPONSIVE */

@media(min-width:768px){

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

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

}
/* FULLSCREEN LOADER */
#eliteLoader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* VIDEO */
#loaderVideo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6) contrast(1.2);
}

/* OVERLAY */
.loader-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 20%, black 80%);
}

/* TEXT */
.loader-text {
  position: relative;
  z-index: 2;
  font-size: 3rem;
  color: white;
  letter-spacing: 6px;
  display: flex;
  align-items: center;
  gap: 5px;

  opacity: 0;
  transform: scale(0.8);
  animation: reveal 2s ease forwards;
}

/* GRADIENT GAS */
.loader-text span {
  background: linear-gradient(90deg,#00c6ff,#0072ff);
  -webkit-background-clip: text;
  color: transparent;
}

/* EMOJI STYLE */
.emoji {
  font-size: 3rem;
  animation: spin 2s ease infinite alternate;
}

/* ANIMATIONS */
@keyframes reveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spin {
  from { transform: rotate(-10deg); }
  to { transform: rotate(10deg); }
}

/* EXIT */
#eliteLoader.fade-out {
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
/* =========================

MODERN GAS PRICE LIST CSS

========================= */

.gas-price-section {

  padding: 90px 20px;

  background: linear-gradient(135deg, #0d0d0d, #1a1a1a, #111);

  position: relative;

  overflow: hidden;

}

.gas-price-section::before {

  content: "";

  position: absolute;

  width: 400px;

  height: 400px;

  background: rgba(255, 166, 0, 0.08);

  border-radius: 50%;

  top: -150px;

  right: -100px;

  filter: blur(90px);

}

.gas-price-container {

  max-width: 1200px;

  margin: auto;

  text-align: center;

  position: relative;

  z-index: 2;

}

.price-header h2 {

  font-size: 3rem;

  color: #ffa600;

  margin-bottom: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 2px;

}

.price-header p {

  color: #ccc;

  font-size: 1.1rem;

  margin-bottom: 50px;

}

.price-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 25px;

}

.price-card {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 166, 0, 0.15);

  backdrop-filter: blur(12px);

  padding: 35px 20px;

  border-radius: 22px;

  transition: all 0.4s ease;

  box-shadow: 0 10px 35px rgba(0,0,0,0.35);

  position: relative;

}

.price-card:hover {

  transform: translateY(-12px) scale(1.03);

  border-color: #ffa600;

  box-shadow: 0 15px 40px rgba(255,166,0,0.25);

}

.price-card .kg {

  display: block;

  font-size: 2rem;

  color: white;

  font-weight: 700;

  margin-bottom: 12px;

}

.price-card .price {

  display: block;

  font-size: 2.3rem;

  color: #ffa600;

  font-weight: 800;

}

.price-card.featured {

  background: linear-gradient(135deg, #ffa600, #ff7b00);

  transform: scale(1.08);

  border: none;

}

.price-card.featured .kg,

.price-card.featured .price {

  color: #111;

}

.price-card.featured::after {

  content: "BEST VALUE";

  position: absolute;

  top: 15px;

  right: -35px;

  background: #111;

  color: #ffa600;

  padding: 6px 35px;

  font-size: 0.75rem;

  font-weight: bold;

  transform: rotate(45deg);

}

@media (max-width: 768px) {

  .price-header h2 {

    font-size: 2.2rem;

  }

  .price-card {

    padding: 28px 15px;

  }

  .price-card .kg {

    font-size: 1.6rem;

  }

  .price-card .price {

    font-size: 2rem;

  }

}
/* =========================

LUXURY CONTACT SECTION CSS

========================= */

.contact-section {

  padding: 100px 20px;

  background: linear-gradient(135deg, #0b0b0b, #161616, #101010);

  position: relative;

  overflow: hidden;

}

.contact-section::before {

  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  background: rgba(255, 166, 0, 0.06);

  border-radius: 50%;

  top: -200px;

  left: -150px;

  filter: blur(120px);

}

.contact-container {

  max-width: 1300px;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  gap: 50px;

  align-items: center;

  position: relative;

  z-index: 2;

}

.contact-tag {

  color: #ffa600;

  font-weight: 700;

  letter-spacing: 2px;

  font-size: 0.95rem;

}

.contact-info h2 {

  font-size: 3.2rem;

  color: white;

  margin: 15px 0;

  line-height: 1.2;

}

.contact-info p {

  color: #cfcfcf;

  font-size: 1.1rem;

  line-height: 1.8;

  margin-bottom: 35px;

}

.contact-box {

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.contact-item {

  display: flex;

  align-items: center;

  gap: 15px;

  color: white;

  font-size: 1rem;

  background: rgba(255,255,255,0.04);

  padding: 16px 20px;

  border-radius: 14px;

  border: 1px solid rgba(255,166,0,0.08);

}

.contact-item i {

  color: #ffa600;

  font-size: 1.2rem;

}

.contact-form-box {

  background: rgba(255,255,255,0.04);

  backdrop-filter: blur(14px);

  border: 1px solid rgba(255,166,0,0.12);

  padding: 40px;

  border-radius: 28px;

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

}

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.input-group input,

.input-group select,

.input-group textarea {

  width: 100%;

  padding: 16px 18px;

  border: none;

  outline: none;

  border-radius: 14px;

  background: rgba(255,255,255,0.06);

  color: white;

  font-size: 1rem;

  border: 1px solid transparent;

  transition: 0.3s ease;

}

.input-group input:focus,

.input-group select:focus,

.input-group textarea:focus {

  border-color: #ffa600;

  background: rgba(255,255,255,0.08);

}

.input-group input::placeholder,

.input-group textarea::placeholder {

  color: #aaa;

}

.contact-btn {

  padding: 18px;

  border: none;

  border-radius: 14px;

  background: linear-gradient(135deg, #ffa600, #ff7b00);

  color: #111;

  font-size: 1.1rem;

  font-weight: 800;

  cursor: pointer;

  transition: all 0.4s ease;

  text-transform: uppercase;

  letter-spacing: 1px;

}

.contact-btn:hover {

  transform: translateY(-4px);

  box-shadow: 0 10px 30px rgba(255,166,0,0.25);

}

@media (max-width: 768px) {

  .contact-info h2 {

    font-size: 2.3rem;

  }

  .contact-form-box {

    padding: 28px;

  }

}
/* =========================

QUICK FIX CSS — MAKES CONTACT SECTION FIT YOUR SITE BETTER

Just ADD this below your current contact CSS

========================= */

/* Better spacing + alignment */

.contact-section {

  padding: 70px 20px !important;

}

/* Makes text cleaner and more premium */

.contact-container {

  max-width: 1250px;

  gap: 30px !important;

  align-items: start !important;

}

/* Fix heading size for mobile */

.contact-info h2 {

  font-size: clamp(2.2rem, 7vw, 4.5rem) !important;

  line-height: 1.05 !important;

  margin-bottom: 20px !important;

}

/* Better paragraph readability */

.contact-info p {

  font-size: 1.05rem !important;

  line-height: 1.8 !important;

  max-width: 95%;

  margin-bottom: 28px !important;

}

/* Contact boxes fit site theme better */

.contact-item {

  min-height: 75px;

  border-radius: 18px !important;

  padding: 20px 24px !important;

  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;

  transition: all 0.3s ease;

}

.contact-item:hover {

  transform: translateX(8px);

  border-color: rgba(255,166,0,0.3) !important;

}

/* FORM BOX BETTER WIDTH */

.contact-form-box {

  padding: 30px !important;

  border-radius: 24px !important;

}

/* Inputs cleaner + more site-consistent */

.input-group input,

.input-group select,

.input-group textarea {

  padding: 18px 20px !important;

  font-size: 1.05rem !important;

  border-radius: 18px !important;

}

/* Button more premium */

.contact-btn {

  border-radius: 18px !important;

  font-size: 1.25rem !important;

  padding: 20px !important;

  letter-spacing: 2px !important;

}

/* MOBILE FIX */

@media (max-width: 768px) {

  .contact-container {

    grid-template-columns: 1fr !important;

    gap: 45px !important;

  }

  .contact-info {

    text-align: left !important;

  }

  .contact-info h2 {

    font-size: clamp(2rem, 11vw, 3.4rem) !important;

  }

  .contact-info p {

    font-size: 1rem !important;

    max-width: 100%;

  }

  .contact-form-box {

    padding: 22px !important;

  }

  .contact-item {

    min-height: 68px;

    font-size: 0.95rem !important;

  }

  .contact-btn {

    font-size: 1.1rem !important;

    padding: 18px !important;

  }

}

/* EXTRA SMALL PHONE FIX */

@media (max-width: 480px) {

  .contact-section {

    padding: 55px 16px !important;

  }

  .contact-info h2 {

    font-size: 2.5rem !important;

  }

  .contact-tag {

    font-size: 0.8rem !important;

    letter-spacing: 3px !important;

  }

  .input-group textarea {

    min-height: 150px;

  }

}
/* =========================

PREMIUM WHATSAPP FLOAT BUTTON

========================= */

.whatsapp-float {

  position: fixed;

  bottom: 22px;

  right: 22px;

  width: 68px;

  height: 68px;

  background: linear-gradient(135deg, #25D366, #1ebe5d);

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  font-size: 2.3rem;

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);

  z-index: 9999;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  animation: whatsappPulse 2s infinite;

}

/* Hover */

.whatsapp-float:hover {

  transform: scale(1.1);

  box-shadow: 0 14px 35px rgba(37,211,102,0.45);

}

/* Pulse effect */

@keyframes whatsappPulse {

  0% {

    box-shadow: 0 0 0 0 rgba(37,211,102,0.45);

  }

  70% {

    box-shadow: 0 0 0 18px rgba(37,211,102,0);

  }

  100% {

    box-shadow: 0 0 0 0 rgba(37,211,102,0);

  }

}

/* Mobile */

@media (max-width: 768px) {

  .whatsapp-float {

    width: 60px;

    height: 60px;

    font-size: 2rem;

    bottom: 18px;

    right: 18px;

  }

}
/* =========================

PERFORMANCE + SMOOTH ANIMATION OPTIMIZER

========================= */

/* GPU acceleration for smoother animations */

.price-card,

.contact-item,

.contact-btn,

.whatsapp-float,

nav,

.hero-content,

.service-card {

  will-change: transform, opacity;

  transform: translateZ(0);

  backface-visibility: hidden;

  perspective: 1000px;

}

/* Prevent lag from blur + shadows */

.contact-section::before,

.gas-price-section::before,

.hero-section::before {

  will-change: transform;

  transform: translate3d(0,0,0);

}

/* Image performance */

img {

  max-width: 100%;

  height: auto;

  display: block;

  content-visibility: auto;

}

/* Offscreen rendering boost */

section,

.price-card,

.contact-form-box,

.service-card {

  content-visibility: auto;

  contain-intrinsic-size: 1px 500px;

}

/* Keeps animations smooth */

* {

  text-rendering: optimizeSpeed;

}

/* Faster scrolling */

body {

  overscroll-behavior-y: none;

}

/* Mobile animation optimization */

@media (max-width: 768px) {

  .price-card,

  .contact-item,

  .service-card {

    animation-duration: 0.7s !important;

  }

}

.reviews-section {

  padding: 100px 20px;

  background: linear-gradient(135deg, #101010, #171717, #0d0d0d);

  position: relative;

  overflow: hidden;

}

.reviews-container {

  max-width: 1300px;

  margin: auto;

  text-align: center;

}

.reviews-header span {

  color: #ffa600;

  letter-spacing: 2px;

  font-weight: 700;

}

.reviews-header h2 {

  font-size: clamp(2.5rem, 5vw, 4rem);

  color: white;

  margin: 15px 0;

}

.reviews-header p {

  color: #cfcfcf;

  margin-bottom: 55px;

  font-size: 1.1rem;

}

.reviews-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 28px;

}

.review-card {

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,166,0,0.1);

  backdrop-filter: blur(12px);

  border-radius: 24px;

  padding: 35px 28px;

  transition: all 0.35s ease;

  box-shadow: 0 10px 35px rgba(0,0,0,0.25);

}

.review-card:hover {

  transform: translateY(-8px);

  border-color: rgba(255,166,0,0.35);

}

.review-card.featured {

  background: linear-gradient(135deg, rgba(255,166,0,0.14), rgba(255,123,0,0.08));

  transform: scale(1.03);

}

.stars {

  color: #ffa600;

  font-size: 1.4rem;

  margin-bottom: 18px;

}

.review-card p {

  color: white;

  line-height: 1.8;

  font-size: 1rem;

  margin-bottom: 18px;

}

.review-card h4 {

  color: #ffa600;

  font-size: 1rem;

  font-weight: 700;

}

/* FOOTER */

.site-footer {

  padding: 26px 20px;

  background: #0a0a0a;

  border-top: 1px solid rgba(255,166,0,0.08);

  text-align: center;

}

.site-footer p {

  color: #9f9f9f;

  font-size: 0.95rem;

  letter-spacing: 0.5px;

}

.site-footer p:hover {

  color: #ffa600;

  transition: 0.3s ease;

}

/* MOBILE */

@media (max-width: 768px) {

  .reviews-section {

    padding: 75px 16px;

  }

  .review-card {

    padding: 28px 22px;

  }

  .reviews-header p {

    font-size: 1rem;

  }


/* =========================

   DELIVERY AREA SECTION

========================= */

.delivery-area {

    padding: 80px 5%;

    background: transparent;

    position: relative;

}

.delivery-area h2 {

    text-align: center;

    font-size: clamp(2rem, 4vw, 3rem);

    margin-bottom: 20px;

    color: #fff;

}

.delivery-area p {

    max-width: 900px;

    margin: 0 auto 40px;

    text-align: center;

    color: rgba(255,255,255,0.8);

    line-height: 1.8;

}

.areas-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));

    gap: 20px;

    margin-bottom: 40px;

}

.areas-grid div {

    background: rgba(255,255,255,0.05);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 16px;

    padding: 18px;

    text-align: center;

    color: #fff;

    font-weight: 600;

    transition: all .3s ease;

}

.areas-grid div:hover {

    transform: translateY(-5px);

    border-color: #ffb400;

    box-shadow: 0 10px 25px rgba(255,180,0,.2);

}

.map-container {

    overflow: hidden;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,0.1);

}

.map-container iframe {

    width: 100%;

    height: 450px;

    border: 0;

    display: block;

}

/* =========================

   STICKY MOBILE BAR

========================= */

.sticky-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 65px;

    background: rgba(10,10,10,0.95);

    backdrop-filter: blur(15px);

    border-top: 1px solid rgba(255,255,255,0.08);

    display: flex;

    justify-content: space-around;

    align-items: center;

    z-index: 99999;

}

.sticky-bar a {

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .3s ease;

}

.sticky-bar a:hover {

    color: #ffb400;

}

@media (min-width: 769px) {

    .sticky-bar {

        display: none;

    }

  
}
  .gallery{

padding:100px 20px;

text-align:center;

position:relative;

}

.gallery h2{

font-size:clamp(2rem,5vw,4rem);

margin-bottom:40px;

color:#fff;

}

.gallery-grid,

.video-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

max-width:1400px;

margin:40px auto;

}

.gallery-grid img,

.video-grid video{

width:100%;

height:320px;

object-fit:cover;

```

border-radius:24px;

background:rgba(255,255,255,.04);

backdrop-filter:blur(15px);

border:1px solid rgba(0,180,255,.12);

transition:.5s ease;

box-shadow:

  0 10px 30px rgba(0,0,0,.35);

```

}

.gallery-grid img:hover,

.video-grid video:hover{

transform:translateY(-10px) scale(1.02);

```

border-color:#00c6ff;

box-shadow:

  0 20px 50px rgba(0,170,255,.25),

  0 0 30px rgba(0,170,255,.15);

```

}

.gallery-grid img{

cursor:pointer;

}

.gallery::before{

content:"";

position:absolute;

width:500px;

height:500px;

top:-150px;

left:-100px;

```

background:rgba(0,170,255,.08);

border-radius:50%;

filter:blur(120px);

```

}
  body{

  opacity:1;

  visibility:visible;

}

img{

  max-width:100%;

  height:auto;

}
  .price-card img{

    width:140px;

    height:140px;

    object-fit:contain;

    margin:0 auto 20px;

    display:block;

}
  /* DELIVERY SECTION FIX */

.delivery-list{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:30px;

}

.delivery-item{

    background:rgba(255,255,255,0.05);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    padding:25px;

    text-align:center;

    font-size:1.8rem;

    font-weight:700;

    color:white;

}

/* FIX MAP */

.map-container iframe{

    width:100%;

    border-radius:20px;

    overflow:hidden;

}

/* FIX BUTTON BAR */

.floating-contact{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    z-index:9999;

    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:15px;

    background:rgba(0,0,0,.85);

    backdrop-filter:blur(20px);

    border-top:1px solid rgba(255,255,255,.08);

}

.floating-contact a{

    color:white;

    text-decoration:none;

    font-weight:700;

    font-size:1.2rem;

}

/* MOBILE FIX */

@media(max-width:768px){

    .delivery-item{

        font-size:1.5rem;

        padding:20px;

    }

    .floating-contact a{

        font-size:1rem;

    }

}