*{  
  margin: 0;    
  padding: 0;                                     
  box-sizing: border-box; }

html { 
    scroll-behavior: smooth; 
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: #ebebe9;
  color: #000;
  line-height: 1.6;
}

/* Links */
a { 
    color: inherit; 
    text-decoration: none; 
    transition: opacity .3s; 
}

a:hover { 
    opacity: .7; 
}

/* Header */
header {
  background: #cdcdca;
  padding: 1rem 2rem;
  position: sticky; top: 0; z-index: 1000;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.logo a { 
    font-size: 1.5rem; 
    font-weight: bold; 
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
nav li a { 
    font-weight: 500; 
}

nav li a.active { 
    color: #007bff; 
}    

/* Section Layout */
section {
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #585754;
}

section p, section ul { 
    margin-bottom: 1rem; 
}

ul li { 
    margin-bottom: .5rem; 
}

/* Hero Section */
#hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-block: 90px 55px;
  flex-wrap: wrap;
}

.hero-content { 
    flex: 1 1 320px; 
}

.hero-content h1 { 
    font-size: 2.5rem; 
    margin-bottom: 1rem; 
}

.hero-content p { 
    font-size: 1.1rem; 
}

.hero-image { 
    flex: 1 1 280px; 
    display: flex; 
    justify-content: center; 
}

.hero-image img { 
    max-width: 100%; 
    border-radius: 10px; 
}

/*Icon Buttons */
.icon-container { 
    display: flex; 
    gap: 20px; 
    flex-wrap: wrap; }

.icon {
  width: 80px; 
  height: 80px; 
  border-radius: 50%;
  background: #fff; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 36px; 
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transition: transform .3s;
}

.icon:hover { 
    transform: scale(1.1); 
}

/* Brand colours */
.icon.js       { color:#f7df1e; }
.icon.html     { color:#e34c26; }
.icon.css      { color:#264de4; }
.icon.github   { color:#333; }
.icon.website  { color:#007bff; }
.icon.linkedin { color:#0a66c2; }
.icon.instagram{ color:#e1306c; }
.icon.twitter  { color:#1da1f2; }


#about, #company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.aboutme_image,
.company_image { 
    flex: 1 1 280px; 
}

.aboutme_image img,
.company_image img { 
    max-width:100%; border-radius:10px; 
}
.about_content,
.company_description { 
    flex: 1 1 320px; }


/* Contact */
#contacts form {
  display: flex; 
  flex-direction: column; 
  gap: 1rem;
  max-width: 600px; 
  margin-top: 1rem;
}

#contacts input,
#contacts textarea {
  padding: .8rem; 
  border:none; 
  border-radius:5px;
  background:#4a4a48; 
  color:#f6f6f6;
}

#contacts button {
  background:#f6f6f6; 
  color:#585754; 
  font-weight:bold;
  padding:.8rem; 
  border:none; 
  border-radius:5px; 
  cursor:pointer;
  transition: opacity .3s;
}

#contacts button:hover { 
    opacity:.8; 
}

/*footer*/
footer {
  background:#4a4a48; 
  text-align:center;
  padding:1rem 2rem; 
  color:#f6f6f6; 
  font-size:.9rem;
}

/*Media Queries */
@media (max-width: 992px) {
  .icon { width:70px; 
    height:70px; 
    font-size:32px; }
  .hero-content h1 { 
    font-size:2.2rem; }
}

@media (max-width: 768px) {
  .icon { width:60px; 
    height:60px; 
    font-size:28px; }
  section h2     { 
    font-size:1.75rem; 
}
  .hero-content h1 { 
    font-size:2rem; 
}
  #aboutme,#skills,#projects { 
    height:auto; 
}       
}
@media (max-width: 480px) {
  .icon { 
    width:50px; 
    height:50px; 
    font-size:24px; 
}

  nav ul { 
    gap:1rem; 
}

  .hero-content h1 { 
    font-size:1.6rem; 
}
  section { 
    padding:3rem 1rem; 
}
}