/* ===========================
   CSS RESET
=========================== */

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

/* ===========================
  CSS VARIABLES
=========================== */

:root {

  /* Primary Colors */

  --primary-color: #2563eb;
  --secondary-color: #1e293b;
  --accent-color: #f59e0b;
 
  

  /* Background Colors */

  --background-color: #ffffff;
  --surface-color: #f8fafc;


  /* Text Colors */

  --text-color: #1f2937;
  --text-light: #6b7280;

  /* Typography */

  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  --h1-size: 3.8rem;
  --h2-size: 2.2rem;
  --paragraph-size: 1.1rem;

  /* Layout */

  --container-width: 1200px;
  --section-padding: 100px 0;

  /* Components */

  --border-radius: 12px;
  --box-shadow: 0 10px 30px rgba(0,0,0,.1);

  /* Animation */

  --transition-speed: .3s ease;
}



/* ===========================
  GLOBAL STYLES
=========================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

img{
  max-width:100%;
  display:block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

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

.primary-btn,
.secondary-btn{

  display:inline-block;

  padding:14px 28px;

  border-radius:var(--border-radius);

  font-weight:600;

  transition:
  background-color var(--transition-speed),
  color var(--transition-speed),
  transform var(--transition-speed);
}

.primary-btn{

  background:var(--primary-color);

  color:white;
}

.primary-btn:hover{

  background:#174fc7;

  transform:translateY(-3px);
}

.secondary-btn{

  background:transparent;

  color:var(--primary-color);

  border:2px solid var(--primary-color);
}

.secondary-btn:hover{

  background:var(--primary-color);

  color:white;

  transform:translateY(-3px);
}


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

.navbar{
  
  padding: 15px 0;
}

.navbar .container{

  display:flex;

  justify-content:space-between;

  align-items:center;
}

/* ===========================
   LOGO IMAGE
=========================== */

.logo img{

  width:240px;

  height:auto;

  display:block;
}


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

.nav-actions{

  display:flex;

  align-items:center;

  gap:18px;

  margin-left:20px;
}

.logo{

  font-size:2rem;

  font-weight:800;

  background: #000000;
  
  white-space:nowrap;
}


.nav-links{

  display:flex;

  gap:28px;
}



.nav-links a{

  position:relative;

  color:var(--secondary-color);

  font-weight:500;

  transition:color var(--transition-speed);
  
}

.nav-links a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-5px;

  width:0;

  height:2px;

  background:var(--primary-color);

  transition:width .3s ease;
}

.nav-links a:hover::after{

  width:100%;
}

/* . Hire Me Button */


.work-with-me-btn{

  background:var(--primary-color);

  color:white;

  padding:12px 28px;

  border-radius:var(--border-radius);

  transition:background-color var(--transition-speed);

  white-space:nowrap;
}

.work-with-me-btn:hover{

  background:#174fc7;
}

/* ===========================
  CONTAINER
=========================== */

.container{
  width:90%;
  max-width:var(--container-width);
  margin:0 auto;
}

section{
  min-height:100vh;
  padding:100px 0;
}

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

.hero{
  padding: 50px 0 100px;
}

.hero .container{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:40px;
}

.hero-content{

  flex:1;
}

.hero-image{

  flex:1;

  display:flex;

  justify-content:center;
}

.hero-image img{

  width:380px;

  border-radius:50%;

  box-shadow:var(--box-shadow);
}

.greeting{

  color:var(--primary-color);

  font-weight:600;

  margin-bottom: 10px;

}

.hero h1{

  font-size:var(--h1-size);

  line-height:1.1;

  margin-bottom: 15px;
}

.hero h2{

  font-size:2rem;

  color:var(--primary-color);

  min-height:60px;

  margin:20px 0;

}

.hero-description{

  max-width:520px;

  color:var(--text-light);

  font-size:var(--paragraph-size);

  margin-bottom:35px;
}

.hero-buttons{

  display:flex;

  gap:25px;

  margin-top:40px;
}


/* ===========================
ABOUT
=========================== */

.about{

  padding:var(--section-padding);

  background:var(--surface-color);
}

.about .container{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:80px;
}

.about-image{

  flex:1;

  display:flex;

  justify-content:center;
}

.about-image img{

  width:380px;

  border-radius:20px;

  box-shadow:var(--box-shadow);
}

.about-content{

  flex:1;
}

.section-subtitle{

  color:var(--primary-color);

  font-weight:600;

  margin-bottom:15px;
}

.section-title{

  font-size:2.5rem;

  margin-bottom:25px;
}

.about-text{

  color:var(--text-light);

  margin-bottom:20px;

  line-height:1.8;
}

.about-info{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:20px;

  margin-top:35px;
}

.info-card{

  background:white;

  padding:20px;

  border-radius:var(--border-radius);

  box-shadow:var(--box-shadow);

  transition:transform var(--transition-speed);
}

.info-card:hover{

  transform:translateY(-6px);
}

.info-card h3{

  margin-bottom:10px;

  color:var(--secondary-color);
}

.info-card p{

  color:var(--text-light);
}

/* ===========================
SKILLS
=========================== */

.skills{

  padding:var(--section-padding);
}

/* Center the Heading */
.skills .section-subtitle,
.skills .section-title{

  text-align:center;
}

/* Space Below the Title */
.skills .section-title{

  margin-bottom:60px;
}


/* Skill Card */
.skill-card{

  background:white;

  padding:35px;

  border-radius:var(--border-radius);

  box-shadow:var(--box-shadow);

  text-align:center;

  transition:
  transform var(--transition-speed),
  box-shadow var(--transition-speed);
}

/* Hover Effect */
.skill-card:hover{

  transform:translateY(-8px);

  box-shadow:0 18px 35px rgba(0,0,0,.15);
}

/* Skill Heading */
.skill-card h3{

  margin-bottom:15px;

  color:var(--secondary-color);
}

/* Skill Description */
.skill-card p{

  color:var(--text-light);
}

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

.services{

  padding: var(--section-padding);

  background: var(--surface-color);
}

.services .section-subtitle,
.services .section-title{

  text-align: center;
}

.services .section-title{

  margin-bottom: 60px;
}

/* Services Grid */
.services-grid{

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;
}

/* Service Card */
.service-card{

  background: white;

  padding: 40px;

  border-radius: var(--border-radius);

  box-shadow: var(--box-shadow);

  text-align: center;

  transition:
  transform var(--transition-speed),
  box-shadow var(--transition-speed);
}

/* Hover Effect */
.service-card:hover{

  transform: translateY(-8px);

  box-shadow: 0 18px 35px rgba(0,0,0,.15);
}

/* Icon */
.service-icon{

  font-size: 3rem;

  margin-bottom: 20px;
}

/* Title */
.service-card h3{

  margin-bottom: 15px;

  color: var(--secondary-color);
}

/* Description */
.service-card p{

  color: var(--text-light);

  line-height: 1.7;
}


/* ===========================
   PRICING
=========================== */

.pricing {

  padding: 100px 0;

  background: var(--background-color);

}

/* ===========================
   PRICING HEADING
=========================== */

.pricing .section-subtitle,
.pricing .section-title {
  text-align: center;
}


/* Pricing Introduction */

.pricing-intro {

  max-width: 650px;

  margin: 0 auto 50px;

  text-align: center;

  color: var(--text-light);

  line-height: 1.7;

}


/* Pricing Grid */

.pricing-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;

  align-items: stretch;

}


/* Pricing Card */

.pricing-card {

  position: relative;

  display: flex;

  flex-direction: column;

  padding: 35px 28px;

  background: var(--surface-color);

  border: 1px solid rgba(37, 99, 235, 0.08);

  border-radius: var(--border-radius);

  box-shadow: var(--box-shadow);

  transition:
  transform var(--transition-speed),
  box-shadow var(--transition-speed),
  border-color var(--transition-speed);

}


/* Card Hover */

.pricing-card:hover {

  transform: translateY(-8px);

  box-shadow:
  0 15px 35px rgba(0, 0, 0, 0.12);

  border-color: var(--primary-color);

}

 
/* Pricing Header */

.pricing-header {

  min-height: 150px;

}


.pricing-card h3 {

  margin-bottom: 15px;

  font-size: 1.35rem;

  color: var(--secondary-color);

}


/* Description */

.pricing-description {

  color: var( --text-light);

  font-size: 0.95rem;

  line-height: 1.6;

}


/* Price */

.pricing-price {

  display: flex;

  flex-direction: column;

  margin: 25px 0;

  padding-bottom: 25px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

}


.price-label {

  font-size: 0.85rem;

  color: var(--text-color);

}


.price {

  margin-top: 5px;

  font-size: 1.7rem;

  font-weight: 800;

  color: var(--primary-color);

}


.price-period {

  margin-top: 3px;

  font-size: 0.85rem;

  color: var( --text-light);

}


/* Features */

.pricing-features {

  display: flex;

  flex-direction: column;

  gap: 13px;

  margin: 0 0 30px;

  padding: 0;

  list-style: none;

}


.pricing-features li {

  color: var( --text-light);

  font-size: 0.9rem;

  line-height: 1.5;

}


/* Pricing Buttons */

.pricing-btn {

  width: 100%;

  margin-top: auto;

  text-align: center;

}


/* Featured Card */

.pricing-card.featured {

  border: 2px solid var(--primary-color);

  transform: translateY(-8px);

}


.pricing-card.featured:hover {

  transform: translateY(-12px);

}


/* Popular Badge */

.popular-badge {

  position: absolute;

  top: -14px;

  left: 50%;

  transform: translateX(-50%);

  padding: 6px 16px;

  background: var(--primary-color);

  color: white;

  border-radius: 20px;

  font-size: 0.75rem;

  font-weight: 700;

  white-space: nowrap;

}


/* Pricing Note */

.pricing-note {

  max-width: 800px;

  margin: 50px auto 0;

  padding: 20px 25px;

  text-align: center;

  background: var(--background-color);

  border-radius: var(--border-radius);

  border: 1px solid rgba(37, 99, 235, 0.08);

}


.pricing-note p {

  margin: 0;

  color: var( --text-light);

  line-height: 1.6;

}
 

/* ===========================
PROJECTS
=========================== */

.projects{
  padding: var(--section-padding);

  background: var(--surface-color);
}

.projects .section-subtitle,
.projects .section-title{

  text-align: center;
}

.projects .section-title{

  margin-bottom: 60px;
}

/* Grid */
.projects-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

  gap:40px;

  
}

/* Card */

.project-card{

  background:white;

  border-radius:var(--border-radius);

  overflow:hidden;

  box-shadow:var(--box-shadow);

  transition:
  transform var(--transition-speed),
  box-shadow var(--transition-speed);
}

/* Hover */
.project-card:hover{

  transform:translateY(-10px);

  box-shadow:0 18px 40px rgba(0,0,0,.15);
}

/* Image */
.project-card img{

  width:100%;

  height:250px;

  object-fit:cover;
}

/* Content */
.project-content{

  padding:30px;
}

/* Title */
.project-content h3{

  margin-bottom:15px;

  color:var(--secondary-color);
}

/* Description */
.project-content p{

  color:var(--text-light);

  margin-bottom:20px;

  line-height:1.7;
}

/* Technology Tags */
.project-tech{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:25px;
}

/* Individual Tag */
.project-tech span{

  background:var(--surface-color);

  padding:8px 14px;

  border-radius:50px;

  font-size:.9rem;

  color:var(--primary-color);

  font-weight:600;
}

/* Buttons */
.project-buttons{

  display:flex;

  gap:15px;
}

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

.contact{

  padding: var(--section-padding);

  background: var(--background-color);
}

.contact .section-subtitle,
.contact .section-title{

  text-align:center;
}

.contact .section-title{

  margin-bottom:60px;
}

.contact-content{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:start;
}

/* Contact Information */
.contact-info h3{

  font-size:2rem;

  margin-bottom:20px;
}

.contact-info p{

  color:var(--text-light);

  margin-bottom:25px;
}

.contact-item{

  margin-bottom:25px;
}

.contact-item h4{

  color:var(--primary-color);

  margin-bottom:5px;
}

/* Contact Form */
.contact-form{

  display:flex;

  flex-direction:column;

  gap:20px;
}

/* Inputs */
.contact-form input,
.contact-form textarea{

  padding:15px;

  border:1px solid #ddd;

  border-radius:var(--border-radius);

  font-size:1rem;

  font-family:inherit;

  transition:border-color var(--transition-speed);
}

/* Focus Effect */
.contact-form input:focus,
.contact-form textarea:focus{

  outline:none;

  border-color:var(--primary-color);
}

/* Textarea */
.contact-form textarea{

  resize:none;
}

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

#form-message{
  margin-top:15px;
  padding:12px 15px;
  border-radius:8px;
  font-size:0.95rem;
  font-weight:500;
  display:none;
}

#form-message.error{
  display:block;
  color:#b91c1c;
  background:#fee2e2;
  border:1px solid #fecaca;
}

#form-message.success{
  display:block;
  color:#166534;
  background:#dcfce7;
  border:1px solid #bbf7d0;
}

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

.footer{

  background: #000000;

  color: white;

  padding: 70px 0 30px;
}

.footer-logo{
  background: #000000;
  padding: 12px 20px;
  border-radius: 12px;
  display: inline-block;
  max-width: fit-content;
  margin-bottom: 15px;
}

.footer-logo img{
  max-width: 280px;
  height: auto;
  display: block;
}


.footer-content{

  display:grid;

  grid-template-columns:2fr 1fr 1fr;

  gap:50px;

  margin-bottom:40px;
}

.footer h3,
.footer h4{

  margin-bottom:20px;
}

.footer p{

  color:#cbd5e1;

  line-height:1.8;
}

.footer-links ul{

  display:flex;

  flex-direction:column;

  gap:12px;
}

.footer-links a{

  color:#cbd5e1;

  transition:color var(--transition-speed);
}

.footer-links a:hover{

  color:white;
}

.footer hr{

  border:none;

  border-top:1px solid rgba(255,255,255,.15);

  margin:30px 0;
}

.footer-bottom{

  text-align:center;
}

.footer-bottom p{

  color:#94a3b8;
}

/* ===========================
   HEADER
=========================== */

header{

  position: sticky;

  top: 0;

  background: white;

  z-index: 1000;

  box-shadow: 0 2px 20px rgba(0, 0, 0, .05);
}

/* ===========================
   HAMBURGER MENU
=========================== */

.menu-toggle{

  display:none;

  flex-direction:column;

  cursor:pointer;

  gap:6px;
}

/* Create the three lines */
.menu-toggle span{

  width:30px;

  height:3px;

  background:var(--secondary-color);

  transition:var(--transition-speed);
}

/* ===========================
   ACTIVE NAVIGATION
=========================== */

.nav-links a.active{

  color:var(--primary-color);

  font-weight:700;
}

/* ===========================
   SCROLL TO TOP BUTTON
=========================== */

#scrollTopBtn{

  position:fixed;

  bottom:30px;

  right:30px;

  width:55px;

  height:55px;

  border:none;

  border-radius:50%;

  background:var(--primary-color);

  color:white;

  font-size:24px;

  cursor:pointer;

  box-shadow:var(--box-shadow);

  opacity:0;

  visibility:hidden;

  transition:
  opacity var(--transition-speed),
  visibility var(--transition-speed),
  transform var(--transition-speed);

  z-index:999;

}

#scrollTopBtn:hover{

  background:#174fc7;

  transform:translateY(-5px);
}

#scrollTopBtn.show{

  opacity:1;

  visibility:visible;
}


/* ===========================
   PROJECT FILTER BUTTONS
=========================== */

.filter-buttons{

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;

  margin:50px 0;

}

.filter-btn{

  padding:12px 28px;

  border:none;

  border-radius:30px;

  background:var(--surface-color);

  color:var(--text-color);

  cursor:pointer;

  font-size:1rem;

  font-weight:600;

  transition:
  background-color var(--transition-speed),
  color var(--transition-speed);

}

.filter-btn:hover{

  background:var(--primary-color);

  color:white;

}

.filter-btn.active{

  background:var(--primary-color);

  color:white;

}

/* ===========================
   HIDE PROJECT
=========================== */

.hide{

  display:none;

}


/* ===========================
   SKILLS
=========================== */

.skills-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:50px;

}

.skill{

  margin-bottom:30px;

}

.skill-info{

  display:flex;

  justify-content:space-between;

  margin-bottom:10px;

  font-weight:600;

}


.skill-bar{

  width:100%;

  height:12px;

  background:#e5e7eb;

  border-radius:20px;

  overflow:hidden;

}

.skill-progress{

  width:0;

  height:100%;

  background:var(--primary-color);

  border-radius:20px;

  transition:width 1.5s ease;

}



/* ===========================
  COUNTERS
=========================== */

.stats-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

  gap:30px;

  margin-top:60px;

}

.stat-card{

  background:white;

  padding:30px;

  border-radius:var(--border-radius);

  text-align:center;

  box-shadow:var(--box-shadow);

  transition:transform var(--transition-speed);

}

.stat-card:hover{

  transform:translateY(-8px);

}

.counter{

  font-size:3rem;

  color:var(--primary-color);

  font-weight:bold;

  margin-bottom:10px;

}

/* ===========================
  THEME TOGGLE BUTTON
=========================== */

.theme-toggle{

  width:50px;
  height:50px;

  border:none;
  border-radius:50%;

  background:var(--surface-color);

  cursor:pointer;

  font-size:1.3rem;

  display:flex;
  justify-content:center;
  align-items:center;

  transition:
  background var(--transition-speed),
  transform var(--transition-speed);

}

.theme-toggle:hover{

  background:var(--primary-color);

  color:white;

  transform:rotate(20deg);

}



/* ===========================
   DARK MODE
=========================== */

body.dark-mode{

  background:#111827;

  color:#f9fafb;

}

body.dark-mode header,
body.dark-mode .hero,
body.dark-mode .about,
body.dark-mode .skills,
body.dark-mode .services,
body.dark-mode .pricing,
body.dark-mode .projects,
body.dark-mode .contact,
body.dark-mode .footer{

  background:#111827;

  color:#f9fafb;

}

/* ===========================
   DARK MODE NAVBAR
=========================== */

body.dark-mode .logo{

  color:#f9fafb;

}

body.dark-mode .nav-links a{

  color:#f9fafb;

}

body.dark-mode .nav-links a:hover{

  color:var(--primary-color);

}

body.dark-mode .nav-links a.active{

  color:var(--primary-color);

}