/* =========================================================
RK FABRICATION & ROOFING SERVICE
FINAL PROFESSIONAL RESPONSIVE CSS
FULL MOBILE + LAPTOP OPTIMIZED
========================================================= */

/* =========================
GLOBAL RESET
========================= */

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

html{
  scroll-behavior:smooth;
  font-size:16px;
}

body{
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
  background:#f8f8f8;
  color:#222;
  line-height:1.6;
}

img{
  width:100%;
  display:block;
  height:auto;
}

a{
  text-decoration:none;
}

section{
  width:100%;
}

/* =========================
HEADER
========================= */

.header{

  width:min(95%,1400px);

  position:fixed;

  top:20px;
  left:50%;

  transform:translateX(-50%);

  background:#fff;

  padding:18px 35px;

  border-radius:70px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  z-index:1000;

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

.logo img{
  width: 60px;
}

.navbar{

  display:flex;
  align-items:center;
  gap:30px;

  flex-wrap:wrap;
}

.navbar a{

  color:#111;

  font-size:16px;

  font-weight:600;

  transition:0.3s;
}

.navbar a:hover{
  color:#ff6b00;
}

.call-btn{

  background:#ff6b00;

  color:#fff;

  padding:14px 24px;

  border-radius:40px;

  display:flex;
  align-items:center;
  gap:10px;

  font-weight:600;

  transition:0.3s;
}

.call-btn:hover{
  transform:translateY(-3px);
}

/* =========================
HERO SECTION
========================= */

.hero{

  min-height:100vh;

  background:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1600&auto=format&fit=crop');

  background-size:cover;
  background-position:center;

  position:relative;

  display:flex;
  align-items:center;

  padding:150px 7% 100px;
}

.overlay{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,0.68);
}

.hero-content{

  position:relative;

  z-index:2;

  width:100%;

  max-width:750px;

  color:#fff;
}

.hero-content h1{

  font-size:clamp(2.8rem,7vw,5rem);

  line-height:1.1;

  margin-bottom:25px;
}

.hero-content p{

  font-size:clamp(1rem,2vw,1.2rem);

  line-height:1.9;

  margin-bottom:35px;
}

.hero-buttons{

  display:flex;

  gap:20px;

  flex-wrap:wrap;
}

.btn{

  background:#ff6b00;

  color:#fff;

  padding:16px 34px;

  border-radius:40px;

  font-weight:600;

  border:none;

  cursor:pointer;

  transition:0.3s;
}

.btn:hover{

  transform:translateY(-5px);
}

.btn2{

  background:#fff;

  color:#111;
}

/* =========================
BRANDS
========================= */

.brands{

  display:grid;

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

  gap:20px;

  background:#f1e8d5;

  padding:40px 5%;
}

.brand-box{

  text-align:center;

  font-size:clamp(1rem,2vw,1.5rem);

  font-weight:700;
}

/* =========================
ABOUT
========================= */

.about{

  display:grid;

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

  gap:70px;

  align-items:center;

  padding:120px 7%;
}

.about h4{
  color:#ff6b00;
}

.about h2{

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

  margin:20px 0;
}

.about p{

  line-height:1.9;

  margin-bottom:30px;
}

.progress-box{
  margin-bottom:25px;
}

.progress{

  background:#ddd;

  height:8px;

  border-radius:10px;

  margin-top:10px;
}

.progress-fill{

  height:100%;

  background:#111;

  border-radius:10px;
}

.one{
  width:90%;
}

.two{
  width:95%;
}

.about-image{
  position:relative;
}

.about-image img{
  border-radius:25px;
}

.experience{

  position:absolute;

  top:20px;
  right:20px;

  background:#ff6b00;

  color:#fff;

  width:130px;
  height:130px;

  border-radius:50%;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;
}

/* =========================
SERVICES
========================= */

.services{

  background:#fff;

  padding:120px 7%;
}

.section-title{

  text-align:center;

  margin-bottom:70px;
}

.section-title h4{
  color:#ff6b00;
}

.section-title h2{

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

  margin-top:15px;
}

.service-grid{

  display:grid;

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

  gap:30px;
}

.service-card{

  background:#f8f8f8;

  padding:45px 35px;

  border-radius:25px;

  transition:0.4s;
}

.service-card:hover{

  transform:translateY(-10px);

  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.service-card i{

  font-size:45px;

  color:#ff6b00;

  margin-bottom:20px;
}

.service-card h3{

  margin-bottom:15px;
}

/* =========================
PROJECTS
========================= */

.projects{

  padding:120px 7%;
}

.project-grid{

  display:grid;

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

  gap:30px;
}

.project-card{

  overflow:hidden;

  border-radius:25px;
}

.project-card img{

  height:350px;

  object-fit:cover;

  transition:0.5s;
}

.project-card:hover img{
  transform:scale(1.1);
}

/* =========================
OUR WORK
========================= */

.our-work{

  background:#071826;

  padding:120px 7%;
}

.work-title h2{

  color:#fff;

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

  margin-bottom:50px;
}

.filter-buttons{

  display:flex;

  gap:20px;

  flex-wrap:wrap;

  margin-bottom:50px;
}

.filter-btn{

  background:transparent;

  border:2px solid #666;

  color:#fff;

  padding:16px 32px;

  cursor:pointer;

  font-weight:600;

  transition:0.3s;
}

.filter-btn.active,
.filter-btn:hover{

  background:#4d93d9;

  border-color:#4d93d9;
}

.work-gallery{

  display:grid;

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

  gap:25px;
}

.work-card{

  overflow:hidden;

  border-radius:15px;

  background:#fff;
}

.work-card img{

  height:260px;

  object-fit:cover;

  transition:0.5s;
}

.work-card:hover img{
  transform:scale(1.1);
}

.work-info{

  background:#4d93d9;

  color:#fff;

  padding:20px;

  font-size:22px;

  font-weight:700;
}

/* =========================
CONTACT FORM
========================= */

.contact-form-section{

  padding:120px 7%;

  background:#f1e8d5;
}

.contact-form{

  width:100%;

  max-width:900px;

  margin:auto;

  background:#fff;

  padding:60px;

  border-radius:25px;
}

.contact-form input,
.contact-form textarea{

  width:100%;

  padding:18px;

  margin-bottom:20px;

  border:1px solid #ccc;

  border-radius:12px;

  font-family:'Poppins',sans-serif;
}

.contact-form textarea{
  height:170px;
}

.upload-box{

  display:block;

  margin-bottom:25px;

  font-weight:600;
}

/* =========================
FOOTER
========================= */

.footer{

  background:#111;

  color:#fff;

  padding:100px 7% 30px;
}

.footer-grid{

  display:grid;

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

  gap:40px;

  margin-bottom:50px;
}

.footer a{

  color:#ccc;

  display:block;

  margin-top:10px;
}

.copyright{

  border-top:1px solid #333;

  text-align:center;

  padding-top:25px;
}

/* =========================
WHATSAPP BUTTON
========================= */

.whatsapp{

  position:fixed;

  right:25px;
  bottom:25px;

  width:65px;
  height:65px;

  border-radius:50%;

  background:#25d366;

  color:#fff;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:34px;

  z-index:999;

  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* =========================================================
TABLET RESPONSIVE
========================================================= */

@media(max-width:992px){

  .header{

    padding:15px 20px;

    border-radius:25px;
  }

  .hero{

    padding:180px 30px 100px;
  }

  .hero-content{

    max-width:100%;
  }

  .hero-buttons{

    flex-wrap:wrap;
  }

}

/* =========================================================
MOBILE RESPONSIVE
========================================================= */

@media(max-width:768px){

  .header{

    width:95%;

    padding:15px;

    flex-direction:column;

    gap:15px;

    border-radius:20px;
  }

  .logo img{
    width:170px;
  }

  .navbar{

    justify-content:center;

    gap:15px;
  }

  .navbar a{
    font-size:14px;
  }

  .call-btn{

    width:100%;

    justify-content:center;
  }

  .hero{

    min-height:auto;

    padding:220px 20px 100px;
  }

  .hero-content{

    text-align:center;
  }

  .hero-buttons{

    justify-content:center;
  }

  .btn{

    width:100%;

    max-width:300px;

    text-align:center;
  }

  .about,
  .services,
  .projects,
  .our-work,
  .contact-form-section,
  .footer{

    padding-left:20px;
    padding-right:20px;
  }

  .experience{

    width:100px;
    height:100px;

    font-size:14px;
  }

  .filter-buttons{

    justify-content:center;
  }

  .filter-btn{

    width:45%;
  }

  .contact-form{

    padding:30px 20px;
  }

  .whatsapp{

    width:58px;
    height:58px;

    font-size:30px;

    right:15px;
    bottom:15px;
  }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .hero-content h1{
    font-size:2.2rem;
  }

  .hero-content p{
    font-size:15px;
  }

  .filter-btn{
    width:100%;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

}
.work-card.hide {
    display: none !important;
}
/* Gallery Page Design */
.full-gallery {
    padding: 150px 7% 100px;
    background: #f8f8f8;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.gallery-item {
    border-radius: 20px;
    overflow: hidden;
    height: 300px;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.gallery-item img:hover {
    transform: scale(1.1);
}
.feature-card {
    text-align: center;
    padding: 30px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 20px;
}
.feature-card i { font-size: 40px; color: #ff6b00; margin-bottom: 20px; }
.google-reviews { padding: 80px 7%; background: #f9f9f9; }
.reviews-container { display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap; }

.rating-badge { text-align: center; background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.stars { color: #ffb400; font-size: 20px; margin-bottom: 5px; }

.reviews-wrapper { display: flex; gap: 20px; flex-wrap: wrap; }
.review-card { background: #fff; padding: 25px; border-radius: 15px; width: 300px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }

.reviewer { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.avatar { width: 40px; height: 40px; background: #071826; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.avatar-img { width: 40px; height: 40px; border-radius: 50%; }

.review-card h4 { margin: 0; font-size: 16px; }
.review-card p { font-size: 14px; color: #666; margin-top: 10px; }
/* PRELOADER DESIGN */
#preloader {
    position: fixed;
    inset: 0;
    background: #fff; /* White background taaki logo saaf dikhe */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Header se bhi upar rakha hai */
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.logo-animation {
    text-align: center;
}

.logo-animation img {
    width: 120px; /* Logo ka size animate hone se pehle */
    margin-bottom: 20px;
    animation: logoPulse 1.5s infinite ease-in-out;
}

.logo-animation h3 {
    font-size: 24px;
    color: #071826;
    font-weight: 700;
}

/* LOGO PULSE ANIMATION */
@keyframes logoPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); } /* 10% bada hoga */
    100% { transform: scale(1); }
}
/* Contact Section Grid Fix */
.contact-form-section .contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-form-section input, 
.contact-form-section textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
}
.contact-form-section textarea {
    min-height: 120px;
    resize: vertical;
}

/* Back to Top Hover Effect */
#backToTopBtn:hover {
  background-color: #333;
  transition: 0.3s ease;
}
/* ===================================================
   NEW STYLES FOR COST ESTIMATOR & MOBILE STICKY BAR
   =================================================== */

/* Contact Page Inputs */
.contact-form-section .contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-form-section input, 
.contact-form-section select,
.contact-form-section textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    outline: none;
}

/* Sticky Mobile CTA Bar Styles */
.sticky-mobile-bar {
  display: none; /* Desktop par hidden rahega */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.15);
  z-index: 9999;
  justify-content: space-around;
  align-items: center;
}
.cta-item {
  flex: 1;
  text-align: center;
  padding: 15px 10px;
  font-weight: bold;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cta-item.call {
  background-color: #333;
  color: #fff;
}
.cta-item.whatsapp-btn {
  background-color: #25d366;
  color: #fff;
}

/* Back to top default style overrides */
#backToTopBtn {
  display: none; 
  position: fixed; 
  bottom: 90px; 
  right: 20px; 
  z-index: 99; 
  font-size: 20px; 
  border: none; 
  outline: none; 
  background-color: #ff6b00; 
  color: white; 
  cursor: pointer; 
  padding: 12px 18px; 
  border-radius: 50px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: 0.3s;
}
#backToTopBtn:hover {
  background-color: #333;
}

/* Hide desktop floating WhatsApp button on mobile to prevent overlapping */
@media screen and (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  .sticky-mobile-bar {
    display: flex; /* Mobile par dikhega */
  }
  #backToTopBtn {
    bottom: 80px; /* Mobile par thoda upar rahega taki bar ke piche na chhup jaye */
  }
}
/* ===================================================
   UPDATED FEATURES & STYLES FOR RK FABRICATION
   =================================================== */

/* Contact Section Elements */
.contact-form-section .contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-form-section input, 
.contact-form-section select,
.contact-form-section textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    outline: none;
}

/* Sticky Mobile CTA Bar Styles */
.sticky-mobile-bar {
  display: none; 
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.15);
  z-index: 9999;
  justify-content: space-around;
  align-items: center;
}
.cta-item {
  flex: 1;
  text-align: center;
  padding: 15px 10px;
  font-weight: bold;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cta-item.call {
  background-color: #333;
  color: #fff;
}
.cta-item.whatsapp-btn {
  background-color: #25d366;
  color: #fff;
}

/* Back to top default style overrides */
#backToTopBtn {
  display: none; 
  position: fixed; 
  bottom: 90px; 
  right: 20px; 
  z-index: 99; 
  font-size: 20px; 
  border: none; 
  outline: none; 
  background-color: #ff6b00; 
  color: white; 
  cursor: pointer; 
  padding: 12px 18px; 
  border-radius: 50px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: 0.3s;
}
#backToTopBtn:hover {
  background-color: #333;
}

/* Hide desktop floating WhatsApp button on mobile to prevent overlapping */
@media screen and (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  .sticky-mobile-bar {
    display: flex; 
  }
  #backToTopBtn {
    bottom: 80px; 
  }
}