/* ================= GOOGLE FONT ================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap');

/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* ================= VARIABLES ================= */
:root{
  --bg-light:#f8faff;
  --bg-dark:#0b0e1a;
  --text-light:#1e1e2f;
  --text-dark:#eaeef5;
  --primary-gradient:linear-gradient(135deg,#778be7,#764ba2);
  --navbar-gradient:linear-gradient(135deg,#6c7ece,#845ec2);
  --navbar-scrolled:linear-gradient(135deg,#5a67d8,#6b46a1);
  --glass-bg:rgba(255,255,255,.25);
  --border-glass:rgba(255,255,255,.2);
}

.gallery-card{
overflow:hidden;
border-radius:18px;
cursor:pointer;
}

.gallery-img-wrapper{
position:relative;
overflow:hidden;
}

.gallery-img{
width:100%;
height:260px;
object-fit:cover;
transition:0.6s;
}

/* Overlay */

.gallery-overlay{
position:absolute;
bottom:-100%;
left:0;
width:100%;
height:100%;
background:linear-gradient(transparent,rgba(0,0,0,0.8));
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:25px;
transition:0.5s;
}

/* Hover Effect */

.gallery-card:hover .gallery-overlay{
bottom:0;
}

.gallery-card:hover .gallery-img{
transform:scale(1.1);
}

/* Text */

.gallery-badge{
background:#0d6efd;
padding:6px 14px;
border-radius:20px;
color:white;
font-size:13px;
width:max-content;
margin-bottom:10px;
}

.gallery-title{
color:white;
font-weight:600;
}

/* ================= BODY ================= */
body{
  background:var(--bg-light);
  color:var(--text-light);
  overflow-x:hidden;
  padding-top:76px;
  transition:.3s;
}

body.dark-mode{
  background:var(--bg-dark);
  color:var(--text-dark);
}

/* ================= NAVBAR ================= */
.transition-nav{
  background:var(--navbar-gradient);
  box-shadow:0 4px 20px rgba(102,126,234,.3);
  z-index:1030;
}

.navbar-scrolled{
  background:var(--navbar-scrolled)!important;
  box-shadow:0 10px 30px rgba(102,126,234,.4);
}

.navbar-brand{
  color:#fff!important;
  font-size:1.8rem!important;
}

/* ================= HAMBURGER ================= */
.hamburger-menu{
  width:30px;
  height:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.hamburger-menu span{
  height:3px;
  background:#fff;
  border-radius:3px;
  transition:.3s;
}

.navbar-toggler:not(.collapsed) .hamburger-menu span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.navbar-toggler:not(.collapsed) .hamburger-menu span:nth-child(2){
  opacity:0;
}
.navbar-toggler:not(.collapsed) .hamburger-menu span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

/* ================= HERO ================= */
.hero{
  min-height:calc(100vh - 76px);
  margin-top:-76px;
  padding-top:76px;
  background:linear-gradient(145deg,#f0f4ff,#e6eefa);
}

.dark-mode .hero{
  background:linear-gradient(145deg,#11162b,#1a1f3a);
}

/* HERO IMAGE */
.hero-image-wrapper{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.hero-profile-card{
  padding:12px;
  border-radius:50%;
  background:linear-gradient(135deg,#667eea,#764ba2);
  box-shadow:0 25px 50px rgba(102,126,234,.4);
  animation:floatHero 4s ease-in-out infinite;
}

.hero-profile-img{
  width:320px;
  height:320px;
  border-radius:50%;
  object-fit:cover;
  border:6px solid #fff;
}

@keyframes floatHero{
  0%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
  100%{transform:translateY(0)}
}

/* ================= GLASS ================= */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-glass);
}

/* ================= BUTTON ================= */
.btn-gradient{
  background:var(--primary-gradient);
  color:#fff;
  border:none;
}

.btn-gradient:hover{
  transform:translateY(-3px);
}

/* ================= PROJECT ================= */
.project-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 30px -15px rgba(0,0,0,.1);
  transition:.4s;
}

.dark-mode .project-card{
  background:#1f2336;
  color:#eaeef5;
}

.project-img-wrapper{
  overflow:hidden;
  aspect-ratio:16/10;
}

.project-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.8s;
}

.project-card:hover .project-img{
  transform:scale(1.1);
}

.project-content{
  padding:20px;
}
.form-popup{
opacity:0;
visibility:hidden;
transition:.4s;
}

.form-popup.show{
opacity:1;
visibility:visible;
}

.project-description{
  font-size:.9rem;
  color:#6c757d;
}

/* ================= FOOTER ================= */
footer{
  background:#eef2fa;
}

.dark-mode footer{
  background:#0f1327;
  color:#cfd6ff;
}

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

body.dark-mode .bg-light-subtle{
  background:#1a1f3a!important;
}

body.dark-mode .glass-card{
  background:#232844;
  color:#eaeef5;
}

body.dark-mode .testimonial-card{
  background:#232844;
  color:#eaeef5;
}

body.dark-mode .form-control{
  background:#1f2336;
  color:#eaeef5;
}

body.dark-mode .project-description{
  color:#aab3e8;
}

body.dark-mode .hero-profile-img{
  border:6px solid #1f2336;
}

/* ================= MOBILE ================= */
@media(max-width:991px){

body{
  padding-top:70px;
}

.hero{
  min-height:calc(100vh - 70px);
  margin-top:-70px;
  padding-top:70px;
}

.hero-image-wrapper{
  justify-content:center;
  margin-top:40px;
}

.hero-profile-img{
  width:220px;
  height:220px;
}

/* MOBILE NAVBAR */
.navbar-collapse{
  position:fixed;
  top:0;
  right:-100%;
  width:280px;
  height:100vh;
  background:linear-gradient(135deg,#667eea,#764ba2);
  transition:.3s;
  z-index:9999;
}

.navbar-collapse.show{
  right:0;
}

}
.form-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:0.4s;
z-index:9999;
}

.form-popup.show{
opacity:1;
visibility:visible;
}

.popup-content{
background:white;
padding:40px;
border-radius:20px;
text-align:center;
width:320px;
animation:popupScale 0.4s;
}

.popup-icon{
font-size:50px;
color:#0d6efd;
margin-bottom:15px;
}

.popup-content button{
margin-top:20px;
border:none;
background:#0d6efd;
color:white;
padding:10px 30px;
border-radius:30px;
}

@keyframes popupScale{
from{transform:scale(0.6);opacity:0}
to{transform:scale(1);opacity:1}
}