@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body 
{
    background-color: #f3f4f6;;
}
:root 
{
    --title-font: "Josefin Sans", sans-serif;
    --title-color: #A32626;
    --white:#fff;
    --bs-primary:#ffd700;
    --body-color:#f3f4f6;
    --black-color:#000;
    --border-radius: 10px;
}
.title-font 
{
    font-family: var(--title-font);
}
.title-color    
{
    color: var(--title-color);
}
.header 
{
    background:var(--bs-primary);
    width: 100%;
    padding: 10px;
    margin: 10px;
    border-radius: 15px;
}
.header  .project-details 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header  .project-details h1 
{
    font-family: var(--title-font);
    font-size: 22px;
    margin-left: 20px;
    margin-top: 13px;
    text-transform: capitalize;
    font-weight: 700;
}
.header  .project-details .buttons
{
    margin-top: 5px;
}
.header  .project-details .buttons a 
{
    background: linear-gradient(to right, #fff 52%, var(--bs-black) 0%);
    background-size: 200% 100%;
    background-position:right;
    color: var(--bs-primary);
    font-family: var(--title-font);
    transition: all .5s ease-in-out;
    border-radius: 30px;
    text-decoration: none;
    padding: 10px 30px 7px 30px;
}
.header  .project-details .buttons a:hover 
{
    background-position: left;
    color: var(--title-color);
} 
/* Upload file css */
.upload-file .form form label, .generate-link a 
{
    background: linear-gradient(to right, var(--bs-black) 54%, var(--bs-primary) 0%);
    background-size: 200% 100%;
    background-position:right;
    color: var(--bs-black);
    font-family: var(--title-font);
    transition: all .5s ease-in-out;
    border-radius: 30px;
    text-decoration: none;
    padding: 13px 30px 7px 30px;
    cursor: pointer;
    margin-bottom: 5px;
    font-weight: 600;
}
.upload-file .form form label:hover, .generate-link a:hover
{
    background-position: left;
    color:var(--bs-primary);
}
.upload-file .form form p, .generate-link p
{
    font-family: var(--title-font);
    color: var(--title-color);
    font-weight: 600;
    margin-top: 10px;
}
.upload-file .form .generate-link a
{
    margin-top: 20px;
    display: inline-block;
    align-items: end;
    justify-content: end;

}
/* .upload-file .form .generate-link p 
{
    padding-top: 10px;
} */
@media screen and (max-width: 500px)
{
    .header  .project-details
    {
        display: block;
    }
    .header  .project-details h1 
    {
        text-align: center;
        margin-bottom: 10px;
    }
    .header  .project-details .buttons
    {
        text-align: center;
    }
}
/* photo cards */
.photo-card .card img, .card  
{
    border-radius: 10px;
}
.photo-card .card 
{
    transition: transform .5s ease-in-out;
}
.photo-card .card:hover 
{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transform: scale(1.02);
}
.photo-card .card .card-body a 
{
    background: linear-gradient(to right, var(--bs-black) 54%, var(--bs-primary) 0%);
    background-size: 200% 100%;
    background-position:right;
    color: var(--bs-black);
    font-family: var(--title-font);
    transition: all .5s ease-in-out;
    border-radius: 30px;
    text-decoration: none;
    padding: 13px 30px 7px 30px;
    cursor: pointer;
    margin-bottom: 5px;
    font-weight: 600;
}
.photo-card .card .card-body a:hover 
{
    background-position: left;
    color: var(--bs-primary);
}
.title-font 
{
    font-family: var(--title-font);
}
/* gallery grid masonry */
.masonry-grid {
  column-count: 4;
  column-gap: 1rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.card img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 992px) {
  .masonry-grid {
    column-count: 3;
  }
}
@media (max-width: 768px) {
  .masonry-grid {
    column-count: 2;
  }
}
@media (max-width: 576px) {
  .masonry-grid {
    column-count: 1;
  }
}
/* button */
.masonry-item .card 
{
    position: relative;
}
.masonry-item .card .deleteBtn 
{
    position: absolute;
    right: 10px;
    top: 10px;
    background: var(--bs-primary);
    border-radius: 50%;
    padding:5px;
    width: 30px;
    height: 30px;
}
.masonry-item .card .deleteBtn i 
{
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    padding-top: 1px;
}
/* tootltip */
.tooltip-btn {
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
}

.tooltip-btn .custom-tooltip {
  visibility: hidden;
  background-color:var(--bs-primary);
  color: #000;
  text-align: center;
  padding: 5px 10px 3px 10px;
  border-radius: 4px;
  position: absolute;
  top: -35px; /* position above the icon */
  left: 90%;
  transform: translateX(-90%);
  white-space: nowrap;
  z-index: 100;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  font-family: var(--title-font);
}

.tooltip-btn:hover .custom-tooltip {
  visibility: visible;
  opacity: 1;
}
.photo-card h3 
{
    font-size: 22px;
}

/* Deleted all images from folder and db and our server */
.delete-all-img
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media screen and (max-width: 768px)
{
    .delete-all-img
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
}

.uploadfileBtn
{
    background: linear-gradient(to right, var(--bs-black) 53%, var(--bs-primary) 0%);
    background-position: right;
    background-size: 200% 100%;
    transition: all .5s ease-in-out;
    color: var(--black-color);
    font-family: var(--title-font);
    padding:15px 40px 10px 40px;
    cursor: pointer;
    border-radius: 30px;
    outline: none;
    font-weight: 600;
    border: none;
}
.uploadfileBtn:hover 
{
    background-position: left;
    color: var(--bs-primary);
}

/* Download btn for lightbox theme */
.lightbox-download-btn
{
    position:absolute; 
    bottom:20px; 
    right:20px; 
    background:#000; 
    color:#fff; 
    padding:8px 20px 5px 20px; 
    text-decoration:none;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: all .5s ease-in;
    font-family: var(--title-font);
}
.lightbox-download-btn:hover 
{
    color: var(--bs-black);
    background: var(--bs-primary);
}

.lightbox-counter
{
    position:absolute; 
    top:20px; 
    left:20px; 
    background:#000; 
    color:#fff; 
    padding:8px 20px 5px 20px; 
    text-decoration:none;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: all .5s ease-in;
    font-family: var(--title-font);
}
.lightbox-nav i
{
    color: var(--bs-primary);   
    transition: all .5s ease-in;
}
.lightbox-nav i:hover 
{
    color: var(--bs-white);
}


.btn-primary-album
{
    background: var(--bs-black) !important;
    color: white !important;
    border-radius: 30px !important;
    padding: 10px 37px !important;
    font-family: var(--title-font) !important;
}