*{
 padding-left: 10px;
 
}
header {
  background-color: #e0f0ff;
  text-align: left;
  padding: 10px;
  padding: left 0%;
}

header img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
 
}

header h1 {
  margin: 10px;
  color: #0b0909;
  font-size: 20px;margin-left: 0px;
}

header p {
  color: #160404;
  font-size: 15px;
  margin-left: 30px;
}

section {
  background-color: #ffffff;
  padding: 20px;
  margin: 20px;
  border-radius: 8px;
}

#skills ul {
  list-style-type:none;
  padding: 3px;
}

#skills li {
  background-color: #e0f7ff;
  padding: 8px;
  margin: 5px;
  display: inline-block;
  border-radius: 4px;
}

/* Basic reset for margins and paddings */
body, h2, table, th, td {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

/* Style the table */
table {
 width: 100%;
 border-collapse: collapse; /* Ensures borders are collapsed into a single line */
 margin: 20px 0;
 font-family: Arial, sans-serif; /* Use a clean font */
}

/* Style table headers */
th {
 background-color: #73a4d8; /* Bootstrap primary color */
 color: #ffffff; /* White text color */
 padding: 12px;
 text-align: left;
 border-bottom: 2px solid #0056b3; /* Darker blue border */
}

/* Style table cells */
td {
 padding: 12px;
 border-bottom: 1px solid #ddd; /* Light gray border */
 color: #333; /* Dark text color */
}

/* Add alternating row colors for better readability */
tbody tr:nth-child(even) {
 background-color: #f9f9f9; /* Light gray background */
}

tbody tr:hover {
 background-color: #e9ecef; /* Slightly darker gray on hover */
}

/* Style the heading */
h2 {
 margin-bottom: 15px;
 margin: 12;
 font-size: 1.5em;
 color: #333; /* Dark text color */
}

/* RGB: 0-255 */
/* Hex: 0-9[A-F] */

/*Social*/
 .social {
           display: flex;
           justify-content:center;
           gap: 30px; /* Space between each icon */
           margin-top: 20px;
           
       }

       .social a {
           text-decoration: none;
           color: #0e0d0d; /* Default color for icons */
           font-size: 24px; /* Size of the icons */
           transition: color 0.3s ease;
       }

       .social a:hover {
           color: #5b00b1; /* Change color on hover */
       }

       .social a:nth-child(1):hover {
           color: #5a0713; /* Facebook */
       }

       .social a:nth-child(2):hover {
           color: #0077b5; /* LinkedIn */
       }

       .social a:nth-child(3):hover {
           color: #333; /* GitHub */
       }
/*End of Social*/

/*ABOUT*/

/* Basic reset for margins and paddings */
body,h2, table, th, td {
 margin: 12;
 padding: 12;
 box-sizing: border-box;
}

/* Style the table */
table {
 width: 100%;
 border-collapse: collapse; /* Ensures borders are collapsed into a single line */
 margin: 20px 0;
 font-family: Arial, sans-serif; /* Use a clean font */
}

/* Style table headers */
th {
 background-color: #5782af; /* Blue background */
 color: #ffffff; /* White text */
 padding: 12px;
 text-align: left;
 border-bottom: 2px solid #0056b3; /* Darker blue border */
}

/* Style table cells */
td {
 padding: 12px;
 border-bottom: 1px solid #ddd; /* Light gray border */
 color: #333; /* Dark text color */
}

/* Add alternating row colors for better readability */
tbody tr:nth-child(even) {
 background-color: #f9f9f9; /* Light gray background */
}

tbody tr:hover {
 background-color: #e9ecef; /* Slightly darker gray on hover */
}

/* Style the heading */
h2 {
 margin-bottom: 15px;
 font-size: 1.5em;
 color: #333; /* Dark text color */
}

/*SERVICE*/

/* Basic reset for margins and paddings */
body, h2, h3, p, section {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

/* General styles */
body {
 font-family: Arial, sans-serif; /* Clean, readable font */
 line-height: 1.6; /* Improve readability */
 color: #333; /* Dark text color */
}

/* Style the section */
#services {
 padding: 40px;
 background-color: #f9f9f9; /* Light gray background for the section */
}

h2 {
 text-align: left;
 margin-bottom: 20px;
 font-size: 2em; /* Larger heading */
 color: #124078; /* Blue color for the heading */
}

/* Container for the service items */
.service-container {
 display: flex;
 flex-wrap: wrap;
 gap: 20px; /* Space between items */
 justify-content: center; /* Center the items horizontally */
}

/* Style individual service items */
.service {
 background-color: #ffffff; /* White background for each service */
 border: 1px solid #ddd; /* Light gray border */
 border-radius: 8px; /* Rounded corners */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
 padding: 20px;
 width: calc(50% - 20px); /* Two items per row with some spacing */
 max-width: 400px; /* Limit the width */
}

.service h3 {
 margin-bottom: 10px;
 font-size: 1.5em; /* Slightly larger heading for each service */
 color: #5b7ea3; /* Blue color for subheadings */
}

.service p {
 font-size: 1em;
 color: #666; /* Gray text color for descriptions */
}

/* Responsive helpers & mobile-first adjustments */
:root{
  --max-width:1100px;
  --gutter:18px;
  --card-bg: #fff;
  --muted: #6b7a7d;
}

/* Make site container fluid and centered with consistent padding */
.site-container{
  max-width: var(--max-width);
  margin: 20px auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Hero: flexible layout that stacks on smaller screens */
.hero{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.hero .intro{ flex:1 1 260px; min-width:220px; }
.hero .hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Avatar frame: outer container clips image exactly */
.avatar-frame{
  width:160px;
  height:160px;
  overflow:hidden;
  border-radius:12px;
  border:3px solid rgba(3,32,42,0.06);
  box-shadow: 0 10px 24px rgba(2,6,23,0.08);
  background:#fff;
  flex-shrink:0;
}
.avatar-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Card panels */
.panel, .card, .service-card {
  background: var(--card-bg);
  border-radius:12px;
  padding:16px;
  box-shadow: 0 8px 24px rgba(6,22,33,0.06);
}

/* Forms: full width on small screens */
form .form-control, form textarea { width:100%; box-sizing:border-box; }

/* Buttons stack on tiny screens */
.btn { white-space:nowrap; }
.btn-full { min-width: 140px; }
@media (max-width: 576px) {
  .btn-full { width:100%; display:block; }

  /* Layout stacking */
  .hero { flex-direction:column; align-items:flex-start; gap:14px; }
  .avatar-frame { width:96px; height:96px; margin:0; }
  .site-container { margin:12px; padding:16px; }
  .panel, .card { padding:14px; border-radius:10px; }

  /* Grid fallback: make all columns 100% stack */
  .row > [class*="col-"] { width:100% !important; flex: 0 0 100%; max-width:100%; }

  /* Typography adjustments for small screens */
  h1, h2, h3 { line-height:1.15; }
  h1 { font-size:1.6rem; }
  h2 { font-size:1.25rem; }
  p, .muted { font-size:0.95rem; }

  /* reduce horizontal padding inside containers */
  .container, .site-container { padding-left:12px; padding-right:12px; }
}

/* Medium screens tweaks */
@media (max-width: 992px) {
  .avatar-frame { width:128px; height:128px; }
  .hero .intro { min-width: 200px; }
  .site-container { margin:18px; padding:18px; }
}

/* Header & nav touch-target improvements */
header.site-header .navbar .nav-link {
  padding: .5rem .75rem;
  touch-action: manipulation;
}

/* Utility: center avatar on narrow widths */
.text-md-end { text-align: right; }
@media (max-width: 768px) { .text-md-end { text-align: center; } }

/* Improve readability on phones (slight increase to line height) */
body, p, li { line-height: 1.5; }

/* Ensure no accidental overlay blocks interactions */
header.site-header, header.site-header * { pointer-events: auto; }