/* Core Styling */
body {
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Hero Background Setup */
.hero-bg {
    background-image: url('assets/hero-bg.png');
    background-size: cover;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-attachment: fixed;
}



/* Navigation Hover */


.nav-link {
    color: #d1d5db;
    position: relative;
    transition: 0.3s;
}

.nav-link:hover {
    color: #ef4444;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -4px;
    background: #ef4444;
    transition: 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}



/* home */

.tech-badge {

    border: 1px solid rgba(34, 211, 238, 0.4);
    padding: 6px 14px;
    border-radius: 999px;
    transition: 0.3s;

}

.tech-badge:hover {

    background: #22d3ee;
    color: black;
    transform: translateY(-4px);

}




/* Experience Card Effects */


.experience-card {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.experience-card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.leadership-card {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.leadership-card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}




/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0b0b0b;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Image Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating-image {
    animation: float 4s ease-in-out infinite;
}

/* Ring animation for the border */
@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.2;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.5;
    }
}

.animate-pulse-ring {
    animation: pulse-ring 3s infinite ease-in-out;
}

.active-tab {
    color: #0da7cd;
    /* Red color */
    border-bottom: 2px solid #dc2626;
}

.animate-fade {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



 .tab-links {
    padding: 8px 16px;
    border-radius: 20px;
    transition: 0.3s;
    color: #9ca3af;
}

.tab-links:hover {
    color: #22d3ee;
}


.active-tab {
    background: #22d3ee !important; 
    color: black !important;
}





.about-card {
    background: #151515;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #27272a;
    transition: 0.3s;
}

.about-card:hover {
    border-color: #22d3ee;
    transform: translateY(-3px);
}


/* skill container */
#Programming .grid,
#Testing .grid {
    margin-top: 10px;
}


/* skill badge */
.skill-pill {

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

    background: #161616;

    border: 1px solid #2a2a2a;

    padding: 10px 14px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 500;

    color: #22d3ee;

    transition: all 0.3s ease;

    cursor: default;

    box-shadow: 0 0 0 rgba(34, 211, 238, 0);

}


/* hover effect */
.skill-pill:hover {

    transform: translateY(-4px) scale(1.03);

    border-color: #22d3ee;

    box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);

    background: #111;

}


/* paragraph style */
#Programming p,
#Testing p {

    line-height: 1.6;

    letter-spacing: 0.3px;

}


/* responsive */
@media(max-width:640px) {

    .skill-pill {

        font-size: 13px;

        padding: 8px 10px;

    }

}




/* timeline line */

.timeline::before{
content:"";
position:absolute;
left:20px;
top:0;
width:2px;
height:100%;
background:linear-gradient(#22d3ee,#0ea5e9);
animation:lineGlow 3s infinite alternate;
}

@keyframes lineGlow{
0%{opacity:.5}
100%{opacity:1}
}


/* timeline item */

.timeline-item{
position:relative;
padding-left:60px;
margin-bottom:20px;
}


/* dot */

.timeline-dot{
position:absolute;
left:11px;
top:8px;
width:18px;
height:18px;
background:#22d3ee;
border-radius:50%;
box-shadow:0 0 10px #22d3ee;
}


/* card */

.experience-card{
background:#151515;
padding:26px;
border-radius:14px;
border:1px solid #262626;
transition:.35s;
}


/* hover */

.experience-card:hover{
transform:translateY(-8px) scale(1.02);
border-color:#22d3ee;
box-shadow:
0 10px 30px rgba(0,0,0,.6),
0 0 15px rgba(34,211,238,.2);
}


/* company logo */

.company-logo{
width:40px;
height:40px;
border-radius:8px;
background:#111;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border:1px solid #2a2a2a;
}

.company-logo img{
width:28px;
height:28px;
object-fit:contain;
}


/* list */

.exp-list{
margin-top:10px;
color:#a3a3a3;
padding-left:18px;
list-style:disc;
line-height:1.6;
}


/* tech tags */

.exp-tags{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
}

.exp-tags span{
font-size:12px;
padding:4px 10px;
background:#111;
border:1px solid #2a2a2a;
border-radius:20px;
color:#22d3ee;
transition:.3s;
}

.exp-tags span:hover{
background:#22d3ee;
color:black;
}





/* Contact Cards */

.A{
    background:#0b0b0b;      /* section থেকে আলাদা background */
padding:40px;            /* ভিতরের space */
border-radius:16px;      /* card shape */
/* border:1px solid #2a2a2a; */

box-shadow:
0 10px 30px rgba(0,0,0,.6);
}


.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #151515;
  border-radius: 12px;
  border-left: 4px solid #22d3ee;
  transition: all 0.3s ease;
  cursor: default;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.2);
}

.contact-card .icon {
  width: 48px;
  height: 48px;
  background: #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22d3ee;
  font-size: 20px;
  flex-shrink: 0;
}

.contact-card .label {
  font-size: 12px;
  color: #a3a3a3;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-card .value {
  color: white;
  font-weight: 500;
}

/* Social Buttons */
.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #22d3ee;
  font-size: 20px;
  transition: all 0.3s ease;
}

.social-btn:hover {
  transform: scale(1.2) translateY(-4px);
  background: #22d3ee;
  color: #0b0b0b;
}

/* Contact Form */
.contact-form {
  background: #151515;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
}

.contact-form input,
.contact-form textarea {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  padding: 14px 16px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #22d3ee;
  outline: none;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.contact-form button {
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
  color: #0b0b0b;
  font-weight: bold;
  padding: 14px 0;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  background: linear-gradient(90deg, #3b82f6, #22d3ee);
  transform: translateY(-2px) scale(1.02);
}

/* Form Status */
.form-status {
  color: #22d3ee;
}


/* ===== PROJECT CARDS ===== */
.project-tag {
  font-size: 11px;
  padding: 3px 10px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  color: #22d3ee;
  transition: 0.3s;
}
 
.project-tag:hover {
  background: #22d3ee;
  color: black;
}
 
.project-btn-primary {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
  color: #0b0b0b;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
 
.project-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
}
 
.project-btn-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #22d3ee;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #22d3ee;
  transition: all 0.3s ease;
}
 
.project-btn-secondary:hover {
  background: #22d3ee;
  color: #0b0b0b;
  transform: translateY(-2px);
}
 
/* ===== CERTIFICATE SLIDER ===== */

.cert-slider-wrapper {
  position: relative;
  padding: 0 20px;
}
 
.cert-slider {
  overflow: hidden;
}
 
.cert-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s ease-in-out;
}
 
.cert-card {
  flex-shrink: 0;
  width: 280px;
}
 
.cert-view-btn {
  display: inline-block;
  margin-top: auto;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid #22d3ee;
  color: #22d3ee;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}
 
.cert-view-btn:hover {
  background: #22d3ee;
  color: #0b0b0b;
  transform: translateY(-2px);
}
 
.cert-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #151515;
  border: 1px solid #2a2a2a;
  color: #22d3ee;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
 
.cert-nav-btn:hover {
  background: #22d3ee;
  color: #0b0b0b;
  border-color: #22d3ee;
}
 
.cert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a2a2a;
  cursor: pointer;
  transition: all 0.3s ease;
}
 
.cert-dot.active {
  background: #22d3ee;
  transform: scale(1.3);
}
 
@media (max-width: 768px) {
  .cert-card {
    width: 240px;
  }
  .cert-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}