/* ==========================================================
   GLOBAL BASE STYLES
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Roboto',sans-serif;
  background:#f8f8f6;
  color:#333;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

.light-blue{color:#ADD8E6}

/* ==========================================================
   HEADER & TOP BAR
   ========================================================== */
.header{background:#353635;color:#fff}

.top-bar{background:#1a1a1a;padding:0.5rem 0;font-size:0.875rem}

.top-bar-content{display:flex;justify-content:space-between;align-items:center}
.top-bar-left{display:flex;align-items:center;gap:0.5rem}
.top-bar-right{display:flex;align-items:center;gap:1rem}

.phone-link{color:#ADD8E6;font-weight:600;text-decoration:none;transition:text-decoration .3s}
.phone-link:hover{text-decoration:underline}
.click-here-btn{background:none;border:none;color:#BEBEBE;text-decoration:underline;cursor:pointer}

.social-icons{display:flex;gap:0.5rem}
.icon{width:1rem;height:1rem;fill:currentColor}

/* ==========================================================
   MAIN NAV – stacked & centered
   ========================================================== */
.main-nav{padding:1rem 0;text-align:center}

.nav-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
}

/* Logo */
.logo{display:flex;align-items:center;gap:0.75rem}
.logo-icon{width:52px;height:auto}
.logo-text{font-weight:700}
.logo-naples{font-size:0.875rem;letter-spacing:1px}
.logo-shutter{font-size:1.25rem;line-height:1}

/* Hamburger */
.hamburger{
  display:block;width:2.5rem;height:2.5rem;background:none;border:none;cursor:pointer
}
.hamburger span{display:block;width:100%;height:4px;background:#fff;border-radius:2px;margin:6px 0;transition:all .3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translateY(10px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translateY(-10px)}
@media(min-width:768px){.hamburger{display:none}}

/* Nav links */
.navigation{display:flex!important;flex-wrap:wrap;justify-content:center;gap:0.75rem 1.25rem}
.navigation .nav-item{color:#fff;font-weight:500;text-decoration:none;position:relative;font-size:1rem;letter-spacing:.5px}
.navigation .nav-item::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:	#ADD8E6;transform:scaleX(0);transform-origin:left;transition:transform .3s
}
.navigation .nav-item:hover{color:	#BEBEBE}
.navigation .nav-item:hover::after{transform:scaleX(1)}

/* Estimate button (pill) */
.estimate-btn{
  display:inline-block;background:#BEBEBE;color:#000;font-weight:700;
  padding:0.75rem 1.75rem;border-radius:50px;box-shadow:0 3px 8px rgba(0,0,0,.15);
  text-decoration:none;transition:background .3s,transform .2s,box-shadow .3s;letter-spacing:.5px
}
.estimate-btn:hover{background:#ADD8E6;transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.25)}

/* ==========================================================
   HERO SECTION
   ========================================================== */
.hero{
  min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url('images/shutter.jpg') center/cover
}
.hero-content{max-width:64rem;padding:0 1rem}
.hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem}
.hero-subtitle{font-size:2.5rem;font-weight:700;color:#ADD8E6;margin-bottom:2rem}
@media(min-width:768px){.hero-title{font-size:4.5rem}.hero-subtitle{font-size:3.75rem}}
.hero-btn{background:transparent;border:2px solid #ADD8E6;color:#BEBEBE;font-size:1.125rem;padding:1.5rem 2rem;border-radius:4px;cursor:pointer;transition:all .3s}
.hero-btn:hover{background:#ADD8E6;color:#000}

/* ==========================================================
   SERVICES / PROJECTS GRID
   ========================================================== */
.services{padding:4rem 0;background:#fff}
.services-title{font-size:2.5rem;font-weight:700;text-align:center;color:#353635;margin-bottom:1rem}
@media(min-width:768px){.services-title{font-size:3rem}}

.services-grid{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:center;
  margin-top:4rem;
}

.service-card{
  flex:0 1 260px;
  text-align:center;
  border:2px solid #e5e5e5;
  border-radius:0.75rem;
  padding:1.5rem;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  display:flex;
  flex-direction:column;
}

.service-card:hover{transform:translateY(-6px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:#ADD8E6}

.service-image{margin-bottom:1.25rem}
.service-image img{width:100%;height:10rem;object-fit:cover;border-radius:0.5rem}
.service-title{font-size:1.25rem;font-weight:700;color:#353635;margin-bottom:0.75rem}
.service-description{color:#666;font-size:0.9rem;margin-bottom:1.25rem;line-height:1.5}

/* Make button align bottom */
.service-btn{
  border:1px solid #ADD8E6;
  background:transparent;
  color:#BEBEBE;
  padding:.65rem 1.5rem;
  border-radius:4px;
  font-weight:500;
  cursor:pointer;
  transition:all .3s;
  margin-top:auto;
}
.service-btn:hover{background:#ADD8E6;color:#000}

/* NEW: Force 4 cards per row on desktop + equal height */
@media(min-width:1200px){
  .services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
  }
  .service-card{
    height:100%;
  }
}

/* ==========================================================
   MODERN CONTACT PAGE – UPDATED WITH BACKGROUND IMAGE
   ========================================================== */
.contact-page {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('images/bedroomshutter.JPEG') center/cover no-repeat;
  padding: 5rem 0;
  color: #fff;
}

.contact-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media(min-width:992px){
  .contact-wrapper{flex-direction:row;align-items:flex-start}
}

.contact-form-box,
.contact-info-box {
  flex: 1;
  background: rgb(251, 250, 250);
  backdrop-filter: blur(3px);
  padding: 2.75rem 2.25rem;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  color: #353635;
}

.contact-form-box h2,
.contact-info-box h2 {
  font-size: 1.85rem;
  font-weight: 700;
  color: #353635;
  margin-bottom: 1.75rem;
}

form { width: 100%; }
.form-group { margin-bottom: 1.35rem; width: 100%; }
.form-group.half { width: 100%; }
@media(min-width:576px){
  .form-group.half { width: calc(50% - 0.75rem); display: inline-block; }
  .form-group.half:first-of-type { margin-right: 1.5rem; }
}

label {
  display: block;
  color: #555;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
}

input, textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 0.96rem;
  background: #ADD8E6;
  transition: border-color .3s, box-shadow .3s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: #1034A6;
  background: #ADD8E6;
  box-shadow: 0 0 0 3px rgba(193,199,88,.25);
}
textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form-box .estimate-btn {
  width: 100%;
  text-align: center;
  margin-top: 0.25rem;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.contact-details a {
  color: #678e9d;
  text-decoration: none;
}
.contact-details a:hover {
  text-decoration: underline;
}

.map-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.09);
}
.map-wrap iframe {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: inherit;
}

/* ==========================================================
   SOCIAL ICON STYLES
   ========================================================== */
.social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-icons a {
  color: #353635;
  background-color: #fff;
  border-radius: 50%;
  padding: 10px;
  font-size: 18px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-icons a.facebook:hover {
  background-color: #1877f2;
  color: #fff;
}
.social-icons a.twitter:hover {
  background-color: #1da1f2;
  color: #fff;
}
.social-icons a.instagram:hover {
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, 
    #fdf497 5%, 
    #fd5949 45%, 
    #d6249f 60%, 
    #285AEB 90%);
  color: #fff;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  background: #1a1a1a;
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
}
.footer p {
  margin: 0;
  font-size: 0.9rem;
  color: #ccc;
}
.footer .social-icons a {
  background-color: #353635;
  color: #fff;
}
.footer .social-icons a:hover {
  opacity: 0.85;
}

/* ==========================================================
   CTA: Have a Question For Us Section
   ========================================================== */
.cta-section {
  background-color: #353635;
  color: #fff;
  padding: 4rem 1rem;
  text-align: center;
}
.cta-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.cta-section p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}
.cta-section .cta-btn {
  background-color: #ADD8E6;
  color: #000;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}
.cta-section .cta-btn:hover {
  background-color: #d7da71;
  transform: translateY(-2px);
}

/* ==========================================================
   HOME – CONTACT CTA SECTION (HAVE A QUESTION FOR US?)
   ========================================================== */
.contact {
  background: #353635;
  color: #fff;
  text-align: center;
  padding: 4rem 1rem;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: 	#BEBEBE;
}

.contact-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.contact-btn {
  background-color:#BEBEBE;
  color: #000;
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-btn:hover {
  background-color: #ADD8E6;
  color: #000;
  transform: translateY(-2px);
}


/* ============================= */
/* Project Page Styling */
/* ============================= */
.project-page {
  padding: 5rem 1rem;
  background: #fff;
  color: #353635;
  text-align: center;
}

.project-page .container {
  max-width: 1100px;
  margin: 0 auto;
}

.project-title {     
  font-size: 2.7rem;
  font-weight: 800;
  color: #ADD8E6;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 3px solid #BEBEBE;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.project-intro {
  font-size: 1.1rem;
  color: #555;
  max-width: 850px;
  margin: 0 auto 3rem;
  line-height: 1.9;
}

/* Image Gallery */
.project-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.project-gallery img {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  border: 3px solid #ADD8E6;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  transition: transform .3s, box-shadow .3s;
  cursor: pointer;
}
.project-gallery img:hover { 
  transform: scale(1.05); 
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Lightbox Effect */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Click anywhere outside image closes */
.lightbox:target {
  display: flex;
}
.lightbox:target .lightbox-close {
  display: block;
}

.lightbox-close {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  display: none;
}

/* Feature List */
.project-features {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem 2rem;
  text-align: left;
}
.project-features li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 1rem;
  font-weight: 500;
  color: #353635;
}
.project-features li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #ADD8E6;
  font-weight: 700;
}

/* ============================= */
/* Header (Logo above Nav) */
/* ============================= */
.project-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #353635;
  padding: 1rem;
}

.project-header .logo h1 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.navigation .nav-item {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color .3s;
}

.navigation .nav-item:hover {
  color: #ADD8E6;
}

/* ============================= */
/* Footer Link Styling */
/* ============================= */
.footer-link {
  color: #BEBEBE;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-link:hover {
  color: #ADD8E6;
  text-decoration: underline;
}

/* ============================= */
/* Responsive Adjustments */
/* ============================= */
@media(max-width:768px){
  .project-title { font-size: 2.2rem; }
  .project-intro { font-size: 1rem; }
  .project-gallery img { max-width: 100%; }
}