/* static/css/style.css */

body {
  padding-top: 56px; /* Height of the top navbar */
}

#wrapper {
  display: flex;
  align-items: stretch;
}


#page-content-wrapper {
  flex: 1;
  padding: 20px;
  margin-left: 250px; /* Same width as the sidebar */
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: -250px;
}

@media (max-width: 768px) {
  #sidebar-wrapper {
    margin-left: -250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
  }
  #page-content-wrapper {
    margin-left: 0;
  }
}

.navbar-brand img{
    max-width: 50px; /* Example width */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Adjust spacing */
    border: 1px solid #ddd; /* Example border */
    border-radius: 4px; /* Example border radius */
}

 .social_icon img{
        display: flex;
        align-items: center;
        justify-content: center;
    align-items: center;
    justify-content: center;
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    margin: 0 10px; /* Adjust spacing between icons */
    border-radius: 50%; /* For rounded icons */
    background-color: #007bff; /* Example background color */
    color: white;
    font-size: 20px; /* Adjust icon size */
    text-decoration: none;
    }

.social_icon a img{
    align-items: center;
    justify-content: center;
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    margin: 0 10px; /* Adjust spacing between icons */
    border-radius: 50%; /* For rounded icons */
    background-color: #007bff; /* Example background color */
    color: white;
    font-size: 20px; /* Adjust icon size */
    text-decoration: none;
}
.card {
        width: 16rem; /* Adjust the width to make the card smaller */
        margin: 10px;
    }

    .card-img-top {
        width: 100%;
        height: 120px; /* Set a fixed height for the image */
        object-fit: cover; /* Ensure the image covers the area without distortion */
    }

    .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px; /* Reduce padding for a more compact look */
    }

    .card-title {
        font-size: 1rem; /* Smaller font size for the title */
        margin-bottom: 0.5rem;
    }

    .card-text {
        font-size: 0.9rem; /* Smaller font size for the text */
        margin-bottom: 0.5rem;
    }

    .btn-primary {
        font-size: 0.8rem; /* Smaller font size for the button */
        padding: 5px 10px; /* Smaller padding for the button */
        margin-top: auto; /* Ensures button stays at the bottom */
    }

.card-custom {
    border: 2px solid red;
    border
}

/* Container settings */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Card settings */
.card-3d {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    text-align: center;
    width: 100%; /* Use full width available in column */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-3d:hover {
    transform: scale(1.05) rotateY(10deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.card-image-wrapper {
    width: 100%;
    height: 200px; /* Fixed height for image wrapper */
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the entire image is visible */
    object-position: center;
}

.card-3d .card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-3d .card-title {
    font-size: 1.2em;
    margin: 10px 0;
}

.card-3d .btn-primary {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: auto;
}

.card-3d .btn-primary:hover {
    background-color: darkblue;
}

/* Responsive settings */
@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}
/* Container settings */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Card settings */
.card-3d {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.card-3d:hover {
    transform: scale(1.05) rotateY(10deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.card-image-wrapper {
    width: 100%;
    height: 200px; /* Fixed height for image wrapper */
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the entire image is visible */
    object-position: center;
}

.card-3d .card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-3d .card-title {
    font-size: 1.2em;
    margin: 10px 0;
}

.card-3d .btn-primary {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: auto;
}

.card-3d .btn-primary:hover {
    background-color: darkblue;
}

/* Responsive settings */
@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.content-box {
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2),   /* Bottom right shadow */
                -8px -8px 15px rgba(255, 255, 255, 0.7); /* Top left highlight */
    padding: 20px; /* More space inside the box */
    background: linear-gradient(145deg, #ffffff, #e6e6e6); /* Subtle gradient background */
    border-radius: 15px; /* Rounded corners */
    margin: 20px; /* Space outside the box */
    border: 1px solid #ccc; /* Optional: subtle border */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

.content-box:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.3),
                -12px -12px 20px rgba(255, 255, 255, 0.9); /* Stronger shadow on hover */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to right, #e0e0e0, #f5f5f5); /* Smooth gradient for a clean look */
}

.container {
    width: 90%;
    max-width: 1200px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Softer shadow for a floating effect */
    border-radius: 8px; /* Rounded corners */
}

h1, h2, h3, h4, h5, h6 {
    color: #212529; /* Darker heading color */
    margin: 10px 0;
}


/* Navigation Bar */
nav {
    padding: 10px 20px;
}

nav a {
    margin: 0 15px;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s, transform 0.3s;
}

nav a:hover {
    color: #007bff;
    transform: scale(1.1); /* Slightly increase size on hover */
}

.text-black {
color:black !important;
}

.card-own {
    box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.3) !important; /* Box shadow remains */
}