*{
         font-family: "Poppins", sans-serif;
     }
     



/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/


.queen-bio-container{
    display: flex;
    margin: 0px auto; /*------used to be 50px auto then I added margin-top: 50px;---------*/
    margin-top: 50px;
    justify-content: center;
    align-items: center;
    
}



.queen-bio-wrapper {
    display: flex;
    max-width: 600px;
    align-items: center;
    column-gap: 10px;
    padding: 30px 30px;
}



.queen-bio-wrapper .thumbnail{
    width: 250px;
    height: 250px;
    position: relative;  
    flex-shrink: 0;
    /* your box height */
    overflow: hidden;      /* hides the zoomed parts */
    border-radius: 100%;
    outline: 5px solid white;
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.4));
    
}




.queen-bio-wrapper .thumbnail img{
    width: 100%;           /* base size */
    height: auto;
    transform: "";
    transform-origin: center;
    object-fit: cover;     /* keeps proportions */
    pointer-events: none;  /* optional: prevents dragging */
}


.queen-bio-wrapper .aside{
    width: 300px;
    font-size: 20px;
    background-color: none;
    position: flex;
    flex-shrink: 0;
}

.queen-bio-wrapper .aside li{
    margin: 5px;
    
}



@media (max-width: 500px){
    .queen-bio-wrapper {
        flex-wrap: wrap;
        align-content: center;
        margin: auto;
        justify-content: center;
        text-align: center;
    }
    
    .queen-bio-wrapper .thumbnail{
        margin-bottom: 50px;
    }
    
    
    ul {
      list-style: none;
      padding-left: 0;   /* optional: removes the indent */
      margin-left: 0;    /* optional: aligns it flush left */
    }

    
    
}




/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/









/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
.text-box-container {
    width: 400px;
    align-content: center;
    
}

.text-box-container .color-line {
    background-color: ;/*--set it up on individual pages---*/
    width: 100%;
    height: 5px;
    margin: 0;
}

.text-box-container .text {
    text-align: center;
    color: black;
    padding: 15px;
    border-radius: 5px;
    font-size: 20px; 
   
}
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/  
     
   


























/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - START=================*/   
/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - START=================*/    
/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - START=================*/ 
.dropbtn {
  background-color: red;
  color: white;
  padding: 16px;
    width: 160px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: darkred;
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 30px;
 
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
}

.dropdown .return-button {
    background-color: black; 
    color: white;"
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    text-align: center;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}




@media (max-width: 500px){
    

/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - START=================*/
.dropbtn {
    width: 400px;
    margin-left: -10px;
}


.dropdown-content {
  width: 400px;
    margin-left: -10px;

    } 
/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - FINISH=================*/
    

    
    }


/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - FINISH=================*/  
/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - FINISH=================*/     
/*=================JUST THIS PAGE - 🔽DROPDOWN BOX - FINISH=================*/  









    
     
/*=================JUST THIS PAGE - 🔎SEARCH BOX - START=================*/  
/*=================JUST THIS PAGE - 🔎SEARCH BOX - START=================*/   
/*=================JUST THIS PAGE - 🔎SEARCH BOX - START=================*/   
.search-box-filter {
    max-width: 95%;
    margin: 0px auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    z-index:50;
    background-color: "";
    border-radius: 50px; 
}

.search-box-filter i{
    margin-right: 10px;
    font-size: 1.3rem;
}
.search-box-filter h1{
    font-size: 1.2rem;
}
.search-box-filter input{
    width: 300px;
    height: 40px;
    padding: 5px 16px;
    background: transparent;
    border: 4px solid black;
    border-radius: 20px;
    font-size: 16px
    
}




@media (max-width: 500px){
    
/*=================JUST THIS PAGE - 🔎SEARCH BOX - START===================*/ 
    .search-box-filter{
        display: ;
        margin-top: 50px;
    }
/*=================JUST THIS PAGE - 🔎SEARCH BOX - FINISH===================*/ 
   
    
    }





  
    

/*=================JUST THIS PAGE - 🔎SEARCH BOX - FINISH=================*/      
/*=================JUST THIS PAGE - 🔎SEARCH BOX - FINISH=================*/      
/*=================JUST THIS PAGE - 🔎SEARCH BOX - FINISH=================*/      
 
  
    
















/*=================JUST THIS PAGE - ⚪️ART GALLERY - START=================*/
/*=================JUST THIS PAGE - ⚪️ART GALLERY - START=================*/
/*=================JUST THIS PAGE - ⚪️ART GALLERY - START=================*/
     .section{
         margin: 30px auto;  /* matches the others. it gives space at the top and bottom of the entire section. top and bottom are 30 and sides are clear*/
     }
     
    

     .container{
         width: 100%; 
         max-width: 135rem; 
         margin-right: auto; 
         margin-left: auto;
         z-index: 1;
         
     }
     
     
     
     
     .padding-global{
         padding-right: 2.5rem;
         padding-left: 2.5rem;
     }

     
     .list {
            display: flex; 
            flex-wrap: wrap; 
            grid-auto-columns: 1fr;
            grid-template-columns: 1fr 1fr
            1fr 1fr 1fr;
            grid-template-rows: auto auto;
     }
     
     
     .item{
        position: relative; 
        max-width: 100%; /* This used to be 25% but I changed it to 100%*/
        transition: .2s;

        
     }
     
     
     
     .list .item:hover{
         transform: scale(1.1);
     }


     
     .item img{
         width: 100%; 
         height: 100%; 
         object-fit: cover;
     }
     
     
     .item h3{
         display: none;
     }
     
     
     .item p{
         
         position: absolute;
         left: auto;
         color: white;
         top: auto; /* ORIGINAL SETTING - 1rem*/
         right: 0%; 
         bottom: .50rem; /* ORIGINAL SETTING - auto*/
         z-index: 2;
         border-radius: 10px;
         padding-top: 0.25rem;
        padding-right: 0.5rem;
        padding-bottom: 0.25rem;
        padding-left: 0.5rem;
        outline: 3px solid orange;
        background-color: black; /* ORIGINAL SETTING - hsla(0, 0.00%, 95.33%, 1.00)*/
        
        font-weight: 400;
     }
     
     


    .reveal.active{
       transform: translateY(0px);
       opacity: 1;
    }
     
     





/*=================USE THIS TO DISABLE LIGHTBOX DISPLAY - START=================*/
@media (max-width: 600px) {
  a.reveal {
    pointer-events: none;
    cursor: default;
  }
}
/*=================USE THIS TO DISABLE LIGHTBOX DISPLAY - ENDING=================*/  








/*=================JUST THIS PAGE - ⚪️ART GALLERY - FINISH=================*/
/*=================JUST THIS PAGE - ⚪️ART GALLERY - FINISH=================*/
/*=================JUST THIS PAGE - ⚪️ART GALLERY - FINISH=================*/
     
   

 









/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS - TO FULL GALLERY - START========================*/ 
/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS - TO FULL GALLERY - START========================*/ 
/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS - TO FULL GALLERY - START========================*/ 


/* Center the button on the screen */
.full-gallery-button-center-wrapper {          
    display: flex;
    justify-content: center;       /* center horizontally */
    align-items: center;           /* center vertically */
} 
     
     
     
.full-gallery-button {
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
    width: 360px;
    margin: 5px;
    color: white;
    background-color: black;
    border-radius: 10px;
    transition: 0.3s ease;
}

.full-gallery-button:hover {
    transform: scale(1.1); 
    background-color: white;
    outline: 3px solid var(--carolina-hurricanes-red);
    color: black;
}


/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS - TO FULL GALLERY - ENDING========================*/ 
/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS - TO FULL GALLERY - ENDING========================*/ 
/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS - TO FULL GALLERY - ENDING========================*/ 













/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS- NEXT / PREVIOUS / FIRST COMIC 🗺️🗺️🗺️ - START========================*/     
/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS- NEXT / PREVIOUS / FIRST COMIC 🗺️🗺️🗺️ - START========================*/   
.navigation-buttons{
    display: flex;
    flex-wrap: wrap;
    margin: 0px 0 0px 0;
    background-color: ;
    justify-content: center;
     }    
   
     
.navigation-buttons a{
    text-decoration: none;
     } 
     
     
.navigation-buttons p{
    padding: 20px;
    margin: 12px;
    color: white;
    background-color: black;
    border-radius: 10px;
    transition: 0.3s; 

     }   
     
.navigation-buttons p:hover {
    transform: scale(1.2); 
    background-color: white;
    outline: 3px solid black;
    color: black;
    
    
     }  
/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS- NEXT / PREVIOUS / FIRST COMIC 🗺️🗺️🗺️ - ENDING========================*/    
/*==================🗺️🗺️🗺️ NAVIVATION BUTTONS- NEXT / PREVIOUS / FIRST COMIC 🗺️🗺️🗺️ - ENDING========================*/   
     
   


















/*========= I HAD TO BRING THE QUEENS BIO PORTION DOWN HERE TO GET IT TO WORK. DONT FORGET IT - START==========*/ 
@media (max-width: 1000px){
    .queen-bio-container {
    display: block; 
        padding: 70px 0;
    
    }
    
    .queen-bio-wrapper {
       margin: auto; 
    }
    
    
    .text-box-container {
    max-width: 600px;
    margin: auto;
    width: 80%;
    
    }
 
    
}
/*========= I HAD TO BRING THE QUEENS BIO PORTION DOWN HERE TO GET IT TO WORK. DONT FORGET IT - ENDING==========*/ 

















/*========================================================================================================================= 
/*==================================================================================================================

⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

THIS IS THE BIN WHERE I MADE THE UPDATED ADJUSTMENTS 
TO THE NEW GALLERY with ACCORDIAN
 
⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

/*================================================================================================================== 
==================================================================================================================*/ 













/*============== 📏 MARGIN DIVIDER 📏 - START=============*/
/*============== 📏 MARGIN DIVIDER 📏 - START=============*/
/*============== 📏 MARGIN DIVIDER 📏 - START=============*/
.ultimate-margin-divider {
    height: 100px;
}
/*============== 📏 MARGIN DIVIDER 📏 - ENDING=============*/
/*============== 📏 MARGIN DIVIDER 📏 - ENDING=============*/
/*============== 📏 MARGIN DIVIDER 📏 - ENDING=============*/ 
  



/*======================⚪️GALLERY FILTER-START=======================*/
/*======================⚪️GALLERY FILTER-START=======================*/
/*======================⚪️GALLERY FILTER-START=======================*/       
.gallery {
    margin: 0px auto; 
    background-color: "";
}    
     
     
/* Hide items by default */
.gallery a {
    display: none;
}

/* Load More button */
.load-more {
    display: block;
    margin: 0px auto;
    margin-top: 30px;
    padding: 12px 25px;
    background: #000;
    color: #fff;
    border: 3px solid black;
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.3s ease-out; 
    
}

.load-more:hover {
    background: #fff;
    color: #000;
    border: 3px solid black;
    transform: scale(1.1); 
}

     
     
     
     
/*======================⚪️GALLERY FILTER-ENDING=======================*/
/*======================⚪️GALLERY FILTER-ENDING=======================*/
/*======================⚪️GALLERY FILTER-ENDING=======================*/ 
       
     










   
     
     
/*====================== 📕 BIOGRAPHY/LORE SECTION - START=======================*/
/*====================== 📕 BIOGRAPHY/LORE SECTION - START=======================*/
/*====================== 📕 BIOGRAPHY/LORE SECTION - START=======================*/    
     
 
     
     
.main-bio-silo{
    width: 100%;
    background-color: white;
    padding: 50px 0;  /* centers the entire box */

}
     
     
     
.jersey-background {
    background-image:
        linear-gradient(
        to left,                           /* reversed direction */
        rgba(206, 17, 38, 0.9) 0%, 
        rgba(206, 17, 38, 0.9) 35%, 
        rgba(206, 17, 38, 1) 100%
        ),
        image-set(
        url("images/*jersey-pattern.avif") type("image/avif"),
        url("images/*jersey-pattern.webp") type("image/webp"),
        url("images/*jersey-pattern.jpg") type("image/jpeg")
        );
    background-repeat: repeat-x;
    background-size: contain; 
}
     
     
.jersey-background-2 {
    background-image:
        linear-gradient(
        to left,                           /* reversed direction */
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.9) 35%, 
        rgba(0, 0, 0, 1) 100%
        ),
        image-set(
        url("images/*jersey-pattern.avif") type("image/avif"),
        url("images/*jersey-pattern.webp") type("image/webp"),
        url("images/*jersey-pattern.jpg") type("image/jpeg")
        );
    background-repeat: repeat-x;
    background-size: contain; 
}  
     
     
     
     

.text-box-main-bio-container {
    max-width: 1500px;          /* wider, more readable */
    margin: 0px auto;            /* centers the entire box */
    padding: 0 24px;           /* left/right spacing */
    box-sizing: border-box;    /* ensures padding doesn't break layout */
}

.text-box-main-bio-container .color-line {
    background-color: black;     /* set your color here */
    width: 100%;
    height: 5px;
    margin: 0;
}

.text-box-main-bio-container .text {
    text-align: center;
    color: white;
    padding: 15px;
    border-radius: 5px;
    font-size: 20px;
    line-height: 1.5;
}

     
     
     
     
     
    /* Responsive stacking */
    @media (min-width: 2000px) {  
    .biography-wrapper {
        display: flex;
        padding: 10px 5%;
        background-color: rgba(164, 169, 173, 0.2);
        }   
        
        .main-bio-silo {
            border-radius: 8px;
        }
    }   
     
/*====================== 📕 BIOGRAPHY/LORE SECTION - FINISH=======================*/
/*====================== 📕 BIOGRAPHY/LORE SECTION - FINISH=======================*/
/*====================== 📕 BIOGRAPHY/LORE SECTION - FINISH=======================*/   










     



/*====================== 🪗 ACCORDIAN FACTS - START=======================*/
/*====================== 🪗 ACCORDIAN FACTS - START=======================*/
/*====================== 🪗 ACCORDIAN FACTS - START=======================*/     
     
     
/* Main container */
.funfacts-container {
    max-width: 1500px;
    margin: 0px auto;
    padding: 24px;
    background-color: ;
}

/* Title */
.funfacts-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    display: none;
}

/* Flex layout for two accordions */
.funfacts-flex {
    display: flex;
    gap: 30px;
}

/* Accordion base */
.accordion {
    width: 100%;
}

/* Accordion item */
.accordion-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

/* Header button */
.accordion-header {
    width: 100%;
    background-color: var(--carolina-hurricanes-red);
    color: white;
    padding: 15px 20px;
    font-size: 20px;
    font-weight: bold;
    border: none;
    display: flex;
    justify-content: space-between; /* pushes icon to the right */
    align-items: center;
    cursor: pointer;
}
     
     
.title-tab  {
    background-color: black;
    margin-bottom: 10px;
    justify-content: center;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 26px;
}
     
     
.accordion-header .icon {
    font-size: 26px;
    font-weight: bold;
    transition: transform .2s ease;
    color: white;
}


/* Content area */
/* Smooth accordion animation */
.accordion-content {
    background-color: white;
    color: black;
    padding: 0 20px; /* padding applied only when open */
    border: 2px solid var(--carolina-hurricanes-red);
    border-top: none;
    font-size: 20px;

    max-height: 0;

    transition: max-height .4s ease, padding .3s ease;
}
   
     
     
     
     

/* Responsive stacking */
@media (max-width: 900px) {
    .funfacts-flex {
        flex-direction: column;
    }
}
/*====================== 🪗 ACCORDIAN FACTS - FINISH=======================*/
/*====================== 🪗 ACCORDIAN FACTS - FINISH=======================*/
/*====================== 🪗 ACCORDIAN FACTS - FINISH=======================*/    







/*====================== 🎽 JERSEY DISPLAY - FINISH=======================*/
/*====================== 🎽 JERSEY DISPLAY - FINISH=======================*/
/*====================== 🎽 JERSEY DISPLAY - FINISH=======================*/   
     
    .jersey-silo {
        padding: 50px 0;    
        background-image:
        image-set(
        url("images/*jersey-pattern.avif") type("image/avif"),
        url("images/*jersey-pattern.webp") type("image/webp"),
        url("images/*jersey-pattern.jpg") type("image/jpeg")
        );
        background-repeat: repeat-x;
        background-size: auto 100%;

       /* Remove this: height: 100%; */
        /* Let the content define the height */
        min-height: 100%; /* optional, but safe */
        
    }  


    .jersey-gallery {
        display: flex;
        background-color: ;
        justify-content: space-between;
        gap: 10px;
        padding: 0 24px;
        margin: auto 4%;

        

    }
     
        .jersey-item {
            max-width: 400px;
            height: 100%;
            /* Modern standard (Works everywhere including Chrome, Safari, Edge, Firefox) */
            filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));

            /* Legacy Webkit fallback (Only needed for ancient Webkit browser versions) */
            -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
            overflow: hidden;
        }
     
     
        .jersey-item img{
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: cover;    /* Prevents image distortion */
            transition: transform 0.3s ease; /* Ensures a smooth zoom effect */
        }
     
        .jersey-item:hover img{
            transform: scale(1.05); /* Zooms the image in by 15% */
        }
     


    /* Responsive stacking */
    @media (max-width: 1530px) {
        .jersey-gallery{
            margin: auto;
        }
        
 
    } 
     
    /* --- Responsive: 2-column grid at 1000px --- */
    @media (max-width: 1000px) {
        .jersey-gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-items: center;
            gap: 20px;
            margin: auto;
        }

        .jersey-item {
            max-width: 100%;
        }
    }

    /* --- Responsive: 1-column at 500px --- */
    @media (max-width: 600px) {
        .jersey-gallery {
            grid-template-columns: 1fr;
        }

        .jersey-item {
            max-width: 100%;
        }
/*====================== 🎽 JERSEY DISPLAY - FINISH=======================*/
/*====================== 🎽 JERSEY DISPLAY - FINISH=======================*/
/*====================== 🎽 JERSEY DISPLAY - FINISH=======================*/ 







        
        
        

/*======================🔵FOOTER START=======================*/   
/*======================🔵FOOTER START=======================*/   
/*======================🔵FOOTER START=======================*/  
        
    @media (max-width: 500px) {  
        .footer-social-icon{
            transform: translateX(20px);
        }

        .footer-menu{
            transform: translateX(20px);
        }   
    }
/*======================🔵FOOTER START=======================*/   
/*======================🔵FOOTER START=======================*/   
/*======================🔵FOOTER START=======================*/