/* In your CSS file (e.g., static/css/style.css) */

html, body, #wrapper {
    height: 100%;
    margin: 0;
}


:root {
    --primary-purple: #6800A5 ; /* Darker purple color */
    --light-purple: #f3e5f5;
    --dark-text: #212529;
    --light-text: #6a6b6cab;
    --grey-text: #1e1f20ab;
    --bg-color: #FEFDFF ;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e9ecef;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    
}



html, body, #wrapper {
    height: 100%;
    margin: 0;
}


#wrapper {
    display: flex;
}

.home #wrapper{
    height: 100%;
    margin: 0;
    background-color: #fdaaf5;

}

/* Tailwind-like custom scrollbar style for modern browsers */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.4); /* light gray */
  border-radius: 4px;
}

.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}
.team-title{
    text-align: center;

}


/* This is the new container that will have the background and padding */
.logo-background-frame {
  width: 100%;
  height: 100%;
  padding: 3rem; /* Adjust padding to control the logo size */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.4); /* Glassmorphism background */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* This ensures the image fits neatly inside the new container */
.logo-background-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}