:root {
   --color-first:#365B6D;
   --color-second: #F4F6F9;
   --color-third:#1D4355;
   --color-four: #FFFFFF;
   --color-five:#0000;
}
/* .pattern-light{
  --s: 50px;
  --c: #dfe8ed; /* light base */
  /* --color-five: #e8eef2; soft fill */

  /* --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at; */

  /* keep same pattern logic */
  /* --_c: var(--color-five) 66%, rgba(54,91,109,0.22) 68% 70%, var(--color-five) 72%;

  background:
    radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0/var(--_s),
    repeating-conic-gradient(var(--c) 0 25%, var(--color-five) 0 50%) 0 0/var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);

  background-attachment: fixed;
  background-color: var(--color-second);
  color: var(--color-third);
} */

/* .pattern-light {

--s: 50px;

--c: var(--color-second); Pure white core */

/* --_s: calc(2*var(--s)) calc(2*var(--s));

--_g: 35.36% 35.36% at; */


/* We use your dark teal (color-first) for the thin stroke

and transparency (#0000) to create the 'etched' gap */

/* --_c: #0000 66%, var(--color-first) 68% 70%, #0000 72%; */


/* background:

radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s)/var(--_s),

radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s)/var(--_s),

radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0/var(--_s),

radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0/var(--_s), */

/* This creates the light-on-light grid */

/* repeating-conic-gradient(var(--color-second) 0 25%, var(--color-second) 0 50%) 0 0/var(--_s),

radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--color-second); */


/* 
background-attachment: fixed;

background-color: var(--color-second); The light grey fallback

} */

.pattern-light {
  --s: 50px;
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  
  /* Use transparency (#0000) at the ends to allow the 'waves' to link up */
--_c: var(--color-four) 66%, rgba(54,91,109,0.08) 68% 70%, transparent 72%;

  background:
    /* We swap the offsets (0 0 vs s s) to change the 'weave' direction */
    radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s)/var(--_s),
    
    /* Simplified background to stop the 'C' shapes from separating */
    /* repeating-conic-gradient(var(--color-four) 0 25%, var(--color-second) 0 50%) 0 0/var(--_s), */
    repeating-conic-gradient(rgba(54,91,109,0.06) 0 25%, transparent 0 50%) 0 0/var(--_s),
    
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--color-four);

  background-attachment: fixed;
  background-color: var(--color-four);
}

.pattern-dark{
   --s: 50px;
  --c: var(--color-third); /* core grid tone */
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  /* Pattern uses only blue and navy for depth */
  --_c: var(--color-five) 66%, var(--color-first) 68% 70%, var(--color-five) 72%;
  
  background:
    radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0/var(--_s),
    repeating-conic-gradient(var(--c) 0 25%, var(--color-five) 0 50%) 0 0/var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);

  background-attachment: fixed;
  background-color: var(--color-third); /* fallback base */
  color: var(--color-first); /* text color for subtle contrast */
}
*{
    box-sizing: border-box;
 
    
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.container_banner{
    background-color: var(--color-second);
    text-align: center;
    padding: 2px 0;
    font-size: 1em;
    font-weight: 500;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001; /* ensures it stays above the header */
     overflow: hidden; /* Hide overflow */
  white-space: nowrap;
}
.banner_text {
      padding-right: 50px; /* Space between content items */
    color: var(--color-first);
    text-decoration: none;
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Scrolls half the track */
}

a.rotating_banner {
      display: inline-block;
  width: 200%;
  animation: scroll-left 25s linear infinite; /* Adjust size */
}
.container_banner:hover .banner_text {
  animation-play-state: paused;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}


.bg-body-tertiary {
    background-color: var(--color-third) !important;
    padding-top: 40px !important;
}
.btn .btn-outline-success{
 --bs-btn-color: var(--color-first);
 color: var(--color-second);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-success {
    --bs-btn-color: var(--color-second);
    --bs-btn-border-color: var(--color-third);
    --bs-btn-hover-color: var(--color-first);
    --bs-btn-hover-bg: var(--color-third);
    --bs-btn-hover-border-color: var(--color-second);
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: var(--color-five);
    --bs-btn-active-bg: var(--color-second);
    --bs-btn-active-border-color: var(--color-third);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-second)4;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-second);
    --bs-gradient: none;
}

.hero-kitchen {
    height: 75vh;
    background-size: cover;
    background-position: center;
    position: relative;
    background-image: url(images/KC.png);
}

.hero-content {
    position: relative;
    z-index: 2; /* keeps it above overlay */

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
/* change color if you want darker:
   rgba(0,0,0,0.5)
*/
    z-index: 1;
}
.sjc_logo{
    max-width: 600px;
    margin-bottom: 20px;
}

.btn-outline-primary{
  --bs-btn-color:var(--color-first);
  --bs-btn-border-color: var(--color-first);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg:var(--color-first);
  --bs-btn-hover-border-color:var(--color-first);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-first);
  --bs-btn-active-border-color: var(--color-first);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:var(--color-first);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--color-first);
  --bs-gradient: none;
  padding: 12px 28px;
}

/* why choose us section of the code  */ 
.container-fluid.px-0.second_part{
  
  --s: 50px;
  --c: var(--color-third); /* core grid tone */
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  /* Pattern uses only blue and navy for depth */
  --_c: var(--color-five) 66%, var(--color-first) 68% 70%, var(--color-five) 72%;
  
  background:
    radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0/var(--_s),
    repeating-conic-gradient(var(--c) 0 25%, var(--color-five) 0 50%) 0 0/var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);

  background-attachment: fixed;
  background-color: var(--color-third); /* fallback base */
  color: var(--color-first); /* text color for subtle contrast */
}


/* process of the code */




.contact_section{
    padding: 80px 20px;
    background-color: var(--color-second);
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-card{
  background: var(--color-four);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  max-width: 900px;
  margin: auto;
}

.quote-wrapper{
    width: 100%;
    max-width: 900px;
    background: var(--color-four);
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 12px 30px rgba(29, 67, 85, 0.15);
}

.quote-wrapper h2{
    text-align: center;
    color: var(--color-third);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.quote-subtext{
    text-align: center;
    color: var(--color-first);
    margin-bottom: 30px;
    font-size: 1rem;
}

.quick-quote-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quick-quote-form input,
.quick-quote-form select,
.quick-quote-form textarea{
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d8e0e6;
    border-radius: 14px;
    font-size: 1rem;
    background: #fff;
    color: var(--color-third);
    outline: none;
}

.quick-quote-form input:focus,
.quick-quote-form select:focus,
.quick-quote-form textarea:focus{
    border-color: var(--color-first);
    box-shadow: 0 0 0 3px rgba(54, 91, 109, 0.12);
}

.quick-quote-form textarea{
    grid-column: 1 / -1;
    min-height: 130px;
    resize: vertical;
}

.quick-quote-form button{
    grid-column: 1 / -1;
    padding: 16px 24px;
    border: none;
    border-radius: 14px;
    background: var(--color-third);
    color: var(--color-four);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}

.quick-quote-form button:hover{
    background: var(--color-first);
}

.conditional-fields{
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
}

.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-trust{
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.form-trust span{
    background: rgba(54, 91, 109, 0.08);
    color: var(--color-third);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
}

@media (max-width: 768px){
    .quote-wrapper{
        padding: 28px 20px;
    }

    .quote-wrapper h2{
        font-size: 2rem;
    }

    .quick-quote-form,
    .form-row{
        grid-template-columns: 1fr;
    }
}

/* process of the code  */

.process-section{
  padding: 80px 20px;
  text-align: center;
  background: var(--color-four);
}

.process-section h2{
  color: var(--color-third);
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.process-subtitle{
  color: var(--color-first);
  margin-bottom: 50px;
}

.process-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 45px;
}

.process-step{
  position: relative;
}

.step-icon{
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--color-first);
  color: var(--color-four);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.step-number{
  position: absolute;
  top: -8px;
  right: 35%;
  background: var(--color-second);
  color: var(--color-third);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step h3{
  color: var(--color-third);
  margin-bottom: 12px;
}

.process-step p{
  color: #6b7280;
  line-height: 1.5;
}

.process-btn{
  display: inline-block;
  background: var(--color-third);
  color: var(--color-four);
  padding: 16px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

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

@media(max-width: 600px){
  .process-steps{
    grid-template-columns: 1fr;
  }
}

.process-tagline{
  margin-top: 15px;
  font-weight: 600;
  color: var(--color-third);
  font-size: 1rem;

  animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 0px rgba(0,0,0,0);
  }
  50% {
    text-shadow: 0 0 8px rgba(54, 91, 109, 0.3);
  }
}

.process-tagline{
  margin-top: 15px;
  font-weight: 600;
  color: var(--color-third);
  font-size: 1rem;
  animation: glow 3s ease-in-out infinite;
}

.process-btn:hover{
  background: var(--color-first);
  color: var(--color-four);
  transform: translateY(-2px);
}
.process-btn{
  transition: all 0.25s ease;
}


/* our services section of the code  */
.container-fluid.px-0{
    background-color: var(--color-third);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center; 
    width: 100%;
    padding: 10px 0 !important;
}

#light_text{
    color: var(--color-second);
    background-color: var(--color-third);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.cards-wrapper {
  display: flex;
  justify-content: center;
    background-color: var(--color-second);

}
.card img {
  width: 100%;
  height: 250px;
  object-fit: contain;
}



.card-img-top {
  height: 250px;
  object-fit: contain;
}
.card {
  margin: 50px 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
  border-radius: 0;
  height: 500px;
}
.carousel-inner {
  padding: 1em;
  
}


.carousel-control-prev,
.carousel-control-next {
  background-color: var(--color-first);
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}


/* Promotion section */
.promotion_section{
    position: relative;
    height: 600px;
    overflow: hidden;
}



:root{
  --color-first:#365B6D;
  --color-second:#F4F6F9;
  --color-third:#1D4355;
  --color-four:#FFFFFF;
}

.split-promo-section{
  position: relative;
  width: 100%;
  min-height: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* left light side */
.promo-left{
  background: var(--color-second);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  position: relative;
  z-index: 2;
}

/* curved divider feel */
.promo-left::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -140px;
  transform: translateY(-50%);
  width: 280px;
  height: 900px;
  background: var(--color-second);
  border-radius: 50%;
  z-index: 3;
}

/* content card */
.promo-card{
  position: relative;
  z-index: 4;
  max-width: 480px;
  background: rgba(255,255,255,0.92);
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 12px 35px rgba(29,67,85,0.12);
}

.promo-tag{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-first);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.promo-card h2{
  font-size: 3rem;
  line-height: 1.1;
  color: var(--color-third);
  margin: 0 0 18px;
}

.promo-card p{
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-first);
  margin-bottom: 24px;
}

.promo-btn{
  display: inline-block;
  background: var(--color-third);
  color: var(--color-four);
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  transition: 0.3s ease;
}

.promo-btn:hover{
  background: var(--color-first);
}

/* right dark/video side */
.promo-right{
  position: relative;
  background: linear-gradient(135deg, #1D4355 0%, #365B6D 100%);
  overflow: hidden;
}

#promoVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-right-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(29,67,85,0.70) 0%,
    rgba(54,91,109,0.45) 100%
  );
}

/* mobile */
@media (max-width: 900px){
  .split-promo-section{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .promo-left{
    order: 2;
    padding: 40px 20px;
  }

  .promo-left::after{
    display: none;
  }

  .promo-right{
    order: 1;
    min-height: 320px;
  }

  .promo-card{
    max-width: 100%;
    padding: 28px;
  }

  .promo-card h2{
    font-size: 2.1rem;
  }
}

/* code for the luxury cleaning section of the code  */ 
.sjc-luxury-section{
  background: var(--color-second);
  padding: 120px 20px;
  overflow: hidden;
}

.sjc-luxury-wrap{
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 80px;
}

.sjc-luxury-text span{
  color: var(--color-first);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.sjc-luxury-text h2{
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: 0.95;
  color: var(--color-third);
  margin: 18px 0 25px;
}

.sjc-luxury-text p{
  color: #50636f;
  line-height: 1.8;
  max-width: 500px;
  font-size: 1.02rem;
}

.sjc-buttons{
  display: flex;
  gap: 18px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.sjc-btn-primary{
  background: var(--color-third);
  color: white;
  padding: 15px 34px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s ease;
}

/* bottons view services */

.services-dropdown{
  position: relative;
}

.services-toggle{
  cursor: pointer;
}

.services-menu{
  position: absolute;
  top: 115%;
  left: 0;

  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px);

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

  min-width: 260px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition: 0.3s ease;

  box-shadow: 0 18px 40px rgba(29,67,85,0.12);

  z-index: 20;
}

.services-menu a{
  text-decoration: none;
  color: var(--color-third);

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

  transition: 0.25s ease;
}

.services-menu a:hover{
  background: rgba(54,91,109,0.08);
}

/* SHOW MENU */

.services-dropdown:hover .services-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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

.sjc-btn-secondary{
  border: 1px solid rgba(54,91,109,0.2);
  color: var(--color-third);
  padding: 15px 34px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  background: white;
}

.sjc-photo-collage{
  position: relative;
  min-height: 820px;
  width: 100%;
}

.sjc-soft-bg{
  position: absolute;
  width: 620px;
  height: 620px;
  right: 0;
  top: 90px;
  background: rgba(54,91,109,0.06);
  border-radius: 60px 140px 60px 140px;
}

/* TOP LEFT */
.img-a{
  width: 410px;
  height: 250px;
  top: -10px;
  left: -40px;
  z-index: 3;
}

/* TOP RIGHT */
.img-b{
  width: 240px;
  height: 170px;
  top: 120px;
  right: -60px;
  z-index: 5;
}

/* MIDDLE LEFT */
.img-c{
  width: 310px;
  height: 210px;
  top: 360px;
  left: -120px;
  z-index: 4;
}

/* CENTER LOWER */
.img-e{
  width: 350px;
  height: 240px;
  top: 470px;
  left: 120px;
  z-index: 5;
}

/* BOTTOM RIGHT */
.img-d{
  width: 250px;
  height: 260px;
  bottom: -120px;
  right: -90px;
  z-index: 2;
  opacity: 0.98;
}

/* PHOTO STYLE */
.sjc-photo{
  position: absolute;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.10);
}

.sjc-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BUBBLES */

.sjc-bubble{
  position: absolute;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px);
  padding: 14px 24px;
  border-radius: 999px;
  color: var(--color-third);
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(29,67,85,0.12);
  z-index: 10;
}

.bubble-one{
  top: 25px;
  left: -90px;
}

.bubble-two{
  top: 300px;
  right: -85px;
}

.bubble-four{
  top: 590px;
  left: -70px;
}

.bubble-three{
  top: 735px;
  left: 140px;
}

.bubble-five{
  bottom: -165px;
  right: -70px;
}


.sjc-bubble{
  position: absolute;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  padding: 12px 22px;
  border-radius: 999px;
  color: var(--color-third);
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(29,67,85,0.12);
  z-index: 10;
} 

.gallery-section {
  padding: 50px;
  background-color: #fdf8f4; /* Match the soft beige bg */
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 50px);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-section{
  padding: 100px 40px;
  background: var(--color-second);
  overflow: hidden;
}

.image-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 55px);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.img-wrapper{
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(29,67,85,0.12);
}

.img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Main top image */
.main-img{
  grid-column: 3 / 9;
  grid-row: 1 / 6;
}

/* Top right */
.small-img-top{
  grid-column: 9 / 13;
  grid-row: 2 / 5;
  border-radius: 60px 28px 28px 28px;
}

/* Bottom left */
.med-img-bottom{
  grid-column: 1 / 5;
  grid-row: 6 / 10;
}

/* Bottom right */
.vertical-img{
  grid-column: 9 / 13;
  grid-row: 7 / 12;
}

/* Center bottom */
.warehouse-img{
  grid-column: 5 / 9;
  grid-row: 6 / 11;
}

@media(max-width: 991px){

  .sjc-luxury-wrap{
    grid-template-columns: 1fr;
  }

  .sjc-photo-collage{
    min-height: 850px;
  }

}
/* mini contact section of the code */

.contact-cta-section{
  background: var(--color-second);
  padding: 50px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(3, 3, 3, 0.08);
  margin: 60px auto;
  max-width: 1000px;
}

.cta-label{
  font-size: 0.75rem;
  color: #888;
  letter-spacing: 1px;
}

.contact-cta-section h3{
  margin: 10px 0 20px;
  font-weight: 600;
}

.cta-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.contact-person{
  position: relative;
}

.person-btn,
.cta-btn-outline{
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

.person-btn{
  background: var(--color-first);
  color: white;
  border: none;
  cursor: pointer;
}

.cta-btn-outline{
  border: 2px solid var(--color-first);
  color: var(--color-first);
  background: white;
  text-decoration: none;
}

.person-btn:hover,
.cta-btn-outline:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

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

.person-options{
  position: absolute;
  top: 115%;
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  padding: 10px;
  display: none;
  flex-direction: column;
  min-width: 140px;
  z-index: 10;
}

.person-options a{
  text-decoration: none;
  color: var(--color-third);
  padding: 8px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.person-options a:hover{
  background: #f4f6f9;
}

.contact-person:hover .person-options{
  display: flex;
}

.cta-alt{
  margin-top: 20px;
  font-size: 0.95rem;
}

.contact-icon{
  max-width: 300px;
  animation: floatIcon 4s ease-in-out infinite;
}

@keyframes floatIcon {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

@media (max-width: 768px){
  .contact-cta-section{
    padding: 40px 20px;
  }

  .cta-buttons{
    flex-direction: column;
    align-items: stretch;
  }

  .person-btn,
  .cta-btn-outline{
    width: 100%;
    text-align: center;
  }

  .contact-person{
    width: 100%;
  }

  .person-options{
    position: static;
    margin-top: 8px;
    width: 100%;
  }

  .contact-icon{
    max-width: 230px;
    margin-top: 25px;
  }
}

/*code for the our promise section of the code  */
.our_promise { 
  position: relative;
  padding: 150px 0;
  display: flex; 
  justify-content: flex-end; 
  align-items: center;
  overflow: hidden;
  background: #f4f6f9;
}

.our_promise::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url(images/SAFE_ICONS.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        inset 110px 0 90px var(--color-second),
        inset -110px 0 90px var(--color-second),
        inset 0 110px 90px var(--color-second),
        inset 0 -110px 90px var(--color-second);

    z-index: 1;
}

.box-content-our_promise {
  position: relative;
  z-index: 2;

  background-color: var(--color-first); 
  color: var(--color-second); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  width: 40%; 
  padding: 60px; 
  border: 2px solid var(--color-third); 
  box-shadow: 8px 8px 8px var(--color-third); 
  gap: 20px; 
  margin-right: 80px; 
}
ul.promise-list {
  list-style: none;
  padding: 0;
  margin: 0;

}


    /* badge of the code  */

    .stats-grid{
   display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.stat-box{
  background: var(--color-second);
border-radius: 15px;
  padding: 30px 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}



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

@media (max-width: 576px){
  .stats-grid{
    grid-template-columns: 1fr;
  }
}

.stats-section{
  padding: 60px 0;
  background: var(--color-second);
} 



.stat-box:hover{
  transform: translateY(-5px);
}

.stat-icon{
  font-size: 28px;
  margin-bottom: 10px;
}

.stat-box h3{
  font-size: 32px;
  color: var(--color-first);
  margin: 10px 0 5px;
}

.stat-box p{
  font-size: 0.9rem;
  color: #666;
}

.stats-section{
  padding: 60px 0; /* more breathing space top & bottom */
}

.stat-box{
  margin: 10px;
}  

/* third section of the code */

.third.container-fluid.px-0{
    background-color: var(--color-second);
    color: var(--color-first);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center; 
    width: 100%;
    padding: 80px 0 !important;
    gap: 20px;
}
.contact-actions a {
    background: var(--color-second);
    color: var(--color-first);
    padding: 10px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--color-first);
    transition: 0.3s ease;
}

.contact-actions a:hover {
    background: var(--color-first);
    color: var(--color-second);
}

.hours_container {
     display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two equal-width columns */
    gap: 5rem;
}
.location_title,
.hour_title{
    font-size: 2.5rem;
    margin-bottom: 50px;
}

   
      .hours-card,
.location-card {
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(-color-third);
    padding: 40px;
    border: 2px solid var(--color-third);   
    box-shadow: 8px 8px 8px 8px var(--color-third);
}
     
    

.card-content {
  display: inline-block;
    width: 100%; 
}



.icon-side img {
    width:160px;
  height:auto;
  transform: translateX(-25px); /* pushes icon outward */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12));
}

.icon-badge{
  width:110px;
  height:110px;
  border-radius:50%;
  background: rgba(54,91,109,0.12); /* brand tint */
  display:flex;
  align-items:center;
  justify-content:center;
}

.text-side {
    flex:1;
    display: flex;
    flex-direction: column;
}

@media (max-width:768px){
  .card-content{flex-direction:column; text-align:center;}
  .icon-side img{transform:none;}
}

.hour_day {
   font-weight:700; 
   font-size:1.25rem;
       text-align: center;

}
.hour_time {
    font-size:1rem; 
    opacity:0.85;
        text-align: center;

}
.hour_text 
.location_text{
    font-size: 1.2rem;
    text-align: center;
    margin: 10px !important;
}
.areas-scroll-container{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    margin-bottom:15px;
}

.areas-scroll{
    display:inline-block;
    padding-left:100%;
    animation: scroll-areas 20s linear infinite;
}

@keyframes scroll-areas {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}




@media (max-width: 768px) {
    .card-content {
        flex-direction: column;
        text-align: center;
    }
}


.form-row{
    display:flex;
    gap:15px;
}

.form-row select{
    flex:1;
}

#otherBusinessField{
    transition: all 0.3s ease;
}

.contact_section{
    padding: 80px 20px;
    background-color: var(--color-second);
    display: flex;
    justify-content: center;
    align-items: center;
}

.quote-wrapper{
    width: 100%;
    max-width: 900px;
    background: var(--color-four);
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 12px 30px rgba(29, 67, 85, 0.15);
}

.quote-wrapper h2{
    text-align: center;
    color: var(--color-third);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.quote-subtext{
    text-align: center;
    color: var(--color-first);
    margin-bottom: 30px;
    font-size: 1rem;
}

.quick-quote-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quick-quote-form input,
.quick-quote-form select,
.quick-quote-form textarea{
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d8e0e6;
    border-radius: 14px;
    font-size: 1rem;
    background: #fff;
    color: var(--color-third);
    outline: none;
}

.quick-quote-form input:focus,
.quick-quote-form select:focus,
.quick-quote-form textarea:focus{
    border-color: var(--color-first);
    box-shadow: 0 0 0 3px rgba(54, 91, 109, 0.12);
}

.quick-quote-form textarea{
    grid-column: 1 / -1;
    min-height: 130px;
    resize: vertical;
}

.quick-quote-form button{
    grid-column: 1 / -1;
    padding: 16px 24px;
    border: none;
    border-radius: 14px;
    background: var(--color-third);
    color: var(--color-four);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}

.quick-quote-form button:hover{
    background: var(--color-first);
}

.conditional-fields{
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
}

.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-trust{
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.form-trust span{
    background: rgba(54, 91, 109, 0.08);
    color: var(--color-third);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
}

@media (max-width: 768px){
    .quote-wrapper{
        padding: 28px 20px;
    }

    .quote-wrapper h2{
        font-size: 2rem;
    }

    .quick-quote-form,
    .form-row{
        grid-template-columns: 1fr;
    }
}

/* guarantee section of the code */

.guarantee-section{
  background: var(--color-second);
  padding: 50px 20px;
  display: flex;
  justify-content: center;
}

.guarantee-card{
  max-width: 850px;
  width: 100%;
  background: var(--color-four);
  border-radius: 24px;
  padding: 30px 35px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 12px 35px rgba(29,67,85,0.12);
  border-left: 6px solid var(--color-first);
}

.guarantee-icon{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  flex-shrink: 0;
}

.guarantee-img {
  filter: hue-rotate(180deg) saturate(0.6) brightness(0.8);
   width: 80px;
  height: auto;
  /* opacity: 0.6; */
  size: contain;
  position: absolute;
  
}



.guarantee-card h2{
  color: var(--color-third);
  margin-bottom: 8px;
  text-align: left;
}

.guarantee-card p{
  color: var(--color-first);
  margin: 0;
  font-size: 1.05rem;
  text-align: left;
}

/* section reviews of the code  */

.reviews-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 30px 50px;
}

.review-nav{
    border: none;
    background-color: var(--color-first);
    color:var(--color-four);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}


.review-nav {
    background-color: var(--color-first);
}

.review-nav:hover {
    background-color: var(--color-second);
}
.container_reviews{
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 20px 0;
}

/* .container_reviews .bubble{
    width: 350px;
    min-height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05),
                25px 35px 20px rgba(0,0,0,0.05),
                25px 20px 20px rgba(0,0,0,0.05),
                inset 25px 30px 30px var(--color-first);
    animation: slide 0.8s ease;
    padding: 10px;
    background: var(--color-second);
}

.container_reviews .bubble .reviews {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertical center */
    /* text-align: center;
    height: 100%; /* KEY FIX */
    /* padding: 20px 30px; /* less padding = better centering */
    /* gap: 10px;
}

.container_reviews .bubble:nth-child(1){
    border-radius: 67% 33% 28% 72% / 59% 52% 48% 41%;
}

.container_reviews .bubble:nth-child(2){
    border-radius: 35% 85% 53% 47% / 55% 41% 59% 45%;
}

.container_reviews .bubble:nth-child(3){
    border-radius: 50% 35% 53% 67% / 35% 41% 55% 60%;
} */ 

.container_reviews .bubble{
  width: 350px;
  min-height: 350px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  background: rgba(244, 246, 249, 0.72);
  border: 1px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);

  box-shadow:
    inset 8px 8px 18px rgba(255,255,255,0.9),
    inset -12px -12px 22px rgba(54,91,109,0.10),
    0 18px 35px rgba(29,67,85,0.12);

  animation: floatBubble 6s ease-in-out infinite;
  padding: 10px;
  overflow: hidden;
}
.container_reviews .bubble .reviews {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    height: 100%;
    width: 100%;

    padding: 20px;
    gap: 12px;

    margin: 0 auto;
}

.container_reviews .bubble::before{
  content: "";
  position: absolute;
  top: 45px;
  left: 55px;
  width: 55px;
  height: 55px;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0));
  border-radius: 50%;
  opacity: 0.8;
}

.container_reviews .bubble:nth-child(1){
  border-radius: 67% 33% 28% 72% / 59% 52% 48% 41%;
  animation-delay: 0s;
}

.container_reviews .bubble:nth-child(2){
  border-radius: 35% 85% 53% 47% / 55% 41% 59% 45%;
  animation-delay: 1s;
}

.container_reviews .bubble:nth-child(3){
  border-radius: 50% 35% 53% 67% / 35% 41% 55% 60%;
  animation-delay: 2s;
}

@keyframes floatBubble{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
  100%{ transform: translateY(0); }
}

.review-nav:hover {
  background-color: var(--color-third);
  transform: translateY(-2px);
}

.title_reviews {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* ADD THIS */
    font-size: 2.5rem;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 30px 0;
    color: var(--color-third);
}

.text_reviews {
    color: #1d1d1d;
    font-size: 0.95rem;
    line-height: 1.6;
}

.review-stars {
    color: #f4b400;
    font-size: 1.2rem;
}
.review-name {
    color: var(--color-first);
    font-weight: 600;
}
  .review-link{
    color: var(--color-first);
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    display: inline-block;
    transition: color 0.3s ease;
}
 .review-link:hover {
    color: var(--color-third);
}

.reviews-summary{
  max-width: 900px;
  margin: 0 auto 30px;
  padding: 20px 25px;
  background: var(--color-four);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);

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

.reviews-left{
  display: flex;
  align-items: center;
  gap: 15px;
}

.google-icon{
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #4285F4; /* Google blue */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.rating{
  margin: 0;
  font-weight: 600;
}

.stars{
  color: #f4b400;
  margin-left: 5px;
}

.reviews-count{
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.reviews-links a{
  margin-left: 15px;
  font-size: 0.9rem;
  color: var(--color-first);
  text-decoration: none;
  font-weight: 500;
}

@media only screen and (max-width:1100px){
    .reviews-wrapper{
        flex-direction: column;
    }

    .container_reviews{
        flex-wrap: wrap;
    }
}

@media only screen and (max-width:600px){
    .container_reviews{
        flex-direction: column;
    }

    .container_reviews .bubble{
        width: 275px;
        min-height: 275px;
    }
}

/* payments trusted section of the code  */

.payment-section{
  padding: 80px 20px;
  display: flex;
  justify-content: center;
}

.payment-card{
  background: var(--color-four);
  max-width: 900px;
  width: 100%;
  text-align: center;
  padding: 50px 35px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
}

.payment-card h2{
  color: var(--color-third);
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.payment-card p{
  color: var(--color-first);
  font-size: 1.05rem;
}

.payment-icons{
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 25px 0;
}

.payment-icons img{
  width: 50px;
  transition: transform 0.3s ease;
}

.payment-icons img:hover{
  transform: scale(1.1);
}

.payment-note{
  margin-top: 10px;
}

.square-badge{
  display: inline-block;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(54,91,109,0.12);
  color: var(--color-first);
  font-weight: 600;
  font-size: 0.9rem;
}

.payment-cta-btn{
  display: inline-block;
  margin-top: 25px;
  background: var(--color-third);
  color: var(--color-four);
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.25s ease;
}

.payment-cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.payment-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.square-badge{
  font-size: 0.8rem;
  opacity: 0.7;
}


/* FAQ section of the code  */ 
.faq_section {
    background-color: var(--color-second);
    width: 100%;
    padding: 80px 30px;
}

.faq_title {
    text-align: center;
    color: var(--color-third);
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.faq_grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
    align-items: start;
}

.faq_item {
    width: 100%;
}

.faq {
    background-color: var(--color-second);
    color: var(--color-third);
    cursor: pointer;
    padding: 18px 50px 18px 18px;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.15);
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    position: relative;
    border-radius: 12px;
}

.active,
.faq:hover {
    background-color: var(--color-third);
    color: var(--color-second);
}

.response {
    padding: 0 18px;
    background-color: #ffffff;
    color: var(--color-first);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    border-radius: 0 0 12px 12px;
    margin-top: 6px;
}

.response p {
    padding: 18px 0;
    line-height: 1.6;
    margin: 0;
}

.faq:after {
    content: '\02795';
    font-size: 13px;
    color: currentColor;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.faq.active:after {
    content: "\2796";
}

@media only screen and (max-width: 768px) {
    .faq_grid {
        grid-template-columns: 1fr;
    }

    .faq_title {
        font-size: 2rem;
    }
}

/* final say section of the code */

.home-bg-section {
  background: 
    linear-gradient(rgba(29,67,85,0.65), rgba(29,67,85,0.65)),
    url('images/HOME_ICONS.png');
    
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 100px 20px;
  color: white;
  text-align: center;
  width: 100%;
}


.home-bg-section {
  background-attachment: fixed;
}

.final-say{
  background: var(--color-third);
  color: var(--color-four);
  text-align: center;
  padding: 70px 20px;
}

.final-say h2{
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.final-say p{
  color: var(--color-second);
  margin-bottom: 25px;
}

.final-say-btn{
  display: inline-block;
  background: var(--color-four);
  color: var(--color-third);
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

/* footer of the code  */

.footer-custom{
  background-color: var(--color-third);
  color: var(--color-second);
  padding: 60px 0 25px;
}

.footer-custom .footer-logo img.logolight{
  width: 180px;
  /* height: auto; */
  display: block;
  margin-bottom: 15px;
  height: 5.5rem;
   width: 5.5rem; 
}

img.logolight { 
    height: 5.5rem; 
    width: 5.5rem;
    object-fit: contain;
}

.footer-custom .footer-tagline{
  margin-bottom: 18px;
  color: var(--color-second);
}

.footer-custom h5{
  color: var(--color-four);
  margin-bottom: 14px;
}

.footer-custom p{
  color: var(--color-second);
}

.footer-custom ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-custom .nav-link,
.footer-custom .social-icons a,
.footer-custom .legal-links a{
  color: var(--color-second);
  text-decoration: none;
  transition: 0.3s ease;
}

.footer-custom .nav-link:hover,
.footer-custom .social-icons a:hover,
.footer-custom .legal-links a:hover{
  color: var(--color-four);
}

.footer-custom .social-icons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-custom .newsletter-form p{
  margin-bottom: 16px;
}

.footer-custom .form-control{
  border-radius: 12px;
  padding: 12px 16px;
  border: none;
}

.footer-custom .footer-btn{
  border-radius: 12px;
  padding: 12px 18px;
  background-color: var(--color-first);
  border: none;
  color: var(--color-four);
  font-weight: 600;
}

.footer-custom .footer-btn:hover{
  background-color: var(--color-four);
  color: var(--color-third);
}

.footer-custom .footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 35px;
  padding-top: 20px;
}

.footer-custom .legal-links{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-contact .nav-item{
  color: var(--color-second);
  font-size: 0.9rem;
}

.footer-contact .nav-link{
  color: var(--color-second);
  text-decoration: none;
}

.footer-contact .nav-link:hover{
  color: var(--color-four);
}

/* Status badge */
.footer-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.footer-status span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* OPEN */
.footer-status.open{
  color: #2ecc71;
}

.footer-status.open span{
  background: #2ecc71;
}

/* CLOSED */
.footer-status.closed{
  color: #e74c3c;
}

.footer-status.closed span{
  background: #e74c3c;
}

/* pop-up screen of the code  */
.promo-popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.promo-popup{
  position: relative;
  max-width: 520px;
  width: 100%;
  background: var(--color-four);
  color: var(--color-third);
  padding: 45px 35px;
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.popup-close{
  position: absolute;
  top: 14px;
  right: 18px;
  border: none;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-third);
}

.popup-badge{
  display: inline-block;
  background: rgba(54,91,109,0.12);
  color: var(--color-first);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 18px;
}

.promo-popup h2{
  font-size: 2.4rem;
  margin-bottom: 15px;
}

.popup-offer{
  font-size: 1.2rem;
  line-height: 1.6;
}

.popup-note{
  font-size: 0.95rem;
  color: var(--color-first);
  margin-bottom: 25px;
}

.popup-btn{
  display: inline-block;
  background: var(--color-third);
  color: var(--color-four);
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
}

.popup-btn:hover{
  background: var(--color-first);
}


/* DEEP CLEAN SECTION */

/* Left image container */
.deep-clean-image{
flex: 1.4;
overflow: visible;
text-align: center;
}

/* Make PNG appear much larger */
.deep-clean-image img{
width: 140%;
max-width: none;
height: auto;
display: block;
margin-left: -15%;
transform: scale(1.15);
}

/* Main section */
.deep-clean-section{
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
padding: 250px 8% 100px;
background-color: var(--color-second);
overflow: hidden;
}

/* Right content */
.deep-clean-content{
flex: 1;
}

.service-label{
color: var(--color-first);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}

.deep-clean-content h2{
font-size: 4rem;
color: var(--color-first);
margin: 15px 0 25px;
}

.deep-clean-content p{
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 30px;
}

.deep-clean-list{
list-style: none;
padding: 0;
margin-bottom: 40px;
}

.deep-clean-list li{
margin-bottom: 15px;
font-size: 1.1rem;
position: relative;
padding-left: 35px;
}

.deep-clean-list li::before{
content: "✔";
position: absolute;
left: 0;
color: var(--color-first);
font-weight: bold;
}

.deep-clean-btn{
display: inline-block;
background: var(--color-first);
color: white;
padding: 16px 36px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: 0.3s ease;
}

.deep-clean-btn:hover{
background-color: var(--color-second);
transform: translateY(-2px);
}
.deep-clean-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.deep-clean-btn{
    display:inline-block;
    background:var(--color-first);
    color:white;
    padding:16px 36px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s ease;
}

.deep-clean-btn:hover{
    background-color:var(--color-second);
}

.pdf-btn{
  color: var(--color-first);
    background:var(--color-second);
    outline: var(--color-first) solid 2px;
}

.pdf-btn:hover{
  color: var(--color-second);
    background:var(--color-first);
}

/* TABLET */

@media (max-width: 992px){


.deep-clean-section{
    flex-direction: column;
    text-align: center;
    gap: 40px;
}

.deep-clean-image img{
    width: 100%;
    margin-left: 0;
    transform: scale(1);
}

.deep-clean-content h2{
    font-size: 2.8rem;
}

.deep-clean-list li{
    text-align: left;
}


}

/* MOBILE */

@media (max-width: 768px){


.deep-clean-section{
    padding: 70px 6%;
}

.deep-clean-content h2{
    font-size: 2.2rem;
}

.deep-clean-content p{
    font-size: 1rem;
}


}

/* DEEP CLEAN SIGNS */

.deep-clean-signs{

    padding:120px 8%;

    background:#F4F6F9;

}

.deep-signs-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.deep-sign-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

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

    transition:.35s;

}

.deep-sign-card:hover{

    transform:translateY(-8px);

    background:#1D4355;

    color:#fff;

}

.deep-sign-card h3{

    color:var(--color-first);

    margin-bottom:15px;

}

.deep-sign-card:hover h3{

    color:#fff;

}

.deep-sign-card p{

    line-height:1.8;

}

@media(max-width:992px){

    .deep-signs-grid{

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

    }

}

@media(max-width:768px){

    .deep-signs-grid{

        grid-template-columns:1fr;

    }

}

/* DEEP CLEAN COMPARISON */

.deep-comparison{

    padding:120px 8%;

    background:#F4F6F9;

}

.comparison-grid{

    display:grid;

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

    gap:40px;

}

.comparison-card{

    background:#fff;

    padding:50px;

    border-radius:25px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    position:relative;

}

.featured{

    border:3px solid #1D4355;

}

.comparison-tag{

    display:inline-block;

    background:#F4F6F9;

    color:#1D4355;

    padding:8px 16px;

    border-radius:30px;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:25px;

}

.comparison-tag.dark{

    background:#1D4355;

    color:#fff;

}

.comparison-card h3{

    color:#1D4355;

    margin-bottom:25px;

    font-size:2rem;

}

.comparison-card ul{

    list-style:none;

    padding:0;

}

.comparison-card li{

    margin-bottom:18px;

    line-height:1.7;

}

@media(max-width:900px){

    .comparison-grid{

        grid-template-columns:1fr;

    }

}

/* BEFORE & AFTER SECTION */

.before-after-section{
  padding: 120px 8%;
  background: #ffffff;
}

.before-after-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 60px;
}

.before-after-card{
  background: #F4F6F9;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: .35s ease;
}

.before-after-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 22px 45px rgba(29,67,85,.20);
}

.before-after-card img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

@media(max-width: 992px){
  .before-after-grid{
    grid-template-columns: 1fr;
  }

  .before-after-card img{
    height: auto;
  }
}

.deep-clean-note{

    max-width:1100px;

    margin:80px auto;

    display:flex;

    gap:35px;

    align-items:flex-start;

    padding:45px;

    border-radius:25px;

    background:#fff;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    border-left:8px solid #1D4355;

}

.note-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#1D4355;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    flex-shrink:0;

}

.note-content h3{

    color:#1D4355;

    margin-bottom:18px;

}

.note-content p{

    line-height:1.8;

    color:#555;

    margin-bottom:25px;

}

.note-checks{

    display:grid;

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

    gap:15px;

    font-weight:600;

    color:#1D4355;

}

@media(max-width:768px){

.deep-clean-note{

    flex-direction:column;

}

.note-checks{

    grid-template-columns:1fr;

}

}

/* move in and move out code of the code */

/* MOVE-IN / MOVE-OUT HERO */

.move-clean-hero{
    min-height: 900px;

    background-image: url("images/Move-In:Out\ Cleaning.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    padding: 120px 8%;
    margin: 0 0 80px ;
}

.move-clean-card{
    width: 650px;

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

    padding: 50px;

    border-radius: 20px;

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

.move-clean-card h2{
    font-size: 4rem;
    color: var(--color-first);
    margin: 15px 0 25px;
    line-height: 1.1;
}

.move-clean-card p{
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.move-clean-list{
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.move-clean-list li{
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.move-clean-list li::before{
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--color-first);
    font-weight: bold;
}

.move-clean-actions{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.move-clean-btn{
    background: var(--color-first);
    color: white;
    padding: 16px 36px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
}

.move-clean-download{
    border: 2px solid var(--color-first);
    color: var(--color-first);
    padding: 16px 36px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
}

.move-clean-btn:hover{
    background: var(--color-second);
}

.move-clean-download:hover{
    background: var(--color-first);
    color: white;
}

/* MOBILE */

@media(max-width: 768px){

    .move-clean-card{
        width: 100%;
        padding: 35px;
    }

    .move-clean-card h2{
        font-size: 2.5rem;
    }

    .move-clean-actions{
        flex-direction: column;
    }
}

.move-included-section{
  padding:120px 8%;
  background:#fff;
}

.move-included-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.move-included-card{
  background:#F4F6F9;
  padding:40px;
  border-radius:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.35s ease;
}

.move-included-card:hover{
  background:#1D4355;
  color:#fff;
  transform:translateY(-8px);
}

.move-included-card h3{
  color:var(--color-first);
  margin-bottom:15px;
}

.move-included-card:hover h3{
  color:#fff;
}

.move-included-card p{
  line-height:1.8;
}

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

@media(max-width:768px){
  .move-included-grid{
    grid-template-columns:1fr;
  }
}

/* MOVE-IN / MOVE-OUT ADD-ONS */

.move-addons-section{
  padding:120px 8%;
  background:#F4F6F9;
}

.move-addons-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.move-addon-card{
  background:#fff;
  padding:40px;
  border-radius:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.35s ease;
}

.move-addon-card:hover{
  background:#1D4355;
  color:#fff;
  transform:translateY(-8px);
}

.move-addon-card h3{
  color:#1D4355;
  margin-bottom:15px;
}

.move-addon-card:hover h3{
  color:#fff;
}

.move-addon-card p{
  line-height:1.8;
}

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

@media(max-width:768px){
  .move-addons-grid{
    grid-template-columns:1fr;
  }
}

/* STANDARD CLEANING SERVICES SECTION */

.standard-hero{
    position: relative;

    min-height: 100vh;

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

    padding: 120px 8%;

    background-image:
        linear-gradient(rgba(29,67,85,.20), rgba(29,67,85,.20)),
        url("images/luxury-house.png");

    background-size: cover;
    background-repeat: no-repeat;

    /* Move image more to the right */
   background-size: auto 150%;

    overflow: hidden;
}
.standard-overlay{
  width: 650px;
  padding: 60px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.standard-overlay h1{
  font-size: 5rem;
  color: var(--color-first);
  margin: 15px 0 25px;
  line-height: 1;
}

.standard-overlay p{
  font-size: 1.15rem;
  line-height: 1.9;
  margin-bottom: 40px;
}

/* BUTTONS */

.standard-actions{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 45px;
  flex-wrap: wrap;
}

.standard-action-btn,
.standard-download-btn{
  background: #F4F6F9;
  color: #1D4355;
  text-decoration: none;
  padding: 18px 36px;
  border-radius: 18px;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition: all .35s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  min-width: 220px;
  text-align: center;
}

.standard-action-btn:hover,
.standard-download-btn:hover{
  background: #1D4355;
  color: #FFFFFF;
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(29,67,85,.35);
}

.standard-action-btn:active,
.standard-download-btn:active{
  transform: scale(.97);
}

.standard-action-btn:focus,
.standard-download-btn:focus{
  outline: none;
}

/* ================================
   Common Cleaning Challenges
================================ */

.common-challenges{

    padding:100px 8%;

    background:#ffffff;

}

.section-title{

    text-align:center;

    max-width:750px;

    margin:0 auto 70px;

}

.section-title span{

    color:var(--color-first);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-title h2{

    font-size:3rem;

    color:var(--color-first);

    margin:15px 0;

}

.section-title p{

    font-size:1.1rem;

    line-height:1.8;

}

.challenge-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.challenge-card{

    background:#F4F6F9;

    border-radius:24px;

    overflow:hidden;

    transition:.35s ease;

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

}

.challenge-card:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 45px rgba(29,67,85,.20);

}

.challenge-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}

.challenge-content{

    padding:30px;

}

.challenge-content h3{

    color:var(--color-first);

    margin-bottom:15px;

    font-size:1.6rem;

}

.challenge-content p{

    line-height:1.8;

    color:#555;

}

@media(max-width:991px){

    .challenge-grid{

        grid-template-columns:1fr;

    }

}

/* TRUST SECTION */

.trust-section{
  padding: 90px 8%;
  background: #F4F6F9;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px;
}

.trust-card{
  background: #ffffff;
  padding: 50px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: .35s ease;
}

.trust-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(29,67,85,.18);
}

.trust-icon{
  font-size: 3rem;
  margin-bottom: 20px;
}

.trust-card h2{
  color: var(--color-first);
  font-size: 2rem;
  margin-bottom: 15px;
}

.trust-card p{
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
}

@media(max-width: 768px){
  .trust-section{
    grid-template-columns: 1fr;
    padding: 70px 6%;
  }
}

/* MOBILE */

@media(max-width: 768px){

  .standard-hero{
    min-height: auto;
    padding: 90px 5%;
    border: 10px solid #F4F6F9;
    border-radius: 20px;
  }

  .standard-overlay{
    width: 100%;
    padding: 35px;
  }

  .standard-overlay h1{
    font-size: 3rem;
  }

  .standard-overlay p{
    font-size: 1rem;
  }

  .standard-actions{
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .standard-action-btn,
  .standard-download-btn{
    width: 100%;
  }
}

/* =====================================
   Commercial Intro Section
===================================== */

.commercial-intro{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap: 90px;
     margin: 80px auto 100px;

    padding:120px 8%;

    background:var(--color-second);

}

.commercial-image{

    flex:1;

    text-align:center;

}

.commercial-image img{

    width:100%;

    max-width:700px;

    height:auto;

}

.commercial-content{

    flex:1;

}

.commercial-content h2{

    font-size:4rem;

    color:var(--color-first);

    margin:15px 0 25px;

    line-height:1.1;

}

.commercial-content p{

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:35px;

}

.commercial-list{

    list-style:none;

    padding:0;

    margin-bottom:40px;

}

.commercial-list li{

    position:relative;

    padding-left:35px;

    margin-bottom:18px;

    font-size:1.1rem;

}

.commercial-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:var(--color-first);

    font-weight:bold;

}

.commercial-btn{

    display:inline-block;

    background:var(--color-first);

    color:#fff;

    padding:18px 40px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.35s ease;

}

.commercial-btn:hover{

    background:var(--color-second);

    transform:translateY(-4px);

}
/* Commercial Buttons */

.commercial-actions{
    display:flex;
    gap:20px;
    margin-top:40px;
    flex-wrap:wrap;
}

.commercial-btn,
.commercial-walkthrough-btn{

    display:inline-block;

    padding:18px 38px;

    border-radius:16px;

    text-decoration:none;

    font-weight:700;

    transition:.35s ease;

    text-align:center;
}

/* Primary Button */

.commercial-btn{

    background:var(--color-first);

    color:#fff;

}

.commercial-btn:hover{

    background:var(--color-second);

    transform:translateY(-5px);

}

/* Secondary Button */

.commercial-walkthrough-btn{

    background:#F4F6F9;

    color:var(--color-first);

    border:2px solid var(--color-first);

}

.commercial-walkthrough-btn:hover{

    background:var(--color-first);

    color:#fff;

    transform:translateY(-5px);

}

/* Mobile */

@media(max-width:768px){

    .commercial-actions{

        flex-direction:column;

    }

    .commercial-btn,
    .commercial-walkthrough-btn{

        width:100%;

    }

}

@media(max-width:991px){

    .commercial-intro{

        flex-direction:column;

        text-align:center;

        gap:60px;

    }

    .commercial-content h2{

        font-size:3rem;

    }

    .commercial-list{

        text-align:left;

    }

}

/* WHY CHOOSE US */

.why-commercial{

    padding:120px 8%;

    background:#F4F6F9;

}

.section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.section-heading h2{

    font-size:3.8rem;

    color:var(--color-first);

    margin:20px 0;

}

.section-heading p{

    font-size:1.15rem;

    line-height:1.8;

}

.commercial-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.commercial-card{

    background:#fff;

    padding:45px;

    border-radius:24px;

    text-align:center;

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

    transition:.35s;

}

.commercial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(29,67,85,.20);

}

.commercial-icon{

    font-size:3rem;

    margin-bottom:25px;

}

.commercial-card h3{

    color:var(--color-first);

    margin-bottom:15px;

}

.commercial-card p{

    line-height:1.8;

}

@media(max-width:992px){

    .commercial-grid{

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

    }

}

@media(max-width:768px){

    .commercial-grid{

        grid-template-columns:1fr;

    }

}

.industries-section{
  padding:120px 8%;
  background:#fff;
}

.industries-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.industry-card{
  background:#F4F6F9;
  padding:40px;
  border-radius:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.35s ease;
}

.industry-card:hover{
  background:#1D4355;
  color:#fff;
  transform:translateY(-8px);
}

.industry-card h3{
  color:var(--color-first);
  margin-bottom:15px;
}

.industry-card:hover h3{
  color:#fff;
}

.industry-card p{
  line-height:1.8;
}

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

@media(max-width:768px){
  .industries-grid{
    grid-template-columns:1fr;
  }
}

/* housekeeping  section of the code  */

/* HOUSEKEEPING HERO */

.housekeeping-hero{
  min-height: 80vh;
  padding: 130px 8%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 18px solid #F4F6F9;
  border-radius: 30px;
}

.housekeeping-card{
  max-width: 720px;
  padding: 60px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
    width:900px;
    max-width:60%;

    padding:70px;

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

    border-radius:30px;

    backdrop-filter:blur(18px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}


.housekeeping-card h1{
  font-size: 4.5rem;
  color: var(--color-first);
  margin: 15px 0;
  line-height: 1;
}

.housekeeping-card h2{
  font-size: 1.8rem;
  color: var(--color-third);
  margin-bottom: 25px;
}

.housekeeping-card p{
  font-size: 1.15rem;
  line-height: 1.9;
  margin-bottom: 40px;
}

.housekeeping-actions{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.housekeeping-btn,
.housekeeping-secondary-btn,
.housekeeping-download-btn{
  background: #F4F6F9;
  color: #1D4355;
  text-decoration: none;
  padding: 18px 32px;
  border-radius: 18px;
  font-weight: 700;
  transition: all .35s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.housekeeping-btn:hover,
.housekeeping-secondary-btn:hover,
.housekeeping-download-btn:hover{
  background: #1D4355;
  color: #fff;
  transform: translateY(-6px);
}

@media(max-width:768px){
  .housekeeping-hero{
    padding: 90px 5%;
    border: 10px solid #F4F6F9;
  }

  .housekeeping-card{
    padding: 35px;
  }

  .housekeeping-card h1{
    font-size: 2.8rem;
  }

  .housekeeping-card h2{
    font-size: 1.4rem;
  }

  .housekeeping-actions{
    flex-direction: column;
  }
}

/*===============================
 HOUSEKEEPING INCLUDED
================================*/

.housekeeping-services{

    padding:120px 8%;
    background:#fff;

}

.section-heading{

    max-width:700px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;

}

.section-heading span{

    color:#1D4355;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

}

.section-heading h2{

    font-size:3rem;
    color:#1D4355;
    margin:20px 0;

}

.section-heading p{

    font-size:1.1rem;
    line-height:1.8;
    color:#666;

}

.housekeeping-grid{

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

}

.housekeeping-item{

    background:#F4F6F9;
    border-radius:25px;
    padding:40px 30px;
    text-align:center;

    transition:.35s;

    border:2px solid transparent;

}

.housekeeping-item:hover{

    transform:translateY(-10px);

    border-color:#1D4355;

    box-shadow:0 20px 45px rgba(29,67,85,.18);

}

.housekeeping-item img{

    width:140px;
    margin-bottom:25px;

}

.housekeeping-item h3{

    color:#1D4355;
    margin-bottom:15px;
    font-size:1.4rem;

}

.housekeeping-item p{

    color:#666;
    line-height:1.7;

}

@media(max-width:768px){

    .section-heading h2{

        font-size:2.2rem;

    }

    .housekeeping-item img{

        width:110px;

    }

}
/*===============================
CUSTOM HOUSEKEEPING BUNDLE
================================*/

.custom-housekeeping{

    padding:120px 8%;
    background:#F4F6F9;

}

.custom-content{

    max-width:1100px;
    margin:auto;
    text-align:center;

}

.custom-content span{

    color:#1D4355;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

}

.custom-content h2{

    font-size:3rem;
    color:#1D4355;
    margin:20px 0;

}

.custom-content p{

    max-width:750px;
    margin:0 auto 50px;
    line-height:1.8;
    color:#666;
    font-size:1.1rem;

}

.bundle-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    margin-bottom:50px;

}

.bundle-item{

    background:#fff;
    padding:22px;
    border-radius:18px;
    font-weight:600;
    color:#1D4355;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.bundle-item:hover{

    background:#1D4355;
    color:#fff;
    transform:translateY(-6px);

}

.bundle-btn{

    display:inline-block;
    margin-top:10px;

    padding:18px 42px;

    background:#1D4355;
    color:#fff;
    text-decoration:none;

    border-radius:18px;

    font-weight:700;

    transition:.3s;

}

.bundle-btn:hover{

    background:#365B6D;
    transform:translateY(-5px);

}

/*===================================
HOUSEKEEPING LIFESTYLE
===================================*/

.housekeeping-lifestyle{

    padding:120px 8%;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;

    align-items:center;

    background:#F4F6F9;

}

.housekeeping-lifestyle-image img{

    width:100%;
    border-radius:30px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.housekeeping-lifestyle-content span{

    color:#1D4355;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

}

.housekeeping-lifestyle-content h2{

    font-size:3rem;
    color:#1D4355;
    margin:20px 0;

}

.housekeeping-lifestyle-content p{

    color:#666;
    line-height:1.8;
    margin-bottom:20px;

}

.housekeeping-lifestyle-content ul{

    list-style:none;
    padding:0;
    margin:35px 0;

}

.housekeeping-lifestyle-content li{

    margin-bottom:15px;
    font-weight:600;
    color:#1D4355;

}

.life-btn{

    display:inline-block;

    padding:18px 40px;

    background:#1D4355;

    color:#fff;

    text-decoration:none;

    border-radius:18px;

    font-weight:700;

    transition:.3s;

}

.life-btn:hover{

    background:#365B6D;

    transform:translateY(-5px);

}

@media(max-width:900px){

    .housekeeping-lifestyle{

        grid-template-columns:1fr;

    }

}

/* blog of the code  section of the code */

/* BLOG PAGE */

.blog-hero{
  padding:140px 8%;
  text-align:center;
  background:#F4F6F9;
}

.blog-label{
  color:#1D4355;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

.blog-hero h1{
  max-width:900px;
  margin:20px auto;
  font-size:4rem;
  color:#1D4355;
  line-height:1.1;
}

.blog-hero p{
  max-width:760px;
  margin:0 auto 40px;
  font-size:1.15rem;
  line-height:1.8;
}

.blog-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.blog-buttons a,
.featured-buttons a{
  background:#1D4355;
  color:#fff;
  padding:16px 34px;
  border-radius:16px;
  text-decoration:none;
  font-weight:700;
  transition:.35s ease;
}

.blog-buttons a:hover,
.featured-buttons a:hover{
  background:#365B6D;
  transform:translateY(-5px);
}


/* CATEGORIES */

.blog-categories{
  padding:100px 8%;
  background:#fff;
}

.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.category-grid div{
  background:#F4F6F9;
  color:#1D4355;
  padding:25px;
  border-radius:20px;
  text-align:center;
  font-weight:700;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  transition:.35s ease;
}

.category-grid div:hover{
  background:#1D4355;
  color:#fff;
  transform:translateY(-6px);
}


/* FEATURED NEWS */

.featured-news{
  padding:100px 8%;

}

.featured-card{
  max-width:1000px;
  margin:auto;
  background:#fff;
  padding:60px;
  border-radius:28px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.featured-card h2{
  color:#1D4355;
  font-size:3rem;
  margin:20px 0;
}

.featured-card p{
  max-width:750px;
  margin:0 auto 35px;
  line-height:1.8;
}

.featured-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}


/* BLOG SECTIONS */

.blog-section{
  padding:110px 8%;
  background:#fff;
}

.blog-section.light{
  background:#F4F6F9;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.blog-card{
  background:#fff;
  padding:40px;
  border-radius:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.35s ease;
}

.blog-section.light .blog-card{
  background:#fff;
}

.blog-card:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 45px rgba(29,67,85,.18);
}

.blog-icon{
  font-size:3rem;
  margin-bottom:20px;
}

.blog-card span{
  color:#1D4355;
  font-weight:700;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:1px;
}

.blog-card h3{
  color:#1D4355;
  margin:15px 0;
  font-size:1.6rem;
}

.blog-card p{
  line-height:1.8;
  color:#555;
}

.blog-card a{
  display:inline-block;
  margin-top:18px;
  color:#1D4355;
  font-weight:700;
  text-decoration:none;
}


/* TRANSFORMATIONS */

.transformations-section{
  padding:110px 8%;
  background:#fff;
}

.transformation-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.transformation-card{
  background:#F4F6F9;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.35s ease;
}

.transformation-card:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 45px rgba(29,67,85,.18);
}

.transformation-card img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}

.transformation-card h3{
  color:#1D4355;
  padding:25px;
  margin:0;
}


/* NEWSLETTER */

.newsletter-section{
  padding:110px 8%;
  background:#F4F6F9;
}

.newsletter-card{
  max-width:850px;
  margin:auto;
  background:#fff;
  padding:60px;
  border-radius:28px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.newsletter-card h2{
  color:#1D4355;
  font-size:2.8rem;
  margin:20px 0;
}

.newsletter-card p{
  line-height:1.8;
  margin-bottom:35px;
}

.newsletter-form{
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
}

.newsletter-form input{
  padding:16px 20px;
  border-radius:14px;
  border:1px solid #ddd;
  min-width:280px;
}

.newsletter-form button{
  padding:16px 30px;
  border:none;
  border-radius:14px;
  background:#1D4355;
  color:#fff;
  font-weight:700;
}


/* RESPONSIVE */

@media(max-width:992px){
  .category-grid,
  .blog-grid,
  .transformation-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .blog-hero h1{
    font-size:3rem;
  }
}

@media(max-width:768px){
  .category-grid,
  .blog-grid,
  .transformation-grid{
    grid-template-columns:1fr;
  }

  .blog-hero h1,
  .featured-card h2,
  .newsletter-card h2{
    font-size:2.3rem;
  }

  .featured-card,
  .newsletter-card{
    padding:35px;
  }

  .transformation-card img{
    height:auto;
  }
}

.award-dates{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    margin:40px 0;
}

.award-box{
    background:#F4F6F9;
    padding:25px;
    border-radius:18px;
    border-left:5px solid #365B6D;
    text-align:left;
}

.award-box h4{
    color:#1D4355;
    margin-bottom:12px;
}

.award-box p{
    margin:8px 0;
    line-height:1.6;
}

/* ABOUT US PAGE */

.about-hero{
  min-height: 90vh;
  padding: 130px 8%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 18px solid #F4F6F9;
  border-radius: 30px;
}

.about-overlay{
  max-width: 800px;
  padding: 60px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

.about-overlay h1,
.story-content h2,
.mission-section h2,
.values-section h2,
.team-section h2,
.why-about h2,
.areas-about h2,
.about-cta h2,
.name-story h2{
  color: #1D4355;
}

.about-overlay h1{
  font-size: 4.5rem;
  line-height: 1;
  margin: 20px 0;
}

.about-overlay p,
.story-content p,
.mission-section p,
.areas-about p,
.about-cta p,
.name-story p,
.section-heading p{
  line-height: 1.8;
  color: #555;
  font-size: 1.1rem;
}

.about-buttons{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 35px;
}

.primary-btn,
.secondary-btn,
.about-cta a{
  padding: 16px 34px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 700;
  transition: .35s ease;
}

.primary-btn,
.about-cta a{
  background: #1D4355;
  color: #fff;
}

.secondary-btn{
  background: #F4F6F9;
  color: #1D4355;
  border: 2px solid #1D4355;
}

.primary-btn:hover,
.secondary-btn:hover,
.about-cta a:hover{
  background: #365B6D;
  color: #fff;
  transform: translateY(-5px);
}

/* STORY */

.our-story{
  padding: 120px 8%;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: center;
  background: #fff;
}

.story-image img{
  width: 100%;
  max-width: 420px;
  display: block;
  margin: auto;
}

.story-content h2{
  font-size: 3.5rem;
  margin: 20px 0;
}

/* MISSION + NAME */

.mission-section,
.name-story,
.areas-about,
.about-cta{
  padding: 100px 8%;
  text-align: center;
}

.mission-section,
.areas-about{
  background: #F4F6F9;
}

.name-story,
.about-cta{
  background: #fff;
}

.section-heading{
  max-width: 850px;
  margin: auto;
  text-align: center;
}

.section-heading h2{
  font-size: 3.3rem;
  margin: 20px 0;
}

/* VALUES */

.values-section,
.team-section,
.why-about{
  padding: 120px 8%;
  background: #fff;
}

.values-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.value-card{
  background: #F4F6F9;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: .35s ease;
}

.value-card:hover{
  background: #1D4355;
  color: #fff;
  transform: translateY(-8px);
}

.value-card h3{
  color: #1D4355;
  margin-bottom: 15px;
}

.value-card:hover h3,
.value-card:hover p{
  color: #fff;
}

/* TEAM */

.team-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px;
  margin-top: 60px;
}

.team-card{
  background: #F4F6F9;
  padding: 50px;
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: .35s ease;
}

.team-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(29,67,85,.18);
}

.team-avatar{
  font-size: 4rem;
  margin-bottom: 20px;
}

.team-card h3{
  color: #1D4355;
  font-size: 2rem;
}

.team-title{
  font-weight: 700;
  color: #365B6D;
}

.team-phone a{
  color: #1D4355;
  text-decoration: none;
  font-weight: 700;
}

.team-message{
  text-align: center;
  margin-top: 35px;
  color: #555;
  font-weight: 600;
}

/* WHY ABOUT */

.about-checks{
  max-width: 1000px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.about-checks div{
  background: #F4F6F9;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  font-weight: 700;
  color: #1D4355;
}

ul{
  list-style: none;
  padding: 0;
  margin: 35px 0;
}

/* MOBILE */

@media(max-width: 992px){
  .our-story,
  .values-grid,
  .team-grid,
  .about-checks{
    grid-template-columns: 1fr;
  }

  .about-overlay h1{
    font-size: 3rem;
  }

  .story-content h2,
  .section-heading h2{
    font-size: 2.5rem;
  }
}

@media(max-width: 768px){
  .about-hero,
  .our-story,
  .values-section,
  .team-section,
  .why-about,
  .mission-section,
  .name-story,
  .areas-about,
  .about-cta{
    padding: 80px 6%;
  }

  .about-overlay{
    padding: 35px;
  }

  .about-buttons{
    flex-direction: column;
  }

  .primary-btn,
  .secondary-btn{
    width: 100%;
    text-align: center;
  }
}

/* contact us section of the code */

.concern-section{
  margin: 100px auto;
  padding:100px 8%;
  background:#F4F6F9;
}

.concern-card{
  max-width:950px;
  margin:auto;
  background:#fff;
  padding:55px;
  border-radius:28px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.concern-card h2{
  color:#1D4355;
  font-size:3rem;
  margin:15px 0;
}

.concern-card p{
  line-height:1.8;
  color:#555;
  margin-bottom:35px;
}

.concern-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.concern-form .form-group{
  margin-bottom:20px;
}

.concern-form label{
  display:block;
  font-weight:700;
  color:#1D4355;
  margin-bottom:8px;
}

.concern-form input,
.concern-form select,
.concern-form textarea{
  width:100%;
  padding:15px 18px;
  border:1px solid #ddd;
  border-radius:14px;
}

.concern-btn{
  background:#1D4355;
  color:#fff;
  border:none;
  padding:16px 38px;
  border-radius:16px;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:768px){
  .concern-form .form-row{
    grid-template-columns:1fr;
  }

  .concern-card{
    padding:35px;
  }
}