/******EXPANDABLE BANDS GROUP******************************/

h2{
  color:white;  
}

h3{
    
    color:#e9004b !important;
    padding:0px !important;
}

.header{
    width:70%;
}

.expandable1,.expandable2 {
    --xy-padding: 0;
    width: 100%;
    background:#666666;
    font-size:30px;
    color:white;
    padding-left: 10%;
    padding-right: 10%;
    position:relative;
}

#expandable-2{
    background: #999;
    display:flex;
    flex-direction:column;
    
}

#verticalTimeLine {
    position: absolute;
    margin-top:1.8%;
    margin-left:9.9%;
    left: 10px; /* Adjust for alignment */
    width: 1px;
    height:90%;
    background-color: white;
    display:none;  
    transition: visibility 0.3s ease, opacity 0.3s ease;
    z-index:1;
}


.expandable--open .expandable__content-wrapper {
    max-height: 100%; /* Set a max height large enough to fit the content */
    padding: 0%; /* Add padding when open */
    transition: max-height 1.7s ease-in-out, padding 1s ease-in-out; /* Smooth opening */
    display:flex;
    flex-direction:column;
}

.expandable--open2 .expandable__content-wrapper {
    max-height: 100%; /* Set a max height large enough to fit the content */
    transition: max-height 1.7s ease-in-out, padding 1s ease-in-out; /* Smooth opening */
    display:flex;
    flex-direction:column;
}

.expandable--open .expandable__arrow{
    transform: rotate(180deg) translateY(-1px);
    transition: 1.3s ease-in-out;
    padding-right:5%;
}


.expandable__title-bar{
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    align-items: center;
    font-weight:300;
    overflow:hidden;
}


.expandable__content{
    line-height: 1.8;
    font-size: 0.80em;
    overflow: hidden; /* Prevents overflow during transition */
    padding-bottom:3%;


}



.expandable__content-wrapper {
    max-height: 0; /* Collapsed state */
    overflow: hidden; /* Prevent overflow when closed */
    padding: 0; /* No padding when collapsed */
    transition: max-height 0.9s ease, padding 1s ease-in-out; /* Transition for height and padding */
    display:flex;
    flex-direction:row;
}

.expandable__content-wrapper2 {
    max-height: 0; /* Collapsed state */
    overflow: hidden; /* Prevent overflow when closed */
    padding: 0; /* No padding when collapsed */
    transition: max-height 0.9s ease, padding 1s ease-in-out; /* Transition for height and padding */
    display:flex;
    flex-direction:column;
}



.expandable__circle{
    width: 50px;              
    height: 50px;             
    color: white;             
    font-size: 24px;          
    border-radius: 50%;      
    display: flex;           
    justify-content: center;  
    align-items: center;
    justify-content: center; 
    border: 1px solid white;
}

.expandable__title{
    padding-left: 1%;
    white-space:nowrap;
}

.expandable__arrow {
   
    display: flex;             
    flex-direction: column;     
    align-items: center;       
    margin-left: auto;
    transition: transform 1.3s ease-in-out; 
    transform: rotate(0deg) translateY(-20); 
    padding-right:5%;
    
}

.arrow-head {
    width: 0;                 
    height: 0;                 
    border-left: 10px solid transparent;  
    border-right: 10px solid transparent; 
    border-top: 20px solid white;       
}

.arrow-tail {
    width: 1px;               
    height: 30px;              
    background-color: white; 
}


.bulletItemContainers{
    display:flex;
    flex-direction:row;
    align-items: top; /* Align all items vertically */
    font-weight:200;
    background:none;
    z-index:2;
}

.bulletItemContainers2{
    flex-direction:column;
    align-items: flex-start; /* Align all items vertically */
    font-weight:200;
    z-index:2;
    height:auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.bulletPoints{
    width:18px;
    height:18px;
    
    border: 1px solid #e9004b;
        background:#e9004b;
    border-radius: 50%;
    margin-right: 2%;
    flex-shrink: 0;  
    margin-top:1%;
    z-index:2;

}



.arrow-head-hidden {
    width: 0;                  /* No width */
    height: 0;                 /* No height */
    border-left: 10px solid transparent;  /* Left border to create arrow effect */
    border-right: 10px solid transparent; /* Right border to create arrow effect */
    border-bottom: 20px solid white;     /* Bottom border for arrow color */
}

.arrow-tail-hidden {
    width: 1px;               /* Width of the tail */
    height: 30px;              /* Height of the tail */
    background-color: white; /* Color of the tail */
}


@media screen and (max-width:1300px) and (min-width:1000px){


    .bulletPoints{
    width:13px;
    height:13px;
    margin-right: 2%;
    flex-shrink: 0;  
    margin-top:2.2%;/* Prevent the bullet from shrinking */

}

.arrow-head {
    width: 0;                  
    height: 0;                
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent;
   
}

.arrow-tail {
    width: 1px;               
    height: 18px;             
   
}

#verticalTimeLine {
    margin-top:3%;
    margin-left:9.7%;
  
}
}
@media screen and (max-width:1000px) and (min-width:900px){
    #verticalTimeLine {
    position: absolute;
    margin-top:4.7%;
    margin-left:9.4%;
  
}
}

@media screen and (max-width:900px) and (min-width:600px){
    #verticalTimeLine {
    position: absolute;
    margin-top:5%;
    margin-left:4.2%;
  
}
}

@media screen and (max-width:600px) and (min-width:300px){
    #verticalTimeLine {
    position: absolute;
    margin-top:8%;
    margin-left:3.3%;
  
}

    .bulletPoints{
    width:13px;
    height:13px;
    margin-right: 2%;
    flex-shrink: 0;  
    margin-top:8%;/* Prevent the bullet from shrinking */

}

.itemListings{
    font-size:18px;
}

}




@media screen and (max-width:1000px) and (min-width:700px){


    .bulletPoints{
    width:13px;
    height:13px;
    margin-right: 2%;
    flex-shrink: 0;  
    margin-top:2.7%;/* Prevent the bullet from shrinking */

}

.arrow-head {
    width: 0;                  
    height: 0;                
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent;
   
}

.arrow-tail {
    width: 1px;               
    height: 18px;             
   
}


}

@media screen and (max-width:700px) and (min-width:500px){


    .bulletPoints{
    width:11px;
    height:11px;
    margin-right: 2%;
    flex-shrink: 0;  
    margin-top:3.7%;/* Prevent the bullet from shrinking */

}


.arrow-head {
    width: 0;                  
    height: 0;                
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent;
   
}

.arrow-tail {
    width: 1px;               
    height: 17px;             
   
}

}


@media screen and (max-width:500px) and (min-width:300px){


    .bulletPoints{
    width:9px;
    height:9px;
    margin-right: 2%;
    flex-shrink: 0;  
    margin-top:6%;/* Prevent the bullet from shrinking */

}


.arrow-head {
    width: 0;                  
    height: 0;                
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent;
   
}

.arrow-tail {
    width: 1px;               
    height: 17px;             
   
}

}