/* ====================================================================
 * JIDJIDCODE – Design System v2 2025‑05‑29
 * Added subtle background patterns, extra palette colours
 * ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@600;700&display=swap');

/* ------------ 1. Root variables ----------------------------------- */
/* :root{
  --clr-primary:#0d6efd;
  --clr-secondary:#6c757d;
  --clr-accent:#f9c74f;
  --clr-tertiary:#ff6b6b;
  --clr-success:#19ca94;
  --clr-info:#50b9e8;
  --clr-warning:#ffb30f;
  --clr-dark:#212529;
  --clr-body:#495057;
  --clr-muted:#8f9399;
  --clr-bg-light:#f8f9fa;
  --clr-bg-alt:#e9ecef;

  --shadow-xs:0 1px 3px rgb(0 0 0 /.08);
  --shadow-sm:0 3px 6px rgb(0 0 0 /.08);
  --shadow-md:0 6px 12px rgb(0 0 0 /.12);

  --font-body:"Open Sans",sans-serif;
  --font-display:"Poppins",sans-serif;


} */

/* =========================================
   Elegant-Light CSS Custom Properties
   ========================================= */
:root {
  /* === Brand / Core === */
  --clr-primary:  #5e6adb; /* soft periwinkle */
  --clr-secondary:#8e9ab0; /* cool slate-grey */
  --clr-accent:   #d4af37; /* muted metallic gold */
  --clr-tertiary: #e89aa0; /* dusty rose */

  /* === State / Semantic === */
  --clr-success:  #2bbf9f; /* jade */
  --clr-info:     #56a8e9; /* light azure */
  --clr-warning:  #e8b34d; /* honey amber */
  --clr-danger:   #d96c6c; /* muted crimson */

  /* === Neutrals === */
  --clr-dark:     #1f2230; /* charcoal */
  --clr-body:     #525760; /* graphite */
  --clr-muted:    #a1a6ad; /* mist grey */

  /* === Surfaces === */
  --clr-bg-light: #38a3a5; /* pure white */
  --clr-bg-dark:  #22577a; /* pure dark */
  --clr-bg-alt:   #f4f5f7; /* very light grey */
  --clr-border:   #dee0e5; /* hairline grey */

  /* === Utilities === */
  --clr-link:        var(--clr-primary);
  --clr-link-hover:  #4755b6;
  --clr-shadow-sm:   0 1px 3px rgba(31,34,48,0.06);
  --clr-shadow-lg:   0 10px 30px rgba(31,34,48,0.10);

  /* Radius & spacing helpers (optional but handy) */
  --radius-sm:   .25rem;
  --radius-lg:   .75rem;
  --gap:         1.5rem;

  /* A quick on-brand gradient */
  --gradient-primary: linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);
}


/* Dark‑mode scaffold */
/* @media (prefers-color-scheme: dark){
  :root{
    --clr-bg-light:#15171a;
    --clr-bg-alt:#1d2126;
    --clr-body:#c7c7c7;
    --clr-dark:#fff;
    --clr-muted:#8f8f8f;
  }
} */

/* ------------ 2. Global reset ----------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font:400 1rem/1.75 var(--font-body);
  color:var(--clr-body);
  background:var(--clr-bg-light);
}

/* Subtle decorative pattern overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 25% 25%, rgba(13,110,253,.04) 0 25%, transparent 26%) 0 0/150px 150px,
    radial-gradient(circle at 75% 75%, rgba(255,107,107,.04) 0 20%, transparent 21%) 0 0/200px 200px;
  pointer-events:none;
  z-index:-1;
}

/* Typography */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--clr-dark);
  font-weight:700;
  line-height:1.2;
  margin-bottom:.75em;
}
h1{font-size:clamp(2.25rem,5vw+1rem,4rem);}
h2{font-size:clamp(1.75rem,3vw+1rem,3rem);}
h3{font-size:1.5rem;}

p{margin-bottom:1.5rem; text-align: justify;}

a{color:var(--clr-primary);text-decoration:none;transition:all .15s;}
a:hover{color:var(--clr-primary);opacity:.8;}

/* ------------ 3. Section spacing / patterns -------------------- */
.section{
  padding-block:clamp(3rem,6vw,8rem);
}
.section-alt{
  background:var(--clr-bg-alt);
}
.section-gradient{
  background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-tertiary) 100%);
  color:#fff;
}

/* ------------ 4. Navbar ------------------------------------- */
.navbar{
  transition:background-color .3s,box-shadow .3s;
  background-color:var(--clr-bg-light);

}
.navbar-scrolled{
  background:var(--clr-bg-light);
  box-shadow:var(--shadow-sm);
}
.nav-link{
  font-weight:800;
  color: var(--clr-border)!important;
}
.nav-link.btn{
  padding:.5rem 1.25rem;
}
.navbar ul ul li:hover{
  background-color:var(--clr-info);
}

/* ------------ 5. Hero --------------------------------------- */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  background:linear-gradient(180deg,var(--clr-bg-light) 0%,var(--clr-bg-alt) 100%);
}
.hero-img{
  max-width:280px;
  border-radius:50%;
  box-shadow:var(--shadow-md);
}
.hero h1, p{
  color: var(--clr-dark);
}
/* Decorative floating circle */
.hero::before{
  content:'';
  position:absolute;
  width:500px;
  aspect-ratio:1;
  border-radius:50%;
  background:color-mix(in srgb,var(--clr-accent) 25%,white);
  top:-100px;
  right:-150px;
  opacity:.15;
  animation:float 10s ease-in-out infinite alternate;
}
@keyframes float{
  to{transform:translateY(60px);}
}

/* ------------ 6. Buttons ------------------------------------ */
.btn{
  display:inline-block;
  border:2px solid var(--clr-primary);
  background:var(--clr-primary);
  color:#fff;
  font:700 .875rem/1 var(--font-body);
  border-radius:5rem;
  padding:.75rem 1.75rem;
  transition:.2s;
  box-shadow:var(--shadow-xs);
}
.btn:hover{
  background: red !important;
  color:white !important;
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
  border-radius: 5rem !important;
}
.btn-lg{padding:1.25rem 2.75rem;font-size:1rem;}
.btn-outline{background:transparent;color:var(--clr-primary);}
.btn-outline:hover{background:var(--clr-primary);color:#fff;}


/* ------------ 6.1. Project Sections --------------------------- */
.section-projects{
  background-color: var(--clr-bg-alt);

}
/* ------------ 7. Cards -------------------------------------- */
.cards-1 .card{
  border:none;
  background:transparent;
  border-radius:1rem;
  box-shadow:var(--shadow-xs);
  transition:.2s;
  height:100%;
}
.cards-1 .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);}
.icon-bubble{
  width:7rem;
  height:7rem;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-content:center;
  margin:0 auto .75rem;
  background:color-mix(in srgb,var(--clr-primary) 15%,white);
}
.icon-bubble[data-variant="success"]{background:color-mix(in srgb,var(--clr-success) 15%,white);}
.icon-bubble[data-variant="info"]{background:color-mix(in srgb,var(--clr-info) 15%,white);}
.icon-bubble[data-variant="warning"]{background:color-mix(in srgb,var(--clr-warning) 15%,white);}
.icon-bubble[data-variant="tertiary"]{background:color-mix(in srgb,var(--clr-tertiary) 15%,white);}
.icon-bubble i{font-size:2.25rem;}

.card-title{margin:0;color:var(--clr-dark);font-size:1.25rem;font-weight:700;text-align:center;}

/* ------------ 8. Footer ------------------------------------- */
.footer{
  background:var(--clr-bg-alt);
  color:var(--clr-body);
}
.footer h5{font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--clr-dark);}
.footer a{color:var(--clr-body);}
.footer a:hover{color:var(--clr-bg-dark);}
.social-link{
  font-size:1.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
  background:var(--clr-bg-light);
  color:#fff;
  box-shadow:var(--shadow-xs);
}
.social-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}

/* ------------ 9. Utilities ---------------------------------- */
.mt-6{margin-top:4rem!important;}



/* ------------ 10. Media Queries ----------------------------- */
.swiper-img {
  max-width: 100%;
  width: 220px;
  height: 420px;
  object-fit: scale-down;
  border-radius: 0.75rem;
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.1); */
  cursor: pointer;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper {
  padding: 2rem 0;
}
html, body {
  overflow-x: hidden;
}