/* ==========================================
   Projects Page Styles (pastprojects.html)
   ========================================== */

/* Push page content down below fixed navbar */
/* Push page content further down below fixed navbar */
.projects-section {
    padding-top: 175px !important; /* Raised from 140px to create matching vertical clearance */
    margin-top: 0 !important;
}

/* Section Title */
.projects-title {
    color: #f3c623;
    font-size: 2.2rem;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(243, 198, 35, 0.3);
}
/* 1. Prevent Safari white gaps by matching background color */
html, body {
    background-color: #0b0c10 !important; /* Replace with your dark background color hex */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* Safari mobile viewport height fix */
}

/* 2. Extend dark background into mobile Safari header & bottom notches */
:root {
    color-scheme: dark; /* Signals Safari to render native UI bars in dark mode */
}
/* Glassmorphism Cards */
.project-card {
    background: rgba(18, 18, 24, 0.75) !important;
    border: 1px solid rgba(243, 198, 35, 0.3) !important;
    border-radius: 16px !important;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.project-card:hover {
    transform: translateY(-6px);
    border-color: #f3c623 !important;
    box-shadow: 0 12px 30px rgba(243, 198, 35, 0.25);
}

.project-card .card-title {
    color: #ffffff;
    font-weight: 600;
}

.project-card .card-text {
    color: #b0b0b0;
}

/* Card Image Sizing */
.project-card .card-img-top {
    width: 100%;
    height: 400px;
    object-fit: cover;
}


/* Lock carousel image dimensions to match standard card images exactly */
.project-card .carousel-inner img,
.project-card .carousel-item {
    height: 400; /* Matches your .card-img-top height */
    object-fit: cover;
}

/* Ensure the top corners of the carousel respect the card's 16px border-radius */
.project-card .carousel {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
}

/* Card Image Sizing */
.project-card .card-img-top {
    width: 100%;
    height: 400px;
    object-fit: contain;      /* Fits full portrait image without cropping */
    background-color: #000;   /* Fills extra space on sides with black */
}

/* Lock carousel container height and set black background */
.project-card .carousel-inner {
    height: 400px;
    background-color: #000000;
}

/* Format carousel items and images */
.project-card .carousel-item {
    height: 100%;
}

.project-card .carousel-inner img {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* Retains aspect ratio, fitting the whole photo */
}

/* Ensure top corners of carousel align with card border radius */
.project-card .carousel {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
}


.Buttonss{
    background: linear-gradient(110deg ,  #0d1d85 , #4274D9,#0d1d85) !important;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #a9993f;
}

.TextAdmin{
    color: #a9993f !important;
}