*{
margin: 0;
padding: 0;
}

body{
    /* background-color: #F5F5F5; */
     background-color: rgb(243, 243, 243); 
    /* background-color: rgb(255, 255, 255); */

    font-family: 'Roboto', sans-serif;
}


.titleee{
    color: #d3d3d3; /* light gray, very subtle */
    opacity: 1; /* ensures color shows in all browsers */
}

.adminPanel{
    /* background-color: #c7c7c5; */
}
.myNavbar{
    /* background-image: url('/Applications/XAMPP/xamppfiles/htdocs/MyWebProjectToViva/trialPhotoes/pexels-karolina-grabowska-4040649.jpg');
    background-size: cover;
    background-position: center; */
    /* background-color: rgb(0, 255, 179);   #CA9C9C  #97F1D7 #724B42*/
    background-color: #DCAC36;
    /* background-color: #724B42; */
    /* background-image: url('trialPhotoes/pexels-babybluecat-6843588.jpg'); */
} 



/* //////////////////////////////////////////  */
.content-wrapper {
    
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the wrapper takes at least the full viewport height */
  }

  /* Main content area should expand as necessary */
  .content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
  }

  /* Footer styling */
  .foooter {
    width: 100%;
    background-color: #343a40; /* Dark background */
    color: white;
    text-align: center;
    padding: 1rem 0;
  }
/* //////////////////////////////////////////  */

.footter{
    margin-top: auto ;
    background-color: rgb(49, 31, 31);
     height: 12.5vh; 
}
.head{
    /* background-color: brown; */
    height: 5vh;
}

.upper-tab{
    height: 5vh;
    /* background-color: blue; */
}

.post-add{
    /* height: 12.5vh; */
    /* background-color:blueviolet; */
    background-color: #BCACA8;
    
}

.foot{
    background-color: rgb(49, 31, 31);
     height: 12.5vh; 
}

.search-index{
    /* background-color:aqua; */
    /* height: 12.5vh; */
}

/* .moving-img{
    background-color:rgb(110, 191, 56); */
    /* height: 12.5vh; 
    
}*/



.lable{
    color: #b6071f;
    font-size: large;
    font-weight: 500;
    /* font-family: 'Playfair Display', serif; */
}

.colorblue{
    color: blue;
}


.colorDarkBlue{
    color: rgb(32, 65, 167);
}

.smallFont{
    font-size: smaller;
    color: rgb(76, 100, 173);
    
}

.smallFonts{
    font-size: medium;
    color: rgb(187, 35, 60);
    
}

.sfont{
    
    font-weight: 400;
}

.hd{
font-size:large ;
}

.fontsmsgs{
    font-size:medium;
    color: #9f7919;
    font-weight: 600;
}
.Titlecolor{
    color: #ae1515;
}

.redFont{
    color: #b6071f;
    font-weight: 600;
}

.fw600{
    font-weight: 600;
}

.fw550{
    font-weight: 550;
}



.Titlecolori{
    color: #0f166e;
}

.sample-index{
    /* background-color: #F2E8E6; */
    /* height: 12.5vh;*/ 
}

.trow {
    display: flex;
  }
  
  /* .tcell {
    flex: 1; /* Each cell takes equal space */
    /* padding: 10px; Optional: for spacing */
    /* border: 1px solid #ccc; Optional: for borders */
  /* } */ 

  .tcell.col1 {
    flex: 4; /* wider */
  }
  
  .tcell.col2 {
    flex: 0.5; /* medium */
  }
  
  .tcell.col3 {
    flex: 1; /* narrower */
  }
  

.m-img{
    height: 300px;
}

/* .buttonn{
    background-color: black;
} */

.logo-in-tab{
    height: 10vh;
    background-color: black;
}

.admin-panel{
 border: none;
}

.container-update-lIst{
    display: flex;
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    
}
.container-categary-specific-update-lIst{
    display: flex;
    flex-direction: column;
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    
}

input[type="number"] {
    width: 5ch; /* fits 2 characters */
    padding: 1px;
    font-size: 16px;
    text-align: center;
    border: 2px solid #f3eeee;
    border-radius: 1px;
    background-color: #f9f9f9;
    color: #333;
  }
  

.buttondistrict{
    display: flex;
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    justify-content:end;
    align-items: center;
    
}

.update-list-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,35ch);
    /* justify-content: space-between; */
     justify-content:space-between; 
     justify-content: center;
     
}

.update-list-grid2{
    display: grid;
    grid-template-columns: repeat(auto-fill,34ch);
    /* justify-content: space-between; */
     justify-content:space-between; 
     justify-content: center;
     /* font-size: smaller; */
     
}

.heading-update-list{
    display: flex;
    justify-content:flex-end;
}

.update-list-h5{
    margin-right: auto;
}

.list-group-item{
    display: flex;
    justify-content: flex-end;
}

.list-table-name{
    margin-right: auto;
}

.add-button{
    display: flex;
    align-items: center;
    justify-content: center;
}

.align-bottom{
    /* display: flex; */
    /* align-items: end; */
    /* justify-content: end; */
}

.overlay{
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    display: block;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main-d-img{
    height: 500px;
    overflow: hidden;
}


.cover-img-d{

    width: 100%;
    height: 100%;
    object-fit: contain;
     /* Ensures the image fills the container's width */  
      
       /* Ensures it fills the container's height */   
        /*Scales the image to cover the entire container */
       object-position: center;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
}





.carousel-item:hover .cover-img-d {
    transform: scale(1.1) translateY(-10px);  /* Zooms in slightly */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Adds shadow */
}

.other-d-img{
    height: 75px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.other-img-d{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.share-img{
    height: 35vh;
    overflow: hidden;
}


.other-d-img:hover .other-img-d {
    transform: scale(1.1) translateY(-11px);  /* Zooms in slightly */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Adds shadow */
}

.card-img{
    height: 30vh;
    overflow: hidden;
}

.card-img-top{
    max-height: 250px;
    object-fit: cover; /* Ensures the image fills the space while maintaining aspect ratio */
    width: 100%; /* Ensures the image spans the full width of the card */
    overflow: hidden;
}

.inline{
    display: inline;
}

.xend{
    display: flex;
    justify-content: end;
    
}

.xstart{
    display: flex;
    justify-content: start;
    
}

.margin-top-auto{
    margin-top: auto;
}

.advaced-search{
    /* background-color: #cca43e; */
    /* background-color: #d4b770; */
    /* background-color: #DCAC36; */
    background: linear-gradient(to right, #d4ac46, #d0b87c, #d4ac46);
    /* background: radial-gradient(circle, #DCAC36, #f6e2b0); */
    box-shadow: 2px 7px 10px #343030;
    /* color: #624a1c; */
    color: #3f2f12;

}

.advaced-searchs{
  /* background-color: #cca43e; */
  /* background-color: #d4b770; */
  background-color: #ebc973;
  /* background: linear-gradient(to right, #d4ac46, #d0b87c, #d4ac46); */
  /* background: radial-gradient(circle, #DCAC36, #f6e2b0); */
  box-shadow: 0 4px 8px #343030;

  /* color: #624a1c; */
  color: #3f2f12;

}

.advanced-search-dropdownd{
    /* background-color: #881e1e; */
    background-color: #b74242;

    color: #e4e4e4;
    /* background-color: #b09761; */
    /* color: #564535; */
}

.advanced-search-dropdownds{
  /* background-color: #881e1e; */
  background-color: #fffef5;
  border: none;
  color: #130505;
  /* background-color: #b09761; */
  /* color: #564535; */
}

.advanced-search-dropdowni{
    background-color: #bc6d6d;
    color: #d1cfcb;
    
    /* background-color: #b09761; */
    /* color: #564535; */
}

.advanced-search-dropdownis{
  background-color: #fdfbf5;
  color: #312b1f;
  border: none;
  /* background-color: #b09761; */
  /* color: #564535; */
}

.advanced-search-dropdown{
    background-color: #ffffff;
    color: #d1cfcb;
    /* background-color: #b09761; */
    /* color: #564535; */
}

.advance-search-btn{
   background-color: rgb(148, 16, 16);
   border-color:rgb(148, 16, 16) ;
   color: #f3ebe9;
   font-weight: 500;
   font-size: larger;
   
   
}

.btnnn{
  background-color: rgb(175, 25, 25);
   color: #f3ebe9;
   font-weight: 500;
}

.advanced-search-dropdowni::placeholder {
    color: rgb(246, 221, 221);
  }


.colrSearchHeading{
    color: rgb(39, 50, 147);
    /* color: rgb(123, 26, 26); */

    font-weight: 600;
    font-size: medium;

}

/* CSS */
/* .spinner-container {
    display: flex;
    justify-content: center; /* Center items horizontally */
    /* align-items: center; Center items vertically */
    /* height: 100vh; Full viewport height to center vertically */
    /* gap: 1rem; Space between each spinner */
    /* background: linear-gradient(to right, #ff7e5f, #feb47b); Gradient background */
    /* background-color:transparent; Transparent background */
  /* } */
   


   .spinner-container {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    gap: 1rem; /* Space between each spinner */
    position: absolute; /* Overlay on top of other content */
    top: 35%; /* Center vertically within the viewport */
    left: 50%; /* Center horizontally within the viewport */
    transform: translate(-50%, -50%); /* Adjust positioning to perfectly center */
    z-index: 9999; /* Ensure it’s above other content */
    background-color: transparent; /* Transparent background */
  }

  .containe{
       height: 100%;
  }

  .adminOpDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #cca43e;
    background: radial-gradient(circle , #DCAC36, #957523);
    /* background: linear-gradient(45deg, #f5eacf, #DCAC36); */

    /* height: 50px; */
    height: 8ch;
    border-radius: 10px;
    
  }

  .buttn-normal{
    background-color: #DCAC36;
  }

  /* Blend button style for table cells */
.btnChange {
    border: none;            /* Removes button border */
    background: none;         /* Makes background transparent */
    padding: 0;               /* Removes extra padding */
    color: inherit;           /* Inherits text color of the cell */
    font: inherit;            /* Inherits font style of the cell */
    cursor: pointer;          /* Shows pointer cursor on hover */
    outline: none;            /* Removes focus outline */
}

/* Optional hover effect for better UX */
.btnChange:hover {
    color: blue;              /* Change color on hover */
    text-decoration: underline; /* Adds underline on hover */
}
  

/* Style for clickable table cell */
.clickable {
    cursor: pointer;                /* Shows pointer cursor */
    background-color: rgb(167, 10, 10);  
    color: inherit;                
     /* Inherit text color */
    text-align: center;             /* Center align, optional */
    padding: 10px;                  /* Adjust padding as needed */
    user-select: none;   
            /* Prevent text selection on click */
}



/* Optional hover effect */
.clickable:hover {
    background-color: #d73a3a;      /* Adds a subtle background on hover */
    color: rgb(218, 229, 238);
}
.add:hover{
    background-color: #22b03c;      /* Adds a subtle background on hover */
    color: rgb(218, 229, 238);
}

/* Container for the group of radio divs */
.radio-group {
    display: flex;                  /* Use flexbox for layout */
    gap: 15px;                      /* Space between each div */
    justify-content: center;        /* Align divs horizontally in the center */
    align-items: center;            /* Align divs vertically in the center */
    margin: 20px 0;                 /* Vertical spacing from other elements */
  }
  
  /* Styling for each individual radio div */
  .radio-div {
    /* position: relative;              Relative positioning for label and background */
    /* display: flex;                   /* Flexbox to center label text */
    /* align-items: center;             Vertically center label */
    /* justify-content: center;         Horizontally center label */ 
    /* width: 200px;                   */
      /* Set the width of each div */
    /* height: 60px;                    */
     /* Set the height of each div */
    border-radius: 12px;             /* Rounded corners for the div */
    background: radial-gradient(circle, white 10%, #DCAC36 90%); /* Default gradient (white to yellow) */
    border: 1px solid #b8860b;       /* Golden brown border */
    cursor: pointer;                /* Make the div clickable */
    transition: all 0.3s ease;       /* Smooth transition for background and border changes */
    box-shadow: 0 6px 12px rgba(52, 58, 64, 0.5); /* Light 3D effect with dark shadow */
  }
  
  /* Hover effect to add shadow when user hovers over a div */
  .radio-div:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a soft shadow on hover */
  }
  
  /* Hide the default radio button input (we are using the label for the UI) */
  .radio-div input[type="radio"] {
    display: none; /* Radio button is hidden */
  }
  
  /* Styling for the label text inside each div */
  .radio-div label {
    font-size: 16px;                  /* Set font size */
    color: #8b4513;                   /* Dark golden text color */
    cursor: pointer;                 /* Make the label clickable */
  }
  
  /* Change the font color when the radio button is selected */
  .radio-div input[type="radio"]:checked + label {
    color: #d10f19;                   /* Dark brown text color when selected */
    font-weight: bold;                /* Make the text bold when selected */
  }
  
  /* Change the background of the div when the radio button is selected */
  .radio-div input[type="radio"]:checked + label::before {
    content: ''; /* Required to create a pseudo-element that will act as the background */
    position: absolute; /* Position the pseudo-element relative to the parent div */
    top: -3px;  /* Move the background slightly outside to create a border effect */
    left: -3px;
    right: -3px;
    bottom: -3px;
    /* border: 3px solid #5A3A1A; */
     /* Dark brown border when selected */
    border-radius: 15px; /* Rounded corners for the background */
    background: radial-gradient(circle, white 20%, #dd0000 90%, #e60407 100%); /* Yellow-to-reddish gradient on selection */
    /* background-color: #d73a3a; */
    z-index: -1; /* Place the background behind the label text */
    transition: all 0.3s ease; /* Smooth transition for the background gradient */
  }

  .font-header {
    color: #DCAC36;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.2), /* Shadow for bottom-right depth */
        -2px -2px 4px rgba(255, 255, 255, 0.3); /* Lighter shadow for top-left light effect */
}

.red-heart {
    color: red;
  }

  .statusBtnActive{
    background-color: #f4c03f;
  }

  .statusBtnDeactive{
    background-color: #bb2828;
  }

  .profImgAdminManage{
    height: 50px;
    object-fit: cover; /* Ensures the image fills the space while maintaining aspect ratio */
    width: 100%; /* Ensures the image spans the full width of the card */
    overflow: hidden;
  }
  .profImgDiv {
    background-color: #8b4513;
    border-radius: 50%;
    overflow: hidden;
    height: 100px;
    width: 100px;
    
    border: 3px solid #fff;
    transition: 0.3s ease-in-out;
  }
  
  .profImgDiv:hover {
    background-color: #a0522d;
    transform: scale(1.1);
  }
  
  .profileImage {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  .login-img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .fs-small{
    font-size:x-small;
    color: #a6b1bd;
  }

  .nvf{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgb(14, 12, 12);
    font-weight: 600;
}

.round {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounds{
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  font-size: larger;
  background-color: #b98d20;
  border: #b98d20;

}

.roundss{
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  font-size: larger;
  background-color: #b42626;
  border: #b42626;

}

.redFontt{
  color: #b6071f;
  /*font-weight: 1000;*/
  
}


.boxnotes{
  margin-left: 5px;
  margin-right: 5px;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  /*font-size: larger;*/
  background-color: #abc7d5;
  border: #abc7d5;
  box-shadow:  0 4px 15px rgba(0, 0, 0, 2);
}

  .policy{
font-family: 'Courier New', Courier, monospace;
  }

  .no-link-effect {
    text-decoration: none; /* removes underline */
    color: inherit; /* makes the link color same as normal text */
  }

 .mobileonly {
    display: none;
  }

  @media (max-width: 575px) { /* Bootstrap mobile breakpoint */
    .mobileonly {
      display: inline-block;
    }
  }




@media screen and (max-width:480px){
    .m-img{
         
        height: 250px;
        
    }

    .main-d-img{
        height: 200px;
    }
}


@media (max-width: 991px) {

  .navnot{
    display: none;
  }
  
  
  /* Move items to the right */
  /* .navbar-collapse .loinlogout {
    justify-self: end;
    text-align: right;
    margin-bottom: 5px;
  } */

  /* Make anchor content align right */
  /* .navbar-collapse .loinlogout .nav-link {
    /* justify-content: flex-end; */
    /* justify-content: flex-end;
    text-align: center; */
    /* text-align: right; */
    /* width: 100%; */
    /* background-color: #f8f9fa;
    padding: 5px;
    border-radius: 8px; */
  /* }  */

  /* Optional: dropdown menu also align right */
  /* .navbar-collapse .dropdown-menu {
    right: 0;
    left: auto;
  } */
}


/* Center login / logout items on mobile */
@media (min-width: 991px) {

.navbelow{
  display: none;
}

  /* .mobileonly{
    display:block;
  } */
  /* .navbar-collapse .loinlogout {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .navbar-collapse .loinlogout .nav-link {
    justify-content: center;
    text-align: center;
  }

  /* Center dropdown menu as well */
  /* .navbar-collapse .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }  */
}