/* ================= GLOBAL ================= */
body{
font-family:'Roboto',sans-serif;
scroll-behavior:smooth;
padding-top:90px;
}
.section-title{font-size:2rem;font-weight:700;margin-bottom:1rem;}
.sky-btn{
background:#00AEEF;
border-color:#00AEEF;
color:#fff;
}
.sky-btn:hover{
background:#0095cc;
border-color:#0095cc;
}

/* ================= NAVBAR ================= */
#mainNavbar{
background:#111;
}
.navbar-brand img{
/*height:45px;*/
}
.navbar-nav .nav-link{
color:#fff;
}
.navbar-nav .nav-link:hover{
color:#00AEEF;
}

/* ================= HERO ================= */
.hero{
background:url('images/_sleek_rooftop_solar_panels_v2.jpg') center/cover no-repeat;
min-height:100vh;
display:flex;
align-items:center;
}
.hero-overlay{
background:rgba(0,0,0,0.55);
width:100%;
padding:50px 0;
}
.hero-form{
background:#fff;
padding:25px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}
.hero-form h4{
font-weight:700;
}
.form-error{
color:red;
font-size:0.85rem;
}

/* ================= TESTIMONIALS ================= */
.testimonial-card{
transition:0.3s;
}
.testimonial-card:hover{
transform:translateY(-5px);
box-shadow:0 15px 25px rgba(0,0,0,0.2);
}

/* ================= FOOTER ================= */
footer{
background:#111;
color:#fff;
}
footer a{
color:#fff;
}
footer a:hover{
color:#00AEEF;
}
/* =========================
   GLOBAL STYLES
========================= */

body {
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
  padding-top: 80px; /* Offset for fixed navbar */
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #222;
}

.py-5 {
  padding-top: 6rem !important;
  padding-bottom: 3rem !important;
}

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

#mainNavbar {
  background-color: rgba(0,0,0,0.6);
  transition: background-color 0.4s, padding 0.4s;
}

#mainNavbar.scrolled {
  background-color: #222;
  padding: 0.5rem 0;
}

.navbar-brand {
  color: #ffcc33 !important;
}

.navbar-nav .nav-link {
  color: #fff;
  font-weight: 500;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: #ff9900;
}

.nav-link,
.nav-link:focus,
.nav-link:hover {
  color: #E68A00;
}

.navbar-nav .btn-warning {
  background-color: #ff9900;
  border-color: #ff9900;
  transition: all 0.3s;
}

.navbar-nav .btn-warning:hover {
  background-color: #e68a00;
  border-color: #e68a00;
}

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

.hero {
  background: url('images/_sleek_rooftop_solar_panels_v2.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  height: 100vh;
  display: flex;
  align-items: center;
}

.hero-overlay {
  background-color: rgba(0,0,0,0.2);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

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

/* =========================
   FEATURES / HIGHLIGHTS
========================= */

.feature-icon {
  font-size: 2.5rem;
  color: #ff9900;
}

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

.service-card {
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.service-card .fs-1 {
  font-size: 3rem;
}

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

.testimonial-card {
  border: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

.testimonial-card p {
  font-style: italic;
}

/* =========================
   CTA SECTION
========================= */

section.py-5.text-center {
  background-size: cover;
}

.btn-dark {
  background-color: #222;
  border-color: #222;
  transition: all 0.3s;
}

.btn-dark:hover {
  background-color: #000;
  border-color: #000;
}

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

.btn-primary {
  background-color: #ff9900;
  border-color: #ff9900;
  transition: all 0.3s;
}

.btn-primary:hover {
  background-color: #e68a00;
  border-color: #e68a00;
}

.btn-warning {
  background-color: #ff9900;
  border-color: #ff9900;
}

.btn-warning:hover {
  background-color: #e68a00;
  border-color: #e68a00;
}

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

.card.shadow {
  border-radius: 0.75rem;
}

/* =========================
   FAQ
========================= */

.accordion-button:focus {
  box-shadow: none;
}

/* =========================
   BLOG
========================= */

.card-title {
  font-size: 1.2rem;
}

.card-text {
  font-size: 0.95rem;
}

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

footer {
  background: #222;
  color: #fff;
  padding: 2rem 0;
}

footer a:hover {
  text-decoration: underline;
}