/* ===============================
   Destiny Cleaning Services
   Luxury Cleaning Website CSS
================================ */

:root {
  --gold: #d4af37;
  --gold-light: #f3e4b2;
  --pink: #f7c1d9;
  --pink-dark: #df8db4;
  --dark: #1f1f2e;
  --text: #333;
  --light: #faf6fb;
  --white: #ffffff;
  --gray: #666;
}


/* GLOBAL */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin:0;
  font-family:'Poppins', sans-serif;
  color:var(--text);
  background:white;
}

h1,h2,h3,h4 {
  font-family:'Playfair Display', serif;
  color:var(--dark);
}

a {
  text-decoration:none;
}


/* ===============================
   NAVBAR
================================ */

.navbar {
  padding:15px 0;
  background:white;
}

.logo {
  height:70px;
  width:70px;
  object-fit:cover;
  border:3px solid var(--gold);
  border-radius:50%;
  padding:2px;
  background:white;
}

@media(max-width:768px){
  .logo {
    height:55px;
    width:55px;
  }
}

.brand-text {
  font-size:1.1rem;
  font-weight:600;
  color:var(--dark);
}

.nav-link {
  color:var(--dark)!important;
  margin-left:15px;
}

.nav-link:hover {
  color:var(--gold)!important;
}


/* ===============================
 BUTTONS
================================ */

.btn {
  border-radius:50px;
  padding:12px 25px;
  font-weight:500;
}


.btn-gold {
  background:var(--gold);
  border:1px solid var(--gold);
  color:var(--dark);
}

.btn-gold:hover {
  background:#b99225;
  color:white;
}


.btn-outline-gold {
  border:1px solid var(--gold);
  color:var(--gold);
}

.btn-outline-gold:hover {
  background:var(--gold);
  color:white;
}



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

.hero-section {

  min-height:95vh;
  position:relative;
  padding-top:120px;

  background-image:url("flyer-bg.jpg");

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

  display:flex;
  align-items:center;

}


.hero-section .overlay {

 position:absolute;
 inset:0;

 background:
 linear-gradient(
 120deg,
 rgba(31,31,46,.85),
 rgba(223,141,180,.65)
 );

}


.hero-section .container {

 position:relative;
 z-index:2;

}


.hero-kicker {

 color:var(--gold-light);
 text-transform:uppercase;
 letter-spacing:3px;
 font-size:.9rem;

}


.hero-title {

 color:white;
 font-size:3.2rem;
 line-height:1.2;

}


.hero-subtitle {

 color:white;
 font-size:1.1rem;
 max-width:550px;

}


.hero-card {

 background:white;
 padding:30px;
 border-radius:25px;

}


/* ===============================
 SECTIONS
================================ */

.section {

 padding:80px 0;

}


.section-title {

 font-size:2.2rem;
 margin-bottom:15px;

}


.section-subtitle {

 color:var(--gray);

}


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

.service-card {

 background:white;
 padding:30px;
 border-radius:25px;

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

 height:100%;

 transition:.3s;

}


.service-card:hover {

 transform:translateY(-8px);

}


.service-icon {

 width:60px;
 height:60px;

 background:var(--pink);

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

 border-radius:50%;

 color:var(--dark);

 font-size:25px;

 margin-bottom:20px;

}


.service-title {

 font-size:1.4rem;

}


.service-text {

 color:var(--gray);

}


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

.feature-list {

 list-style:none;
 padding:0;

}


.feature-list li {

 display:flex;
 margin-bottom:25px;

}


.feature-icon {

 width:45px;
 height:45px;

 background:var(--light);

 border-radius:50%;

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

 color:var(--gold);

 margin-right:15px;

 flex-shrink:0;

}


/* ===============================
 TESTIMONIALS
================================ */


.testimonial-card {

 background:white;
 padding:35px;
 border-radius:25px;

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

}


.testimonial-text {

 font-style:italic;

}


/* ===============================
 STATS
================================ */


.stats-card {

 background:white;
 padding:30px;
 border-radius:25px;

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

}


.stat-number {

 display:block;

 font-size:2rem;
 color:var(--gold);
 font-weight:700;

}


.stat-label {

 color:var(--gray);

}



/* ===============================
 PAGE HERO
================================ */

.page-hero {

 padding:150px 0 60px;

 background:
 linear-gradient(
 135deg,
 #fff,
 var(--light)
 );

}


.page-title {

 font-size:3rem;

}


.page-subtitle {

 color:var(--gray);

}



/* ===============================
 GALLERY
================================ */

.ba-card {

 overflow:hidden;
 border-radius:20px;
 background:white;

}


.ba-card img {

 width:100%;
 display:block;

}



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


.contact-card {

 background:white;
 padding:35px;

 border-radius:25px;

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

}


.form-control,
.form-select {

 padding:12px;
 border-radius:12px;

}


/* ===============================
 FLOATING BUTTONS
================================ */


.floating-btn {

 position:fixed;

 right:20px;

 color:white;

 padding:12px 20px;

 border-radius:50px;

 z-index:999;

}


.floating-call {

 bottom:80px;

 background:var(--pink-dark);

}


.floating-book {

 bottom:20px;

 background:var(--gold);

 color:var(--dark);

}



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


.footer {

 background:white;

 border-top:1px solid #eee;

 padding:30px 0;

}



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


@media(max-width:768px){


.hero-title {

 font-size:2.2rem;

}


.hero-section {

 padding-top:100px;

}


.page-title {

 font-size:2.2rem;

}


.section {

 padding:50px 0;

}


.nav-link {

 margin-left:0;

}


}