/* Remove max-width and set width to 100% for the main content */
.site {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Remove padding for full-width content */
.site-content {
  padding-left: 0;
  padding-right: 0;
}

img {
  width: 100%;
  overflow: hidden;
}

iframe {
    width: 75%;
    height: 300px;
  }

.img_border { 
border-width: 3px; border-color: #535860; border-style: solid; 
}

#flex_div_kart{
  width:80%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  justify-content: center; /* Horizontal center alignment */
  grid-gap: 5px; /* Gap between items */
  /*flex-wrap: wrap;*/

}

.div_kart_item{
  /*flex: 0 0 calc(10% - 10px); /* Adjust the width as per your preference */
  margin: 10px; /* Add some margin to create spacing between items */
  /*background-color: #535860;*/
  padding: 5px;
  box-sizing: border-box;
}

#div_sponsor_logos{
  width:90%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  justify-content: center; /* Horizontal center alignment */
  grid-gap: 40px; /* Gap between items */


}



#div_gms_ckr{
width:80%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  justify-content: center; /* Horizontal center alignment */
  grid-gap: 5px; /* Gap between items */
  

}

.gms_ckr_image_item{
margin: 10px; 
padding: 5px;
box-sizing: border-box;
}

.section_text{
font-size: 18px;
/*font-weight: bold;*/
color: #00FFFF;
}

.classics_text{
font-size: 24px;
font-weight: bold;
color: #00FFFF;

}

.playlists_text{
font-size: 24px;
font-weight: bold;
color: #00FFFF;
margin-top:20px;
}

.green_span{
color: green;
}

#div_store:hover,
#div_store.active{
text-decoration: underline;
background: #fff;
color: #2279BD;
}

#div_store{
padding-top:20px;
padding-bottom:20px;
font-weight: bold;
color: #00FFFF;
border-top: 1px solid #69C;

}

#justified_gallery{
margin-top:50px;
}

.flex_mentor_container {
  /*margin-left:35px;*/
  width:80%;
  display:flex;
  /*grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));*/
  justify-content: left; /* Horizontal center alignment */
  grid-gap: 5px; /* Gap between items */
  flex-wrap: wrap;
  
}

.mentor_image_item{
flex: 0 0 calc(25% - 10px); /* Adjust the width as per your preference */
margin: 10px; /* Add some margin to create spacing between items */
/*background-color: #535860;*/
padding: 5px;
box-sizing: border-box;


}

.flex_giving_back_container {
  
  width:80%;
  display:flex;
  /*grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));*/
  justify-content: left; /* Horizontal center alignment */
  grid-gap: 5px; /* Gap between items */
  flex-wrap: wrap;
  
}

.giving_back_image_item{
flex: 0 0 calc(20% - 10px); /* Adjust the width as per your preference */
margin: 5px; /* Add some margin to create spacing between items */
/*background-color: #535860;*/
padding: 5px;
box-sizing: border-box;
width:100%;
}

.flex_social_container {
  margin-left:35px;
  width:80%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  justify-content: center; /* Horizontal center alignment */
  grid-gap: 2px; /* Gap between items */
}

.flex_youtube_gallery_container{
/*display: grid;*/
  /*grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));*/
  /*justify-content: center; /* Horizontal center alignment */
  /*grid-gap: 2px; /* Gap between items */
display: flex;
flex-wrap: wrap; /* This allows items to wrap into multiple rows */
}


.youtube_gallery_item1{
flex: 0 0 calc(25% - 10px); /* Adjust the width as per your preference */
margin: 5px; /* Add some margin to create spacing between items */
background-color: #535860;
padding: 5px;
box-sizing: border-box;
}

.youtube_gallery_item2{
flex: 0 0 calc(25% - 10px); /* Adjust the width as per your preference */
margin: 5px; /* Add some margin to create spacing between items */
background-color: #535860;
padding: 5px;
box-sizing: border-box;
}


.social_item {
  padding: 5px;
  margin-left:12px;
}
.social_item_tiktok {
  padding-top: 8px;
  padding-bottom: 5px;
  padding-left:0px;
  padding-right:0px;
}

.fa {
padding: 7px;
font-size: 30px;
width: 45px;
text-align: center;
text-decoration: none;
margin: 2px 1px;
}


.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}

.fa-instagram {
background: purple;
color: white;
}

.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/*photo gallery css*/

* { box-sizing: border-box }

h1 {
margin-bottom: 3rem;
}

.images {
width: 100%;
margin: 0 auto;
/*height: 100%;*/
display: grid;
grid-gap: 7.5px;
grid-template-columns: 50% 50%;
}

@media (min-width: 580px) {
.images {
  /*this controls number of columns in grid*/
 /*grid-template-columns: 25% 25% 25% 25%; /* 4 cols */
 grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%; /* 8 cols */
}
}

.modal-close{
font-weight: bold;
position: relative;
top: 0px;
left:480px;
cursor: pointer;
opacity: 1;
margin-bottom:1px;
}

.modal-container {
width: 500px; /* Replace with your fixed width */
height: auto; /* Allow height to adjust automatically */
position: absolute;
top: 50px;
}

.modal-container img {
width: 100%; /* Scale image to fit the container */
height: auto; /* Allow height to adjust automatically */
}

#div-modal-close{
background: #2279BD;
height:20px;
}

/* Justified gallery stuff*/
.justified-line-dec {
  max-width: 500px;
  height: 3px;
  background-color: #00FFFF;
  margin: 20px 0;
}

html { overflow-y: scroll; } /* To always show the scrollbar and avoid the flickering problem. */