@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


body {
    font-family: "Playfair Display", serif;
}

#home {
width: 100%;
   min-height: 100vh; /* Full viewport height */
}

.su {
    font-size: 38px;
    color: #ffffff;
    transition: color 0.3s ease;
}
.su:hover {
    color: #0dfc00;  /* change this to any color you want */
}

.nav-link {
     font-size: 1.2rem;
        color: #ffffff;
        transition: color 0.3s ease;       
}
.nav-link:hover {
    color: #40ff00;  /* pick any hover color */
}

/* .container-fluid{
    position: absolute;
    top: 0px;
     height: 85px;
    background-color: #d2cece;

} */
 .container-fluid {
    position: fixed;   /* instead of absolute */
    top: 0;
    left: 0;
    width: 100%;       /* make it span across */
    height: 85px;
    background-color: #000000;
    z-index: 1000;     /* keep it above other elements */
}


 .navbar {
    /* ensures navbar is above other content */
    z-index: 1000;
}   


.floating-photo {
    position: absolute;
    top: 85px;  /* space for header */
    left: 0;
    width: 100%;
    height: 91.5%; /* covers the content area, not full screen */
    object-fit: cover;
    z-index: 0;
    pointer-events: none;

    /* Subtle visibility so content stands out */
    opacity: 0.28;  /* faint but visible */
    filter: blur(0.5px) brightness(0.9);

    /* Bottom fade to make text overlay safe */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    mask-repeat: no-repeat;
    mask-size: cover;

    /* Subtle floating animation */
    
}




.container{
     text-align: center;
    position: relative;
    z-index: 1; /* Ensure content is above background */
    padding: 1rem;
    margin-top: 1rem;

}
#quote {
    margin-top: 2.6rem;
    font-size: 2rem;
    font-weight: bold;
    color: #178311;
    z-index: 1; /* Ensure text is above background */
}
#name {
    margin-top: 6rem;
    font-size: 3.5rem;
    font-weight: bold;
    color: #030303;
    z-index: 1; /* Ensure text is above background */
}
#tagline {
    font-size: 1.5rem;
    margin-top: -1rem;
    color: #000000;
    z-index: 1; /* Ensure text is above background */
}
#learnmore {
    padding: .4rem 1rem;
max-width: 10rem;
 color: #000000;
 margin: 0 auto;
display: block;
    border: 2px solid #787474;
    border-radius: 1rem;
    text-decoration: none;
    text-align: center;
    z-index: 1; /* Ensure button is above background */
}
#learnmore:hover {
    text-decoration: none;
}



/* resume ko matra */
#resume {
    width: 100%;
    height: auto;
    padding: 4rem 0;
}
#resume .card{
margin-left: auto;
margin-right: auto;
}
#resume .card img{
height: 20rem;
}

/* portfolio */
#portfolio {
    width: 100%;
    height: auto;
    padding: 4rem 0;

}
#portfolio img{
    margin-top: 30px;
    width: 100%;
    
}
#portfolio .grid{
   position: relative;
   width: 100%;
   
}


 .text {
    color: white;
    font-size: 1.7rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
} 
.hari {
    width : 100%;
    margin-right: 300px;
}

.terobau{
    color: rgb(255, 255, 255);
    text-decoration: none;
}


/* yabata tala farak farak background color rakhna ho photo ma  */
#portfolio .grid .overlay {
    position: absolute;
    margin-top: 30px;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #534c96;

}
#portfolio .grid:hover .overlay {
    opacity: 1;
}


/* feri repeat garera arko photo ko lagi */
#portfolio .grid .overlay1 {
    position: absolute;
    margin-top: 30px;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #a1d9df;

}

#portfolio .grid:hover .overlay1 {
    opacity: 1;
}
/* feri arko photo ko lagi */
#portfolio .grid .overlay2 {
    position: absolute;
    margin-top: 30px;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #dd8383;

}

#portfolio .grid:hover .overlay2 {
    opacity: 1;
}
/* feri arko photo ko lagi */
#portfolio .grid .overlay3 {
    position: absolute;
    margin-top: 30px;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #7cdda6;

}

#portfolio .grid:hover .overlay3 {
    opacity: 1;
}
#portfolio .grid .overlay4 {
    position: absolute;
    margin-top: 30px;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #8d84de;

}

#portfolio .grid:hover .overlay4 {
    opacity: 1;
}
#portfolio .grid .overlay5 {
    position: absolute;
    margin-top: 30px;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #8c7663;

}

#portfolio .grid:hover .overlay5 {
    opacity: 1;
}
#portfolio .grid .overlay {
    position: absolute;
    margin-top: 30px;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #9e9ea4;

}

#portfolio .grid:hover .overlay5 {
    opacity: 1;
}


/* footer */
.push{
    font-size: 1.4rem;
    color: #ff0000;
    text-align: right;
    margin-right: 2rem;
    margin-bottom: -1rem;
}
.pus{
    font-size: 1.4rem;
    color: #000000;
    text-align: left;
    margin-right: 2rem;
    margin-bottom: -0.5rem;
}
footer {
    background-color: #ebebe9;
    width: 100%;
    height: auto;
    padding: 2rem 0 4rem;  
    
}
footer ul{
    list-style: none;
  text-align: left;
    padding-left: 0;
}

 footer .back-to-top {
    display: block ;
    width: 100%;
    margin-top: 0rem;
    text-align: center;
    text-decoration: none;
    color: #000000;
 }
 footer .back-to-top:hover {
    text-decoration: none;
    color: #ff0000;

 }
 footer ul#social{
    list-style: none;
  padding-left: 0;
    text-align: right;
}
    footer ul#social li{
        display: inline-block;
        margin: 1rem;
    }
footer ul#social a{
   text-decoration: none;
   color: #2c40d7;
   font-size: 2rem;
}
footer ul#social a:hover {
    text-decoration: none;
    color: #f22c2c;

 }





 /* gg */
 /* yo android response ko lagi caht gpt bata lyako */
 /* ===================== */
/* MOBILE RESPONSIVE FIX */
/* ===================== */
/* =============================== */
/* PROFESSIONAL MOBILE RESPONSIVE  */
/* Same design, better scaling     */
/* =============================== */
@media (max-width: 768px) {

  /* FORCE override inline styles */
  img[style],
  span[style],
  form[style],
  div[style] {
    max-width: 100% !important;
  }

  /* Logo image */
  .navbar-brand img {
    width: 90px !important;
    height: 90px !important;
    margin-top: 20px !important;
  }

  .su {
    left: 120% !important;
    font-size: 22px !important;
  }

  /* Search bar */
  form.d-flex {
    position: static !important;
    width: 100% !important;
  }

  /* Remove fixed margins */
  .hari {
    margin-right: 0 !important;
  }

  /* Floating background */
  .floating-photo {
    height: 100% !important;
    top: 70px !important;
  }

  /* iframe fix */
  iframe {
    width: 100% !important;
    height: 220px !important;
  }

  /* flex row fix */
  div[style*="display: flex"] {
    flex-direction: column !important;
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
}