body {
  font-family: 'Arial', sans-serif;
  transition: background-color 0.4s ease, color 0.4s ease;
}

section {
  padding-top: 60px;
  padding-bottom: 60px;
}

#hero img {
  width: 280px;
  height: 280px; /* ensures square shape */
  object-fit: cover; /* maintains aspect ratio */
  border-radius: 8px; /* optional rounded corners */
   background: #eff0f2; 
}


.navbar-brand {
  font-weight: bold;
}

/* About Me */

.about-section {
  max-width: 800px;                  
  margin: 0 auto;                
  text-align: center;                
  line-height: 1.7;                  
  font-size: 1.05rem;                
  color: #333;                      
  background: #eff0f2;                  
  padding: 2rem;                     /* spacing inside the box */
  border-radius: 1rem;               /* rounded corners for soft look */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.about-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* slightly deeper hover shadow */
}

.about-section p {
  margin-bottom: 1rem;
}


/*  */
#skills i {
  transition: transform 0.3s;
  cursor: pointer;
}

#skills i:hover {
  transform: scale(1.2);
}

.card img {
  height: 200px;
  object-fit: cover;
}
#services .card {
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

#services .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.skill-icon {
  width: 60px;       /* uniform width */
  height: 60px;      /* uniform height */
  object-fit: contain; 
  display: block;
  margin: 0 auto 10px auto;
  transition: transform 0.3s;
}

.skill-icon:hover {
  transform: scale(1.2);
}

/* contact me */
#thankYouMessage {
  background: #e8f5e9;
  padding: 1.5rem;
  border-radius: 10px;
  max-width: 600px;
  margin: 0 auto;
}

/* footer */
footer a {
  transition: transform 0.3s, color 0.3s;
}

footer a:hover {
  color: #0d6efd;
  transform: scale(1.2);
}

/* Dark Mode */
.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

.dark-mode .bg-light {
  background-color: #1e1e1e !important;
}

.dark-mode .navbar-dark {
  background-color: #1c1c1c !important;
}

.dark-mode .card {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.dark-mode .btn-primary {
  background-color: #bb86fc;
  border-color: #bb86fc;
  color: #121212;
}

.dark-mode .btn-outline-light {
  border-color: #e0e0e0;
  color: #e0e0e0;
}

.dark-mode a {
  color: #bb86fc;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #hero .col-md-4,
  #hero .col-md-8 {
    text-align: center !important;
  }
  #skills .col-4 {
    margin-bottom: 20px;
  }
}