html {
     scroll-behavior: smooth;
   }

    body {
      background-color: #fffef9;
      color: #fff;
      font-family: 'Segoe UI', sans-serif;
    }
    /* Section Titles */
    .section-title {
      color: #FFD700;
      font-size: 3rem;
      font-weight: bold;
      text-align: center;
      margin-top: 2rem;
    }

    .navbar-toggler-icon{
      color:white;
    }
    /* Navbar */
    /* Default (mobile-first) */
/* .navbar-nav {
  width: auto; 
} */

/* 
@media (min-width: 992px) {

  .navbar-nav{
 background-color:rgba(93, 93, 93, 1) ; 
   
 
} */
/* Larger screens only */
/* @media (max-width: 768px) {
 ul .navbar-nav {
   display:none;
     
  }

  ul{
    display:none;
  }
} */
 

/* Desktop view: 50% width on the right + background color */
 

 
     .nav-link {
      color: #fff !important;
      /* transition: color #FFD700 0.3s ease; */
    }
    .navbar-nav .nav-link:hover {
      color: #FFD700 !important; 
    }
    .nav-item a :hover {
        color:#FFD700;
    }
    .navbar-nav .nav-link.active {
      color: #FFD700 !important;
    }
    
     @media (min-width:768px){
        .navbar-nav{
        width:50%;
        background-color:rgba(93, 93, 93, 1) ;
        justify-content: center;
    }
     }
    /* Portfolio Grid */
@media (max-width:768px) {
  #div{
 flex-direction: column-reverse;
 
    }
 .navbar{
  background-color:#f8f1c7;
 }

 .nav-link{
  color:black !important;
 }


 #hA{
  margin-top: 25px;
 }
   
}
    
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      padding: 0 2rem 3rem;
    }
    .portfolio-grid img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .portfolio-grid img:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
    /* Hero h2 */
    .fs-3 {
      background-color: #FFD700;
      color: #fff;
      display: inline-block;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      transition: all 0.3s ease; /* smooth hover */
    }

    .fs-3:hover {
  background-color: #fff;     /* invert background */
  color: #FFD700;             /* text turns yellow */
  cursor: pointer;            /* pointer cursor */
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); /* subtle glow */
}
    /* Contact button hover */
    .btn-warning:hover {
      background-color: #fff;
      color: #FFD700;
      border: 1px solid #FFD700;
    }
   .image-container {
    width:  350px;               /* same as brown-box */
    height: 420px;
    background:  rgba(255, 187, 0, 1); /* brown background */
    border-radius: 12px;
    padding-left: 30px; 
    padding-top:40px;        /* left brown space */
    display: flex; 
    align-items: center;
}

.image-container img {
    width: 350px;               /* same as featured-img */
    height: 420px;
    object-fit: cover;
    border-radius: 12px; 
}


    /* Hero image circle */
   .hero-img {
  width: 420px;   /* bigger size */
  height: 420px;
  object-fit: cover;
  border-radius: 50%; /* keeps it perfectly round */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); /* optional glow */
}

@media (max-width:768px) {
    .hero-img{
        width:105px;
        height:105px;
        border-radius:50%;
    }

    .h3{
        margin-top:20px;
    }
}

.fs-5{
 font-family: Montserrat;
 font-size:24px;
 font-synthesis-weight: 500;
 color:rgba(0, 0, 0, 1);
}
   /* social media icons */
   .mt-4.d-flex.gap-3 i {
  color: #FFD700; /* gold by default */
  transition: all 0.3s ease;
}

.mt-4.d-flex.gap-3 i:hover {
  color: #FF8800; /* warm orange on hover */
  transform: scale(1.2); /* slight zoom */
  text-shadow: 0 0 8px rgba(255, 136, 0, 0.6); /* glowing effect */
  cursor: pointer;
}
.nav-categories {
      display: flex;
      justify-content: center;
      margin: 2rem 0;
      font-size: 1.1rem;
    }
    .nav-categories a {
      color: #FFD700;
      text-decoration: none;
      position: relative;
      font-weight: bold;
    }
    .nav-categories a.active::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #FFD700;
    }
 /* contact form */


 /* Inputs */
.custom-input {
  border: 2px solid #FFD700;
  border-radius: 8px;
  background-color: #111;
  color: #fff;
  transition: all 0.3s ease;
}
.custom-input:focus {
  border-color: #dfc327;
  box-shadow: 0 0 8px rgba(255, 136, 0, 0.6);
  background-color: #000;
  color: #FFD700;
}

/* Button */
.custom-btn {
  background-color: #FFD700;
  color: #000;
  font-weight: bold;
  border-radius: 25px; /* smooth pill shape */
  padding: 0.75rem;
  transition: all 0.3s ease;
}
.custom-btn:hover {
  background-color: #fff;
  color: #FFD700;
  border: 2px solid #FFD700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}


/* Service Cards */
.service-card {
  transition: all 0.3s ease;
  background-color: #fff;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  border-color: #FFD700;
}



footer a:hover {
  color: #FFD700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}